如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用,本文將會提供一些幫助。
輔助信息傳遞
文字是信息內容的載體,是記錄思想、交流思想、承載語言的圖像或符號,而字體則是文字的外在形式特征,是文字的視覺風格表現。合適的字體可以輔助文字,將信息清晰、準確地傳遞給用戶。
表達情感體驗
字體的藝術性體現在其完美的外在形式與豐富的內涵之中。在文字信息傳遞給用戶之前,人們首先感受到的是字體帶來的視覺魅力以及情感表達。
塑造品牌形象
不同字體有著不同的風格特征: 有的字體優美清新、線條流暢;有的字體造型規整、充滿張力;還有的字體生動活潑、色彩明快……根據產品的屬性選擇正確的字體,便能有效地塑造品牌形象。
字體的選擇是由產品屬性或品牌特性的關鍵詞而決定。一般中文字體種類分為:黑體、宋體、仿宋、楷體等;英文字體種類分為:無襯線體、襯線體、意大利斜體、手寫體、黑字體等。
中文字體推薦
線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡、方正蘭亭黑。其中 iOS 系統默認中文字體是「蘋方PingFang」,Android 系統中文字體使用「思源黑體Noto Sans CJK」。
介紹下「思源黑體」這款字體,它是由 Google 和 Adobe 合作開發出來的,風格介于現代和傳統之間,可以廣泛用于多種途徑,比如手機、平板、桌面的用戶界面、網頁瀏覽或者電子書閱讀等。它為人們帶來了愉悅和的信息閱讀體驗,并且是免費的。
英文字體推薦
線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統默認英文字體為「San Francisco」,Android 系統默認英文字體為「Roboto」。
Helvetica 是一種被廣泛使用的西文字體,1957年由瑞士字體設計師設計,微軟常用的 Arial 字體也來自于它。
作為一款經典的無襯線字體,Helvetica 在平面設計和商業上非常普及和成功,被認為是現代主義設計理念的典范,其簡潔樸素的線條風格非常受追捧。
數字字體推薦
線上數字字體推薦使用 DIN、Core Sans D、Helvetica Neue。
DIN 起源于1995年的德國,無襯線字體,易用耐看、字形開放,是設計師最愛的幾類字體之一,適合顯示比較長的大號數字,但是小字號的情況下識別度較低。
Core Sans D 是由韓國設計師設計的一款無襯線字體,支持 Thin、Light、Regular、Medium、Bold 等類型字重,對大號數字的顯示效果不錯,不過它是收費字體。
Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴謹、沒有多余的修飾外,還是 Helvetica 的升級版,擁有了更多的字重,可以作為 iOS 和 Android 跨平臺數字字體使用。
字號是界面設計中另一個重要的元素,字號大小決定了信息的層級和主次關系,合理有序的字號設置能讓界面信息清晰易讀、層次分明;相反,糟糕無序的字號使用會讓界面混亂不堪,影響閱讀體驗。
字號的選擇,可以遵循 iOS 、Material Design、Ant Design 等國內外權威設計體系中的字號規則,也可以根據產品的特點自行定義。
iOS 字號規則
在 iOS11 系統中,使用 San Francisco 作為系統英文字體,包含了以下幾種字號的文本樣式:
需要注意的是,San Francisco 字體有兩種模式:文本模式 SF Pro Text 和展示模式 SF Pro Display,文本模式適用于字號小于 20pt 的文字,展示模式適用于字號大于等于 20pt 的文字。
Material Design 字號規則
在 Material Design 設計體系中,使用 Roboto 作為英文字體,規定了以下文字排版的常用字號:
長篇幅正文,每行建議 60 字符左右,短文本建議每行 30 字符左右。
Ant Design 字號規則
Ant Design 受到5音階以及自然律的啟發定義了10種不同的字號,從小到大依次為: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。
建議主要字號為 14px,其余字號的選擇可根據具體情況進行自由的定義,盡量控制在3-5種之間,保持克制的原則。
Kiwi 字號規則
Kiwi 是餓了么的中后臺設計語言,致力于打造出能夠「了解、洞察、溫暖、激勵用戶」的產品。
在 Kiwi Web 中,規定最小字號為 12px,主要文本字號為 14px,最大字號為 46px。
行高可以理解為一個包裹在字體外面的無形的框,字體距框的上下空隙為半行距。
參考 W3C 原理,眼睛到屏幕的距離 25cm 為最佳閱讀距離。
西文的基本行高通常是字號的 1.2 倍左右。而中文因為字符密實且高度一致,沒有西文的上伸部和下延部來創造行間空隙,所以一般行高需要更大,根據不同人群的特點(兒童、年輕人、老年人)以及使用環境,可達到1.5至2倍甚至更大。
iOS 行高設置
Apple 官方的 iOS 字號與行高對應關系如下(@1x倍率):
Fluent Design 行高設置
Microsoft 官方的 Fluent Design 字號與行高對應關系如下(使用字體 Segoe UI):
Ant Design 行高設置
螞蟻金服的 Ant Design 字號與行高對應關系如下(優先使用系統默認字體):
行高計算公式:L = F + 8。其中 L 是行高(Line Height),F 是字號(Font Size),F ≥ 12。
字重是指字體的粗細,一般在字體家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名稱。越來越多的產品界面需要通過字重來拉開信息層次,當下主流趨勢 iOS11 大標題風格就是通過字重來拉開信息層級的。
不同的字重體現不同的層級關系和情緒感受,細的字體給人以細膩、輕盈的感覺,而粗體則給人莊重和嚴肅的感受,所以在定義字體規范時候需要考慮什么場景用什么字重,從而保持良好閱讀體驗。
字重的設置同樣基于秩序、穩定、克制的原則。為了統一整體效果,一般情況下使用兩種字重為佳,例如只出現 Regular 以及 Medium 這兩種字體粗細,特殊情況下可以使用更粗或更細的字重進一步拉開信息層級。
當字號大小為 12-18pt 時,使用 Regular;20-26pt 時,使用 Light;28-34pt 時,使用 Thin;當字號大小超過 34pt 時,建議使用 Ultralight。
以上是按字號與字重反比的規則設置,即字號越大,字重越輕。當然也可以按正比的規則或者自定義規則,具體還是要根據產品的定位和用戶的特點來設置,以保證信息層級清晰明了為準。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
一個產品最后出來的樣子,是各種妥協的結果。
互聯網產品和平面類型的設計工作最大的區別,可能是在于工種的細分上。之前做平面相關的工作(品牌,視覺,電商),自己一個人可能就充當了基本上除了印刷以外的所有主要工作,既要和客戶溝通,了解用戶需求和想法以及存在的問題,又要思考和制定設計方案,向客戶展示設計提案,又要執行獲得認可的設計提案,保證設計成果符合客戶預期并落地,如果是最后要交付印刷品,可能還要跟進印刷的過程,保證印刷物料的質量。好像一個人把所有的活都要干了。
但是互聯網產品不太一樣,首先最大的問題是如何讓方案落地的過程,這個工作一般來說沒有辦法一個人干(除非是牛到精通前端后端和客戶端的各種開發語言的全棧設計師),因為會涉及到程序開發,有一些設計師,就算你厲害了,你能把產品交互和 UI 都搞定,然后你還會(web端)前端開發語言或者客戶端開發語言,但是你還是需要一個能寫后臺的工程師,所以,正常情況下,互聯網產品的開發,是環環相扣的,至少都需要兩到三個人來配合工作。這還是比較小型的產品,如果是復雜的產品,那每個環節都必須細分出來,而且可能每個環節都不止一個人,產品,交互,UI,前端,客戶端,后臺,因為每個環節的工作量都太大了!
△ 圖源:Nick Taylor
既然有這么多的分工,那必然會導致不同的工作崗位看問題的點都是不一樣的。舉個例子:經常會聽到開發說,明明用 A 就可以,為什么非要用 B?一開始的時候,其實我真的不太理解,但是后來慢慢熟悉了開發的工作之后(尤其是自己開始學習一些代碼知識之后)慢慢理解了,其實開發在實現我們的設計的時候,最關注的是功能的實現,而功能就是各種交互的集合,一個頁面上,如果交互不變,功能不變,只是改一些視覺上的樣式,這是相對來說簡單的,如果牽扯到交互的調整和修改,那個工作量可能就成倍增加,所謂牽一發而動全身。所以我們在設計的時候,更要注意模塊和組件的一致性和可復用性,這樣不僅可以提高我們的設計質量,也可以有效的減少開發的工作量,提高開發的效率。
同時,開發在實現的第一個版本的產品中一般很多時候視覺上會有各種各樣的問題,開發人員在開發過程中,為了提率,不太在意還原 UI 的細節,比如這個間距是多少,那個間隔是幾個像素,所以最后產品上線前都會有 UI走查的環節,在這個過程中就是要一點一點地改進產品UI 實現中不符合設計稿的地方,這個時候才是我們設計師關注所謂的每一個像素的時候,在那之前,還是先關注功能和流程的實現吧。
其實不僅僅是因為每個崗位的職能不同會導致很多不同的意見,有時候也可能是因為每個人的審美或者是性格的問題,也會產生不少的摩擦,所以,學會妥協,在妥協中堅持是團隊合作中的一門大學問。
以攻為守,讓自己從更全面的視角去思考 UI 的工作。
△ 圖源:Nick Taylor
一個 UI設計師的未來在哪里?有時候我會思考這樣的問題,有可能是因為我已經30了。這一兩年,危機感很重,每次看到非科班群里各種90后、95后的年輕設計師,心生羨慕的同時也充滿了莫名的壓力。
這半年多因為自己團隊中沒有專門的交互設計師,所以我就同時肩負了大部分交互設計的工作。一開始做交互設計的東西,其實自己的認識還是很淺薄的,雖然平時自己也看很多用戶體驗,設計心理學、交互設計等等的書籍,但是真的上手干活,還是會經常一頭霧水,因為交互設計太需要縝密的邏輯思維了。市場上常見的 app 的標準化的交互設計因為都有競品參考,還是相對來說簡單的,在我看來比較難的是工具型的產品和 CMS(內容管理系統后臺),尤其是 CMS 的交互設計,如果設計不好,分分鐘讓用的人感覺要崩潰。交互設計是一門很深的學問,也是 UI設計師必須去了解和熟知的,它絕不是簡單的頁面之間的跳轉,也不僅是酷炫的動效,它是能讓產品的使用體驗得到質的飛躍的關鍵。
如果把一個產品比作一個人,那產品本身的方向是這個人的靈魂和思想,交互是這個人的舉止和修養,而 UI 是一個人外形和穿衣品味以及整體氣質,優秀的人,三者缺一不可,三者是共生的關系。
在我看來。成為一個產品設計師,了解產品思維,熟悉交互設計,精通視覺設計,這樣的設計師覺得才是以后互聯網設計師的標配。高配是什么?我覺得至少是全棧設計師吧。這就像平面設計領域,不懂印刷各種工藝和材質的,都稱不上好的平面設計師。好的建筑設計師,也得懂很多建筑學和建筑材料的知識。
我在這半年的實際工作中,雖然第一個產品的概念定義和原型我沒有參加討論(我去的時候已經定下來了),但是我還是嘗試去思考這個產品到底意義在哪里,目標用戶是哪些人,解決了目標用戶的什么需求,他們的使用場景有哪些。我一直都認為互聯網產品的設計工作始終更是貫穿著設計思維,只是每個具體的分工的側重點不同,你可以不精于產品需求的整理和篩選,但你是得明白你你所設計的是為了滿足什么需求,有目標和方向才能做出更好的設計,你連問題都不知道,怎么去解決問題。設計的工作,終究都是為了解決問題,不了解問題的來龍去脈,便不能梳理出問題的本質,更無法做出好的設計去解決問題。
把自己定位為產品設計師,稍微多花點心思去思考產品,去學習交互,別讓自己的眼界停留在只畫幾個好看界面,畫幾套特別的圖標,不然你早晚要被這個行業淘汰,不對,是被其他更優秀的設計師淘汰。
很多公司并不真的在意所謂的 UCD。
△ 圖源:Nick Taylor
我相信大部分的設計師還是在中小型的企業里工作,這樣的企業的設計工作有一個很明顯的特征,就是以主管或者老板的喜好為第一滿足目標,所有的設計方案都會以老板的喜好為基準參考,只有老板說 ok 才算是 ok。當然,我們公司也是,畢竟我們也是一個小型公司,而且老板的個人風格特別強烈。所以在做第一款 app 時,僅僅是首屏的視覺方案,都出了不止七八個版本。在進入更加深入的其他頁面的設計環節時,我們也沒有去做什么用戶場景分析或者用戶需求分析之類的工作,都是依照著老板的一些想法去一步一步的實現,當然,這并不是一定是錯的,只是大部分公司的設計工作的現狀,這樣也可能會有好的產品,只是可能性更低而已。很多公司沒有很專業的設計團隊,也沒有很專業的產品經理,更沒有很專業的產品設計師,做很多設計決策的時候基本上都是靠拍腦袋,或者依靠個人的生活或者設計經驗,在不知不覺中,就把 UCD 的設計方法忘在腦后了,UI設計師只是負責機械式美化下每一個元素,做一下視覺風格的統一,變成了一個不折不扣的界面美化師。
但我們 UI設計師不能只是美化一下界面,雖然我們可以沒有專業的設計團隊,沒有很厲害的產品經理或者交互設計師,但是我們也要在設計過程中不斷地提醒自己,要以用戶體驗為中心,用戶在這個界面需要的是什么,什么信息對他來說是最重要的,怎么樣設計可以減少用戶的瀏覽負擔,提高用戶的使用效率,雖然可能我們思考的方向和結果的不一定對,但是只要去想,才能不斷強化我們自己的這個設計思維,避免自己產出千篇一律的設計方案,提高自己的設計能力。如果能把每一項工作都盡百分之120的努力去完成,那就算你現在是在一個微不足道的小公司,你也一定能成長為一個設計大牛。
現在作品不好,沒問題,如果一直都不好,那就是你自己真的出了問題。
△ 圖源:Nick Taylor
我以前很羨慕那種設計師,年紀輕輕就進大公司,或者20歲不到作品就讓人感覺眼前一亮。對于我這種非科班的,大學畢業7年了,認真靜下心來干設計才3年多,似乎還沒開始跑,就已經被人甩開一大截了。
看起來似乎很糟糕,但其實真不是,你所經歷的一切艱難,如果挺過去了,那就是你人生寶貴的財富。那應該怎么做呢?只能不斷努力地去縮小和別人的差距,不對,不是和別人的差距,是和自己對自己期望值的差距。
那么提高審美和眼界就是最基本要做的事情,同時我也認為這是作為一個設計師需要持續不斷提高的最基本的能力。審美和眼界的提高是需要日積月累的,軟件操作和技法可以短時間內突擊學習,也可以臨時偷師,但是如果你審美不行,你永遠都不可能做出好的設計,因為在你的眼里的高級和在高水平設計師眼里的高級,可能是天差地別。審美和眼界就像是一種設計師的隱藏屬性,會在你日常的設計當中不自然的流露出來,你不需要去調動它,它自然而然的就會在你的工作中不斷地幫助你。
但是往往很多設計師不把這個當一回事。其實你只要每天堅持不停地看優秀的作品,堅持幾個月或者半年一年的,你的審美肯定都會有質的飛躍。以前你覺得設計很棒的作品,可能你以后看起來就會嗤之以鼻了。
看作品這件事其實很簡單,你只要每天打開 behance,打開首頁推薦的十個作品,花個十幾二十分鐘細細看下來,覺得好的就分類收藏一下,以備以后可以用來做設計的參考。
但是,關鍵是堅持。
別總看國內的設計網站了,外面的世界更精彩。
為什么要重新學習英語?(我就是想萬一以后牛X了,可以混到國際舞臺上,嗯,這個可以有)
一開始決定重拾英語的契機,這還要感謝砂姐組織的翻譯小組。我也只是想試試看,能不能把英語重新撿起來。于是從17年2月份開始我給自己定了個目標,每個月翻一篇英語的設計類文章,很慶幸自己堅持下來了。同時在工作中遇到的不少問題,會逼著我去看一些外文的資料,讓我覺得我必須得更努力地把英語撿起來,于是最近幾個月同時也開始背單詞,每天堅持讀英語的設計文章,跟一開始比,感覺還是很有收獲的,看文章的速度越來越快,閱讀時的語感也越來越好(這個越來越好是相對于自己很糟糕時候的狀態)。
慢慢地,我感覺,學好英語,對于一個設計師的長遠發展是很有幫助的。
如果你想去了解世界上更多優秀設計師的想法,學習他們的經驗,那么就得親自去獲取第一手的信息,而不是等著其他人的翻譯,而且很多各種設計領域的優秀的教材和資料都只有英文版本,如果不把英語學好,自己學到的不僅僅是很多殘缺不全的二手資料,甚至連學習的機會都沒有。把英語學好,是給自己打開通往更廣闊領域的鑰匙。你的眼界,決定了你成就的上限。
學習從來都不是件輕松愉快的事情。
做界面的同學有沒有遇到過這樣的情況:我明明是設計成這樣的,為什么開發出來之后就變成那樣了?
這就是我下定決心想學習代碼的導火索。我就想,為什么我不能自己學習代碼自己實現自己的設計么?這不是很厲害么?加上我之前也斷斷續續地對前端技術有過學習的念頭,于是一鼓作氣下定決心就開始學了。
出于想給自己開發個人網站的初衷,我就選擇了前端的開發語言作為我的學習內容。我目前主要學習的是 Javascript(html 和 css 已經學了個大概)。
一開始學習的時候真的是痛苦不堪,但是在度過了一兩個月的痛苦的煎熬之后,已經慢慢地發現學習代碼的樂趣,但同時,發現這個坑是越來越大,感覺要學的東西是自己預想的要多太多了。雖然過程很糾結也很痛苦(我估計這種痛苦的感覺還會持續好長時間),學習代碼的過程對于提高設計師的邏輯思維確實很有幫助,因為編程思維和設計工作的思維相比,更注重邏輯性(設計工作也很注重邏輯性)。同時,多了解一些編程的知識(編程開發的語言很多,但是思維方式是類似的)對于理解開發人員的工作內容和工作方式,也會有很大的幫助。互聯網的設計師,我覺得在學有余力的情況下,都應該多多少少學習一些代碼的知識,因為這畢竟也是產品開發的其中的一個重要環節,你不需要擅長,但懂一些,可以讓你更好地和開發人員進行有效的溝通,知己知彼,減少撕逼。但是不建議設計工作經驗較少的同學學習代碼,畢竟這需要很多的時間去學習,不要把自己變成什么都是半桶水,在不影響設計工作之余可以抽出時間的話讓自己嘗試一下,說不定你也會喜歡上編程這件事。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
想一個問題吧,如果有人給你發了一條微信,你沒有回復 ta,原因是什么?
原因會有很多種,但是幾乎每一種原因都可以對應到更深的層次。比如給你發消息的人對你而言不重要,是因為缺乏了回復的動機;沒時間回復是因為缺乏了回復的能力;關閉了提醒是缺乏了回復的觸發因素……
動機,能力,觸發三大要素,是讓用戶產生行為必不可少的三大條件,在行為模型里也十分重要。
最早在 Norman 的《設計心理學》了解到關于行動的幾個步驟,他將行動拆分為目標,執行,評估三大階段,每一階段又分為幾個步驟,簡單畫了邏輯圖 :
但是很多時候會發現,用戶不一定會按我們所設想的方式去使用我們的產品,特別是注冊,購買等能提升轉化率的行為……我在查詢了一些關于心理學方面的內容后,發現了用戶不進行這些行為,其實都是有可以解釋的依據的,并且我們還可以利用這些依據來改善我們的產品。
從前面微信的例子,我們可以得知,要想讓用戶產生行為(Behavior),必須具備三個要素:充分的動機(Motive),完成這一行為的能力(Ability),促使人們付諸行動的觸發(Trigger),這三者缺一不可。
于是我們可以得出一個行為模型:B=MAT,我們可以從數學的角度類比出人們產生行為的「臨界點」,可以稱為「行動邊界線」(當然這是我自己瞎取的名字,方便理解),只有用戶跨越了「行動邊界線」,才能實施或者產生某種行為。
所謂觸發,就是促使用戶做出某種舉動的誘因,引發用戶去使用你的產品。
比如通過在其他平臺廣告推廣等付費方式吸引新用戶,這個可以稱為「付費型觸發」;
還有一些公關、媒體新聞的正面報道 ,app store 里面排行榜,AppSo 推薦好用應用等不需要付費,但是能夠吸引用戶使用你的產品,這個可以稱為「回饋型觸發」;
還有熟人之間的相互推薦,親朋好友的口碑相傳,這種方式十分常見,也是能夠讓產品大規模獲取用戶的一種方式,我們可以稱為「人際型觸發」。
但是這種方式經常會被惡意利用,比如我們經??吹降模悍窒鞽X到幾個群即可領取XXX優惠,最后卻發現是騙人的方式,利用這種方式也許可以獲取大批用戶,但是一旦用戶發現被欺騙后就會立即停止使用你的產品,你也會失去用戶的信任。
還有一種是以驅動用戶重復某種行為的方式,用戶主動與產品保持聯系,比如用戶注冊了某個平臺的賬戶,訂閱了它們的內容更新,開啟了消息推送,那么每一次更新推送就很有可能觸發用戶使用你的產品,這種方式可以稱為「自主型觸發」。
以上四種觸發方式,都是來源于外部環境,那么我們可以將其稱為「外部觸發」。
昨晚在 PM CIRCLE 里面看到大家在談論關于痛點、癢點、爽點的問題,也出了系列文章,后來在知乎上也搜了相關大佬的回復。
小小的總結一下:
為什么我會提到「痛點」、「癢點」、「爽點」?是因為我覺得這三者是從內部來觸發用戶采取下一步行動。
Nir Eyal 將情緒觸發分為兩種,一種為負面情緒,一種為正面情緒,兩種情緒皆可觸發用戶采取行動,但是我覺得如果利用「痛點」、「癢點」、「爽點」來分析內部觸發的話會更好,這三點通過深入挖掘用戶內在的情感體驗,設計出滿足用戶需求的產品,利用這三點也可以觸發用戶使用你的產品。
可以思考一下,人們為什么要發朋友圈,發微博?為什么要拍照?為什么要刷抖音?為什么朋友圈更新出現小紅點后我就要去點擊看?用戶借助這些產品實現了怎樣的目的?消除了什么樣的煩惱?使用完這些產品后用戶感受如何?等等問題。
可以把能力解釋為完成該行為的難易程度
Hauptly,Denis J 有一個觀點就是:當你使用某個產品時所需花費的步驟能被縮減或者是優化時,用戶使用它的頻率就會增加。他在《Something Really New》一書中,歸納了產品創新的三個步驟,簡單畫了下步驟圖:
結合今天的科技變化,我們可以知道,將行為簡單化可以推動產品創新,也只有將行為簡單化,用戶才會具備完成這一行為的能力。
福格總結了簡潔性包含的6個元素,也就是影響任務難易程度的6個要素,簡單總結下:
福格建議,為了增加用戶實施某個行為的可能性,設計人員在設計產品時,應該關注用戶最缺乏什么。
也就是說,要弄清楚是什么原因 阻礙了用戶完成這一活動:是時間不夠嗎?還是缺乏資金?還是完成這一活動太耗體力了?或者是用戶不想動腦筋?或者是這個產品與他們所處的社會環境格格不入?甚至是它太逾越常規,以至讓人難以接受?
我記得我第一份實習,做的一款新聞app,那個時候還不懂交互也不懂產品,我記得在首頁查看新的新聞內容的時候 ,因為數據加載量的原因,每次只能加載一定數量的新聞,所以當時設計的是一個「查看更多」的列表條,用戶每次需要加載更多新聞內容的時候,都需要點擊一次「查看更多」加載大約6條新的新聞,其實現在想想,為什么我們不設計一個自動加載呢?每次用戶上拉的時候,自動加載一部分,這樣能夠讓操作更加便捷,節約時間。
觸發是提醒用戶采取行動,而動機決定用戶是否愿意采取行動,也就是用戶行動時擁有的熱情。在心理學里面,福格博士歸納了驅使用戶采取行動的三大類核心動機:
能夠成為某些人行為動機的東西,未必適用于另外一些人,所以,我們需要知道自己的目標用戶到底需要什么。
舉個例子:比如抖音的一些視頻封面,是一些漂亮的女生封面,而對于大都數男生來說,為了追求快樂,就有了點擊進去看的動機,而這種動機對于另外一些女性用戶就不一定適用。
前幾天在聽 UCDCHINA 上海 大眾點評 DPUX 專場《戰略導向下的設計價值拓展》線下分享會的時候,其中也講到了關于用戶的7大基本心理特征——七宗罪:憤怒,淫欲,貪婪,懶惰,嫉妒,暴食,驕傲。
我覺得這也是能夠讓用戶產生動機的七大因素 ,比如經常被廣告商拿來利用的俗稱「性賣點」的廣告設計元素 ,利用人性的窺探欲,吸引用戶付諸行動……
當我們知道了用戶采取行動的幾類核心動機后,我們可以通過一些心理學的方法來刺激用戶的這些動機。
我在 Nir Eyal 的書中了解到一些關于啟發法等認知偏差對人類行為的影響,比如稀缺效應,首因效應,環境效應,投射效應,近因效應,錨定效應,贈券效應,目標漸進效應等 。
比如很多電商平臺商家會故意將商品庫存降低,當產品數量由多變少的時候,它在用戶心中的價值就會提高,那么用戶購買的動機就會增強,這就是利用了稀缺效應 ;
再比如目標漸進效應,大意是講當用戶認為自己距離目標越來越近時,完成任務的動機會更加強烈。
目標漸進效應讓我突然想到長沙的網紅奶茶——茶顏悅色的集點卡,大概就是積滿6點可以送一杯奶茶,我在第一次買第一杯的時候,他們給了我一張集點卡,上面已集了1個點,意思就是說我再集5個點就可以兌換一杯奶茶了,但是如果換一種方式,它把規則改成集5點可以兌換一杯奶茶,但是我買第一杯的時候,他們給我的卡上是空白的,沒有點,那么你們覺得這兩種方式,哪種方式更能讓用戶產生集點的動機呢?
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
想一個問題吧,如果有人給你發了一條微信,你沒有回復 ta,原因是什么?
原因會有很多種,但是幾乎每一種原因都可以對應到更深的層次。比如給你發消息的人對你而言不重要,是因為缺乏了回復的動機;沒時間回復是因為缺乏了回復的能力;關閉了提醒是缺乏了回復的觸發因素……
動機,能力,觸發三大要素,是讓用戶產生行為必不可少的三大條件,在行為模型里也十分重要。
最早在 Norman 的《設計心理學》了解到關于行動的幾個步驟,他將行動拆分為目標,執行,評估三大階段,每一階段又分為幾個步驟,簡單畫了邏輯圖 :
但是很多時候會發現,用戶不一定會按我們所設想的方式去使用我們的產品,特別是注冊,購買等能提升轉化率的行為……我在查詢了一些關于心理學方面的內容后,發現了用戶不進行這些行為,其實都是有可以解釋的依據的,并且我們還可以利用這些依據來改善我們的產品。
從前面微信的例子,我們可以得知,要想讓用戶產生行為(Behavior),必須具備三個要素:充分的動機(Motive),完成這一行為的能力(Ability),促使人們付諸行動的觸發(Trigger),這三者缺一不可。
于是我們可以得出一個行為模型:B=MAT,我們可以從數學的角度類比出人們產生行為的「臨界點」,可以稱為「行動邊界線」(當然這是我自己瞎取的名字,方便理解),只有用戶跨越了「行動邊界線」,才能實施或者產生某種行為。
所謂觸發,就是促使用戶做出某種舉動的誘因,引發用戶去使用你的產品。
比如通過在其他平臺廣告推廣等付費方式吸引新用戶,這個可以稱為「付費型觸發」;
還有一些公關、媒體新聞的正面報道 ,app store 里面排行榜,AppSo 推薦好用應用等不需要付費,但是能夠吸引用戶使用你的產品,這個可以稱為「回饋型觸發」;
還有熟人之間的相互推薦,親朋好友的口碑相傳,這種方式十分常見,也是能夠讓產品大規模獲取用戶的一種方式,我們可以稱為「人際型觸發」。
但是這種方式經常會被惡意利用,比如我們經??吹降模悍窒鞽X到幾個群即可領取XXX優惠,最后卻發現是騙人的方式,利用這種方式也許可以獲取大批用戶,但是一旦用戶發現被欺騙后就會立即停止使用你的產品,你也會失去用戶的信任。
還有一種是以驅動用戶重復某種行為的方式,用戶主動與產品保持聯系,比如用戶注冊了某個平臺的賬戶,訂閱了它們的內容更新,開啟了消息推送,那么每一次更新推送就很有可能觸發用戶使用你的產品,這種方式可以稱為「自主型觸發」。
以上四種觸發方式,都是來源于外部環境,那么我們可以將其稱為「外部觸發」。
昨晚在 PM CIRCLE 里面看到大家在談論關于痛點、癢點、爽點的問題,也出了系列文章,后來在知乎上也搜了相關大佬的回復。
小小的總結一下:
為什么我會提到「痛點」、「癢點」、「爽點」?是因為我覺得這三者是從內部來觸發用戶采取下一步行動。
Nir Eyal 將情緒觸發分為兩種,一種為負面情緒,一種為正面情緒,兩種情緒皆可觸發用戶采取行動,但是我覺得如果利用「痛點」、「癢點」、「爽點」來分析內部觸發的話會更好,這三點通過深入挖掘用戶內在的情感體驗,設計出滿足用戶需求的產品,利用這三點也可以觸發用戶使用你的產品。
可以思考一下,人們為什么要發朋友圈,發微博?為什么要拍照?為什么要刷抖音?為什么朋友圈更新出現小紅點后我就要去點擊看?用戶借助這些產品實現了怎樣的目的?消除了什么樣的煩惱?使用完這些產品后用戶感受如何?等等問題。
可以把能力解釋為完成該行為的難易程度
Hauptly,Denis J 有一個觀點就是:當你使用某個產品時所需花費的步驟能被縮減或者是優化時,用戶使用它的頻率就會增加。他在《Something Really New》一書中,歸納了產品創新的三個步驟,簡單畫了下步驟圖:
結合今天的科技變化,我們可以知道,將行為簡單化可以推動產品創新,也只有將行為簡單化,用戶才會具備完成這一行為的能力。
福格總結了簡潔性包含的6個元素,也就是影響任務難易程度的6個要素,簡單總結下:
福格建議,為了增加用戶實施某個行為的可能性,設計人員在設計產品時,應該關注用戶最缺乏什么。
也就是說,要弄清楚是什么原因 阻礙了用戶完成這一活動:是時間不夠嗎?還是缺乏資金?還是完成這一活動太耗體力了?或者是用戶不想動腦筋?或者是這個產品與他們所處的社會環境格格不入?甚至是它太逾越常規,以至讓人難以接受?
我記得我第一份實習,做的一款新聞app,那個時候還不懂交互也不懂產品,我記得在首頁查看新的新聞內容的時候 ,因為數據加載量的原因,每次只能加載一定數量的新聞,所以當時設計的是一個「查看更多」的列表條,用戶每次需要加載更多新聞內容的時候,都需要點擊一次「查看更多」加載大約6條新的新聞,其實現在想想,為什么我們不設計一個自動加載呢?每次用戶上拉的時候,自動加載一部分,這樣能夠讓操作更加便捷,節約時間。
觸發是提醒用戶采取行動,而動機決定用戶是否愿意采取行動,也就是用戶行動時擁有的熱情。在心理學里面,福格博士歸納了驅使用戶采取行動的三大類核心動機:
能夠成為某些人行為動機的東西,未必適用于另外一些人,所以,我們需要知道自己的目標用戶到底需要什么。
舉個例子:比如抖音的一些視頻封面,是一些漂亮的女生封面,而對于大都數男生來說,為了追求快樂,就有了點擊進去看的動機,而這種動機對于另外一些女性用戶就不一定適用。
前幾天在聽 UCDCHINA 上海 大眾點評 DPUX 專場《戰略導向下的設計價值拓展》線下分享會的時候,其中也講到了關于用戶的7大基本心理特征——七宗罪:憤怒,淫欲,貪婪,懶惰,嫉妒,暴食,驕傲。
我覺得這也是能夠讓用戶產生動機的七大因素 ,比如經常被廣告商拿來利用的俗稱「性賣點」的廣告設計元素 ,利用人性的窺探欲,吸引用戶付諸行動……
當我們知道了用戶采取行動的幾類核心動機后,我們可以通過一些心理學的方法來刺激用戶的這些動機。
我在 Nir Eyal 的書中了解到一些關于啟發法等認知偏差對人類行為的影響,比如稀缺效應,首因效應,環境效應,投射效應,近因效應,錨定效應,贈券效應,目標漸進效應等 。
比如很多電商平臺商家會故意將商品庫存降低,當產品數量由多變少的時候,它在用戶心中的價值就會提高,那么用戶購買的動機就會增強,這就是利用了稀缺效應 ;
再比如目標漸進效應,大意是講當用戶認為自己距離目標越來越近時,完成任務的動機會更加強烈。
目標漸進效應讓我突然想到長沙的網紅奶茶——茶顏悅色的集點卡,大概就是積滿6點可以送一杯奶茶,我在第一次買第一杯的時候,他們給了我一張集點卡,上面已集了1個點,意思就是說我再集5個點就可以兌換一杯奶茶了,但是如果換一種方式,它把規則改成集5點可以兌換一杯奶茶,但是我買第一杯的時候,他們給我的卡上是空白的,沒有點,那么你們覺得這兩種方式,哪種方式更能讓用戶產生集點的動機呢?
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
最近一段時間一直在建立APP的設計規范,從一開始的立項到現在落地上線,可以說是從零開始進行APP全部細節的梳理并且規定規范,這一路走過來還是能總結出很多心得,本文將分為3個部分,闡述如何從0到1建立設計規范。
目錄:
一、如何確定內容,規范里要寫什么
二、如何寫
三、如何推動規范落地
一、如何確定內容?
這里我總結了三步:
1)確定目標用戶、用戶目標、設計目標
根據不同的用途和目標,不同的團隊對設計規范的制定是不一樣。比如為了指導與規范全球第三方開發者進行設計和開發,Google建立的Material Design覆蓋面廣,每個組件細節寫得非常細致。Ant Design則是直接做出了組件,方便直接進行調用。有些國內設計團隊的規范則是主要描述常用控件和色值。因此我們需要確立用戶目標和設計目標,這樣才能確定我們的規范側重點是什么,需要做成怎么樣的形式。
在這里我列舉了自己撰寫規范時的用戶與目標:
2)模范大平臺,先列全
一個規范里面的東西是很多的,那么我們究竟需要做什么呢?假如一開始我們沒有方向,找一個,列一個,這樣我們很容易疏漏很多情況。在這里我采用的的一個辦法是:首先熟讀iOS,Material Design規范,并且模范他們,在腦圖中,把規范中應含有的所有內容羅列出來,羅列一個大綱。
這里我列舉當時自己做的一個腦圖大綱,覆蓋了主流規范中的所有細節,大家可以進行參考并模仿:
3)針對自己情況進行刪減
列完齊全的大綱后,我們需回顧設計目標,對大綱里的內容進行刪減。(比如在組件、模式這些地方,可以對著自己的APP,進行挨個尋找,看自己的APP當前是不是運用了這個組件,沒有的話就進行刪減。)
在這里我列舉了針對自身APP的情況刪減后的大綱圖:
二、如何寫
進過了以上的三步,我們基本得出了要寫什么的框架了,接下來就是如何寫規范的階段。
這里我總結了3步:
1)確定優先級
我們可以通過版本迭代計劃+性價比+重要性(該組件在頁面出現的場景次數以及當前的不統一對APP體驗影響程度)這幾個維度分別確定每塊內容的優先級和分工。基礎的、必要的、高性價比的放在第一期,復雜的向后放,隨著產品的迭代,我們的規范也會越來越完整。
同時需要留意版本規劃,了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內容的優先級。龐大復雜,牽涉到很多頁面的,我們可以先降低其優先級:比如全局提示框的規范,toast的規范。
同時,我們也需常與開發溝通,爭取把可復用性高、組件日后變化幅度少的組件做成開發組件庫。
2)確定規范書寫格式
我們制定的規范本身也是設計的交付物,假如每個設計師都按照自己的喜好來編寫規范,那么這個規范本身也會變得不規范,規范自身保持一致性是提高規范閱讀效率的一部分。
我們可以回歸我們之前制定的用戶目標和設計目標來制定我們規范的書寫格式。規范的用戶群是誰,主要想達到什么作用,是通過文檔展示還是網上展示,確定了這些問題后,就可確定規范的詳細程度、主要的展示形式(比如前文說到的Ant Design和Material Design)。
這里我的思考點是:假如規范寫太多字就會變得很臃腫,沒有人喜歡慢慢仔細的閱讀你寫的規范,所以我們應該做到寫得簡明扼要,再輔以例子說明(根據開發的習慣,都是喜歡直接看例子,看標注)。
我的書寫格式是:先寫描述這個組件是什么,再列舉出現的場景,然后編寫交互規則,最后給出視覺標注+例子。
3)逐步對單個規范進行整理與書寫
當確定了要寫什么東西和格式之后,我們開始進入到細節,對每個內容進行整理,制定規范了。
通過對每個內容制定規范規范也是有方法的:
下面我通過整理“列表”這個規范來講解:
1.收集出現的所有的場景。
當一個產品已經趨于成熟,這個組件出現的場景就會非常多,比如對話框,toast,列表這些組件出現的地方很多,需要我們自己仔細地體驗產品,把所有頁面都找出來。
2.提取共性,歸納分類
我們需要分析每個頁面的特點并且把相同特點的頁面歸納一起,眾多的頁面場景就能整理成幾個典型的種類,然后只需對這幾個典型的種類進行定義和描述即可。
在列表中,我分為了大封面列表、小封面列表、用戶列表、單行列表
3.編寫規則
在分類好后,我們可以對每個種類編寫規則,在這里我們需要描述好每個種類有什么特點或屬性,什么時候場景下適用,并且給出標注和例子,方便閱讀者理解。
4.多與組內成員討論修改
在制定好初稿后,我們可以與組內成員宣講下自己制定的規范。多從別人的角度出來,確保你編寫的規范是否易懂,是否包含了全部的情況,是否容易執行落實。
三、如何推動規范落地
寫完內容后,最重要的一步就是推動落地,規范要真正有人用才能體現價值,在這里我給出幾點幫助推動規范落地的小建議:
1.制定規范推進進度表
表格里面應該包含規范制定的優先級,分工進度,分工人員,并且確定每一期進度的交付時間,開會討論的時間,作為負責人,也可以適時提醒成員每次的開會時間(畢竟deadline是第一生產力)。
2.編寫過程中多與其他成員討論,達成一致性共識
制定規范后,與部門其他人員進行宣講,灌輸概念,針對如何更好的落實進行討論調整。在設計中都不可能一次就完美,我們需要不斷的在修改中逐漸完善。
3.規范建成后放在網上
同步在網上,方便部門內的其他成員能隨時查看和團隊成員對規范的更新修改、同步。
4.強制性制定規則要求團隊成員執行。
有明確的懲罰機制和要求才能更好的執行,不然在規范制定后很容易健忘此事。(我們組的懲罰機制就是罰錢)。
5.規范保持持續的更新迭代。
規范推動落地后并不是完全了事,要根據產品的迭代,保持規范的更新。
這整個制定規范的項目中,還是有不少反思的地方,值得我們深思和注意:
1.切記不要為設計規范而做規范
規范最重要的點是能推動落地,能確確實實改善產品,達到統一性。因此我們在設計規范時,并不需要“高大上”術語,給出一大堆的設計理念用來提升設計逼格。而是真正的回歸到我們的設計目標,針對目標用戶制定規范,做到簡樸、易懂、能落地。
2.沒人愿意閱讀長篇文字
我們應該盡量控制文案長度,做到通俗易懂即可。
3.要時刻圍繞我們的目標做規范
比如,我這次做的規范中有一項是去工具化,在制定控件中,空白頁面中就會加入很多趣味化的設計。
4.靈活變通
規范只是適合大多時候的場景,對于一些規范中沒有包含或者不符合規范的場景,我們可以靈活變通,積極創新或者是補充新的規范(前提是與組內積極溝通,達成共識)。
總結:
再來回顧如何從0到1建立規范
一、確定內容
1.確定用戶目標和設計目標
2.模仿大平臺,列全
3.針對自己情況進行縮減
二、寫
1.確定優先級
2.確定規范書寫格式
3.逐步對單個內容進行整理與書寫:a.收集全部情況 b.分類歸納 c.提取共性,編寫規則
三、推動
1.制定規范推進進度表
2.編寫過程中多與其他成員討論
3.把規范建成后放在網上
4.強制性制定規則要求團隊成員執行
5.規范保持持續的更新迭代
今天分享的內容就是這些了,希望能幫助到大家,感謝閱讀~
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
本文聚焦 Airbnb 產品,描述10大可用性原則的應用場景,希望能夠幫助你更系統地理解10大可用性原則。
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson
系統應該在合理的時間內通過適當的反饋,始終讓用戶了解正在發生的事情。
這項原則通常被遵循并使用在如下幾個場景:
Airbnb 的房源詳情頁頂部導航,可以通過點擊快速定位到房源的某類信息,讓用戶清晰地知道「我在哪?我還能去哪?」
在發布房源時,系統頂部模擬了進度條,顯示出了當前步驟,以及當前的發布進度。
Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson
系統應該說用戶的語言,用戶熟悉的單詞,短語和概念,而不是系統導向的術語。遵循現實世界的約定,使信息以自然和合乎邏輯的順序出現。
這項原則說的直白一些,就是:「說人話」。
產品簡單到傻瓜也能操作,是喬布斯和張小龍做產品的核心理念。坐擁10億用戶的微信之父張小龍說過,做產品要有傻瓜心態。不要炫耀自己的智商,不要讓用戶覺得自己是白癡,請用最簡單直白的語言描述狀況;就好比自然世界里,你和他人說話的時候必然使用簡單的白話文進行直白的溝通以保證交流順暢。
在房源的詳情頁、Airbnb PLUS 介紹頁,系統用了大量高質量的攝影圖片傳達一種空間氛圍感。同時,在介紹文案的措辭方面,簡潔易懂,語言邏輯清晰。
User control and freedom
Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson
用戶通常會錯誤地選擇了系統的某個功能,并且需要一個明確標記的」緊急出口「來離開不想要的狀態,而不必進行擴展對話。支持撤消和重做。
用戶擁有自由使用和控制系統的權利,最為常見的就是系統會為用戶提供「撤銷、重做、返回」的入口。
在故事專欄,當用戶在瀏覽器當前標簽頁進入下一級頁面時,系統都為用戶提供了返回按鈕,一方面方便用戶來去自由,另一方營造出了一定的沉浸式瀏覽體驗。
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson
用戶不應該懷疑不同的話語、情況或行為是否在表達同樣的一件事情。系統設計需遵循平臺慣例。
在房源、故事集列表頁,系統統一用了卡片式的視覺風格,并且每個卡片里的文字與背景圖片的層次也都保持一致。
在房源詳情頁,系統使用了統一的 iocn 風格和文字風格,傳達房源的設施屬性。
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson
比良好的錯誤提示信息更好的方法是:一個走心的設計可以提前防止錯誤的發生。系統要么消除容易出錯的情況,要么檢查它們,并在用戶采取行動之前向用戶提供確認選項。
如果房源在某天或多天已被預定或暫時不開放,則日歷里將這些不可預定的日期置灰。
用戶在修改個人重要信息后,系統會讓用戶輸入密碼二次確認。
Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson
通過使用對象,動作和選項的可視化表達,最大限度地減輕用戶的記憶負擔。用戶不應該記住從對話的一部分到另一部分的信息。
系統會在首頁第一屏為用戶展示瀏覽歷史(登錄后)。
搜索框也會保留最近5次的搜索歷史。
Flexibility and efficiency of use
Accelerators?—?unseen by the novice user?—?may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson
一些被精心設計的體驗也許會被專家用戶察覺到,使系統需要能夠滿足無經驗和有經驗的用戶。允許用戶進行頻繁的操作。
當用戶在滾動屏幕瀏覽房源詳細信息時,系統將預定的基本信息(如:價格、日期、人數等)固定在瀏覽器的右側,方便用戶在瀏覽過程中隨時開始預定步驟。
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson
對話中不應該包含無關緊要或很少需要的信息。在對話中每增加一個相對重要的信息,就意味著需要弱化其他信息。
高顏值不需要理由。
Help users recognize, diagnose,and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson
錯誤信息應該用通俗易懂的語言表達(不要用代碼),較準確的反應問題,并且提出解決方案。
實在無法避免的報錯時,不要單純只是報錯,要提供解決方案。就好比小時候犯錯,你絕不能光說:「啊,我錯了。」老師或家長必然會追問:「錯哪兒啦?」你要是說不出緣由,則必定被認為認錯不誠懇不真心。
當用戶填寫錯誤時,系統會及時給出提示以及解決方法。
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson
如果系統能讓用戶不需要閱讀文檔就會使用那是最好的,但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索,且專注于用戶的目標任務,并列出具體的步驟來告知用戶。
在個人資料頁面,對于用戶關心的隱私信息,系統會給出非常有親和力的解釋文案。此外,在系統很多頁面都有對應功能的幫助鏈接以跳轉至幫助中心。
系統的幫助中心,提供了搜索和問題分類引導,方便用戶快速定位問題。
△ 本文圖片版權歸 Airbnb 所有
號稱以設計驅動的 Airbnb 公司,的確在產品設計、用戶研究、UX設計方面展現出了較高的功力。網站甚至移動端APP 的框架層、范圍層、視覺層的設計都體現出了高度的用戶體驗一致性和品牌感??梢钥闯觯珹irbnb 對 design system 的重視一級高度的執行力。什么是好的產品品牌認知和識別,我可以簡單的理解為:「脫掉」Logo,用戶照樣認識你。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
很難想象,如果沒有原型設計,如今的數字產品設計流程會變成什么樣。原型的存在,讓產品團隊在制作和開發過程中更加直觀,就像那句話說的:展示,而非表述。
現如今,許多產品團隊借助原型來測試想法,甚至銷售產品。不過,原型設計本身并非是萬無一失的,設計師依然會面臨許多陷阱,并且拖累整個產品的進程。
今天的文章,總結了6個常見的原型設計的陷阱。
我們先設計出來,然后弄明白如何使用它。
在這種說法的指引下,設計和開發團隊需要花費大量的時間來處理那些沒有任何價值的事務,在沒有特定目標的情況下制作原型,會浪費大量的時間。
每個原型的設計目標應該是非常明確的,原因應該是清晰的。這個目標可以是源自于一個特定的想法,或者某種假設,產品團隊在這個方向的指引之下,利用系統化的知識來構建符合目標的原型。
在創建原型之前,設計師應該問自己一個問題,「通過創建這個原型我們要試圖解決什么問題?」如果能夠找到一個明確的答案,那么這個原型是清晰且具有凝聚力的,有助于減少潛在的開銷。
產品團隊通常會力圖制作出有效有用的原型。當制作出來的原型不可用甚至根本無法完成的時候,整個團隊會為之氣餒,而這種消極的心態可能會拖垮整個項目。
為了提率,設計人員應當將失敗的情況視作為整個原型制作過程中自然的組成部分。原型在很多時候是用來測試假設和想法的,并非每個假設都是有效的。這就是為什么創建工作原型不應該是原型制作工作最重要的結果。原型制作工作最重要的成果應該是獲取有用的信息和新的知識。因此,將焦點從失敗的情緒上,轉移到學習新的知識上來,成功和失敗的原型,都能夠讓你的產品進步。就像大家常說的,失敗是成功之母。
產品團隊常常在擁有第一個想法的時候,就想堅持住,將它打磨成為最終的解決方案。隨后,團隊花費大量的時間來出揣摩嘗試,調整細節,制作原型,甚至直接開始設計視覺稿。
結果,花費無數小時創建和打磨的原型,在可用性測試早期,就呈現出不理想的狀況,接下來,設計師和團隊會意識到最初的想法其實不夠好。
經驗豐富的團隊知道,想要探索和測試一系列的想法是必不可少的,并且只有通過測試之后,效果最好的方案,才是值得堅持做下去的。花費更多的時間來思考,團隊才能針對問題空間繼續挖掘下去,并且找到潛在的解決方案。
原型的設計者常常會對于自己的設計有大量的投入。這種投入是會造成一種「投資偏見」——你在某個事情上花費的時間越多,它對你來說就越有價值。值得注意的是,它對于你的價值會越來越高,但是對于別人而言并非如此。而原型設計同樣如此,當設計師對于自己的原型過度沉迷的時候,產品可能就會暴露在危險之下了:你會很容易忽略它們存在的缺點,即使這些缺陷很明顯,設計師也會忽略團隊成員和其他人的反饋。
不要拿原型當傳家寶。
在打磨原型上花費太多寶貴的時間和精力,會剝奪設計師對于反饋應有的注意力和敏銳度。讓你的原型在細節和復雜度上保持在一個合理的度上。
原型并不是藝術品,它應該是幫你找到答案的工具。
如果你傾向于采用盡可能完善的設計,那么請采用最小可行原型——添加足夠的細節,但是盡可能確??尚?。將原型視作為一次性的工具。每個原型都有特定的用途,一旦達到目標,就盡可能用更好的東西替換它。
「當我們擁有強大的原型工具的時候,為什么還要使用紙和筆呢?」設計師跳過手繪階段,并且直接使用計算機來繪制數字原型的時候,他們相信數字化的設計是可以節省時間的。但是實際上,手繪的草圖能夠幫助設計更快地起步。
當你下次不知道如何解決問題的時候,可以試著從筆和紙開始繪制草圖。只需要開始繪制草圖,勾勒出所能想到的變化,然后把它們貼在墻上,并且和你的團隊一起從技術和業務的角度上討論可行性。
保真度是描述細節程度的一種度量,我們常說的線框圖細節簡略,是低保真的,而視覺稿則常常會用到豐富的細節刻畫,它是高保真的。原型的呈現形態是非常多樣的,可以是低保真的也可以是高保真的。制作一個高保真的原型是非常誘人的,但是一定要抵制住這樣的誘惑。值得注意的是,原型的保真度應該和你想法的保真度相匹配。
這意味著,設計師應該根據他們的設計過程所處的階段來選擇保真度。當設計師違反這一規則的時候,往往會帶來糟糕的結果。比如過高的保真度會讓處于早期階段的設計師陷入「投資偏見」。
當團隊設計產品尚且處于初期的時候,盡量采用低保真的策略來進行繪制,比如使用草圖。
△ 低保真的草圖原型
當你想要與真實的用戶一起測試你的想法的時候,盡量使用保真度更高的設計,比如數字化的可交互的原型。使用高保真的原型來進行可用性測試,能夠產生更真實、具體的反饋。高保真的原型展示給利益相關者來看也非常有用,他們會更好地判斷產品的功能和內容。
△ 在 Adobe XD 中創建高保真的原型
因此,考慮最終的目標和你所擁有的時間,來確保原型的最佳保真度,盡早與期望達成一致。
原型設計在每個產品設計項目當中都是至關重要的,正確地設計原型,才能盡早地構建真實的產品。
關于原型設計,喬布斯在1992年 MIT 的演講上說到的一個事情非常有意思。彼時,他還未回歸蘋果,而是在制造名為 NeXT 的高端電腦,并且對于面向對象編程有著極高的熱忱。
我們已經有2年時間沒有構建任何工程上的原型了。這意味著,從產品開始設計的第一天,工程師和整個制造業就已經參與進來了。很多時候,在構造原型的時候,生產工具和技術根本是無法與之匹配的,而當你在原型設計的時候所積累的東西,在投產的時候就得完全拋棄,然后重新開始。因為我們始終緊密地和技術結合起來做,因此我們不會拋棄任何東西,并且不浪費時間,這也是我所見過的設計、工程和制造團隊之間,最健康的關系之一。
現如今,身為設計師的我們在使用 Photoshop、InVision 等工具制造原型的時候,實際上開發可能是與之脫節的。產品團隊中,設計和開發之間的矛盾,從來沒有僅此減少過。而「全棧設計師」這一概念的提出,又何嘗沒有來自這種矛盾的壓力呢?
諸如 Sketch 和 Figma 這樣的新工具在做原型設計的時候,已經或多或少地開始在設計和開發之間找到協同的點,試圖在設計驗證和技術驗證之間,找到結合的辦法。
更好的原型設計,更合理的技術和設計的結合點,這也許是我們未來的探索方向吧。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
今天的譯文同樣來自設計師 Eugen E?anu,他將經典設計書《Don‘t Make Me Think》中的內容梳理出來供你參考。這些老問題依然能夠給我們今天的新局面以啟發。
「好設計應該是顯而易見的」,這句老話在過去的幾個世紀當中影響到了各個不同的領域,從美食到音樂,從建筑到哲學,我們如今的生活幾乎是在這句話的影響下被逐漸被塑造出來的。
但是同樣的,人類的進化并沒有我們想象中那么快速,我們的思維和本能仍然被深刻地影響著我們的決策。換句話來說,人類的行為模式有著很長的保質期,在許多事情上,20年前很難做,在今天依然不那么容易去執行。
Steve Krug 的這本《Don’t Make Me Think》中文譯本名字是《點石成金:訪客至上的網頁設計秘籍》,譯名可能沒有它的原名那么直接,但是也傳遞出這本書所要表達的核心概念。
這本書成于2000年第一次互聯網泡沫時代之后,Krug 在這次浪潮之后提出了不少實用的設計原則,直到今天仍然有著極高的價值。這本書隨后多次再版和修訂,其中的設計案例幾經迭代升級,我們可以看到現代網頁設計的提升和進步,同時也能從中感受到,用戶——人類行為本身的模式化?!冈L客至上」的表述太過客氣,「不要讓我思考」這一表述更能表現用戶行為的特征,而今天我們所面對的絕大多數的優秀產品,無論是手機電腦還是汽車,同樣遵循著這一原則。
這本書的成功是建立在無數痛徹心扉的教訓之上,這也使得它本身的價值無與倫比。今天的文章本質上也是一篇讀書筆記,設計師應該對于用戶、人性有足夠的認知,方可作出足夠優秀的設計。下面的10個總結,既是常見的認知錯誤,也是成就好設計的契機,就看你怎么把握了。
當我們在查看內容和信息的時候,絕大多數情況下我們都會下意識尋找讓自己感興趣的東西。比如,我們很少會完整地瀏覽網站上所有的文本和內容,為什么?絕大多數的用戶打開網站都是在試圖完成某項任務,達成某個目標,而網頁中的不同部分的內容往往是服務于不同的功能和目標的,我們努力達成目標即可,并沒有閱讀全部的必要。不過,作為網站的設計者,我們往往還是提供了足夠豐富的內容和完善的功能,一方面是因為我們覺得人們需要知道,另一方面也是應對不同用戶的需求。正如有的設計師所說的,它們「增加了體驗」。
所以,通常而言,我們可以作出下列優化:
視覺層次是確保用戶快速掃視能夠獲取到信息的重要助力。視覺層次能夠呈現出頁面中不同元素之間的優先級和關系,在設計的時候,同樣需要遵循下面的幾個原則:
我們明白,用戶總會期望看到新東西,但是,市面上有太多的工具和應用,如果各行其是,忽略約定俗成的規則,特立獨行地采用自己的規則,會讓每個應用的學習成本都提高,這對于用戶幾乎是毫無益處的。
當設計師被要求設計某個東西的時候,內心是充滿重新發明的沖動的,這個我們都明白。而設計出和別人相似的東西看起來又有點「政治不正確」,甲方總會希望設計作出點不一樣的東西。更何況,這還是一個少有鼓勵和贊揚的行業,也很少為「最貼合用戶需求」的產品頒設計獎。
但是設計仍然需要在各方之間作出最佳的平衡。
在重新發明輪子之前,你必須了解破壞和創新所意味著的真實的價值(時間,體驗,耗費的精力和所需的知識)。
我們的工作是要讓產品清晰明了,讓事情便捷易行。即使做不到明顯,也應該盡力向著不言自明的設計靠攏。說明書這種東西是沒有人會主動去看的,它們的存在意義本身就不大,你需要通過合理的設計,讓產品本身發揮指引性的效果。即使說明書必須存在,也盡量讓它簡短明了。
如果功能并不明顯,我們應該盡量讓它明顯一點,讓目標更明顯。
以宜家為例,一個需要買回家組裝的柜子,絕大多數的用戶可以在簡短的指引之下就可以輕松正確地組裝,為什么?因為絕大多數情況下,一個柜子長什么樣,用戶眼前有清晰的畫面,哪怕說明只有幾張簡單的圖片,用戶也不會犯錯。
絕大多數的用戶并沒有興趣了解你的產品的工作方式,并不是因為他們不夠聰明,僅僅是因為他們不在乎。所以,一旦他們確定你的產品是能用的,就很少會去注意其他的部分。
以蘋果的無線耳機 AirPods 為例,從價格上來說,它并不親民,但是它的交互方式和使用體驗確實非常的獨特和優秀,這也不難理解許多用戶會選擇它。用戶在購買它之后,并不會去思考它是如何運作的,其中所包含的諸多新技術,對于用戶而言,只是潤物細無聲地發揮著作用而已。
我的母親就使用的 AirPods ,她從來不會問我它的原理,但是她很清楚,耳機需要放在充電盒中充電,和手機配對之后就能用了,并不復雜。
這一條可能是我最喜歡的。我們設計師總喜歡為用戶帶來微妙的視覺效果,來給用戶帶來樂趣。對吧?可是如果我告訴你,用戶并不關心它們,你會怎么想呢?他們也根本不會告訴你他們有多在意或者多不在意,也不會在一次又一次看到的時候對于這些設計有多少感覺。
為什么會這樣?生活環境賦予每個用戶以復雜多變的情境,他們很少有機會去感受微妙的設計所帶來的奇妙情緒。風在吼,狗在叫,小孩還在滿屋跑,水壺里面水開了,老婆在耳邊抱怨著工作中的細微末節,而你正在填寫著表單準備預訂明天的高鐵票,在那個時刻,APP 當中微妙的動效和視覺線索,手一抖,你可能還會多買一個沒有必要的捆綁銷售的酒店折扣券。
但是另外一方面,對于優秀體驗的追求不應該因此而放棄,還有很多用戶會從中受益,這也是促成優秀產品的必須因素。只不過確實有很多用戶沒法去在意它們罷了。
焦點小組是做什么的?一小群人圍坐在桌子旁邊,討論他們對于產品的看法,他們過去的經歷,它們的感受和對于新概念的理解。焦點小組的作用是幫你更好地界定目標用戶,目標用戶的感受等等。
可用性測試則是另外一回事。做可用性測試的時候,通常是為了測試產品而觀察一個特定的用戶使用產品的過程。在測試中,你需要測試人員執行特定的操作,以此來查看整個設計中的概念是否直觀,功能是否需要完善。面對焦點小組的時候,你需要傾聽觀點,梳理思路,在進行可用性測試的時候,更多需要的是觀察,并且解決具體的問題。
我們在設計產品的時候,常常會從自己的需求出發:「我也是一個用戶,所以我知道什么好什么不好。」我們對于自己的喜好有著強烈的感受。
我們會說,當我們的產品具備_____的時候,我們會很喜歡,又或者,我們認為_____是一個巨大的痛點。當我們真正和團隊成員坐在一起討論產品的時候,大家都有各自的看法和各自的情緒,所有人的都有著極強的個性和獨特的看法,這個情況就很尷尬了。因為我們常常會傾向于認為絕大多數的用戶和我們自己一樣。事實上并不一定如此。
無論是設計產品功能還是測試產品的時候,問對問題都很重要。測試的時候,問用戶「你們喜歡下拉菜單嗎」這樣的問題,不僅銷量不高,而且不會帶來價值。這個問題,應該這么問:「在這個情況下,在這個頁面上,下拉菜單這種設計是否能夠給你帶來良好的用戶體驗?哪里讓人覺得不舒服?」
諸如「用戶喜歡這個產品嗎」這樣寬泛的問題意義不大,用戶也很難提供針對性的、具體的回復。
而且,作為設計師我們不應當專注于用戶是否喜歡這樣的問題,這樣會失去動力和專注力。可用性測試可以幫你消除各種「喜歡」相關的問題,并且幫你找到真正要做的事情。這才是重點。
我在哪?我要干嘛?
我應該點哪里開始?
他們在這放的這個控件是干啥的?
這個頁面是用來做什么的?
他們為什么這么稱呼這個功能?
這個是廣告還是內置的功能?
在使用產品的時候,如果觸發用戶大腦中的各種問題,只會增加用戶的心理負荷和工作量,分散用戶注意力并不是好事,而且用戶本身并不喜歡解決各種難題。
每當用戶點擊某個控件而不起作用,或者它看起來是個鏈接實際上并不是,會消耗用戶對你的信任感,降低產品的可靠度。
炫酷的概念和新穎的趨勢不僅吸引用戶,同樣是設計師的心頭好。但是我們在新的時代,新的局面之下,始終面對的是以往的用戶,看似千變萬化的需求背后是不變的人性。
至少《Don’t Make Me Think》這本書一直在探討的問題,經過20年的世事變遷,幾次互聯網浪潮,在這個號稱互聯網4.0時代,仍然發揮著作用,依然是那么具有啟發性。
新狀況之下潛藏著老問題,想要洞悉本質,設計師要懂心理學和行為學。在之前的幾篇文章當中,我一直在試圖梳理出不會隨著時間改變,而一直存在的、亟待解決的問題以及可供使用的原理。
《為何如今的產品總給人千人一面的感覺?》揭示的是「特征蔓延」和「競爭驅動式設計」是如何讓產品走向平庸和毀滅,解決方案藏在結尾。
《熟知用戶行為的這7個層面,你的設計才會走進人心》則介紹了唐納德諾曼的用戶行為的7個層面,這是一套分析用戶行為,設計產品流程的有效方法,擁有持久生命力的產品的設計策略,和這套方法不謀而合。
《這7種廣泛存在的認知偏差,影響了我們太多的決策》 則幫你梳理了7種常見的認知偏差,認識自己了解用戶,這些知識能消除誤解,同樣能夠幫你洞悉真相,是不可多得的利器。
設計的方法和工具成千上萬,想明白道理,問對問題,接下來的路更容易走通。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
項目背景:為了配合世界杯做的H5活動,主題是DIY你的世界杯時刻
玩法:選擇自己看世界杯的場景,可以在畫面當中添加食物和自定義的小元素,另外根據場景的變換人物的腿也可以選擇哦
項目周期大概半個月,和團隊的小伙伴一起完成的,感謝@珊,@暖暖,@明明
使用工具包括sketch、ps、手繪板
ps:做H5真的是很累,工作量大,畫的手疼,不過也積累了很多的經驗,上線了好開心!
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn