首頁

如何從0到1建立設(shè)計規(guī)范

資深UI設(shè)計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


最近一段時間一直在建立APP的設(shè)計規(guī)范,從一開始的立項到現(xiàn)在落地上線,可以說是從零開始進行APP全部細(xì)節(jié)的梳理并且規(guī)定規(guī)范,這一路走過來還是能總結(jié)出很多心得,本文將分為3個部分,闡述如何從0到1建立設(shè)計規(guī)范。


目錄:

一、如何確定內(nèi)容,規(guī)范里要寫什么

二、如何寫

三、如何推動規(guī)范落地


一、如何確定內(nèi)容?


這里我總結(jié)了三步:


Image title



1)確定目標(biāo)用戶、用戶目標(biāo)、設(shè)計目標(biāo)

根據(jù)不同的用途和目標(biāo),不同的團隊對設(shè)計規(guī)范的制定是不一樣。比如為了指導(dǎo)與規(guī)范全球第三方開發(fā)者進行設(shè)計和開發(fā),Google建立的Material Design覆蓋面廣,每個組件細(xì)節(jié)寫得非常細(xì)致。Ant Design則是直接做出了組件,方便直接進行調(diào)用。有些國內(nèi)設(shè)計團隊的規(guī)范則是主要描述常用控件和色值。因此我們需要確立用戶目標(biāo)和設(shè)計目標(biāo),這樣才能確定我們的規(guī)范側(cè)重點是什么,需要做成怎么樣的形式。


在這里我列舉了自己撰寫規(guī)范時的用戶與目標(biāo):


Image title



2)模范大平臺,先列全

一個規(guī)范里面的東西是很多的,那么我們究竟需要做什么呢?假如一開始我們沒有方向,找一個,列一個,這樣我們很容易疏漏很多情況。在這里我采用的的一個辦法是:首先熟讀iOS,Material Design規(guī)范,并且模范他們,在腦圖中,把規(guī)范中應(yīng)含有的所有內(nèi)容羅列出來,羅列一個大綱。


這里我列舉當(dāng)時自己做的一個腦圖大綱,覆蓋了主流規(guī)范中的所有細(xì)節(jié),大家可以進行參考并模仿:

Image title



3)針對自己情況進行刪減

列完齊全的大綱后,我們需回顧設(shè)計目標(biāo),對大綱里的內(nèi)容進行刪減。(比如在組件、模式這些地方,可以對著自己的APP,進行挨個尋找,看自己的APP當(dāng)前是不是運用了這個組件,沒有的話就進行刪減。)


在這里我列舉了針對自身APP的情況刪減后的大綱圖:

Image title

二、如何寫

進過了以上的三步,我們基本得出了要寫什么的框架了,接下來就是如何寫規(guī)范的階段。


這里我總結(jié)了3步:

Image title


1)確定優(yōu)先級

我們可以通過版本迭代計劃+性價比+重要性(該組件在頁面出現(xiàn)的場景次數(shù)以及當(dāng)前的不統(tǒng)一對APP體驗影響程度)這幾個維度分別確定每塊內(nèi)容的優(yōu)先級和分工。基礎(chǔ)的、必要的、高性價比的放在第一期,復(fù)雜的向后放,隨著產(chǎn)品的迭代,我們的規(guī)范也會越來越完整。


同時需要留意版本規(guī)劃,了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內(nèi)容的優(yōu)先級。龐大復(fù)雜,牽涉到很多頁面的,我們可以先降低其優(yōu)先級:比如全局提示框的規(guī)范,toast的規(guī)范。


同時,我們也需常與開發(fā)溝通,爭取把可復(fù)用性高、組件日后變化幅度少的組件做成開發(fā)組件庫。


2)確定規(guī)范書寫格式

我們制定的規(guī)范本身也是設(shè)計的交付物,假如每個設(shè)計師都按照自己的喜好來編寫規(guī)范,那么這個規(guī)范本身也會變得不規(guī)范,規(guī)范自身保持一致性是提高規(guī)范閱讀效率的一部分。


我們可以回歸我們之前制定的用戶目標(biāo)和設(shè)計目標(biāo)來制定我們規(guī)范的書寫格式。規(guī)范的用戶群是誰,主要想達(dá)到什么作用,是通過文檔展示還是網(wǎng)上展示,確定了這些問題后,就可確定規(guī)范的詳細(xì)程度、主要的展示形式(比如前文說到的Ant Design和Material Design)。


這里我的思考點是:假如規(guī)范寫太多字就會變得很臃腫,沒有人喜歡慢慢仔細(xì)的閱讀你寫的規(guī)范,所以我們應(yīng)該做到寫得簡明扼要,再輔以例子說明(根據(jù)開發(fā)的習(xí)慣,都是喜歡直接看例子,看標(biāo)注)。


我的書寫格式是:先寫描述這個組件是什么,再列舉出現(xiàn)的場景,然后編寫交互規(guī)則,最后給出視覺標(biāo)注+例子。


3)逐步對單個規(guī)范進行整理與書寫

當(dāng)確定了要寫什么東西和格式之后,我們開始進入到細(xì)節(jié),對每個內(nèi)容進行整理,制定規(guī)范了。


通過對每個內(nèi)容制定規(guī)范規(guī)范也是有方法的:


Image title


下面我通過整理“列表”這個規(guī)范來講解:


1.收集出現(xiàn)的所有的場景。

當(dāng)一個產(chǎn)品已經(jīng)趨于成熟,這個組件出現(xiàn)的場景就會非常多,比如對話框,toast,列表這些組件出現(xiàn)的地方很多,需要我們自己仔細(xì)地體驗產(chǎn)品,把所有頁面都找出來。


2.提取共性,歸納分類

我們需要分析每個頁面的特點并且把相同特點的頁面歸納一起,眾多的頁面場景就能整理成幾個典型的種類,然后只需對這幾個典型的種類進行定義和描述即可。

在列表中,我分為了大封面列表、小封面列表、用戶列表、單行列表


3.編寫規(guī)則

在分類好后,我們可以對每個種類編寫規(guī)則,在這里我們需要描述好每個種類有什么特點或?qū)傩裕裁磿r候場景下適用,并且給出標(biāo)注和例子,方便閱讀者理解。


4.多與組內(nèi)成員討論修改

在制定好初稿后,我們可以與組內(nèi)成員宣講下自己制定的規(guī)范。多從別人的角度出來,確保你編寫的規(guī)范是否易懂,是否包含了全部的情況,是否容易執(zhí)行落實。


三、如何推動規(guī)范落地

寫完內(nèi)容后,最重要的一步就是推動落地,規(guī)范要真正有人用才能體現(xiàn)價值,在這里我給出幾點幫助推動規(guī)范落地的小建議:

1.制定規(guī)范推進進度表

表格里面應(yīng)該包含規(guī)范制定的優(yōu)先級,分工進度,分工人員,并且確定每一期進度的交付時間,開會討論的時間,作為負(fù)責(zé)人,也可以適時提醒成員每次的開會時間(畢竟deadline是第一生產(chǎn)力)。


2.編寫過程中多與其他成員討論,達(dá)成一致性共識

制定規(guī)范后,與部門其他人員進行宣講,灌輸概念,針對如何更好的落實進行討論調(diào)整。在設(shè)計中都不可能一次就完美,我們需要不斷的在修改中逐漸完善。


3.規(guī)范建成后放在網(wǎng)上

同步在網(wǎng)上,方便部門內(nèi)的其他成員能隨時查看和團隊成員對規(guī)范的更新修改、同步。


4.強制性制定規(guī)則要求團隊成員執(zhí)行。

有明確的懲罰機制和要求才能更好的執(zhí)行,不然在規(guī)范制定后很容易健忘此事。(我們組的懲罰機制就是罰錢)。


5.規(guī)范保持持續(xù)的更新迭代。

規(guī)范推動落地后并不是完全了事,要根據(jù)產(chǎn)品的迭代,保持規(guī)范的更新。

這整個制定規(guī)范的項目中,還是有不少反思的地方,值得我們深思和注意:


1.切記不要為設(shè)計規(guī)范而做規(guī)范

規(guī)范最重要的點是能推動落地,能確確實實改善產(chǎn)品,達(dá)到統(tǒng)一性。因此我們在設(shè)計規(guī)范時,并不需要“高大上”術(shù)語,給出一大堆的設(shè)計理念用來提升設(shè)計逼格。而是真正的回歸到我們的設(shè)計目標(biāo),針對目標(biāo)用戶制定規(guī)范,做到簡樸、易懂、能落地。

2.沒人愿意閱讀長篇文字

我們應(yīng)該盡量控制文案長度,做到通俗易懂即可。

3.要時刻圍繞我們的目標(biāo)做規(guī)范

比如,我這次做的規(guī)范中有一項是去工具化,在制定控件中,空白頁面中就會加入很多趣味化的設(shè)計。


4.靈活變通

規(guī)范只是適合大多時候的場景,對于一些規(guī)范中沒有包含或者不符合規(guī)范的場景,我們可以靈活變通,積極創(chuàng)新或者是補充新的規(guī)范(前提是與組內(nèi)積極溝通,達(dá)成共識)。


總結(jié):

再來回顧如何從0到1建立規(guī)范


一、確定內(nèi)容

1.確定用戶目標(biāo)和設(shè)計目標(biāo)

2.模仿大平臺,列全

3.針對自己情況進行縮減


二、寫

1.確定優(yōu)先級

2.確定規(guī)范書寫格式

3.逐步對單個內(nèi)容進行整理與書寫:a.收集全部情況 b.分類歸納 c.提取共性,編寫規(guī)則

三、推動

1.制定規(guī)范推進進度表

2.編寫過程中多與其他成員討論

3.把規(guī)范建成后放在網(wǎng)上

4.強制性制定規(guī)則要求團隊成員執(zhí)行

5.規(guī)范保持持續(xù)的更新迭代


今天分享的內(nèi)容就是這些了,希望能幫助到大家,感謝閱讀~



藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。


用Airbnb 的產(chǎn)品,幫你快速理解尼爾森10大可用性原則!

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

本文聚焦 Airbnb 產(chǎn)品,描述10大可用性原則的應(yīng)用場景,希望能夠幫助你更系統(tǒng)地理解10大可用性原則。

一、系統(tǒng)狀態(tài)的可見性

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson

系統(tǒng)應(yīng)該在合理的時間內(nèi)通過適當(dāng)?shù)姆答?,始終讓用戶了解正在發(fā)生的事情。

這項原則通常被遵循并使用在如下幾個場景:

  • 系統(tǒng)導(dǎo)航、Toast。讓用戶明確知道「我在哪」;
  • 按鈕、圖片等元素可被交互的表達(dá)與反饋。通過視覺、與空間上的反饋,向用戶傳達(dá)頁面元素是可以被交互的,引導(dǎo)用戶前往下一站;
  • 用戶完成交互動作和系統(tǒng)操作后,系統(tǒng)需要給予用戶對應(yīng)的反饋。比如操作成功、完成注冊等;

Airbnb 的房源詳情頁頂部導(dǎo)航,可以通過點擊快速定位到房源的某類信息,讓用戶清晰地知道「我在哪?我還能去哪?」

在發(fā)布房源時,系統(tǒng)頂部模擬了進度條,顯示出了當(dāng)前步驟,以及當(dāng)前的發(fā)布進度。

二、貼近用戶的真實環(huán)境

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

系統(tǒng)應(yīng)該說用戶的語言,用戶熟悉的單詞,短語和概念,而不是系統(tǒng)導(dǎo)向的術(shù)語。遵循現(xiàn)實世界的約定,使信息以自然和合乎邏輯的順序出現(xiàn)。

這項原則說的直白一些,就是:「說人話」。

產(chǎn)品簡單到傻瓜也能操作,是喬布斯和張小龍做產(chǎn)品的核心理念。坐擁10億用戶的微信之父張小龍說過,做產(chǎn)品要有傻瓜心態(tài)。不要炫耀自己的智商,不要讓用戶覺得自己是白癡,請用最簡單直白的語言描述狀況;就好比自然世界里,你和他人說話的時候必然使用簡單的白話文進行直白的溝通以保證交流順暢。

在房源的詳情頁、Airbnb PLUS 介紹頁,系統(tǒng)用了大量高質(zhì)量的攝影圖片傳達(dá)一種空間氛圍感。同時,在介紹文案的措辭方面,簡潔易懂,語言邏輯清晰。

三、用戶有控制和來去自由的權(quán)利

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

用戶通常會錯誤地選擇了系統(tǒng)的某個功能,并且需要一個明確標(biāo)記的」緊急出口「來離開不想要的狀態(tài),而不必進行擴展對話。支持撤消和重做。

用戶擁有自由使用和控制系統(tǒng)的權(quán)利,最為常見的就是系統(tǒng)會為用戶提供「撤銷、重做、返回」的入口。

在故事專欄,當(dāng)用戶在瀏覽器當(dāng)前標(biāo)簽頁進入下一級頁面時,系統(tǒng)都為用戶提供了返回按鈕,一方面方便用戶來去自由,另一方營造出了一定的沉浸式瀏覽體驗。

四、系統(tǒng)的一致性

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson

用戶不應(yīng)該懷疑不同的話語、情況或行為是否在表達(dá)同樣的一件事情。系統(tǒng)設(shè)計需遵循平臺慣例。

  • 移動端 APP 內(nèi)的返回按鈕位置通常會被放在左上角,當(dāng)然有些 APP 會將返回按鈕統(tǒng)一放在左下角,雖然返回按鈕的位置不同于大多數(shù) APP,但對于此 APP 的返回交互來說,其實還是一致的;
  • 除常用按鈕位置需要符合一致性原則外,icon 的視覺設(shè)計也要遵循一致性原則,一個對象對應(yīng)一個 icon.

在房源、故事集列表頁,系統(tǒng)統(tǒng)一用了卡片式的視覺風(fēng)格,并且每個卡片里的文字與背景圖片的層次也都保持一致。

在房源詳情頁,系統(tǒng)使用了統(tǒng)一的 iocn 風(fēng)格和文字風(fēng)格,傳達(dá)房源的設(shè)施屬性。

五、防止錯誤

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

比良好的錯誤提示信息更好的方法是:一個走心的設(shè)計可以提前防止錯誤的發(fā)生。系統(tǒng)要么消除容易出錯的情況,要么檢查它們,并在用戶采取行動之前向用戶提供確認(rèn)選項。

  • 比如某些操作不能進行,那就置灰或隱藏,不要在用戶點擊后才提醒不能操作。如果有某些內(nèi)容不能選擇,就置灰或者隱藏,不要等用戶點擊完成時才告知不能使用;
  • 同樣,在用戶容易出現(xiàn)錯誤操作的場景下,需要給出二次確認(rèn),如:刪除和取消重要信息的操作。

如果房源在某天或多天已被預(yù)定或暫時不開放,則日歷里將這些不可預(yù)定的日期置灰。

用戶在修改個人重要信息后,系統(tǒng)會讓用戶輸入密碼二次確認(rèn)。

六、系統(tǒng)識別勝過用戶記憶

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

通過使用對象,動作和選項的可視化表達(dá),最大限度地減輕用戶的記憶負(fù)擔(dān)。用戶不應(yīng)該記住從對話的一部分到另一部分的信息。

  • 為用戶保留查看和搜索歷史是一個很常見的系統(tǒng)識別的例子;
  • 用戶在填寫一個長頁面表單時,系統(tǒng)可以根據(jù)實際情況提供一個實時預(yù)覽的功能,避免出現(xiàn)用戶填了下面忘了上面的情況;
  • 用戶在填寫完表單(比如訂單頁面)后,系統(tǒng)可以再次向用戶展示所填信息,以最終確認(rèn);
  • 用戶為了完成一項目標(biāo)任務(wù),從一個頁面跳轉(zhuǎn)到另一個頁面后,系統(tǒng)可以再次展示上一個頁面內(nèi)與目標(biāo)任務(wù)相關(guān)的核心信息,以減輕用戶的記憶負(fù)擔(dān)。

系統(tǒng)會在首頁第一屏為用戶展示瀏覽歷史(登錄后)。

搜索框也會保留最近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

一些被精心設(shè)計的體驗也許會被專家用戶察覺到,使系統(tǒng)需要能夠滿足無經(jīng)驗和有經(jīng)驗的用戶。允許用戶進行頻繁的操作。

當(dāng)用戶在滾動屏幕瀏覽房源詳細(xì)信息時,系統(tǒng)將預(yù)定的基本信息(如:價格、日期、人數(shù)等)固定在瀏覽器的右側(cè),方便用戶在瀏覽過程中隨時開始預(yù)定步驟。

八、美觀和簡約的設(shè)計

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

對話中不應(yīng)該包含無關(guān)緊要或很少需要的信息。在對話中每增加一個相對重要的信息,就意味著需要弱化其他信息。

高顏值不需要理由。

九、幫助用戶識別,診斷,并從錯誤中恢復(fù)

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

錯誤信息應(yīng)該用通俗易懂的語言表達(dá)(不要用代碼),較準(zhǔn)確的反應(yīng)問題,并且提出解決方案。

實在無法避免的報錯時,不要單純只是報錯,要提供解決方案。就好比小時候犯錯,你絕不能光說:「啊,我錯了?!估蠋熁蚣议L必然會追問:「錯哪兒啦?」你要是說不出緣由,則必定被認(rèn)為認(rèn)錯不誠懇不真心。

當(dāng)用戶填寫錯誤時,系統(tǒng)會及時給出提示以及解決方法。

十、幫助文檔

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

如果系統(tǒng)能讓用戶不需要閱讀文檔就會使用那是最好的,但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索,且專注于用戶的目標(biāo)任務(wù),并列出具體的步驟來告知用戶。

  • 對于一些可以用一句話說清楚的幫助,可以直接在對象旁邊提供鼠標(biāo)懸停出發(fā)的 tips,或者簡明的輔助說明;
  • 對于較復(fù)雜的,一兩句話說不清楚的幫助,則需要跳轉(zhuǎn)至對應(yīng)的幫助頁面;
  • 系統(tǒng)需要有一個幫助中心,為用戶提供模糊搜索、分類搜索,來為用戶提供更全面的幫助。

在個人資料頁面,對于用戶關(guān)心的隱私信息,系統(tǒng)會給出非常有親和力的解釋文案。此外,在系統(tǒng)很多頁面都有對應(yīng)功能的幫助鏈接以跳轉(zhuǎn)至幫助中心。

系統(tǒng)的幫助中心,提供了搜索和問題分類引導(dǎo),方便用戶快速定位問題。

△ 本文圖片版權(quán)歸 Airbnb 所有

總結(jié)

號稱以設(shè)計驅(qū)動的 Airbnb 公司,的確在產(chǎn)品設(shè)計、用戶研究、UX設(shè)計方面展現(xiàn)出了較高的功力。網(wǎng)站甚至移動端APP 的框架層、范圍層、視覺層的設(shè)計都體現(xiàn)出了高度的用戶體驗一致性和品牌感??梢钥闯?,Airbnb 對 design system 的重視一級高度的執(zhí)行力。什么是好的產(chǎn)品品牌認(rèn)知和識別,我可以簡單的理解為:「脫掉」Logo,用戶照樣認(rèn)識你。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計  cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

掉進這6個陷阱,可能會毀了你的原型設(shè)計!

資深UI設(shè)計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


很難想象,如果沒有原型設(shè)計,如今的數(shù)字產(chǎn)品設(shè)計流程會變成什么樣。原型的存在,讓產(chǎn)品團隊在制作和開發(fā)過程中更加直觀,就像那句話說的:展示,而非表述。

現(xiàn)如今,許多產(chǎn)品團隊借助原型來測試想法,甚至銷售產(chǎn)品。不過,原型設(shè)計本身并非是萬無一失的,設(shè)計師依然會面臨許多陷阱,并且拖累整個產(chǎn)品的進程。

今天的文章,總結(jié)了6個常見的原型設(shè)計的陷阱。

1. 目標(biāo)不明確的原型設(shè)計

我們先設(shè)計出來,然后弄明白如何使用它。

在這種說法的指引下,設(shè)計和開發(fā)團隊需要花費大量的時間來處理那些沒有任何價值的事務(wù),在沒有特定目標(biāo)的情況下制作原型,會浪費大量的時間。

每個原型的設(shè)計目標(biāo)應(yīng)該是非常明確的,原因應(yīng)該是清晰的。這個目標(biāo)可以是源自于一個特定的想法,或者某種假設(shè),產(chǎn)品團隊在這個方向的指引之下,利用系統(tǒng)化的知識來構(gòu)建符合目標(biāo)的原型。

在創(chuàng)建原型之前,設(shè)計師應(yīng)該問自己一個問題,「通過創(chuàng)建這個原型我們要試圖解決什么問題?」如果能夠找到一個明確的答案,那么這個原型是清晰且具有凝聚力的,有助于減少潛在的開銷。

2. 制作原型過程受阻

產(chǎn)品團隊通常會力圖制作出有效有用的原型。當(dāng)制作出來的原型不可用甚至根本無法完成的時候,整個團隊會為之氣餒,而這種消極的心態(tài)可能會拖垮整個項目。

為了提率,設(shè)計人員應(yīng)當(dāng)將失敗的情況視作為整個原型制作過程中自然的組成部分。原型在很多時候是用來測試假設(shè)和想法的,并非每個假設(shè)都是有效的。這就是為什么創(chuàng)建工作原型不應(yīng)該是原型制作工作最重要的結(jié)果。原型制作工作最重要的成果應(yīng)該是獲取有用的信息和新的知識。因此,將焦點從失敗的情緒上,轉(zhuǎn)移到學(xué)習(xí)新的知識上來,成功和失敗的原型,都能夠讓你的產(chǎn)品進步。就像大家常說的,失敗是成功之母。

3. 對第一個想法精雕細(xì)琢

產(chǎn)品團隊常常在擁有第一個想法的時候,就想堅持住,將它打磨成為最終的解決方案。隨后,團隊花費大量的時間來出揣摩嘗試,調(diào)整細(xì)節(jié),制作原型,甚至直接開始設(shè)計視覺稿。

結(jié)果,花費無數(shù)小時創(chuàng)建和打磨的原型,在可用性測試早期,就呈現(xiàn)出不理想的狀況,接下來,設(shè)計師和團隊會意識到最初的想法其實不夠好。

經(jīng)驗豐富的團隊知道,想要探索和測試一系列的想法是必不可少的,并且只有通過測試之后,效果最好的方案,才是值得堅持做下去的。花費更多的時間來思考,團隊才能針對問題空間繼續(xù)挖掘下去,并且找到潛在的解決方案。

4. 愛上你的原型

原型的設(shè)計者常常會對于自己的設(shè)計有大量的投入。這種投入是會造成一種「投資偏見」——你在某個事情上花費的時間越多,它對你來說就越有價值。值得注意的是,它對于你的價值會越來越高,但是對于別人而言并非如此。而原型設(shè)計同樣如此,當(dāng)設(shè)計師對于自己的原型過度沉迷的時候,產(chǎn)品可能就會暴露在危險之下了:你會很容易忽略它們存在的缺點,即使這些缺陷很明顯,設(shè)計師也會忽略團隊成員和其他人的反饋。

不要拿原型當(dāng)傳家寶。

在打磨原型上花費太多寶貴的時間和精力,會剝奪設(shè)計師對于反饋應(yīng)有的注意力和敏銳度。讓你的原型在細(xì)節(jié)和復(fù)雜度上保持在一個合理的度上。

原型并不是藝術(shù)品,它應(yīng)該是幫你找到答案的工具。

如果你傾向于采用盡可能完善的設(shè)計,那么請采用最小可行原型——添加足夠的細(xì)節(jié),但是盡可能確??尚?。將原型視作為一次性的工具。每個原型都有特定的用途,一旦達(dá)到目標(biāo),就盡可能用更好的東西替換它。

5. 忽略草圖的重要性

「當(dāng)我們擁有強大的原型工具的時候,為什么還要使用紙和筆呢?」設(shè)計師跳過手繪階段,并且直接使用計算機來繪制數(shù)字原型的時候,他們相信數(shù)字化的設(shè)計是可以節(jié)省時間的。但是實際上,手繪的草圖能夠幫助設(shè)計更快地起步。

當(dāng)你下次不知道如何解決問題的時候,可以試著從筆和紙開始繪制草圖。只需要開始繪制草圖,勾勒出所能想到的變化,然后把它們貼在墻上,并且和你的團隊一起從技術(shù)和業(yè)務(wù)的角度上討論可行性。

6. 為原型選擇錯誤的保真度

保真度是描述細(xì)節(jié)程度的一種度量,我們常說的線框圖細(xì)節(jié)簡略,是低保真的,而視覺稿則常常會用到豐富的細(xì)節(jié)刻畫,它是高保真的。原型的呈現(xiàn)形態(tài)是非常多樣的,可以是低保真的也可以是高保真的。制作一個高保真的原型是非常誘人的,但是一定要抵制住這樣的誘惑。值得注意的是,原型的保真度應(yīng)該和你想法的保真度相匹配。

這意味著,設(shè)計師應(yīng)該根據(jù)他們的設(shè)計過程所處的階段來選擇保真度。當(dāng)設(shè)計師違反這一規(guī)則的時候,往往會帶來糟糕的結(jié)果。比如過高的保真度會讓處于早期階段的設(shè)計師陷入「投資偏見」。

當(dāng)團隊設(shè)計產(chǎn)品尚且處于初期的時候,盡量采用低保真的策略來進行繪制,比如使用草圖。

△ 低保真的草圖原型

當(dāng)你想要與真實的用戶一起測試你的想法的時候,盡量使用保真度更高的設(shè)計,比如數(shù)字化的可交互的原型。使用高保真的原型來進行可用性測試,能夠產(chǎn)生更真實、具體的反饋。高保真的原型展示給利益相關(guān)者來看也非常有用,他們會更好地判斷產(chǎn)品的功能和內(nèi)容。

△ 在 Adobe XD 中創(chuàng)建高保真的原型

因此,考慮最終的目標(biāo)和你所擁有的時間,來確保原型的最佳保真度,盡早與期望達(dá)成一致。

結(jié)語

原型設(shè)計在每個產(chǎn)品設(shè)計項目當(dāng)中都是至關(guān)重要的,正確地設(shè)計原型,才能盡早地構(gòu)建真實的產(chǎn)品。

One more thing

關(guān)于原型設(shè)計,喬布斯在1992年 MIT 的演講上說到的一個事情非常有意思。彼時,他還未回歸蘋果,而是在制造名為 NeXT 的高端電腦,并且對于面向?qū)ο缶幊逃兄鴺O高的熱忱。

我們已經(jīng)有2年時間沒有構(gòu)建任何工程上的原型了。這意味著,從產(chǎn)品開始設(shè)計的第一天,工程師和整個制造業(yè)就已經(jīng)參與進來了。很多時候,在構(gòu)造原型的時候,生產(chǎn)工具和技術(shù)根本是無法與之匹配的,而當(dāng)你在原型設(shè)計的時候所積累的東西,在投產(chǎn)的時候就得完全拋棄,然后重新開始。因為我們始終緊密地和技術(shù)結(jié)合起來做,因此我們不會拋棄任何東西,并且不浪費時間,這也是我所見過的設(shè)計、工程和制造團隊之間,最健康的關(guān)系之一。

現(xiàn)如今,身為設(shè)計師的我們在使用 Photoshop、InVision 等工具制造原型的時候,實際上開發(fā)可能是與之脫節(jié)的。產(chǎn)品團隊中,設(shè)計和開發(fā)之間的矛盾,從來沒有僅此減少過。而「全棧設(shè)計師」這一概念的提出,又何嘗沒有來自這種矛盾的壓力呢?

諸如 Sketch 和 Figma 這樣的新工具在做原型設(shè)計的時候,已經(jīng)或多或少地開始在設(shè)計和開發(fā)之間找到協(xié)同的點,試圖在設(shè)計驗證和技術(shù)驗證之間,找到結(jié)合的辦法。

更好的原型設(shè)計,更合理的技術(shù)和設(shè)計的結(jié)合點,這也許是我們未來的探索方向吧。


藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


想用設(shè)計化腐朽為神奇,你得先想明白這10個問題

資深UI設(shè)計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


今天的譯文同樣來自設(shè)計師 Eugen E?anu,他將經(jīng)典設(shè)計書《Don‘t Make Me Think》中的內(nèi)容梳理出來供你參考。這些老問題依然能夠給我們今天的新局面以啟發(fā)。

「好設(shè)計應(yīng)該是顯而易見的」,這句老話在過去的幾個世紀(jì)當(dāng)中影響到了各個不同的領(lǐng)域,從美食到音樂,從建筑到哲學(xué),我們?nèi)缃竦纳顜缀跏窃谶@句話的影響下被逐漸被塑造出來的。

但是同樣的,人類的進化并沒有我們想象中那么快速,我們的思維和本能仍然被深刻地影響著我們的決策。換句話來說,人類的行為模式有著很長的保質(zhì)期,在許多事情上,20年前很難做,在今天依然不那么容易去執(zhí)行。

重溫《Don’t Make Me Think》

Steve Krug 的這本《Don’t Make Me Think》中文譯本名字是《點石成金:訪客至上的網(wǎng)頁設(shè)計秘籍》,譯名可能沒有它的原名那么直接,但是也傳遞出這本書所要表達(dá)的核心概念。

這本書成于2000年第一次互聯(lián)網(wǎng)泡沫時代之后,Krug 在這次浪潮之后提出了不少實用的設(shè)計原則,直到今天仍然有著極高的價值。這本書隨后多次再版和修訂,其中的設(shè)計案例幾經(jīng)迭代升級,我們可以看到現(xiàn)代網(wǎng)頁設(shè)計的提升和進步,同時也能從中感受到,用戶——人類行為本身的模式化?!冈L客至上」的表述太過客氣,「不要讓我思考」這一表述更能表現(xiàn)用戶行為的特征,而今天我們所面對的絕大多數(shù)的優(yōu)秀產(chǎn)品,無論是手機電腦還是汽車,同樣遵循著這一原則。

這本書的成功是建立在無數(shù)痛徹心扉的教訓(xùn)之上,這也使得它本身的價值無與倫比。今天的文章本質(zhì)上也是一篇讀書筆記,設(shè)計師應(yīng)該對于用戶、人性有足夠的認(rèn)知,方可作出足夠優(yōu)秀的設(shè)計。下面的10個總結(jié),既是常見的認(rèn)知錯誤,也是成就好設(shè)計的契機,就看你怎么把握了。

1. 對于內(nèi)容,用戶從來都是掃視,而非用心閱讀

當(dāng)我們在查看內(nèi)容和信息的時候,絕大多數(shù)情況下我們都會下意識尋找讓自己感興趣的東西。比如,我們很少會完整地瀏覽網(wǎng)站上所有的文本和內(nèi)容,為什么?絕大多數(shù)的用戶打開網(wǎng)站都是在試圖完成某項任務(wù),達(dá)成某個目標(biāo),而網(wǎng)頁中的不同部分的內(nèi)容往往是服務(wù)于不同的功能和目標(biāo)的,我們努力達(dá)成目標(biāo)即可,并沒有閱讀全部的必要。不過,作為網(wǎng)站的設(shè)計者,我們往往還是提供了足夠豐富的內(nèi)容和完善的功能,一方面是因為我們覺得人們需要知道,另一方面也是應(yīng)對不同用戶的需求。正如有的設(shè)計師所說的,它們「增加了體驗」。

所以,通常而言,我們可以作出下列優(yōu)化:

  • 大量使用標(biāo)題:通過標(biāo)題告訴用戶這些內(nèi)容都是和什么相關(guān)的,確保用戶能夠在掃視的時候快速明白并做選取。
  • 保持段落精簡:在長段落中,用戶可能稍分神就迷失了,而短段落更容易閱讀,也更容易汲取其中的信息。
  • 使用列表展示:幾乎所有的信息都可以分割為列表來展示,甚至一個使用多個逗號分割的句子,都可以制作成為列表。當(dāng)然,值得注意的是,注意列表之間的行間距,確保可讀性。
  • 突出關(guān)鍵信息:用戶在掃視的時候,主要是在定位關(guān)鍵詞。將關(guān)鍵詞使用粗體等方式標(biāo)注出來,便于用戶掃視和定位。不要強調(diào)太多的內(nèi)容,這樣會失去強調(diào)的作用。

2. 創(chuàng)建卓有成效的視覺層次

視覺層次是確保用戶快速掃視能夠獲取到信息的重要助力。視覺層次能夠呈現(xiàn)出頁面中不同元素之間的優(yōu)先級和關(guān)系,在設(shè)計的時候,同樣需要遵循下面的幾個原則:

  • 重要性越高,越突出。最重要的元素,要么越大,要么越醒目,使用特定的色彩標(biāo)注出來。
  • 在邏輯上有關(guān)聯(lián)的元素,在視覺上應(yīng)該相關(guān)的,例如使用相同的色彩或者相同的視覺樣式。

3. 不要重新發(fā)明輪子

我們明白,用戶總會期望看到新東西,但是,市面上有太多的工具和應(yīng)用,如果各行其是,忽略約定俗成的規(guī)則,特立獨行地采用自己的規(guī)則,會讓每個應(yīng)用的學(xué)習(xí)成本都提高,這對于用戶幾乎是毫無益處的。

當(dāng)設(shè)計師被要求設(shè)計某個東西的時候,內(nèi)心是充滿重新發(fā)明的沖動的,這個我們都明白。而設(shè)計出和別人相似的東西看起來又有點「政治不正確」,甲方總會希望設(shè)計作出點不一樣的東西。更何況,這還是一個少有鼓勵和贊揚的行業(yè),也很少為「最貼合用戶需求」的產(chǎn)品頒設(shè)計獎。

但是設(shè)計仍然需要在各方之間作出最佳的平衡。

在重新發(fā)明輪子之前,你必須了解破壞和創(chuàng)新所意味著的真實的價值(時間,體驗,耗費的精力和所需的知識)。

4. 產(chǎn)品說明沒必要存在了

我們的工作是要讓產(chǎn)品清晰明了,讓事情便捷易行。即使做不到明顯,也應(yīng)該盡力向著不言自明的設(shè)計靠攏。說明書這種東西是沒有人會主動去看的,它們的存在意義本身就不大,你需要通過合理的設(shè)計,讓產(chǎn)品本身發(fā)揮指引性的效果。即使說明書必須存在,也盡量讓它簡短明了。

如果功能并不明顯,我們應(yīng)該盡量讓它明顯一點,讓目標(biāo)更明顯。

以宜家為例,一個需要買回家組裝的柜子,絕大多數(shù)的用戶可以在簡短的指引之下就可以輕松正確地組裝,為什么?因為絕大多數(shù)情況下,一個柜子長什么樣,用戶眼前有清晰的畫面,哪怕說明只有幾張簡單的圖片,用戶也不會犯錯。

5. 用戶并不在意產(chǎn)品是怎么運作的

絕大多數(shù)的用戶并沒有興趣了解你的產(chǎn)品的工作方式,并不是因為他們不夠聰明,僅僅是因為他們不在乎。所以,一旦他們確定你的產(chǎn)品是能用的,就很少會去注意其他的部分。

以蘋果的無線耳機 AirPods 為例,從價格上來說,它并不親民,但是它的交互方式和使用體驗確實非常的獨特和優(yōu)秀,這也不難理解許多用戶會選擇它。用戶在購買它之后,并不會去思考它是如何運作的,其中所包含的諸多新技術(shù),對于用戶而言,只是潤物細(xì)無聲地發(fā)揮著作用而已。

我的母親就使用的 AirPods ,她從來不會問我它的原理,但是她很清楚,耳機需要放在充電盒中充電,和手機配對之后就能用了,并不復(fù)雜。

6. 來去匆忙的人們,從不主動尋找「微妙的線索」

這一條可能是我最喜歡的。我們設(shè)計師總喜歡為用戶帶來微妙的視覺效果,來給用戶帶來樂趣。對吧?可是如果我告訴你,用戶并不關(guān)心它們,你會怎么想呢?他們也根本不會告訴你他們有多在意或者多不在意,也不會在一次又一次看到的時候?qū)τ谶@些設(shè)計有多少感覺。

為什么會這樣?生活環(huán)境賦予每個用戶以復(fù)雜多變的情境,他們很少有機會去感受微妙的設(shè)計所帶來的奇妙情緒。風(fēng)在吼,狗在叫,小孩還在滿屋跑,水壺里面水開了,老婆在耳邊抱怨著工作中的細(xì)微末節(jié),而你正在填寫著表單準(zhǔn)備預(yù)訂明天的高鐵票,在那個時刻,APP 當(dāng)中微妙的動效和視覺線索,手一抖,你可能還會多買一個沒有必要的捆綁銷售的酒店折扣券。

但是另外一方面,對于優(yōu)秀體驗的追求不應(yīng)該因此而放棄,還有很多用戶會從中受益,這也是促成優(yōu)秀產(chǎn)品的必須因素。只不過確實有很多用戶沒法去在意它們罷了。

7. 焦點小組的任務(wù)不是做可用性測試

焦點小組是做什么的?一小群人圍坐在桌子旁邊,討論他們對于產(chǎn)品的看法,他們過去的經(jīng)歷,它們的感受和對于新概念的理解。焦點小組的作用是幫你更好地界定目標(biāo)用戶,目標(biāo)用戶的感受等等。

可用性測試則是另外一回事。做可用性測試的時候,通常是為了測試產(chǎn)品而觀察一個特定的用戶使用產(chǎn)品的過程。在測試中,你需要測試人員執(zhí)行特定的操作,以此來查看整個設(shè)計中的概念是否直觀,功能是否需要完善。面對焦點小組的時候,你需要傾聽觀點,梳理思路,在進行可用性測試的時候,更多需要的是觀察,并且解決具體的問題。

8. 不要讓個人情感替代整個用戶歷程

我們在設(shè)計產(chǎn)品的時候,常常會從自己的需求出發(fā):「我也是一個用戶,所以我知道什么好什么不好?!刮覀儗τ谧约旱南埠糜兄鴱娏业母惺?。

我們會說,當(dāng)我們的產(chǎn)品具備_____的時候,我們會很喜歡,又或者,我們認(rèn)為_____是一個巨大的痛點。當(dāng)我們真正和團隊成員坐在一起討論產(chǎn)品的時候,大家都有各自的看法和各自的情緒,所有人的都有著極強的個性和獨特的看法,這個情況就很尷尬了。因為我們常常會傾向于認(rèn)為絕大多數(shù)的用戶和我們自己一樣。事實上并不一定如此。

9. 問對問題,才能讓產(chǎn)品走向?qū)Φ姆较?

無論是設(shè)計產(chǎn)品功能還是測試產(chǎn)品的時候,問對問題都很重要。測試的時候,問用戶「你們喜歡下拉菜單嗎」這樣的問題,不僅銷量不高,而且不會帶來價值。這個問題,應(yīng)該這么問:「在這個情況下,在這個頁面上,下拉菜單這種設(shè)計是否能夠給你帶來良好的用戶體驗?哪里讓人覺得不舒服?」

諸如「用戶喜歡這個產(chǎn)品嗎」這樣寬泛的問題意義不大,用戶也很難提供針對性的、具體的回復(fù)。

而且,作為設(shè)計師我們不應(yīng)當(dāng)專注于用戶是否喜歡這樣的問題,這樣會失去動力和專注力??捎眯詼y試可以幫你消除各種「喜歡」相關(guān)的問題,并且?guī)湍阏业秸嬲龅氖虑?。這才是重點。

10. 不要讓用戶思考問題

我在哪?我要干嘛?

我應(yīng)該點哪里開始?

他們在這放的這個控件是干啥的?

這個頁面是用來做什么的?

他們?yōu)槭裁催@么稱呼這個功能?

這個是廣告還是內(nèi)置的功能?

在使用產(chǎn)品的時候,如果觸發(fā)用戶大腦中的各種問題,只會增加用戶的心理負(fù)荷和工作量,分散用戶注意力并不是好事,而且用戶本身并不喜歡解決各種難題。

每當(dāng)用戶點擊某個控件而不起作用,或者它看起來是個鏈接實際上并不是,會消耗用戶對你的信任感,降低產(chǎn)品的可靠度。

One more thing

炫酷的概念和新穎的趨勢不僅吸引用戶,同樣是設(shè)計師的心頭好。但是我們在新的時代,新的局面之下,始終面對的是以往的用戶,看似千變?nèi)f化的需求背后是不變的人性。

至少《Don’t Make Me Think》這本書一直在探討的問題,經(jīng)過20年的世事變遷,幾次互聯(lián)網(wǎng)浪潮,在這個號稱互聯(lián)網(wǎng)4.0時代,仍然發(fā)揮著作用,依然是那么具有啟發(fā)性。

新狀況之下潛藏著老問題,想要洞悉本質(zhì),設(shè)計師要懂心理學(xué)和行為學(xué)。在之前的幾篇文章當(dāng)中,我一直在試圖梳理出不會隨著時間改變,而一直存在的、亟待解決的問題以及可供使用的原理。

《為何如今的產(chǎn)品總給人千人一面的感覺?》揭示的是「特征蔓延」和「競爭驅(qū)動式設(shè)計」是如何讓產(chǎn)品走向平庸和毀滅,解決方案藏在結(jié)尾。

《熟知用戶行為的這7個層面,你的設(shè)計才會走進人心》則介紹了唐納德諾曼的用戶行為的7個層面,這是一套分析用戶行為,設(shè)計產(chǎn)品流程的有效方法,擁有持久生命力的產(chǎn)品的設(shè)計策略,和這套方法不謀而合。

《這7種廣泛存在的認(rèn)知偏差,影響了我們太多的決策》 則幫你梳理了7種常見的認(rèn)知偏差,認(rèn)識自己了解用戶,這些知識能消除誤解,同樣能夠幫你洞悉真相,是不可多得的利器。

設(shè)計的方法和工具成千上萬,想明白道理,問對問題,接下來的路更容易走通。


藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。



ofo《我們看過的世界杯》H5

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

項目背景:為了配合世界杯做的H5活動,主題是DIY你的世界杯時刻                                      

玩法:選擇自己看世界杯的場景,可以在畫面當(dāng)中添加食物和自定義的小元素,另外根據(jù)場景的變換人物的腿也可以選擇哦                                                 

項目周期大概半個月,和團隊的小伙伴一起完成的,感謝@珊,@暖暖,@明明   

使用工具包括sketch、ps、手繪板                                                                    

 

ps:做H5真的是很累,工作量大,畫的手疼,不過也積累了很多的經(jīng)驗,上線了好開心!

請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標(biāo)定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)



經(jīng)驗總結(jié)!Material Design和iOS 產(chǎn)品設(shè)計的差異化思考

資深UI設(shè)計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

Material Design(以下簡稱MD)是谷歌設(shè)計的一套視覺語言設(shè)計規(guī)范,主要應(yīng)用于安卓類應(yīng)用。


iOS Human Interface Guidelines(以下簡稱iOS)是蘋果公司針對 iOS設(shè)計的一套人機交互指南,目的是為了使運行在 iOS 上的應(yīng)用都能遵從一套特定的視覺以及交互特性,從而能夠在風(fēng)格上進行統(tǒng)一。

相對來說,我們對于 iOS 的設(shè)計規(guī)范更加熟悉——因為考慮到成本,設(shè)計師進行產(chǎn)品設(shè)計的時候只會出一套 iOS 的設(shè)計稿,然后去適配安卓機型。

很少會針對安卓機型再出一套 MD風(fēng)格的方案,這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺采用了不同的設(shè)計語言,不同的設(shè)計語言會培養(yǎng)出不同的操作習(xí)慣。

例如使用安卓手機的用戶平時見到的都是 MD風(fēng)格的界面,突然下了一個 iOS風(fēng)格的應(yīng)用,那么操作起來就會很不習(xí)慣,增加了學(xué)習(xí)成本。

為了讓產(chǎn)品可以適用不同平臺用戶的操作習(xí)慣,提供 MD 和 iOS 兩套設(shè)計稿是非常有必要的。當(dāng)然 MD 和 iOS 的差異不是一篇文章就能說清楚的,這里我就從陰影、導(dǎo)航和配色這三個方面來簡單分析一下 MD 和 iOS 的差異。

一、陰影

對于不太熟悉 MD 的設(shè)計師來說,MD 意味著大色塊+陰影。

為什么 MD 如此癡迷于陰影?

從它的名字就可以看出來——Material Design,這里的 material 指的是紙張;因為來源于現(xiàn)實生活,所以 MD 非常喜歡使用真實世界元素的物理規(guī)律與空間關(guān)系來表現(xiàn)組件之間的層級關(guān)系,而陰影就是最常見的表現(xiàn)形式:

同樣的賬戶注冊,安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒有陰影。

FAB(Floating Action Button),帶有陰影的浮動操作按鈕甚至成為了 MD 的一大招牌。相比較而言iOS更加扁平化。

二、導(dǎo)航體系

產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成,而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS 的導(dǎo)航體系主要由底部欄菜單構(gòu)成,而 MD 大量使用了頂部欄菜單和側(cè)邊欄菜單。

下面我們來看幾個例子:

網(wǎng)易云音樂在 iOS 中采用的是底部欄菜單導(dǎo)航,而在安卓機型上導(dǎo)航欄被移到界面頂部,「賬號」被收到側(cè)邊欄中。

b站在 iOS 中有底部欄菜單有5個標(biāo)簽,而在安卓機型中只有4個標(biāo)簽,「我的」同樣被側(cè)邊欄收起來。

推特在 iOS 中使用的底部欄菜單導(dǎo)航,在安卓機型中導(dǎo)航欄被移到了頂部。

而 Apple Music 做的更徹底,在安卓機型上直接舍棄了底部菜單欄,采用了側(cè)邊欄作為主導(dǎo)航模式。

我們發(fā)現(xiàn)前兩款國產(chǎn)應(yīng)用在安卓機型上都保留了底部欄菜單,而后兩款國外應(yīng)用直接砍掉底部欄菜單。不只是 Apple music 和推特,很多國外的安卓類應(yīng)用都沒有使用底部欄菜單。而國內(nèi)的應(yīng)用因為考慮到 iOS,即使 MD 化也是閹割版的,屬于 iOS 和 MD 的混血兒。甚至很多安卓應(yīng)用在設(shè)計風(fēng)格上往 iOS 靠攏,以b站為例,其5.11之前的安卓版本中都是沒有底部欄菜單的。

當(dāng)然這里并不是去評價 MD 和 iOS 哪個導(dǎo)航體系更好用,我說下自己的觀點:

底部欄菜單的使用非常方便用戶在單手握持情況下的操作,但是對于大屏手機來說,單手操作會顯得很吃力。如果用戶改由雙手握持手機,那么從易用性上來說底部欄菜單沒有任何優(yōu)勢。

MD 的方案更加注重對界面空間的利用,側(cè)邊欄菜單就不說了。以底部欄菜單為例,在安卓機型中用戶滑動的時候底部欄菜單會隱藏,方便的用戶可以看下知乎,安卓版的底部欄用戶滑動的時候會隱藏,而 iOS 則是固定不動的。

側(cè)邊欄的優(yōu)勢還體現(xiàn)在可以提供更多的標(biāo)簽,底部欄菜單最多可以放5個。但是側(cè)邊欄菜單需要用戶點擊才能調(diào)出來,比較隱蔽,而底部欄和頂部欄相對來說就會顯得一目了然,總之各有千秋。

至于為什么 MD 會拋棄底部欄菜單,我個人的理解是設(shè)備原因。因為安卓機型底部有三個物理按鍵,如果采用底部欄菜單作為主導(dǎo)航模式,容易造成用戶誤點擊。

類似的還有 web 類應(yīng)用,因為瀏覽器的控件欄也在底部,所以如果采用了底部欄菜單同樣會造成用戶的誤操作。

三、配色

MD 提倡使用高飽和度的對比色來提升產(chǎn)品的視覺表現(xiàn)力,也就是我在上面提到的大色塊。同樣的一個功能,從底部欄背景色、插畫到按鈕,我們可以發(fā)現(xiàn) iOS 在色彩的使用上比較克制。

知乎之前的安卓版本使用了大面積的藍(lán)色,后來改成跟 iOS 一樣的白色。這樣的調(diào)整褒貶不一,有的用戶反饋這完全照搬了 iOS,要改回 MD。

產(chǎn)品界面設(shè)計中對比效果主要由配色、尺寸、間距和陰影來完成。MD 在配色和陰影上做的比較出彩,所以 MD風(fēng)格的產(chǎn)品在視覺表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新,追求扁平和簡潔。所以我們無法去評判這兩款設(shè)計規(guī)范的孰好孰壞,因為其各自的出發(fā)點就是不一樣的。

當(dāng)然前面也提到了 MD 和 iOS 的差異不僅僅體現(xiàn)在以上說的這三點,還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在 iOS系統(tǒng)中,用戶向右滑動的時候會返回上一級頁面。因為蘋果手機沒有物理返回按鍵,所以這種機制非常受歡迎,但是在一些特定場景的時候就會有問題。例如如果我想復(fù)制微博里的「一曲肝腸斷,天涯何處覓知音」,選中光標(biāo)從左向右滑動,這時就會返回上一級頁面,特別不方便。所以我只能從右向左進行復(fù)制,我后來試了一下微信和 QQ,發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動態(tài),這也算是一個折衷的方案。

總結(jié)

這篇文章并不是去評判 iOS 和 MD 兩種設(shè)計風(fēng)格孰好孰壞,也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計稿,這個目前來說也不太現(xiàn)實。很多國民類應(yīng)用都只采用了一套設(shè)計稿,大家都這么做,整個大環(huán)境就是這樣。

但是還是那句話:存在不一定合理。出兩套設(shè)計稿雖然現(xiàn)在看起來不現(xiàn)實,但是我們也要做好準(zhǔn)備,要有危機感。


藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

我用這個極限推敲法,有效推進視覺設(shè)計

資深UI設(shè)計者

每當(dāng)提到設(shè)計方法論時,總難免會給人一種比較虛空偏理論,或者說比較難應(yīng)用到設(shè)計實戰(zhàn)中的感覺;但是這一次,經(jīng)過了自己的實踐之后,我覺得確實有一個比較靠譜的視覺推進方法可以分享給大家,所以才有了這篇總結(jié)。

先直接概括一下這個方法,極限推敲法:遇到難題時,先把問題拆解成一個或者幾個維度,選取某個維度,往兩個極端進行嘗試,隨后逐漸中和極端方案,逐步找到自己想要的預(yù)期點,明確該維度的方向。

一、使用方法

  • 第一步,提煉一個或者幾個關(guān)鍵維度,作為嘗試的方向;
  • 第二步,優(yōu)先嘗試兩端極限的方案;
  • 第三步,進一步在其間琢磨并嘗試方案,直到找到符合預(yù)期的方案;
  • 第四步,若一直沒有滿意的方案,則可以繼續(xù)以某個方案為基準(zhǔn),精細(xì)微調(diào)方案進行探索;
  • 第五步,得出最終方向,并最終調(diào)整形成終稿。

二、案例

例一:雄獅的logo設(shè)計

期望比較簡潔的同時,又不能丟了獅子的辨識度,比較糾結(jié)的是,這個度該如何把握?

按照極限推敲法來,我們先確立「極簡」和「寫實」作為關(guān)鍵維度,然后優(yōu)先嘗試兩端比較極限的方案;了解清楚兩種極限的可能性之后,繼續(xù)嘗試,加減細(xì)節(jié),尋找一個符合預(yù)期的圖形狀態(tài);最后的定稿,既保持了鮮明的特征和辨識度,同時也不失簡潔。

(推進過程中出方案的順序在圖中用數(shù)字標(biāo)出,「1」即為第一次嘗試,以此類推;具體推敲過程不在此贅述。)

例二:網(wǎng)易郵箱大師Tab icon改版設(shè)計

在網(wǎng)易郵箱大師5.0改版中,常駐底部的 Tab icon 是單獨進行推敲優(yōu)化的。在之前的版本中,圖標(biāo)的樣式相對比較的刻板,偏向純表意,表現(xiàn)力不強;在5.0視覺改版的策略中,我們是以「優(yōu)雅」作為一個關(guān)鍵方向進行優(yōu)化的,所以軸的兩端就定為「刻板」和「優(yōu)雅」,雖然并不是完全對立的兩個方向,同時也包含了一些「表意」等其他層面的因素,但是其中有部分感受是存在對立面的,我們就以此作為關(guān)鍵點進行推敲。

可以從圖中看出,在不影響表意的前提下,各方案間的圖標(biāo)改動非常微小,在有限的空間內(nèi)去做一些變化;幾經(jīng)嘗試之后,還是選擇了更常規(guī)更偏表意優(yōu)先,但是也適當(dāng)加入曲線因素體現(xiàn)「優(yōu)雅」的方案作為最終方向。

例三:內(nèi)容信息流列表設(shè)計

期望內(nèi)容列表的展示能給人以精品的感覺,但又不失去過多的閱讀效率。

首先確立以信息量的多少作為關(guān)鍵維度,在形成了初步的樣式之后,繼續(xù)調(diào)整在一屏內(nèi)條目的疏密以及排版來感知信息量的多少;在嘗試之后,最終討論決定,在初期內(nèi)容源還不夠「精」的情況下,還是最右側(cè)方案的信息呈現(xiàn)更為合適,并以此做了最終調(diào)整。

三、方法原理

很多時候,極端情況是很難想象或者預(yù)判出來的,只有嘗試之后,才能更清楚的了解到實際會出來什么效果,達(dá)到怎樣的預(yù)期;在多次推敲之后,就能更好的了解期望的狀態(tài)到底應(yīng)該在哪個「位置」,讓模糊的概念逐漸變得清晰;該方法最大的好處在于,讓嘗試變的更有目標(biāo),而不是胡亂嘗試,讓每一次嘗試都更有意義。

這個方法也算是視覺標(biāo)準(zhǔn)可量化的一次探索,我稱之為「偽量化」,因為最后的決策仍然是依靠感官去衡量判斷的;把錯綜復(fù)雜的感官拆解成一些更具體單一的關(guān)鍵維度也是非常關(guān)鍵的一個步驟,是開始「偽量化」的前提。

四、適用場景

在以上所舉的例子中,有 logo設(shè)計,icon設(shè)計和界面設(shè)計(所用到的例子都是實戰(zhàn),均為過往項目);其實對象可以是各種各樣的設(shè)計,只要存在某種程度把握上的糾結(jié),無法預(yù)判或者不明確方向的情況,都可以通過這個方法有效的推進并找到當(dāng)下的最優(yōu)解。在實戰(zhàn)中,假如沒有那么多的時間和精力去細(xì)化,可以僅選取關(guān)鍵維度,然后在關(guān)鍵維度內(nèi)嘗試方向探索性的方案(粗略的嘗試),只要能感受到差異,即是有效的方案;當(dāng)然如果有充足的時間,那完全可以精細(xì)化出方案,這樣方案所傳達(dá)的感受也會更加精準(zhǔn)細(xì)致。

五、誤區(qū)

要注意的是,這個方法并不是一種妥協(xié)的方式,也不是一種擇中方案;我們所要尋找的是在一個維度中感受符合預(yù)期的位置,如果適合,也可以是非常激進的方案。

六、注意事項

這個方法只是提供了一種思路,如何更有效的嘗試方案來推進視覺產(chǎn)出的思路;其中最主要的環(huán)節(jié)還是靠自己去摸索出方案的實踐部分,去實打?qū)嵉膰L試;在這其中投入精力的多少,也受其他客觀因素的影響,例如項目截止時間等等;不過我認(rèn)為個人的主觀能動性才是主導(dǎo),一定不能懶,要作圖,要動起來,僅靠憑空想象方案在腦中「出圖」,一來說服不了別人,二來自己也底氣不足。只要圖形圖像語言一直存在,那么我覺得對視覺設(shè)計師來說有一句話就是永遠(yuǎn)的真理:沒圖說個XX。

設(shè)計師如何洞察需求本質(zhì),做出一稿過的設(shè)計?

資深UI設(shè)計者

本文主要從需求類型、表現(xiàn)形式、如何做正確設(shè)計來分析,設(shè)計師應(yīng)如何洞察需求本質(zhì)?如何做正確的設(shè)計?

前言:設(shè)計師的痛

有這樣兩種情況在設(shè)計師工作中經(jīng)常會遇到:業(yè)務(wù)方改來改去,經(jīng)過幾十遍的修改最終選了第一稿;一群非專業(yè)的人或領(lǐng)導(dǎo)在設(shè)計師身邊指來指去,出發(fā)點都是「我覺得」主觀感受,沒一個能提出有點含金量的意見。

  • 客戶或業(yè)務(wù)反復(fù)改
  • 眾人指點江山

實際工作里我們經(jīng)常遇到業(yè)務(wù)方一直在針對幾個問題要求設(shè)計師在不停修改 :顏色、大小、氛圍等。但是卻很少看到設(shè)計師跟業(yè)務(wù)方溝通設(shè)計結(jié)果出現(xiàn)的場景?是為了達(dá)到什么目標(biāo)?導(dǎo)致設(shè)計師一直處于不?!父母母摹沟目啾茽顟B(tài)。

本篇文章內(nèi)容為:設(shè)計師如何洞察需求本質(zhì)?如何做正確的設(shè)計?

一、設(shè)計對接的需求來源類型

設(shè)計師在工作中接觸到的需求一般分為三類:業(yè)務(wù)需求、用戶需求、產(chǎn)品功能需求。

1. 業(yè)務(wù)需求

業(yè)務(wù)需求是指產(chǎn)品和公司為了實現(xiàn)商業(yè)目標(biāo)產(chǎn)生的需求。不以結(jié)婚為目的的談戀愛就是耍流氓,不以賺錢為目的的產(chǎn)品也是耍流氓,說來說去最終目的都是為了實現(xiàn)商業(yè)價值。

業(yè)務(wù)需求多數(shù)來源老板、公司戰(zhàn)略、運營策略等,一般圍繞如何提升公司銷售額度、如何提升用戶量、如何提升利潤、如何提升用戶轉(zhuǎn)化、如何推廣運營等等。

2. 用戶需求

用戶需求是指通過調(diào)研或客服投訴搜集到的用戶反饋,一般來源于用戶在使用產(chǎn)品過程中的需求。在 kano模型中對用戶需求一般分為:基本需求、期望需求、魅力需求、無差異需求、逆向需求。針對這些需求公司都會結(jié)合發(fā)展戰(zhàn)略與優(yōu)先級去分析,可分為必做、應(yīng)做、可做、不做。

3. 產(chǎn)品功能需求

基于業(yè)務(wù)和用戶價值進行需求分析的結(jié)果,為滿足業(yè)務(wù)和用戶提出的一組產(chǎn)品功能列表,功能需求構(gòu)成了一個完整的產(chǎn)品抽象模型,是團隊之間進行產(chǎn)品設(shè)計研發(fā)的基礎(chǔ)。

二、三類需求常見的表現(xiàn)形式

1. 業(yè)務(wù)需求常見形式

這有個萬能的公式:銷售額=流量x客單價x轉(zhuǎn)化率

拿某某購物中心舉個例子:銷售額就是我們聽到的某某購物中心在五一期間賣了xxx億的額度,流量就是五一期間有多少顧客進來了這個購物中心,客單價就是額度除以購買人數(shù),轉(zhuǎn)化率是訂單除以訪客。在同等訪客量的情況下訂單越低,轉(zhuǎn)化率越低。

這個公式換到互聯(lián)網(wǎng)產(chǎn)品中也一樣,多少用戶進入 app,有多少人產(chǎn)生購買行為,以及每個人購買的單價,這些因素都是決定這個產(chǎn)品最終的銷售額。

業(yè)務(wù)需求是流量增長

在產(chǎn)品發(fā)展初期,面臨的第一個問題就是訪問量,也就是產(chǎn)品的曝光率,用戶到達(dá)率。我們在生活中會經(jīng)??吹揭恍┕菊堃恍┳詭Я髁康木W(wǎng)紅、明星來做宣傳為公司帶來一些流量。在互聯(lián)網(wǎng)產(chǎn)品中常見的一些流量增長的策劃為拉新獎勵、高流量為低流量導(dǎo)流、免費效應(yīng)等。

拉新獎勵:推薦有獎、注冊有獎。

導(dǎo)流:高流量為低流量導(dǎo)流。

免費:0元購、秒殺等。

業(yè)務(wù)需求是活躍度

產(chǎn)品活躍度是指用戶每天開啟 app 的頻次,每天停留的時間。不同屬性的產(chǎn)品活躍度的規(guī)律也不一定,比如:新聞類、理財類、工具類的產(chǎn)品,針對不同用戶、不同屬性的產(chǎn)品提升活躍度的方式不一樣。

比較常見的提升活躍度的策略是:獎勵刺激、有價值的內(nèi)容吸引、通過成長等級來引起用戶參與。

獎勵:補貼、答題獎勵、分享得積分、返現(xiàn)金、簽到、打卡獎勵。

內(nèi)容:推送激活、話題討論、焦點&熱點內(nèi)容。

榮譽感:排行榜、等級。

業(yè)務(wù)需求是用戶留存

經(jīng)過運營渠道推廣流量提升后,倒入一些新用戶,用戶經(jīng)過一段時間體驗后是否留存關(guān)鍵在于:用戶需求被滿足、以及體驗流程流暢決定的。當(dāng)用戶發(fā)現(xiàn)產(chǎn)品對自己沒有價值、體驗沒有好感就會選擇離開。

比較常見的留存策略是:翻倍獎勵、產(chǎn)品體驗迭代優(yōu)化、評分、用戶成長體系等。

業(yè)務(wù)需求是品牌感知

用戶對同類產(chǎn)品的選擇很大程度取決于產(chǎn)品品牌的影響力,業(yè)務(wù)方在推廣中也會有針對品牌提升感知力。

比較常見的有:h5的情感推廣、公益活動等。

網(wǎng)易的h5活動在2017年經(jīng)常刷爆全屏,他們主打的是情感系列,深入人心,不僅提升主品牌影響,也提升了用戶對網(wǎng)易噠噠的產(chǎn)品感知。

小結(jié):業(yè)務(wù)需求設(shè)計要點

  • 用戶感知:在設(shè)計中對設(shè)計表現(xiàn)要處理好文案層級關(guān)系/視覺氛圍吸引度/提升用戶注意力。
  • 效果目標(biāo):要考慮業(yè)務(wù)需求的目標(biāo)是什么,通過什么形式(創(chuàng)意/用戶記憶/內(nèi)容價值)達(dá)到拉新、留存、流量的目的。
  • 數(shù)據(jù)推導(dǎo):通過數(shù)據(jù)可以讓我們理性分析出用戶關(guān)注點是什么?
2. 用戶需求常見形式

對于用戶提出的一些功能的需求,設(shè)計師不能盲目聽從,需要真正去識別有用的用戶、有價值的需求。我們可以通過一些調(diào)研、觀察,分析用戶的特征、習(xí)慣、場景和行為,以及期望得到什么效果,挖掘用戶的內(nèi)在動機和原因,只有搞明白了用戶需求的本質(zhì),才有可能做出用戶滿意的產(chǎn)品。

KANO模型定義了五類需求,我主要針對下面3類經(jīng)常遇見的說下,也可以分為3個步驟去做:基本需求 — 期望需求 — 魅力需求。

用戶基本需求

指用戶認(rèn)為產(chǎn)品必須要有的屬性或者功能,比如:購買流程的完整體驗、完整注冊流程,這些基本需求一般來源產(chǎn)品初期迭代中的優(yōu)化完善。

用戶期望需求

用戶在主流程體驗過程中增加一些利于自己快捷、便利的需求,這些功能并不影響主流程體驗,比如:購買過程中對收藏、歷史價格對比、搜索等,這些期望需求可以轉(zhuǎn)化成一些潛在的競爭優(yōu)勢。

例如:下圖用戶需求搜集中用戶集中在對歷史價位走勢、提醒等功能的一些期望需求上。

△ 根據(jù)用戶期望需求調(diào)整的設(shè)計構(gòu)思

用戶興奮魅力需求

魅力需求是每一個產(chǎn)品追尋的方向,給用戶帶來一些超越他們預(yù)期的體驗??梢岳斫鉃樵跐M足用戶的基本需求、期望需求的基礎(chǔ)上給用戶創(chuàng)造附加價值體驗,屬于創(chuàng)新設(shè)計思維范圍,可以提升好感及忠誠度。比如:京東推出vr口紅試妝體驗,天貓推出試裝直播等。

小結(jié):對用戶需求設(shè)計要點

  • 用戶集體共性體驗:在主流程上識別有價值用戶群體,角色化的用戶的共同特征,符合用戶基本功能流暢、無障礙體驗。
  • 體驗體驗場景維度設(shè)計:對用戶使用的場景考慮,設(shè)計符合用戶的習(xí)慣的操作。比如:課堂播放,用戶使用場景是碎片時間:通勤、吃飯、健身等場景下,用戶對產(chǎn)品期望是儲存、收聽便捷的期望體驗。
  • 用戶情感維度設(shè)計:超越用戶預(yù)期,帶來驚喜、共情。
3. 產(chǎn)品功能需求

注冊流程簡化

大量注冊資料讓用戶失去耐心,流程簡化提升新用戶流量。

漏斗數(shù)據(jù)下的流程轉(zhuǎn)化

在公司xx流程里,我們看到每個頁面的流失漏斗,發(fā)現(xiàn)用戶在購買決策「結(jié)果分析」那一步流失特別多,決定砍掉了介紹步驟,把之前5步改成三步?jīng)Q策。

這是一個非常妙的設(shè)計:對用戶來說,直接觸達(dá)決策前的結(jié)果分析,用戶對結(jié)果的強感知轉(zhuǎn)化下一步操作,從數(shù)據(jù)來看這一步轉(zhuǎn)化率提高不少。

△ 公司實際創(chuàng)新項目不做露出具體頁面

留存

新用戶進入 app 后,一般分為3個時期:振蕩期間、選擇期、穩(wěn)定期。震蕩期用戶流失較多,經(jīng)過一些市場對比后選擇留下的用戶會進入一個穩(wěn)定期。一個用戶在產(chǎn)品內(nèi)留存越久,帶來的商業(yè)價值越高。

在產(chǎn)品體驗流程中根據(jù)不同需求,策略也有不同。舉一個 ofo 退押金例子:ofo 在不久前遭遇了資金問題,我在退押金這一流程體驗中誤操作了多次,最主要問題就是信息引導(dǎo)。

△ 主流程中對用戶再三挽留

△ 主流程操作中弱化強需求信息

小結(jié):對功能需求設(shè)計要點

  • 統(tǒng)一、體驗:減少用戶頁面跳轉(zhuǎn),能1步完成不要放到3、4步完成。
  • 信息明確:在主流程中給用戶傳達(dá)正確信息關(guān)系,減少誤操作。
  • 數(shù)據(jù)驗證可用性價值:通過數(shù)據(jù)觀察用戶行為,驗證需求產(chǎn)生的價值。

四、如何從需求達(dá)到設(shè)計目標(biāo)

1. 需求到設(shè)計目標(biāo)的過程

在需求發(fā)起到設(shè)計目標(biāo)會經(jīng)過這樣幾個過程:羅列與信息搜集?深入挖掘?聚焦核心?創(chuàng)新發(fā)散?實現(xiàn)與落地。

這五步的節(jié)奏是:先發(fā)散 – 聚攏 – 再發(fā)散 – 聚攏。

羅列與信息搜集

  • 需求羅列:根據(jù)佐藤可士和整理術(shù),把需求按照類別、優(yōu)先級進行。
  • 用戶調(diào)研:定性于定量調(diào)研結(jié)果得到用戶真正的訴求點。
  • 數(shù)據(jù)結(jié)果:通過數(shù)據(jù)結(jié)果能觀察用戶的行為特征。

深入挖掘

5w:what、when、wher、who、why這五步定位法,是讓設(shè)計師清楚需求的本質(zhì)與動機。

聚焦核心:濾 — 煉 — 導(dǎo)

結(jié)合用研結(jié)果、數(shù)據(jù)結(jié)果、定位結(jié)果去除不重要、不必要的信息、提煉有價值的信息、導(dǎo)出核心關(guān)鍵。

創(chuàng)新發(fā)散

我們發(fā)現(xiàn)前三步是基于一些基礎(chǔ)方法論,讓設(shè)計師具備一些觀察用戶、分析用戶行為、洞悉本質(zhì)、同理心的訓(xùn)練,目的是讓我們把思維聚焦在核心的關(guān)鍵點上,而真正超越預(yù)期體驗的來源于第4步創(chuàng)新設(shè)計思維。

  • 創(chuàng)新設(shè)計思維:通過發(fā)散尋找針對聚焦點不一樣的方案的突破口,很多創(chuàng)新思維來源于多人思維火花的碰撞。
  • 移情設(shè)計:在發(fā)散后結(jié)合用戶情感的體驗,打造深入人心、愉悅的體驗感受。
  • 技術(shù)可行性。

實現(xiàn)與落地

  • 草圖溝通;
  • 開發(fā)—測試;
  • 上線—迭代—優(yōu)化。

總結(jié):設(shè)計的道與術(shù)

  • 道:設(shè)計創(chuàng)新、價值觀、愿景。
  • 術(shù):思維方式、工作流程、洞察力、觀察、分析。

對于設(shè)計師,解決問題能力遠(yuǎn)高于單純作圖能力,而了解需求本質(zhì)是解決問題的前提條件,在沒有明確需求的動機和目的,設(shè)計方向是迷茫的。洞察、分析是設(shè)計師的基本能力,勤于思考分析,做正確有價值的設(shè)計。

這7種廣泛存在的認(rèn)知偏差,影響了我們太多的決策

資深UI設(shè)計者

如今心理學(xué)和行為學(xué)已經(jīng)是UX和產(chǎn)品設(shè)計領(lǐng)域當(dāng)中諸多理論的來源和實踐的依據(jù),它們是UI/UX設(shè)計師和產(chǎn)品設(shè)計師的必修課。

系統(tǒng)的心理學(xué)和行為學(xué)的知識,對于設(shè)計工作其實有著極為深刻的影響。用戶體驗設(shè)計很大程度上是在心理學(xué)和行為學(xué)的研究基礎(chǔ)上逐漸進化和發(fā)展起來的,對于想要深耕這一領(lǐng)域的設(shè)計而言,心理學(xué)和行為學(xué)是繞不開的必修課。

心理學(xué)和行為學(xué)早已并非是單獨存在的學(xué)科,它們和許多不同領(lǐng)域的知識交匯融合,圍繞著人性進行多維度全方位的探討。如今我們所熟知的許多優(yōu)秀的產(chǎn)品,也大多從這些領(lǐng)域技汲取營養(yǎng),不少四兩撥千斤借力逆襲的成功案例,也往往借助的是這些深深植根于人性的杠桿。

這兩個宏大的命題并非簡單幾段話說得清楚,但是這當(dāng)中有許多有意思的現(xiàn)象,非常具有啟發(fā)性。許多植根于人性本能中的非理性心理和行為,在日常生活中主導(dǎo)著我們作出決策,有的是一些不易覺察的心理效應(yīng),有的僅僅是不算太顯著的認(rèn)知偏差,但是在設(shè)計和實際產(chǎn)品當(dāng)中運用,則常常呈現(xiàn)出極為驚艷的效果。

對于這些心理學(xué)效應(yīng)和認(rèn)知偏差,設(shè)計人員需要在自身進行決策時候盡量回避,避之不及確實會面臨車毀人亡的局面;在設(shè)計過程中,可以巧妙地將這些因素納入到考慮當(dāng)中來,因為它們同樣可以影響用戶,成為撬動產(chǎn)品打開局面的重要的契機。

幸存者偏差

幸存者偏差(Survivorship bias)雖然被稱為認(rèn)知偏差,但是實際上,它更接近于是一種邏輯謬誤下產(chǎn)生的一種錯誤認(rèn)知。幸存者偏差指的是人往往會注意到某種經(jīng)過篩選之后所產(chǎn)生的結(jié)果,同時忽略了這個篩選的過程,而被忽略的過程往往包含著關(guān)鍵性的信息。

讀書無用論是一種最常見的幸存者偏差。讀書無用論中最多的說法是XX并沒有好好上學(xué)但是照樣掙大錢了,而XX努力讀書反而混得并不好。

這些個案并不涉及到具體數(shù)據(jù),從數(shù)據(jù)角度上來說,也不難解釋這種“主觀感受”的成因。根據(jù)第六次全國人口普查,大專及以上學(xué)歷的人口僅占總?cè)丝诘?.7%,高學(xué)歷者落魄更容易受到媒體的關(guān)注,而低學(xué)歷中的成功者也常常能夠吸引普通人的目光,即使低學(xué)歷人口中涌現(xiàn)的成功者的比例遠(yuǎn)低于高學(xué)歷者,由于基數(shù)差異,這個數(shù)值對比也是相當(dāng)可觀的。正是因為忽略了數(shù)據(jù)中沉默的大多數(shù),讀書無用論這種錯誤的觀點才“得以成立”。

槍擊案中的幸存者大多傷的是手和腳,那么是否要加強手腳的保護呢?實際的情況上,在軀干和頭部中槍的人,大都沒有挺過來,相反更加需要保護是軀干和頭部。就像能活著回來的戰(zhàn)斗機中彈的通常都是翅膀和機身,因為引擎中彈的大都已經(jīng)犧牲了。這個案例也許能夠幫你更好地理解幸存者偏差。

對于事件發(fā)展過程中篩選機制的忽視,容易讓人產(chǎn)生錯誤的結(jié)論,從而導(dǎo)向錯誤的方向,在設(shè)計決策過程中,出現(xiàn)這樣的過程中,極有可能是致命的。

在需求分析和調(diào)研過程中,如果忽視了幸存者偏差,很有可能搜集到的數(shù)據(jù),體現(xiàn)的僅僅知識少部分用戶的需求和想法,最終將偽需求和小眾需求當(dāng)作主要需求來作為設(shè)計易于,則可能讓產(chǎn)品從一開始就走向萬劫不復(fù)。

在搜集產(chǎn)品的用戶反饋信息的時候,也很容易遭遇幸存者偏差。絕大多數(shù)的用戶在正常使用產(chǎn)品的時候,如果沒有合理的觸發(fā)機制,或者產(chǎn)品沒有特別突出的特點的情況下,很少會主動“好評”,相反,遭遇問題的用戶則更傾向于主動吐槽并分享糟糕的體驗和問題,這也很容易造成“這個產(chǎn)品哪哪兒都是問題”的錯覺。

基本歸因偏差

基本歸因偏差這個名詞同樣源自于心理學(xué),比較學(xué)術(shù)表述是“對他人行為進行歸因的時候,往往會傾向于把別人的行為歸因為其內(nèi)在因素,而低估了情境因素的影響,而對于自身的行為歸因的時候,則傾向于把自己的行為歸因為外在因素,而忽略自身因素的影響”,基本歸因偏差的含義表述可能有點拗口,但是并不難理解。

基本歸因偏差是一種重要的人類心理防御機制,是人類進化過程中所產(chǎn)生的一種局限性的思維定勢。和復(fù)雜多樣的環(huán)境因素相比,行為者本身的問題是更容易被發(fā)現(xiàn)的,所以觀察者在觀察行為者的時候,諸如社會環(huán)境、社會角色、情景壓力等外部因素更難以引起注意,將問題更多歸因于行為者本身的行為舉動和個人內(nèi)因。比如,當(dāng)看到某個人生活拮據(jù)的時候,會簡單歸因于他不夠勤奮等等。類似的,在面對生活中的諸多不順的時候,直接歸因于“水逆”而很少會仔細(xì)思考是否有自身的原因。當(dāng)事人和觀察者對于事件的歸因不同,爭議和問題往往因此而起。

對于UX設(shè)計師而言,基本歸因偏差是矛盾和問題的常見的來源,而且這種認(rèn)知偏差存在于用戶也同樣存在于設(shè)計師本身。無論是面對設(shè)計問題,還是做調(diào)研,進行測試,涉及到多方面影響因素的時候,基本歸因偏差都會對設(shè)計方案、設(shè)計決策產(chǎn)生影響。

這需要設(shè)計師能夠清楚地分辨“我的觀點”和“我的行為”,能夠真正將自己從自己所處的立場、角色、職能上抽離出來,復(fù)盤整個局面,首先接納全部的狀況和現(xiàn)實,包括他人的想法、觀點,先不去判斷對錯,而是先接納所有的狀況和全部的元素,明白事物的動態(tài)變化過程,不再單一地去判斷,任何一個視角必然會存在一個立場,它們是當(dāng)前事物諸多層面中的一方面而已。

面對復(fù)雜多變,但是因果清晰、逐步成長變化的事物,用動態(tài)而全面的思維方式來看待,才能真正看清楚事物變化的軌跡,更有針對性地設(shè)計,作出合理的決策。

后視偏見

后視偏見(Hindsight Bias)則是另外一種常見的認(rèn)知偏差,它指的是人在事情發(fā)生以后覺得自己在事情發(fā)生之前就已經(jīng)預(yù)測到結(jié)果了,實際上,他們并不如自己想象的那樣能夠準(zhǔn)確的進行預(yù)測。這種行為在觀察者眼中常常會被稱為“馬后炮”。

后視偏見在很多人身上都存在,人的主觀性和記憶本身會造成這種偏差。對于設(shè)計工作者而言,厚實偏差的存在無疑是會帶來負(fù)面影響的。后視偏見會讓人沉迷于“我早就預(yù)料到了”這種感受當(dāng)中,相應(yīng)的無法真正從事件中真正汲取到有用的經(jīng)驗,也難于使用公平的眼光來評判客觀事物和他人,主觀上也很容易選擇性忽略許多客觀條件和事實。

后視偏見確實會給人帶來快感,相應(yīng)的,會在工作中影響決策的正確性和公平性,從而帶來潛在風(fēng)險。糾正后視偏見的方法并不復(fù)雜,在確知事情結(jié)果之前,記錄下自己的想法,事后做驗證,并統(tǒng)計成功與失敗的數(shù)據(jù)。

事件的結(jié)果并非是最好的判斷因素。在調(diào)整好認(rèn)知之后,對于事件和情況的過程和相關(guān)因素進行相對全面的衡量,盡可能少的摻雜主觀情緒來進行分析,這樣的決策的有效性會更強。

曝光效應(yīng)

曝光效應(yīng)(the exposure effect)也被稱為多看效應(yīng)(和多看這款應(yīng)用并沒有關(guān)系),接觸效應(yīng)。曝光效應(yīng)本身的描述也不復(fù)雜:人會更加偏好自己熟悉的事物。在社會心理學(xué)領(lǐng)域,曝光效應(yīng)的另外一個稱謂是“熟悉定律”,這可能更好理解。

自己總傾向于購買自己熟悉的品牌的產(chǎn)品,談戀愛的時候總會有繞不開的老同學(xué)和老朋友,這些都是曝光效應(yīng)之下的人類認(rèn)知偏差。我們常常說的“一旦接受了這個設(shè)定還挺帶感的”就是對于這一效應(yīng)的真實側(cè)寫。

曝光效應(yīng)在廣告行業(yè)、產(chǎn)品營銷和社交媒體有著天然的親和力,對于營銷人員、運營人員、品牌設(shè)計師和UX設(shè)計師而言,這一效應(yīng)的活學(xué)活用是非常有必要的。

不過曝光效應(yīng)本身并非是無條件的,相反它和產(chǎn)品屬性、品牌設(shè)計、企業(yè)形象以及運營策略有著極為緊密的關(guān)聯(lián)。

曝光效應(yīng)在許多不同的社會實驗當(dāng)中呈現(xiàn)出一種不穩(wěn)定性,可能是因為相關(guān)的影響因素多而復(fù)雜。有的研究表明,即使產(chǎn)品和服務(wù)曝光過程中絕大多數(shù)的內(nèi)容是正面的,公司和企業(yè)本身的名氣高低和品牌形象,同樣會影響曝光效應(yīng)的高低。

曝光效應(yīng)在發(fā)揮的過程中,即使曝光的內(nèi)容全部是正面的,對于用戶的影響也會逐步呈現(xiàn)出一種矛盾性,也就是用戶會對產(chǎn)品或者服務(wù)產(chǎn)生正面聯(lián)想的同時,還會產(chǎn)生不利的、負(fù)面的感受。

曝光效應(yīng)發(fā)揮效果最好的時段,始終是絕大多數(shù)用戶對于產(chǎn)品認(rèn)知不足的階段,這個時候曝光效應(yīng)會最大化的對用戶產(chǎn)生影響。

值得特別注意的是,一開始就讓人覺得厭惡和不適的產(chǎn)品是無法產(chǎn)生正面的曝光效應(yīng)的,如果一開始存在沖突,曝光效應(yīng)只會加深誤會和沖突。過量的曝光一定會帶來厭惡,由于復(fù)雜而大量不可控的影響因素,甚至?xí)?dǎo)致失控式的崩盤。

對于UX設(shè)計師和產(chǎn)品的策劃和運營者而言,在合適時機加大產(chǎn)品的正面曝光是有效度最高的策略。深入了解曝光效應(yīng),才會明白何時放,而何時收。

可得性偏差

可得性偏差(Availability Heuristic)也是一種常見的認(rèn)知偏差,它是啟發(fā)式偏差的一種,人們往往會根據(jù)自己認(rèn)知上的易得性來判斷事情的可能性,甚至于會根據(jù)自己看到和聽到的只言片語來做決策,而不是根據(jù)統(tǒng)計學(xué)數(shù)據(jù)和系統(tǒng)化的知識來做判斷。

可得性偏差同樣是一種廣泛存在的認(rèn)知偏差,用戶認(rèn)為自己熟悉的、更容易獲得的信息在復(fù)雜的系統(tǒng)中發(fā)揮著更大的作用,主觀上忽略其他的部分??傻眯云詈褪煜ざ桑ㄒ簿褪瞧毓庑?yīng))有些許共通的地方。

可得性偏差在金融領(lǐng)域有著巨大的影響,許多準(zhǔn)備上市的企業(yè)會在上市前夕吸引大量的新聞報道,讓投資者在信息的狂轟濫炸之下不知不覺地去關(guān)心,無意識地去了解,并最終購買這支股票拉高股價。這種策略就是借助投資者的可得性偏差來實現(xiàn)的。下面是谷歌搜索關(guān)鍵詞阿里巴巴的頻率和阿里巴巴的股價變化情況,兩者呈現(xiàn)出一種明顯的關(guān)聯(lián)性。

可得性偏差的廣泛存在,使得設(shè)計師甚至可以在自己的產(chǎn)品中借助有有意識的設(shè)計,來引導(dǎo)用戶的行為。作為設(shè)計師本身而言,可得性偏差同樣是會影響到設(shè)計決策,因為可得性偏差同樣會影響產(chǎn)品設(shè)計中的設(shè)計決策的走向。消除可得性偏差的方法也不難,需要設(shè)計者不要被已知的信息和容易想起來的信息所左右,而是盡量深入地從多個角度來考慮問題,跳出固有的思維定勢,多角度看待問題,作出合理的決策。

錨定效應(yīng)

錨定效應(yīng)也被稱為沉錨效應(yīng),它一樣是一個聽起來高大上但是含義并不復(fù)雜的概念,它指的是人們對某人某事作出判斷的時候,容易受到第一印象或者第一信息的影響和支配。這種現(xiàn)象就像船只被錨固定在特定位置而無法移動,因此而得名。

人們在做判斷的時候,往往會受到第一印象和首個接收到的信息的影響。就像鳥類會將第一個看到的生物視之為自己的母親一樣,人們往往會借助第一印象來作為后續(xù)判斷一個事物的參考標(biāo)準(zhǔn),甚至在人際交往中都是金科玉律。即使是沒有刻意地去參考第一信息,人們也會在潛意識當(dāng)中,重視第一次獲得的數(shù)據(jù)。

錨定效應(yīng)的另外一個層面是對比,當(dāng)擁有了錨定的參考之后,用戶在后續(xù)會以此為基準(zhǔn)進行對比。對比并不存在絕對意義上的好壞,但是在不同的基準(zhǔn)之下,或者說參考的基點不同的情況下,發(fā)揮的作用其實是截然不同的。

舉個簡單的例子,粥鋪的服務(wù)員問客人“加一個雞蛋還是加兩個雞蛋”比“要不要加雞蛋”所產(chǎn)生的銷售額高出不少,因為前者會人的心理基點是“要加蛋”,而后一種問法,則讓客人先思考“要不加蛋”,前者的轉(zhuǎn)化率自然更高。

正是因為先入為主這種心理現(xiàn)象大量影響著用戶的決策,使得市場競爭中,許多企業(yè)和產(chǎn)品都不得不去力圖爭個第一,贏得主導(dǎo)權(quán)。

iPhone X的劉海屏對于手機市場有多大影響想必大家有目共睹。而后續(xù)的藍(lán)綠兩廠的升降式攝像頭設(shè)計和“真·全面屏”也因為其突出性和強大的“第一印象”的構(gòu)建,而贏得了無數(shù)贊譽。

但是靜下心來想想,開機解鎖還要等待攝像頭升起,好像還是一個蠻奇怪的事情??墒亲钤绲摹罢妗と嫫痢贝_實夠驚艷。

免費認(rèn)知偏差

優(yōu)惠促銷是各種產(chǎn)品銷售中最常用到的一種策略,而在花樣迭出的促銷手段當(dāng)中,有為數(shù)不多的集中手段,呈現(xiàn)出令人驚艷的效果。

免費的贈品和滿額減免就是這其中的典型。購買產(chǎn)品A,贈送一款B,這種贈品策略的玩法可以說是效果極佳,早年間阿芙精油聲名鵲起的階段,其中最令用戶欲罷不能的,就是他們的“贈品”。用戶每一次購買精油產(chǎn)品的時候,阿芙的團隊會隨之一起發(fā)出精油的入門口袋書以及多達(dá)五六種精心挑選的精油試用裝,這種體貼且讓人覺得“狠賺一筆”的心理感受,使得許多新用戶迅速轉(zhuǎn)為穩(wěn)定客戶。

置于滿多少減多少,則同樣是一種成功的促銷策略。各種電商平臺和購物節(jié)都會采用花樣繁多的滿減服務(wù),相應(yīng)的,用戶在這種服務(wù)之下,總?cè)滩蛔 皽悊巍?。平心而論,真實的情況是,用戶購買了自己真正需要的商品,以及一系列為了湊單而同時購買的非必須商品,對于商家和平臺而言,這種策略很好的拉高了銷量,也減少了許多商品的庫存,而用戶也感覺自己賺到了,皆大歡喜。

至于“包郵”,我就不贅述了。這個效果同樣非常突出。

相比之下,打折促銷所產(chǎn)生的效果,好像就沒有那么顯著和“暴力”了。歸根結(jié)底,問題是出在“免費”的認(rèn)知偏差之上。對于用戶而言,無論是贈品、滿減還是包郵,本質(zhì)上都會讓用戶迅速地在大腦中形成一種“免費獲得某種東西”的感覺,贈品對應(yīng)的是免費的物品,滿減對應(yīng)的是免費的現(xiàn)金回饋,包郵則是免費的郵寄服務(wù)。

心理學(xué)家和行為學(xué)家通過大量的實驗驗證了免費確實和折扣等其他的促銷策略有著本質(zhì)的差別,它所帶來的非理性行為要明顯太多,免費的吸引力無與倫比,說是認(rèn)知偏差毫不為過。

你一定特別想點擊上面的圖片免費下載素材。不好意思它只是個圖片。

人類本能地懼怕?lián)p失,選擇免費的贈品不會有損失,而相比之下選額其他則會讓人在潛意識中產(chǎn)生風(fēng)險感,可能會蒙受損失。這樣一來,免費的贈品在人心中的價值就開始高于實際價值,隨之而來的就是非理性消費。

在設(shè)計的過程中,想要讓免費的認(rèn)知偏差發(fā)揮效果,讓人快速地感知到這種“免費獲得”的感受,應(yīng)當(dāng)是明顯的,否則很難快速地觸發(fā)非理性的反饋。

結(jié)語

人類先天的生物性無處不在,我們自詡的理智在現(xiàn)實生活中發(fā)揮的作用并沒有我們想象中那么多,無處不在的各種認(rèn)知偏差主導(dǎo)了太多的

2018端午節(jié),就是想送你份口味“粽”——H5分享

資深UI設(shè)計者

端午節(jié)到了,阿里巴巴TXD的小伙伴們準(zhǔn)備送你只'口味粽',祝大家假期玩的開開心心,點擊圖片識別二維碼便可生成你專屬的‘口味粽’。


01

項目背景


Image title

阿里對待中秋節(jié)會更加的濃重,每年中秋節(jié)所有的員工都會收到精美的月餅和祝福。相比之下我們的端午節(jié)就過得比較平淡了,于是咱們團隊的小伙伴們準(zhǔn)備做一個H5,用我們的自己的方式送大家以及自己一枚口味粽。


整個項目的初衷有兩個,一個是代表TXD送給大家端午節(jié)的祝福,另一個就是用團隊協(xié)作的方式在極短的時間里面設(shè)計一款H5。


02

項目思路


對于我們來說最大的挑戰(zhàn)是時間。距離端午假期僅剩一周不到的時間,而大家都有自己的業(yè)務(wù)工作,難道放棄?既然已經(jīng)立下了flag,怎么也得完成。我們制定了項目的節(jié)點,并且通過多枚成員分工協(xié)作去完成它。


Image title

Image title

大部分項目是需要協(xié)作完成的,一旦協(xié)作不好,項目進度則事倍功半。所以最考驗大家的是怎么進行更的協(xié)作。通過有效的決策,我們讓協(xié)作變得順利。


Image title





Image title


我們通過小組會議確定玩法后,分配人員進行文案和交互設(shè)計。由主設(shè)計師定下設(shè)計風(fēng)格,其他設(shè)計根據(jù)風(fēng)格繪制UI以及其他場景素材。所有素材實時同步在項目群里,確保保持統(tǒng)一的風(fēng)格。


03

項目介紹


首先我們的粽子不是一般的粽子≧ω≦,我們粽子的餡兒都采用各種珍稀的食材。

Image title


這些“珍稀”食材通過我們神秘的構(gòu)造機做成不同的神奇粽子!

Image title

Image title

Image title

Image title



更多不一樣的粽子,通過我們的機器定制屬于自己的神奇粽子。


本次的項目屬于我們的團隊成員通過空閑時間在短時間里面完成的。只是想送給端午節(jié)的童鞋們一個小小的祝福。

日歷

鏈接

個人資料

存檔