前些天對(duì)用戶習(xí)慣進(jìn)行了總結(jié)，這兩天重新優(yōu)化了一遍。我們?cè)诨ヂ?lián)網(wǎng)產(chǎn)品的設(shè)計(jì)過程中，有時(shí)會(huì)聽到一個(gè)詞：用戶習(xí)慣。設(shè)計(jì)師希望嘗試更多新穎的交互方式、視覺效果，卻常常容易被其他人挑刺指出不符合用戶習(xí)慣，建立在用戶習(xí)慣上的創(chuàng)新才是好的體驗(yàn)。
盡管設(shè)計(jì)師經(jīng)常將用戶習(xí)慣掛在嘴邊，但是卻很難有人說出用戶習(xí)慣究竟是什么？我們?nèi)绾闻袛嗨龅脑O(shè)計(jì)是否符合用戶習(xí)慣？用戶習(xí)慣是否始終不能打破？道理我都懂，就是不會(huì)做，實(shí)際上確實(shí)是這樣，因?yàn)楹艽蟪潭壬先Q于設(shè)計(jì)師對(duì)用戶習(xí)慣的理解深度。
用戶習(xí)慣本身很難被量化，但是不代表就是一個(gè)模糊的概念，你仍然能從用戶反饋、操作行為數(shù)據(jù)對(duì)比等分析中一窺究竟，用戶習(xí)慣是可以隨著設(shè)計(jì)師的學(xué)習(xí)、經(jīng)驗(yàn)、眼界等的提升而提升的。
心理學(xué)上認(rèn)為，習(xí)慣是人在一定情境下自動(dòng)化地去進(jìn)行某種動(dòng)作的需要或傾向?；蛘哒f，習(xí)慣是人在一定情境中所形成的相對(duì)穩(wěn)定的、自動(dòng)化的一種行為方式。 習(xí)慣形成是學(xué)習(xí)的結(jié)果、是條件反射的建立、鞏固并臻至自動(dòng)化的結(jié)果。
所以，習(xí)慣有兩大特點(diǎn)：
需要注意的是，“長(zhǎng)期”本身是是沒有明確時(shí)間界限的，更強(qiáng)調(diào)多次的重復(fù)。這里的習(xí)慣，側(cè)重于描述“習(xí)得性”，即人們通過經(jīng)歷、學(xué)習(xí)、刻意練習(xí)等方式形成的，所以這種習(xí)慣理論上是可以被改變的。
此外，習(xí)慣還有一種潛藏特性，區(qū)別于上面描述的“習(xí)得性”，是天生的、物種特有的行為模式。比如人空腹?fàn)顟B(tài)下，聞到香的食物會(huì)產(chǎn)生強(qiáng)烈食欲。這種特性習(xí)慣是刻在基因里的，幾乎無法被改變。
試想，我們?cè)谑褂?App 時(shí)，是否遇到過因?yàn)榱?xí)慣的問題而感覺到不適應(yīng)的場(chǎng)景？
舉個(gè)最常見的例子，Windows 與 Mac 系統(tǒng)的軟件關(guān)閉方式。使用 Windows 的電腦時(shí)，我們形成了關(guān)閉操作在右上角的自然習(xí)慣。后來開始使用 Mac 電腦，關(guān)閉方式都在左上角，在一段時(shí)間內(nèi)，每次關(guān)閉時(shí)都感覺到格外不習(xí)慣。而 Mac 的關(guān)閉方式?jīng)]有比 Windows 產(chǎn)生顯而易見體驗(yàn)升級(jí)，改變操作習(xí)慣成本高，部分用戶可能會(huì)認(rèn)為 Mac 的關(guān)閉操作不好用。
當(dāng)然，假如最開始接觸的是 Mac 電腦，再使用 Windows 電腦，也會(huì)自然認(rèn)為 Windows 不好用，這是先入為主的觀念，一旦產(chǎn)生習(xí)慣，改變習(xí)慣將產(chǎn)生一定的學(xué)習(xí)成本。
設(shè)計(jì)師需要思考用戶行為的本質(zhì)，而盡量減少主觀判斷。產(chǎn)品是給人使用的，所以了解人們的行為特征很重要，而只要涉及到對(duì)人本身的了解，就是極其復(fù)雜的，人類對(duì)自身的行為特征了解遠(yuǎn)遠(yuǎn)不足，但這不妨礙我們以現(xiàn)有知識(shí)去做一些分析和判斷。
用戶行為習(xí)慣的產(chǎn)生，與記憶的特點(diǎn)有很大關(guān)聯(lián)，我們可以把記憶劃分為外顯記憶和內(nèi)隱記憶。
外顯記憶大家比較習(xí)慣和容易感知到，比如我們?cè)趯W(xué)校學(xué)習(xí)時(shí)背誦的課文、公式法則等，可以用語(yǔ)言、文字等顯性方式描述出來的記憶。
內(nèi)隱記憶也叫非陳述性記憶，我們無法用行為描述而又確實(shí)存在，比如騎單車，學(xué)會(huì)之后很難會(huì)遺忘。剛開始學(xué)習(xí)時(shí)，會(huì)需要意識(shí)的介入，經(jīng)過多次練習(xí)，行為會(huì)逐漸“自動(dòng)化”，比如學(xué)習(xí)開車時(shí)，我們會(huì)注意力很集中，而習(xí)慣開車后，可以一邊開車一邊聊天。
我們平時(shí)說的肌肉記憶、條件反射也和內(nèi)隱記憶息息相關(guān)，而且一旦形成，不太容易改變。需要注意的是，肌肉記憶只是一種簡(jiǎn)單描述，負(fù)責(zé)此記憶的是小腦，其實(shí)肌肉沒有記憶。
所以有時(shí)候，我們感覺體驗(yàn)?zāi)硞€(gè) App 時(shí)，會(huì)習(xí)慣性在某頁(yè)面尋找某功能，或者覺得體驗(yàn)和其他 App 有區(qū)別，都可能是內(nèi)隱記憶的用戶習(xí)慣引起的。舉個(gè)例子，某天你剛使用一個(gè)沒用過的 App ,這時(shí)你想要找設(shè)置功能，那你大概率會(huì)不自覺的點(diǎn)擊 App 的最后一個(gè)主 Tab (如“我的”），因?yàn)榇蟛糠?App 的設(shè)置功能都在這個(gè)場(chǎng)景，用戶自然也就形成了習(xí)慣。
這里我且采用由心理學(xué)家基思·斯坦諾維奇（Keith Stanovich）和理查德·韋斯特（Richard West）率先提出的術(shù)語(yǔ)，用以說明大腦中的兩套系統(tǒng)，即系統(tǒng) 1 和系統(tǒng) 2。
·系統(tǒng)1的運(yùn)行是無意識(shí)且快速的，不怎么費(fèi)腦力，沒有感覺，完全處于自主控制狀態(tài)，也叫快系統(tǒng)。
·系統(tǒng)2將注意力轉(zhuǎn)移到需要費(fèi)腦力的大腦活動(dòng)上來，例如復(fù)雜的運(yùn)算。系統(tǒng)2的運(yùn)行通常與行為、選擇和專注等主觀體驗(yàn)相關(guān)聯(lián)，也叫慢系統(tǒng)。
而這兩個(gè)系統(tǒng)，是可以互相轉(zhuǎn)化的，慢系統(tǒng)通過刻意練習(xí)，把新的習(xí)慣注入快系統(tǒng)，而這時(shí)快系統(tǒng)就是習(xí)慣的表現(xiàn)，這樣快系統(tǒng)可以在日常生活中完成大部分工作，這就是我們常聽說的熟能生巧，習(xí)慣經(jīng)常能幫我們節(jié)省思考的精力，這又讓慢系統(tǒng)進(jìn)一步通過刻意練習(xí)，向快系統(tǒng)不斷注入更多好習(xí)慣。
舉個(gè)例子，你剛用一個(gè) App 時(shí)，可能需要先體驗(yàn)一下你要的功能在 App 的哪個(gè)位置，但你用久之后，就會(huì)不假思索地找到它。就像你用微信，最常用的功能可能是回復(fù)信息、看朋友圈，所以一定會(huì)形成習(xí)慣。但是假如有人讓你找一下微信里面“生活服務(wù)”的入口，你可能會(huì)先想一下可能出現(xiàn)在什么入口，這就是因?yàn)槠綍r(shí)比較少用導(dǎo)致的。假如你常用這些入口，也會(huì)形成習(xí)慣，下次要使用這些功能的時(shí)候，就能夠快速找到。
既然說到用戶習(xí)慣的特點(diǎn)是“長(zhǎng)期養(yǎng)成”且“不易改變”，那么挑戰(zhàn)用戶習(xí)慣一定會(huì)造成不適，甚至引起強(qiáng)烈反感。幾年前 Ins 的 logo 改版，將 logo 由擬物化改成了扁平化，顏色也發(fā)生了變化。暫且拋開視覺效果不說，從用戶視覺記憶上，已經(jīng)習(xí)慣了下圖左側(cè)的效果，而右側(cè)新版效果很難與左側(cè)產(chǎn)生記憶上的關(guān)聯(lián)。
許多用戶反饋?zhàn)烂嫔险也坏竭@個(gè)應(yīng)用、許多用戶吐槽很丑甚至不想再使用。所以我們比較容易理解，為什么有時(shí)候 App 改版容易反而引起用戶的反感，這很大程度上是用戶習(xí)慣的影響。
了解產(chǎn)品的用戶是誰(shuí)、用戶的行為特點(diǎn)是什么。不同產(chǎn)品由于定位不同，所以用戶群體也不相同，用戶群體的不同自然代表用戶行為特點(diǎn)的不同。如果設(shè)計(jì)師知道用戶群體，但是不清楚具體行為習(xí)慣特征，可以嘗試讓你身邊的用戶幫你體驗(yàn)。
舉個(gè)例子，B 站的整體用戶畫像相對(duì)而言更偏年輕化，所以產(chǎn)品設(shè)計(jì)上，無論是代表形象、UI 風(fēng)格、交互體驗(yàn)都更顯年輕化。而“小年糕”小程序的用戶群體主要為中老年人，所以設(shè)計(jì)上不會(huì)顯得很年輕，而是以操作明確、字號(hào)偏大、去除多余信息為主。
關(guān)注主流產(chǎn)品的用戶體驗(yàn)很重要，這些競(jìng)品的操作往往代表用戶的習(xí)慣操作（或被培養(yǎng)出來的習(xí)慣操作）。大多數(shù)情況下，你需要了解競(jìng)品能做到什么程度，用戶容易將習(xí)慣從一個(gè)場(chǎng)景帶到另外一個(gè)相似場(chǎng)景。
比如點(diǎn)外賣，有的用戶可能會(huì)下載美團(tuán)和餓了么，盡管平臺(tái)不同，但是在用戶習(xí)慣中，操作模式是相似的，所以如果你要讓用戶的體驗(yàn)不突兀，那就往往遵循相似的操作邏輯。當(dāng)然這些不是為了讓一個(gè)產(chǎn)品去抄另外一個(gè)產(chǎn)品，而是要追尋更好的使用體驗(yàn)，你的產(chǎn)品比競(jìng)品體驗(yàn)更優(yōu)，就更能吸引用戶的青睞。
每個(gè)人本身都會(huì)具有相對(duì)穩(wěn)定的行為、操作、信息閱讀習(xí)慣，我們能見到的體驗(yàn)好的產(chǎn)品，都是符合用戶的基本行為習(xí)慣、信息閱讀習(xí)慣的，要想了解這些習(xí)慣，需要了解深層次的交互行為特征。
從操作而言，需要了解用戶與界面交互的行為習(xí)慣，比如用戶的操作（手勢(shì)操作、信息布局如何才能便于操作），比如尼爾森可用性原則等。
從信息閱讀角度而言，需要考慮人們眼睛觀察事物的規(guī)律，比如格式塔原理：接近性原則、相似性原則、連續(xù)性原則、閉合性原則、主體/背景原則、簡(jiǎn)單對(duì)稱性原則、共同命運(yùn)原則。
就移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的領(lǐng)域而言，大家都是與手機(jī)互動(dòng)，目前手機(jī)系統(tǒng)的兩大平臺(tái)：iOS 和 Android 也都各自有提供關(guān)于人機(jī)界面設(shè)計(jì)有清晰的指導(dǎo)，尤其是 Android 的 Material Design ，對(duì)于設(shè)計(jì)師快速了解設(shè)計(jì)規(guī)范、設(shè)計(jì)原則有很大作用。
iOS 與 Android 的人機(jī)界面規(guī)范鏈接：
iOS：https://developer.apple.com/
Android：https://material.io/
我們提到挑戰(zhàn)用戶習(xí)慣會(huì)有風(fēng)險(xiǎn)，但用戶習(xí)慣并非是永遠(yuǎn)不可改變的，有時(shí)我們需要培養(yǎng)新的用戶習(xí)慣，也就是大家常說的“教育用戶”，否則世界可能一直很難進(jìn)步。
移動(dòng)互聯(lián)網(wǎng)興起之前，大家都是線下打車，但是滴滴打車顛覆了傳統(tǒng)線下打車的用戶習(xí)慣；以前大家都是現(xiàn)金支付，但是微信支付顛覆了現(xiàn)金支付的用戶習(xí)慣。
《設(shè)計(jì)心理學(xué)》里面有這么一段話：“如果用新的方式做一件事只比原來好一點(diǎn)，那么最好與以前保持一致。如果必須做出改變，那么每個(gè)人都得改變。新舊混雜的系統(tǒng)會(huì)讓每個(gè)人困惑。當(dāng)新的做事方式明顯優(yōu)于舊的方式，那么因改變而帶來的價(jià)值會(huì)超越改變本身所帶來的困難。不能因?yàn)槟硺訓(xùn)|西與眾不同就認(rèn)為它不好。如果我們故步自封，我們將永遠(yuǎn)不會(huì)進(jìn)步?！?
這里的價(jià)值包括但不限于用戶價(jià)值、商業(yè)價(jià)值（短期價(jià)值、長(zhǎng)期價(jià)值）等，當(dāng)新習(xí)慣會(huì)需要用戶改變舊習(xí)慣時(shí)，這個(gè)設(shè)計(jì)帶來的價(jià)值有多大，值不值得讓老用戶付出學(xué)習(xí)成本。有時(shí)候，明知改變會(huì)引起用戶的強(qiáng)烈抵觸，仍然改變用戶習(xí)慣，可能因?yàn)楦淖兊膬r(jià)值大于改變的困難。
剛才提到的 ins 的例子中，有的人不知道 ins 為什么要改版，創(chuàng)新咨詢公司 IDEO 的溝通設(shè)計(jì)主管 Remy Jauffret 說：“當(dāng)品牌、組織超越了最初的商業(yè)意圖，或擴(kuò)展業(yè)務(wù)提供不同的產(chǎn)品，或領(lǐng)導(dǎo)希望吸引新的客戶，這些情況都可能需要新的品牌視覺。變化總是大家不舒服，然后又平息，我認(rèn)為時(shí)間才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)?！?
我們?cè)谠O(shè)計(jì)中，有時(shí)候會(huì)遇到自己的產(chǎn)品某個(gè)功能體驗(yàn)比較差，但是延續(xù)了很久，而市面上其他同類產(chǎn)品在相同功能的體驗(yàn)上已經(jīng)做的很好，我們可以往主流交互體驗(yàn)上改版嗎？這時(shí)需要權(quán)衡改變之后是否能帶來明顯的體驗(yàn)升級(jí)，還是說對(duì)于用戶來說是不痛不癢的變化，可改可不改？
以安卓為例，在幾年前，安卓手機(jī)的底部有 3 個(gè)實(shí)體鍵，后面手機(jī)更新迭代，變成了虛擬三鍵設(shè)計(jì)，因此底部存在3個(gè)不同功能的熱區(qū)。而在 Android 4.0 設(shè)計(jì)規(guī)范中，為了避免底部標(biāo)簽欄與已經(jīng)存在的底部虛擬鍵產(chǎn)生交互上的沖突，安卓明確說明了不要使用底部標(biāo)簽欄。
但這種規(guī)則，在使用體驗(yàn)上、開發(fā)者的適配上都發(fā)生了問題，用戶更接受 iOS 的體驗(yàn)，后面谷歌在 Material Design 中，允許了底部標(biāo)簽欄的存在。這相當(dāng)于和原來的用戶習(xí)慣不一致，但卻帶來了更好的用戶體驗(yàn)。
這里結(jié)合上癮模型的觸發(fā)、行為、多變的酬賞、投入進(jìn)行闡述，這四個(gè)步驟是一個(gè)循環(huán)，當(dāng)用戶越沉迷于這個(gè)循環(huán)，說明你的產(chǎn)品對(duì)用戶的吸引力越強(qiáng)，用戶習(xí)慣也就越強(qiáng)，這里會(huì)側(cè)重于從培養(yǎng)用戶習(xí)慣的角度進(jìn)行拆解。
外部觸發(fā)說白了就是加強(qiáng)產(chǎn)品曝光，讓用戶一下子就能想起你。舉個(gè)例子，“充電五分鐘”下一句是什么？你大概率會(huì)想到“通話兩小時(shí)”，這種經(jīng)過外部的長(zhǎng)期觸發(fā)，最終已經(jīng)轉(zhuǎn)變成了內(nèi)部的習(xí)慣，會(huì)讓你記憶深刻。
外部觸發(fā)的類型主要有4類，通過將信息滲透進(jìn)用戶生活，吸引他們采取下一步行動(dòng)：
付費(fèi)型觸發(fā)：做廣告、搜索引擎推廣都是付費(fèi)型觸發(fā)，爭(zhēng)取新用戶；
回饋型觸發(fā)：公關(guān)和媒體等領(lǐng)域的觸發(fā)，比如對(duì)產(chǎn)品做正面報(bào)道、推薦等；
人際型觸發(fā)：熟人之間的口碑傳播是一種極其有效的外部觸發(fā)，可以為產(chǎn)品帶來“病毒式增長(zhǎng)”；
自主型觸發(fā)：以驅(qū)動(dòng)用戶重復(fù)某種行為作為重點(diǎn)，讓用戶形成習(xí)慣，比如新聞?dòng)嗛?、每天早晨的鬧鐘等。
內(nèi)部觸發(fā)是用戶心理產(chǎn)生的使用動(dòng)機(jī)，內(nèi)在情緒驅(qū)動(dòng)自己去使用一款產(chǎn)品。
當(dāng)某個(gè)產(chǎn)品與你的思想、情感或者是原本已有的常規(guī)活動(dòng)發(fā)生密切關(guān)聯(lián)的時(shí)候，那一定是內(nèi)部觸發(fā)在起作用。對(duì)于習(xí)慣刷朋友圈的人來說，拿起手機(jī)就不會(huì)自覺打開微信；對(duì)于習(xí)慣刷微博的人來說，拿起手機(jī)就會(huì)刷起微博，甚至自己都沒有意識(shí)到。一再重復(fù)這種場(chǎng)景，會(huì)用戶就會(huì)對(duì)此形成一種穩(wěn)定的聯(lián)系，進(jìn)而形成習(xí)慣。
斯坦福大學(xué)福格博士曾提出“福格公式”，福格行為模型可以用公式來呈現(xiàn)，即 B = MAT。B 代表行為，M 代表動(dòng)機(jī)，A 代表能力，T 代表觸發(fā)。只有動(dòng)機(jī)、能力 、觸發(fā)三者皆備，才能跨過“行動(dòng)線”。
觸發(fā)：即上面所提到的外部觸發(fā)與內(nèi)部觸發(fā)。
動(dòng)機(jī)：動(dòng)機(jī)決定你是否愿意采取行動(dòng)。福格博士認(rèn)為，驅(qū)使我們采取行動(dòng)的核心動(dòng)機(jī)主要是三種：追求快樂，逃避痛苦；追求希望，逃避恐懼；追求認(rèn)同，逃避排斥。
能力：這里要詳述的是能力，所謂習(xí)慣，是指人們?cè)趲缀鯚o意識(shí)的情況下做出的舉動(dòng)。一種行為的復(fù)雜程度越低，無論是體力上的還是腦力上的，被人們重復(fù)的可能性就越大。越簡(jiǎn)單的操作成本，記憶成本越低，越容易形成用戶習(xí)慣。
舉個(gè)例子，刷抖音就是用戶行為成本極低的場(chǎng)景，你在刷抖音時(shí)，不需要多余的交互行為，切換視頻甚至不需要點(diǎn)擊，只需要向上滑動(dòng)。除開抖音算法的精準(zhǔn)推薦不說，從交互層面而言，也是足夠簡(jiǎn)單并且形成習(xí)慣了。
如果改變會(huì)打破認(rèn)知習(xí)慣，要讓用戶能快速了解新設(shè)計(jì)的使用方式。最好的方式是能夠讓用戶快速與已其他競(jìng)品的操作習(xí)慣產(chǎn)生關(guān)聯(lián)。比如采用其他主流應(yīng)用成熟的交互方式。
如果改版會(huì)很大程度上改變用戶行為，也可以考慮嘗試以下的方式。
· 改版操作指引：這種方式較為常見，但是仍應(yīng)注意避免繁瑣的操作指引，切勿把操作指引當(dāng)作體驗(yàn)差時(shí)的解決方案。
· 兼容多種用戶習(xí)慣：這種方式可以讓不同用戶選擇適合自己的交互方式，最大程度考慮到所有用戶，但同時(shí)也可能造成了功能冗雜的情況。比如安卓底部三大金剛鍵，后面手機(jī)全面屏?xí)r代，新增了全面屏手勢(shì)?？紤]到安卓老用戶的使用習(xí)慣，三大金剛鍵（底部虛擬按鍵）始終被保留下來；
· 允許切換新舊版本：這種方式一般是改版變化過大，用戶一時(shí)間不容易接受新的體驗(yàn)方式，常見于網(wǎng)站，如站酷早期的大改版，但是僅適用于過渡期。
當(dāng)然，除上述方式外，肯定還有一些其他讓改變行為習(xí)慣更舒服的方式，這里不一一列舉。
多變酬賞主要表現(xiàn)為：社交酬賞，獵物酬賞，自我酬賞。這幾種酬賞會(huì)加強(qiáng)用戶對(duì)產(chǎn)品的使用習(xí)慣。
社交酬賞：人們從產(chǎn)品中通過與他人的互動(dòng)而獲取的人際獎(jiǎng)勵(lì)，比如被認(rèn)同、重視、喜愛等。比如人們喜歡發(fā)朋友圈、微博等，期望得到回饋，某種程度上都是為了獲得社交酬賞。
獵物酬賞：人們從產(chǎn)品中獲得的具體資源或信息。比如瀏覽信息流，豐富的信息流內(nèi)容為用戶提供了資訊，比如刷抖音，人們追求視頻的新鮮感、追求內(nèi)容的豐富性都是屬于獵物酬賞。
自我酬賞：人們從產(chǎn)品中體驗(yàn)到的操控感、成就感和終結(jié)感。在目標(biāo)驅(qū)動(dòng)下，我們會(huì)去克服障礙，即便僅僅是因?yàn)檫@個(gè)過程能帶來滿足感。就像你玩游戲，希望贏過對(duì)面，或者期待將游戲玩通關(guān)，本質(zhì)上屬于自我酬賞。
如果希望繼續(xù)培養(yǎng)用戶習(xí)慣，與產(chǎn)品產(chǎn)生更緊密的聯(lián)系，就需要鼓勵(lì)用戶進(jìn)行一些投入，以增加他們使用產(chǎn)品的可能性。行動(dòng)只是用戶使用的第一步，促使用戶對(duì)產(chǎn)品的投入，才會(huì)真正增強(qiáng)用戶與產(chǎn)品之間的聯(lián)系，形成更強(qiáng)的用戶習(xí)慣。但是如果用戶自身沒有投入，即替換成本低，那么隨時(shí)都可能有被其他產(chǎn)品取代。
舉個(gè)例子，移動(dòng)互聯(lián)網(wǎng)時(shí)期，微信早早入局，人們的關(guān)系鏈都在微信里面沉淀，即人們?cè)绞褂梦⑿牛P(guān)系鏈沉淀越多，就越難以更換其他產(chǎn)品，所以兩年前想要挑戰(zhàn)微信的多閃、馬桶 MT 和聊天寶這三款社交 App 不可避免的失敗了。
用戶越愿意投入，就證明用戶粘性越高，在此過程中，用戶習(xí)慣也會(huì)不斷加強(qiáng)。
現(xiàn)階段，人人大談?dòng)脩袅?xí)慣，但是用戶習(xí)慣不以自身為標(biāo)準(zhǔn)，而是需要考慮產(chǎn)品用戶的行為特征，以及人們?cè)谑褂卯a(chǎn)品時(shí)更加深層的、甚至用戶本身都沒有發(fā)現(xiàn)的習(xí)慣，這就需要設(shè)計(jì)師對(duì)習(xí)慣的產(chǎn)生、習(xí)慣的判斷、習(xí)慣的培養(yǎng)有深入的認(rèn)識(shí)。
一般情況下，產(chǎn)品不適合貿(mào)然改變用戶習(xí)慣，但是在有特殊需要的情況下，還是不可避免的改變產(chǎn)品的用戶使用習(xí)慣，當(dāng)然我們需要如何讓用戶更加容易接受。大多數(shù)產(chǎn)品，都希望用戶能夠形成對(duì)自己產(chǎn)品的習(xí)慣，所以需要了解用戶如何對(duì)產(chǎn)品產(chǎn)生習(xí)慣、加強(qiáng)習(xí)慣，使產(chǎn)品擁有更強(qiáng)的吸引力，但是良好、正向的用戶習(xí)慣一定是基于用戶體驗(yàn)的。
文章來源：站酷 作者：熱風(fēng)_
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
逐幀分析方法是一種針對(duì)動(dòng)態(tài)的、短暫的過程對(duì)象進(jìn)行對(duì)比分析的方法。該方法可幫助設(shè)計(jì)師以微觀視角完成差異分析并得出相應(yīng)結(jié)論。與傳統(tǒng)的靜態(tài)截圖、動(dòng)態(tài)錄屏方法相比，其優(yōu)勢(shì)是可以看到過程的全貌，對(duì)動(dòng)態(tài)細(xì)節(jié)一覽無余，具有較高的分析可控性。
逐幀分析方法的產(chǎn)生源于一次針對(duì)加載場(chǎng)景的體驗(yàn)調(diào)研項(xiàng)目。百度百科對(duì)于加載的定義是：所有軟件要運(yùn)行必須加載到內(nèi)存，加載就是把需要的文件及信息讀取到內(nèi)存里。簡(jiǎn)單說來，所有從服務(wù)器讀取信息并顯示在手機(jī)屏幕上的過程都屬于加載。以百度APP舉例，加載的典型場(chǎng)景有：?jiǎn)?dòng)、打開FEED落地頁(yè)、打開搜索落地頁(yè)等。這些場(chǎng)景都有一個(gè)共同的特點(diǎn)是：動(dòng)態(tài)的過程，且過程較為短暫。
基于以上特點(diǎn)，運(yùn)用對(duì)比分析里最常見的靜態(tài)截圖或動(dòng)態(tài)錄屏方法，是無法完成分析的。原因是，靜態(tài)截圖對(duì)于一個(gè)動(dòng)態(tài)過程來說，無法看到過程的全貌，可對(duì)比點(diǎn)較少，分析要素不可控（一張靜態(tài)截圖中，無法做到涵蓋所有分析元素）。而采用動(dòng)態(tài)錄屏的方法進(jìn)行分析時(shí)，問題也同樣明顯：過程太快，無法看清細(xì)節(jié)；不同視頻節(jié)奏不同，對(duì)比起來比較困難。因此針對(duì)加載這種特殊的場(chǎng)景，就需要采用一種全新的方法既能看到過程全貌，又可以對(duì)細(xì)節(jié)一覽無余。
小時(shí)候我們都玩過跑馬燈的游戲，即一系列靜態(tài)圖片通過快速輪轉(zhuǎn)，由于視覺滯留效應(yīng)，便可看到一段動(dòng)態(tài)影像。如果把產(chǎn)生動(dòng)畫的過程翻轉(zhuǎn)過來，也就是說如果可以把一段動(dòng)態(tài)影像拆成一系列序列幀，那么是否可以更好的完成影像觀察？
以百度APP打開小視頻落地頁(yè)的加載場(chǎng)景為例，當(dāng)我嘗試將這段300ms的過程錄屏拆分為18張序列幀后發(fā)現(xiàn)，除了可以清楚的看到過程全貌外，對(duì)于過程中的所有細(xì)節(jié)也可以一覽無余。同時(shí)，序列幀可以進(jìn)行任意拆分，以便完成多角度觀察。
到此為止，逐幀分析方法的雛形已經(jīng)產(chǎn)生。在之后的章節(jié)，我將為大家具體介紹如何完成序列幀分析以及如何導(dǎo)出序列幀。
面對(duì)一系列序列幀，我們可以通過“序列幀三要素”來導(dǎo)出關(guān)鍵數(shù)據(jù)及結(jié)論。
要素1：序列幀全流程
首先，我們進(jìn)行序列幀觀察的時(shí)候，需要明確定義目標(biāo)對(duì)象的起點(diǎn)與終點(diǎn)。由于逐幀對(duì)比方法適用的觀察對(duì)象均為短暫的動(dòng)態(tài)過程，明確定義全流程的起點(diǎn)與終點(diǎn)是為了讓觀察過程和結(jié)論更加精準(zhǔn)。
以百度APP打開搜索落地頁(yè)為例，起點(diǎn)與終點(diǎn)分別是：點(diǎn)擊搜索結(jié)果手指松開的第一幀與搜索落地頁(yè)首屏內(nèi)容全部加載完成的最后一幀（可以通過觀察前后幀是否有變化得出結(jié)論）。這一要素中，可以采集到的關(guān)鍵數(shù)據(jù)為時(shí)長(zhǎng)，時(shí)長(zhǎng)可以幫助我們觀察加載性能的好壞，甚至在進(jìn)行競(jìng)品對(duì)比的時(shí)候，快速找出與競(jìng)品在時(shí)長(zhǎng)方面的差異從而得出優(yōu)化建議。結(jié)論輸出時(shí)，需要將幀數(shù)轉(zhuǎn)換成為時(shí)間單位（如何將幀數(shù)轉(zhuǎn)化成時(shí)間會(huì)在后續(xù)文章中為大家講解）。
要素2：序列幀子流程
在前文中提到，逐幀分析法的一個(gè)優(yōu)勢(shì)是，逐幀序列可以進(jìn)行任意拆分，以便完成多角度分析。在分析的第2要素中，我們可以最大限度拆分子流程，同時(shí)需要明確每一個(gè)子流程的起點(diǎn)與終點(diǎn)。這一要素的分析中，可以采集到的關(guān)鍵數(shù)據(jù)為子流程時(shí)長(zhǎng)，缺失或多出的子流程，以及子流程內(nèi)部的差異。
例如在百度APP Android端熱啟動(dòng)過程中，全流程被拆分為：?jiǎn)?dòng)至全屏、持續(xù)白屏態(tài)、內(nèi)容加載3個(gè)子流程。通過換算，可以看到每個(gè)子流程的時(shí)長(zhǎng)。并且在和競(jìng)品的對(duì)比中發(fā)現(xiàn)，百度APP缺失了持續(xù)白屏態(tài)這個(gè)子流程。而在啟動(dòng)至全屏的子流程中，百度APP因?yàn)闆]有添加過渡動(dòng)畫，與多數(shù)競(jìng)品是有差異的。
要素3：用戶體驗(yàn)節(jié)點(diǎn)
用戶體驗(yàn)節(jié)點(diǎn)的對(duì)比是逐幀分析法的第三要素，這一要素進(jìn)一步深入到過程的微觀視角，使得分析結(jié)論更為全面。而用戶體驗(yàn)節(jié)點(diǎn)是逐幀分析法所提出的一個(gè)全新概念，其定義是：產(chǎn)品界面上任何一次用戶可感知的變化，都叫做用戶體驗(yàn)節(jié)點(diǎn)。以百度APP Android打開搜索結(jié)果頁(yè)為例，整個(gè)過程的用戶體驗(yàn)結(jié)點(diǎn)有5個(gè)。通過用戶體驗(yàn)節(jié)點(diǎn)可以采集到的關(guān)鍵數(shù)據(jù)有：用戶體驗(yàn)節(jié)點(diǎn)的數(shù)量以及用戶體驗(yàn)節(jié)點(diǎn)的順序。
我們以Android打開搜索落地頁(yè)為例為大家進(jìn)一步講解如何完成用戶體驗(yàn)節(jié)點(diǎn)數(shù)量的分析。通過對(duì)比發(fā)現(xiàn)，百度APP在整個(gè)加載過程中的用戶體驗(yàn)節(jié)點(diǎn)數(shù)量多于競(jìng)品，多出的節(jié)點(diǎn)為：白屏節(jié)點(diǎn)、文字加載節(jié)點(diǎn)。雖然百度APP加載時(shí)長(zhǎng)與競(jìng)品相差無幾，但是由于節(jié)點(diǎn)數(shù)量較多，導(dǎo)致用戶在等待過程中經(jīng)歷了過多的頁(yè)面狀態(tài)變化，形成了較強(qiáng)的視覺閃跳感，從而引發(fā)用戶感知層面的錯(cuò)覺，認(rèn)為百度的加載時(shí)長(zhǎng)較長(zhǎng)。因此我們可以通過減少非必要的用戶體驗(yàn)節(jié)點(diǎn)，從而提升加載場(chǎng)景的流暢感。但是，用戶體驗(yàn)節(jié)點(diǎn)的數(shù)量并非越少越好，這還要根據(jù)實(shí)際業(yè)務(wù)與優(yōu)化方向來輸出具體結(jié)論。
用戶體驗(yàn)節(jié)點(diǎn)順序的分析，可以參考百度APP iOS FEED打開圖文落地頁(yè)的示例。在這一示例中，百度APP圖文落地頁(yè)內(nèi)容加載節(jié)點(diǎn)位于框架轉(zhuǎn)場(chǎng)節(jié)點(diǎn)之后。但是對(duì)比競(jìng)品發(fā)現(xiàn)，多數(shù)競(jìng)品在這個(gè)過程中，內(nèi)容加載是先于框架轉(zhuǎn)場(chǎng)的，而這種節(jié)點(diǎn)順序的優(yōu)勢(shì)是，轉(zhuǎn)場(chǎng)完成后，用戶即可開始瀏覽內(nèi)容，整體感知較為流暢。這種導(dǎo)致閱讀流暢感體驗(yàn)差異的原因很難通過肉眼或常規(guī)競(jìng)品對(duì)比法觀察得出，由此可見逐幀分析方法針對(duì)特殊場(chǎng)景的分析優(yōu)勢(shì)非常明顯。
在此，我們回顧一下逐幀分析方法的“序列幀三要素”。
要素1：序列幀全流程，可采集的關(guān)鍵數(shù)據(jù)有：全流程時(shí)長(zhǎng)。
要素2：序列幀子流程，可采集的關(guān)鍵數(shù)據(jù)有：子流程時(shí)長(zhǎng)、子流程是否缺失、子流程內(nèi)部的差異。
要素3：用戶體驗(yàn)節(jié)點(diǎn)，可采集的關(guān)鍵數(shù)據(jù)有：用戶體驗(yàn)節(jié)點(diǎn)的數(shù)量與順序。
工欲善其事，必先利其器。進(jìn)行逐幀分析前，我們首先要將錄制好的視頻轉(zhuǎn)化成序列幀。以下章節(jié)將為大家講解如何導(dǎo)出逐幀序列。
整個(gè)過程可分為：錄制、創(chuàng)建合成、輸出3個(gè)環(huán)節(jié)。
由于系統(tǒng)特性，iOS和Android手機(jī)雙端建議采用不同的錄制手段。iOS手機(jī)可直接通過數(shù)據(jù)線連接到電腦，并使用電腦的QuickTime進(jìn)行錄制。這樣的好處是保證了錄屏的幀數(shù)基本穩(wěn)定在60FPS（每秒傳輸幀數(shù)）；Android手機(jī)建議采用機(jī)內(nèi)功能或其他錄屏應(yīng)用完成錄制，但是安卓中低端手機(jī)很容易出現(xiàn)掉幀的現(xiàn)象，因此就需要我們?cè)诤铣珊洼敵鲭A段制定一個(gè)合理的輸出幀數(shù)，讓分析的結(jié)果更加接近真實(shí)。另外，建議錄制的起始點(diǎn)適當(dāng)延長(zhǎng)，這樣便于素材在合成階段精準(zhǔn)切割。
這里要為大家講解一下如何將幀數(shù)換算成時(shí)長(zhǎng)。以iOS的輸出幀數(shù)為例，換算公式為：iOS時(shí)長(zhǎng)= N（幀數(shù)） x 16.6ms。例如：在iOS打開圖文落地頁(yè)的加載過程中，百度APP總時(shí)長(zhǎng)為：73（幀數(shù)）x16.6ms= 1217ms（約等于）。
創(chuàng)建合成階段所使用的工具是AE。AE的好處是：
1.方便查看原視頻幀速率，對(duì)不穩(wěn)定的幀速率進(jìn)行統(tǒng)一處理；
2.可以將視頻轉(zhuǎn)換為圖片序列，便于后續(xù)的逐幀分析；
3.AE也可以將多個(gè)視頻進(jìn)行同步播放來進(jìn)行對(duì)比驗(yàn)證。
第一步：打開AE>合成>新建合成。
這一步的目的是通過合成設(shè)置，統(tǒng)一幀速率。通過一系列實(shí)驗(yàn)，我在新建合成時(shí)，將iOS錄屏的幀速率設(shè)置為60幀/秒，Android錄屏的幀速率設(shè)置為30幀/秒，這樣可以保證最大化的減少空白幀，使分析結(jié)果更加準(zhǔn)確。
第二步：導(dǎo)入錄屏
第三步：截取起止點(diǎn)關(guān)鍵幀。
在進(jìn)行素材處理的時(shí)候，需要精確到每一幀，由于逐幀分析所針對(duì)場(chǎng)景的時(shí)長(zhǎng)極為短暫，很可能由于一幀的差距，導(dǎo)致分析結(jié)果相差甚遠(yuǎn)。
以百度APP iOS端熱啟動(dòng)過程為例，我們將錄屏中手指抬起的前一幀（即icon顯示出點(diǎn)擊態(tài)）做為起點(diǎn)，將APP啟動(dòng)后填滿手機(jī)屏幕的第一幀（可通過觀察法，在AE中查看前后幀是否有變化）做為終點(diǎn)完成素材處理。
輸出的路徑為：菜單欄 文件>導(dǎo)出>添加到渲染隊(duì)列，在渲染隊(duì)列中找到待渲染視頻，再在 輸出模塊>格式選擇JPEG或PNG以序列導(dǎo)出。這一步的目的是，將一段視頻文件拆分成可提取對(duì)比的逐幀畫面。
最終導(dǎo)出的序列幀如下：
在完成分析對(duì)象序列幀導(dǎo)出工作后，便可開始進(jìn)行逐幀分析了。
逐幀分析法是在實(shí)際項(xiàng)目中總結(jié)并提煉出的一種全新的分析方法。該方法對(duì)于短暫的、動(dòng)態(tài)的過程非常適用，可以幫助我們從微觀視角發(fā)現(xiàn)問題、驗(yàn)證問題、得出優(yōu)化結(jié)論，極大的提升了分析效率和精準(zhǔn)度。逐幀分析法也在后續(xù)的多個(gè)項(xiàng)目中也得到了推廣和驗(yàn)證，希望可以幫助到大家。
文章來源：站酷 作者：MEUX
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
Meet more beautiful colors.
“色彩是我們感知世界的重要媒介，對(duì)于信息傳達(dá)有著重要的作用，能使人們能夠更有效的感知設(shè)計(jì)的意圖和內(nèi)涵，使傳達(dá)更高效。且人對(duì)色彩的視覺感知與想象能力，能夠指導(dǎo)人做出預(yù)測(cè)、理解和決策?！?/em>
-- lyft kevyn arnott
——————————
隨著世界的數(shù)字化轉(zhuǎn)型進(jìn)程大爆發(fā)，科技把每一張有形的辦公桌移到了云端，用戶沉浸在數(shù)字構(gòu)建的世界中。騰訊文檔作為先進(jìn)的生產(chǎn)力工具，產(chǎn)品生態(tài)越來越多元豐富，多品類多終端的復(fù)雜環(huán)境展現(xiàn)在我們面前，開始真正的朝復(fù)雜龐大的大規(guī)模設(shè)計(jì)邁進(jìn)。我們希望能以更加專業(yè)、高效的設(shè)計(jì)姿態(tài)迎接騰訊文檔的未來挑戰(zhàn)。
色彩是體現(xiàn)品牌與基因的關(guān)鍵因素，構(gòu)建科學(xué)高效的色彩系統(tǒng)，建立產(chǎn)品的品牌形象，對(duì)產(chǎn)品設(shè)計(jì)極具指導(dǎo)意義。
騰訊文檔在色彩上也進(jìn)行了一些深入的挖掘和沉淀，一方面希望帶給用戶全新的品牌印象和認(rèn)知，另一方面構(gòu)建科學(xué)有效的色彩系統(tǒng)，為產(chǎn)品的發(fā)展提供優(yōu)質(zhì)高效的設(shè)計(jì)系統(tǒng)基礎(chǔ)。本文將聚焦于色彩系統(tǒng)的構(gòu)建。
騰訊文檔代表著效率協(xié)作的先進(jìn)生產(chǎn)力，從云端創(chuàng)作到云端協(xié)作，打破了辦公空間的實(shí)體界限。我們希望，新的品牌色，能夠?yàn)轵v訊文檔塑造更加有未來科技感及智慧感的視覺感受和認(rèn)知。
我們將標(biāo)準(zhǔn)色由平靜的天藍(lán)色，升級(jí)為更加生動(dòng)、進(jìn)取、科技、可靠的明亮清澈的鈷藍(lán)色。這種藍(lán)色具有更多的電子意味，蘊(yùn)含了更多的活力和想象力，承載了騰訊文檔對(duì)未來數(shù)字世界新挑戰(zhàn)的態(tài)度和形象的進(jìn)化。
同時(shí)我們認(rèn)為灰色在騰訊文檔的色彩系統(tǒng)中起著至關(guān)重要的作用，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。我們將灰色賦予了統(tǒng)一的品牌認(rèn)知感受，將藍(lán)色加入到中性灰色里，生成了騰訊文檔特有的藍(lán)灰色。
至此，騰訊文檔標(biāo)準(zhǔn)色進(jìn)化升級(jí)，它體現(xiàn)了騰訊文檔對(duì)可靠穩(wěn)定的技術(shù)、產(chǎn)品體驗(yàn)的追求，以及對(duì)未來智能的數(shù)字世界的不斷創(chuàng)新和進(jìn)取，蘊(yùn)藏著無限的可能性。
在一個(gè)科學(xué)有效的色彩系統(tǒng)里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產(chǎn)品體系的整體色彩感受，減少用戶在產(chǎn)品體驗(yàn)中對(duì)反復(fù)出現(xiàn)的主色的視覺疲勞。
騰訊文檔的產(chǎn)品生態(tài)愈來愈豐富多元。我們擁有多品類的產(chǎn)品，為用戶提供了豐富的產(chǎn)品功能，其中云端協(xié)作、文檔資產(chǎn)的沉淀管理是騰訊文檔的非常重要的能力，在線文檔、在線表格、在線幻燈片、在線收集表、在線思維導(dǎo)圖、在線流程圖以及文件夾等的品類圖標(biāo)，又是用戶在對(duì)文檔進(jìn)行協(xié)作分享及沉淀時(shí)，識(shí)別不同類型文件的關(guān)鍵因素?；诖耍v訊文檔相較于其他產(chǎn)品需要更多的輔助色。
于是，如何有效的選擇既符合品牌調(diào)性又有區(qū)別度的輔助色是構(gòu)建騰訊文檔色彩系統(tǒng)的關(guān)鍵。在輔助色選擇上，我們以鄰近色、互補(bǔ)色、對(duì)比色為主要方法構(gòu)建了輔助色彩體系。
我們以騰訊文檔標(biāo)準(zhǔn)色#1E6FFF（H 218 S 88 B 100) 為起始點(diǎn)，S（飽和度）、B（明度）保持不變，H（色相）以218°為起點(diǎn)，以15°為增量或減量標(biāo)準(zhǔn)，生成24色色板。這個(gè)色板是我們選取輔助色的重要依據(jù)。
● 鄰近色 在色相環(huán)中，相差15°的顏色為鄰近色，凡在60°范圍內(nèi)的顏色都屬于鄰近色的范圍。鄰近色之間往往是我中有你，你中有我，色彩之間比較和諧。
● 對(duì)比色 在色相環(huán)中，角度相差120°-180°之間的色彩，文檔使用了120°為角度來選擇對(duì)比色。
● 互補(bǔ)色 在色相環(huán)中成180°角的兩種顏色，互為補(bǔ)色，當(dāng)這兩種顏色彼此相鄰放置時(shí)，它們會(huì)為這兩種特定顏色創(chuàng)造最強(qiáng)烈的對(duì)比度。
為了保持騰訊文檔的基礎(chǔ)品牌調(diào)性，并保證其具有極清晰的識(shí)別度，我們以品牌藍(lán)色為起點(diǎn)，選擇了相對(duì)較多的鄰近色，以保證在色溫上保持騰訊文檔整體色調(diào)的清爽感。并利用對(duì)比色及互補(bǔ)色，選擇更加豐富多元的色相，以保證能夠滿足各種使用場(chǎng)景下對(duì)色彩的需求。
總的原則是利用鄰近色構(gòu)建有質(zhì)感、品牌感的色彩家族，利用對(duì)比色及互補(bǔ)色擴(kuò)展色相，以制造更強(qiáng)烈的色彩對(duì)比，滿足一些沖突性場(chǎng)景。
雖然我們保持相同的飽和度和明度，使用科學(xué)的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導(dǎo)致在視覺感受上的感官體驗(yàn)并不同頻。
黃色、綠色的明度即發(fā)光度較高，藍(lán)色就稍微偏暗一些，導(dǎo)致色板看起來不一致。為了讓不同色相看起來更加協(xié)調(diào)，需要調(diào)整色板的明度和飽和度，以保證視覺感官體驗(yàn)同頻且更加和諧舒適。
校正原則：
● 色相必須保持是 同類色（色相環(huán)中15°夾角內(nèi)的顏色）
● 保持感官明度同頻
● 保證視障群體的識(shí)別度
校正后我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色。并且針對(duì)視障群體進(jìn)行了色彩測(cè)試。
灰色是產(chǎn)品體驗(yàn)設(shè)計(jì)中至關(guān)重要的一節(jié)，工具型產(chǎn)品大部分是由各種各樣的容器、面板、列表組成?；疑珵楫a(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次，保持舒適的對(duì)比度是提高可讀性和吸引用戶注意力的關(guān)鍵。
前面我們已經(jīng)定義了騰訊文檔的藍(lán)灰色，在界面的設(shè)計(jì)中，我們將其與中性的灰色結(jié)合，共同構(gòu)建灰色的色彩體系 。
● 擴(kuò)展藍(lán)灰色相，應(yīng)用于圖標(biāo)、容器，構(gòu)建有層次、舒適清爽的產(chǎn)品界面 。
● 用帶透明度的黑色，應(yīng)用于字體等。
為構(gòu)建一個(gè)高效易用的灰色調(diào)色板，我們將藍(lán)灰色彩作為Y軸，有透明度的中性灰色作為X軸，兩者透明度保持一致，建立起騰訊文檔有梯度的、豐富的灰色調(diào)色板。
對(duì)比度是否合理是閱讀體驗(yàn)是否舒適的重要評(píng)價(jià)維度，過高或者過低的對(duì)比度都會(huì)影響閱讀體驗(yàn)及識(shí)別度。下圖是對(duì)比度的鐘型曲線圖，隨著對(duì)比度的增加，舒適度和識(shí)別度都在上升，但一旦超過一個(gè)界點(diǎn)，對(duì)比度越增加，識(shí)別度和友好度亦會(huì)逐步下降。
為保證視障用戶的使用，保證足夠的對(duì)比度，遵守 WCAG 2.0 的標(biāo)準(zhǔn)，我們對(duì)調(diào)色板灰色的對(duì)比度進(jìn)行了可用性測(cè)試，以指導(dǎo)騰訊文檔體驗(yàn)設(shè)計(jì)中灰色調(diào)色板的使用。
是：對(duì)比度在AA標(biāo)準(zhǔn)以上，符合W3C標(biāo)準(zhǔn)，可以使用。
中：僅可用于disable狀態(tài)。
否：對(duì)比度在AA標(biāo)準(zhǔn)以下，不符合W3C標(biāo)準(zhǔn)，不可使用。
定義好文檔的主色、輔助色以及中性色后，我們需建立完整的調(diào)色板來滿足不同場(chǎng)景下顏色的使用。以傳達(dá)品牌精神，建立色彩層級(jí)，或傳達(dá)信息，或強(qiáng)化界面層級(jí)。
在色彩系統(tǒng)中，很多產(chǎn)品使用 Tints and shades 系統(tǒng)，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板。但這種方法得到的調(diào)色板往往比較刻板僵硬，故騰訊文檔采用了另一種方式，將已生成的灰色色板與色相疊加，在符合無障標(biāo)準(zhǔn)的區(qū)域，選擇不同明度飽和度的色彩，形成有梯度、有層級(jí)的彩色調(diào)色板。
Tencentdocs_blue：
生成主色-藍(lán)色色階：
用同樣的方法將輔助色生成色階：
現(xiàn)在，我們有一個(gè)梯度豐富，能夠支持騰訊文檔設(shè)計(jì)系統(tǒng)的調(diào)色板了～
實(shí)際案例
實(shí)踐才是硬道理，我們嘗試以這個(gè)調(diào)色板為指導(dǎo)來調(diào)整優(yōu)化騰訊文檔鏈接色的優(yōu)化調(diào)整。
為保證用戶閱讀體驗(yàn)的舒適度，鏈接之類的彩色文本，要求顏色在背景下可以達(dá)到4.5:1對(duì)比度以上，以使它能夠清晰的從灰色文本、背景中脫穎而出。于是，我們放棄了品牌藍(lán)_1E6FFF，選擇了品牌藍(lán)70_175CEB 作為鏈接色。
以后，選擇顏色，so easy～
這個(gè)長(zhǎng)長(zhǎng)的制作調(diào)色板的故事就要結(jié)束了，我在這項(xiàng)工作中，重新審視過去設(shè)計(jì)中的設(shè)計(jì)決策方法，在其中學(xué)到了很多東西，希望本文對(duì)您也有所幫助。
我們經(jīng)?？焖俚膭?dòng)手，依靠主觀情感去選擇顏色，在剛開始可能沒遇到什么特別的問題，但隨著產(chǎn)品的壯大和發(fā)展，往往會(huì)越來越凌亂。抽絲剝繭的搭建色彩系統(tǒng)，真正讓色彩為設(shè)計(jì)服務(wù)，簡(jiǎn)化團(tuán)隊(duì)的工作，相信您會(huì)有更愉快的工作體驗(yàn)～
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
為什么那么多人覺得應(yīng)該先學(xué)UI設(shè)計(jì)再學(xué)交互設(shè)計(jì)，因?yàn)閁I門檻低所以入手快。其實(shí)交互比UI更早出現(xiàn)，從需求理論可以看出人們?cè)谧分鹬饔^體驗(yàn)的感受，在基礎(chǔ)需求未被滿足前是不會(huì)出現(xiàn)更高層次的需求的。所以UI設(shè)計(jì)讓更多用戶感受到了舒適和更好的體驗(yàn)。殊不知，如果底層的交互和產(chǎn)品的可用性未被滿足，那么UI做的再好也是徒勞。
市面上大量出現(xiàn)同質(zhì)化產(chǎn)品、設(shè)計(jì)，就是因?yàn)榇蠹叶荚诎凑宅F(xiàn)有的，常用的模版在設(shè)計(jì)，現(xiàn)在其實(shí)比早兩年會(huì)好很多，很多設(shè)計(jì)師已經(jīng)開始從美化工作逐漸深挖到區(qū)分甚至自我驅(qū)動(dòng)或者價(jià)值探尋的工作。
例如下面的案例，這是一個(gè)電瓶車電池租賃的一個(gè)產(chǎn)品。
從美觀角度，左側(cè)的界面更加簡(jiǎn)潔信息也有規(guī)律，有美觀的banner和看起來讓人有點(diǎn)擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當(dāng)我不放出右側(cè)的對(duì)比圖時(shí)，大家在第一反應(yīng)中，有多少人可以重啟自己的視角，還是說已經(jīng)被這個(gè)頁(yè)面所拉入到不可自拔的漩渦中去了呢？
如果讓你盯著第一個(gè)界面進(jìn)行改版，我相信還是會(huì)有很多小伙伴可能只是會(huì)把底下的信息流挪上來，或者新增一些“我們覺得”有用的板塊。但其實(shí)這整個(gè)形態(tài)就是錯(cuò)的，即便將錯(cuò)誤路徑3改成了路徑2，你以然還是在錯(cuò)誤的路徑上，本質(zhì)沒變。所以為什么我們說要做正確的事而不是正確的做事。
交互不僅僅能夠讓產(chǎn)品好用的，也要讓產(chǎn)品走對(duì)方向。
另外，UI也是交互的一部分，屬于看的懂。好用可以分為看得懂，學(xué)的快，用的會(huì)，交互體現(xiàn)在人們?nèi)粘Ｋ佑|到的大部分媒介，并且與之產(chǎn)生聯(lián)系。例如一把水壺，水壺的設(shè)計(jì)形式首先通過視覺讓你感知這是一個(gè)水壺，如果把水壺的外形做成一個(gè)馬桶，你覺得它還是一個(gè)水壺嗎，這叫看的懂。學(xué)的快指的是當(dāng)我看懂了之后我馬上就可以對(duì)這個(gè)產(chǎn)品進(jìn)行基礎(chǔ)操作，例如裝水、倒水。而用的會(huì)就是這個(gè)水壺更多的附加功能，例如燒水、定時(shí)、調(diào)溫等等。
交互的媒介是不可缺少的，大家是否去研究過為什么古代人們撰寫文字是從上至下，從右往左而現(xiàn)代人的習(xí)慣是從左右的？古代受限于工具、媒介，竹簡(jiǎn)是主流的記錄文字信息的媒介， 有人會(huì)說竹簡(jiǎn)可以從做往右寫不是非要從上往下啊，但是大家可以看到人們是如何打開進(jìn)行閱讀的，如果是橫著閱讀但是打開是上下展開就會(huì)非常不自然了。
所以在當(dāng)時(shí)人們?yōu)榱诉m應(yīng)非常有限的工具資源，改變了自然的操作方式。但現(xiàn)代社會(huì)如果說你的產(chǎn)品不為用戶的使用和場(chǎng)景去考慮，那基本也就涼涼了。
從2g到5g時(shí)代的發(fā)展，除了生活方式發(fā)生翻天覆地的變化外，我們所接觸到的媒介也發(fā)生了變化，從2g時(shí)代以文字為主的信息到5g時(shí)代視頻、游戲、影音等為主的信息化進(jìn)步，讓人們對(duì)信息的獲取更加方便快捷。除了內(nèi)容，外對(duì)于像移動(dòng)手機(jī)這樣的設(shè)備用戶對(duì)其操作方式和習(xí)慣也有了更多的變化，從當(dāng)初的搬磚按鍵手機(jī)到支持ar等新技術(shù)的超智能化手機(jī)，改變了我們的認(rèn)知也改變了我們的生活方式。
平臺(tái)遷移的交互成本，很多同學(xué)可能都玩過moba類游戲-dota，這是一款在電腦端戰(zhàn)術(shù)競(jìng)技類游戲。在dota中我們經(jīng)常使用的交互形式主要分為鍵盤和鼠標(biāo)的控制，鍵盤用來控制技能的釋放和其他快捷物品的使用，都是通過按按鍵的形式進(jìn)行釋放。通過鼠標(biāo)右鍵來控制人物的移動(dòng)和左鍵選擇技能和物品釋放的目標(biāo)，這是端游中基本的交互行為與操作。
在現(xiàn)在非?；馃岵⑶夷Ｊ胶蚫ota相似度很高的王者榮耀手游中，我們看到了，如何從端游到手游的交互遷移。從鼠標(biāo)控制移動(dòng)到左手拇指來控制移動(dòng)，右手拇指來控制技能的釋放，在這里大家要注意，在端游中技能的釋放是可以非常精準(zhǔn)的，并且可以指向性釋放在某一個(gè)角色中，但手游不行。鼠標(biāo)擁有移動(dòng)、視角、釋放技能、使用物品多個(gè)功能，但是在手游中我們無法做到選中某一個(gè)技能再點(diǎn)擊到某一個(gè)角色上，所以手游中只能進(jìn)行非指向性的預(yù)判技能釋放。
同樣在端游和手游的吃雞游戲中，端游鍵盤控制人物移動(dòng)，鼠標(biāo)控制射擊與視角，但是在手游中控制射擊與視角就需要2個(gè)手指來完成非常不方便，也很影響射擊的精度，但是如果做成吸附式準(zhǔn)星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個(gè)用戶痛點(diǎn)開發(fā)出了吃雞專用的輔助設(shè)備，專門用來給多余的手指進(jìn)行射擊操作。
另外，大家如果做b端的同學(xué)應(yīng)該也深有感觸，平臺(tái)遷移的成本非常高。想要把集成非常復(fù)雜的業(yè)務(wù)后臺(tái)切換到移動(dòng)端是一件很麻煩的事，因?yàn)樵诰W(wǎng)頁(yè)端我們有大量的空間和更自由的控件形式去承載信息，比如聯(lián)動(dòng)的左側(cè)標(biāo)簽導(dǎo)航和頂部聯(lián)動(dòng)的標(biāo)簽導(dǎo)航，在增刪改查的操作中顯得清晰高效。但是到移動(dòng)端上雖然可以到做聯(lián)動(dòng)導(dǎo)航，但是頁(yè)面顯示實(shí)在有限，很多的信息完全無法在一個(gè)界面中呈現(xiàn)，所以要么將頁(yè)面進(jìn)行左右滑動(dòng)，要么拆分進(jìn)行多步操作。但本身?yè)碛袕?fù)雜業(yè)務(wù)功能的后臺(tái)系統(tǒng)就不適宜遷移到移動(dòng)端上。
web端的工具和網(wǎng)頁(yè)通常都會(huì)有撤銷操作，按CMD（ctrl）+Z大部分都可進(jìn)行撤銷上一步操作，但是在移動(dòng)端我們無法通過特定、或者統(tǒng)一的手勢(shì)進(jìn)行撤銷，所以很多時(shí)候在表單輸入的時(shí)候會(huì)有一鍵刪除圖標(biāo)，卻無法進(jìn)行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后，刪除按鈕變?yōu)槌蜂N按鈕，有待考量。
到底什么是交互設(shè)計(jì)，這個(gè)問題其實(shí)是比較復(fù)雜的，也是我一直在思考的問題。所以也翻閱了很多文獻(xiàn)，嘗試做更多的案例來解釋。交互設(shè)計(jì)的概念真的挺多的，光網(wǎng)上能夠找到的定義就不下5種，這些對(duì)交互設(shè)計(jì)的定義中，比較頻繁出現(xiàn)的是行為、場(chǎng)景、用戶等詞匯，交互設(shè)計(jì)到底設(shè)計(jì)的是用戶的行為，還是設(shè)計(jì)用戶正在交互的媒介或者是用戶正在使用媒介這件事情，我覺得可能還是沒有能夠解釋清楚交互設(shè)計(jì)的本質(zhì)。
中國(guó)歷史文字的演變，它并不是一個(gè)模仿的過程，而是一個(gè)從底層對(duì)文化、自由、精神、環(huán)境、人的深刻理解而發(fā)生的一種進(jìn)化過程。但現(xiàn)在其實(shí)很多的交互形式都是來源于一些大流量產(chǎn)品的模仿，更多的是擔(dān)心用戶成本過高而妥協(xié)為滿足用戶預(yù)期。
事實(shí)上，為什么我們講不清楚什么是交互設(shè)計(jì)，其實(shí)UI設(shè)計(jì)也一樣，她絕不可能單純的指代用工具繪制出用戶界面，其實(shí)是因?yàn)樾畔⒉粚?duì)成、詞不達(dá)意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語(yǔ)
例如“你可以意思一下”，單就這句話，我們大概知道最關(guān)鍵的是“意思”二字，包含了特別多的含義，含義需要通過語(yǔ)境、使用場(chǎng)景來區(qū)分，說者的“意思”是想告訴聽者什么呢？沒人知道，是一口氣干完一瓶酒，還是喝一口？還是送一點(diǎn)禮還是？應(yīng)付一下？
當(dāng)然這句話中的“可以”也很有講究，加上“可以”說明你也能選擇不“意思”，是不是覺得這7個(gè)字讓我們整一句話都活了起來，說者與聽者如果不在一個(gè)境中，聽著就壓根不知道說者的具體表達(dá)含義。
同樣的，在設(shè)計(jì)領(lǐng)域，很多設(shè)計(jì)師喜歡用大氣、高級(jí)、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲，還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞，這個(gè)詞聽起來比較抽象，讓聽者都有點(diǎn)不太好意思追問什么是呼吸感，其實(shí)你問了，說者也不知道怎么描述?？赡苷f者覺得現(xiàn)在信息太密集讓人無法呼吸，但設(shè)計(jì)者覺得現(xiàn)在剛好，所以本身就沒有一個(gè)標(biāo)準(zhǔn)，更多的就是主觀的感受，讓你不得不接受這個(gè)建議的原因是因?yàn)閮烧叩纳矸荨?
我們用我們能夠講述的語(yǔ)言去描繪我們不懂的事物，再例如設(shè)計(jì)師和開發(fā)還原只會(huì)說往左移動(dòng)10px，而不會(huì)說給這個(gè)view加上padding left 10px。還有你和開發(fā)為什么溝通起來那么累就是因?yàn)槟銈z完全無法站在對(duì)方的角度對(duì)這件事達(dá)成共識(shí)，設(shè)計(jì)師通常喜歡描述從左到右或者從上到下，但是在開發(fā)的語(yǔ)音認(rèn)知理，他需要知道的是空間坐標(biāo)，并且具體的移動(dòng)單位。所以為什么我們那么鼓勵(lì)廣大設(shè)計(jì)師去學(xué)習(xí)一些開發(fā)知識(shí)，開發(fā)也盡可能的去補(bǔ)充設(shè)計(jì)背景。
在這里，交互設(shè)計(jì)師產(chǎn)出的交互說明文檔就是能夠幫助設(shè)計(jì)師與開發(fā)有一個(gè)更好的溝通，所以能力較強(qiáng)的交互設(shè)計(jì)或者視覺設(shè)計(jì)都能夠把自己想表達(dá)的信息表達(dá)的很清楚。
再舉個(gè)例子，不知道大家有沒有編輯過問卷或者做過用戶訪談，很多時(shí)候是不是覺得收集到的信息無效、無用，其實(shí)很多的原因是因?yàn)槲覀兒陀脩魧?duì)于這些問題壓根不在一個(gè)頻道，比如：你的問卷問的是，您喝酒的頻率是多少，選項(xiàng)有：從不、偶爾、經(jīng)常，在用戶的眼里偶爾可能是1年喝一次，而我們覺得差不多1個(gè)月喝一次算偶爾，再比如訪談的時(shí)候問用戶這個(gè)問題：您覺得您喜歡下面哪個(gè)頁(yè)面的風(fēng)格？用戶：“什么是風(fēng)格？”
所以交互設(shè)計(jì)師有一個(gè)能力久顯得很重要了：讓萬(wàn)物都可與之對(duì)話的能力，對(duì)話需要什么，是語(yǔ)言。
我們都知道，語(yǔ)言是我們溝通的根本，語(yǔ)言是由詞匯按照一定的語(yǔ)法結(jié)構(gòu)在不同的語(yǔ)境中所組成的復(fù)雜系統(tǒng)。不同的種族有不同的語(yǔ)言，不同的專業(yè)有不同的語(yǔ)言例如在圍棋中有長(zhǎng)、立、并、空、頂?shù)鹊?，例如在模型手辦中有分線、滲線、勾線、補(bǔ)土等，這也都是在特頂專業(yè)領(lǐng)域中的一些術(shù)語(yǔ)，但這些并不是語(yǔ)言，只是在某個(gè)領(lǐng)域中大家總結(jié)出來便于溝通的文字符號(hào)。
所以我們?cè)倩氐缴戏娇匆幌露x，首先語(yǔ)言是由詞匯所組成，詞匯是由符號(hào)做組成，大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法，但這些都僅僅只是規(guī)范，而并不是語(yǔ)言。語(yǔ)言擁有更強(qiáng)的普適性和通用性。
那么我所認(rèn)為的語(yǔ)言他首先包含了能夠組成詞匯的符號(hào)，這些符號(hào)大概就是指：點(diǎn)、線、面、體、色彩由這些點(diǎn)線面體可以組成的詞匯有：按鈕、文字、圖標(biāo)、圖片等。但是光有詞匯不行，在漢語(yǔ)中有12種詞類：名詞、動(dòng)詞、形容詞，在由句子組成的詞匯中包含了不同的成分：主、謂、賓、定、狀、補(bǔ)...這里不過多敘述。
語(yǔ)言很重要的一點(diǎn)它具有語(yǔ)境，語(yǔ)言的運(yùn)用包含了看聽讀寫4個(gè)方面，看和聽指的是輸入，讀和寫指的是輸出，那么交互設(shè)計(jì)語(yǔ)言中，也包含輸入和輸出兩種屬性，例如輸入指的是由不同“詞匯”組成的“句子”，比如由標(biāo)題、箭頭、色塊組成的一個(gè)itme，是一個(gè)可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發(fā)并且進(jìn)行狀態(tài)的變化和所進(jìn)行的任務(wù)跳轉(zhuǎn)。
這里的控件雖然有兩個(gè)屬性，但是還需要語(yǔ)境來幫助我們理解，一個(gè)是它本身所能夠輸出的默認(rèn)狀態(tài)的，比如點(diǎn)擊之后的跳轉(zhuǎn)頁(yè)面，另外他也可以具備產(chǎn)品賦予的自定義屬性，例如底部滑出picker。
還有，在漢語(yǔ)中“去買兩個(gè)桃子吧”，這里的“兩”肯能是虛數(shù)也可能是實(shí)數(shù)，但是在交互設(shè)計(jì)中，我們?nèi)绾伪硎军c(diǎn)擊1下和兩下或者是多次呢，一般單擊的屬性通常可以有一些特性的符號(hào)屬性所表示出來，例如加下劃線的文字、一個(gè)帶箭頭的item、一個(gè)圖標(biāo)、一個(gè)帶有主色的文案等等，那么雙擊的話可以用雙箭頭來表示嗎，當(dāng)然不可以，雙擊在移動(dòng)端的手勢(shì)中具有放大、點(diǎn)贊、返回頂部、定位消息、定位光標(biāo)等功能。
那我們發(fā)現(xiàn)如果把交互設(shè)計(jì)能夠做成類似于語(yǔ)言的系統(tǒng)是非常有意思，并且有用的。這會(huì)讓更多信息不對(duì)稱的情況消失，不僅僅是設(shè)計(jì)師，在產(chǎn)品團(tuán)隊(duì)中大家都能夠有一套共性的交互語(yǔ)言系統(tǒng)，無疑是一件非常提高效率的事。但是目前的很多交互規(guī)范的文檔中，大多都是多種元素的拼合，給出常用的、可復(fù)用的控件、組件，但是大家依然還是無法從語(yǔ)言角度去創(chuàng)新，這就導(dǎo)致了很難會(huì)有新的、有用的交互形式的出現(xiàn)，比如很多搜索控件都是承載在頂部導(dǎo)航欄中，那么在做規(guī)范的時(shí)候也只能在這個(gè)組件上去微調(diào)，殊不知搜索這個(gè)控件的“語(yǔ)境”并不單單只能在頁(yè)面頂部，例如高德地圖做的就很好。這樣一來，這個(gè)組件的常規(guī)規(guī)范形式就能和很多產(chǎn)品區(qū)分開來了，當(dāng)然要視產(chǎn)品形態(tài)不同。
市面上有許多的新零售電商產(chǎn)品，頁(yè)面中的信息流也是大同小異，但是無論是交互還是產(chǎn)品在做設(shè)計(jì)師必須要考慮的就是產(chǎn)品定位與當(dāng)前狀態(tài)。例如目前我們看到的都是以下的信息流樣式，但是我們要知道，30000個(gè)sku和3000個(gè)sku的展示策略肯定是不同的根據(jù)算法的瀑布流在30000個(gè)sku中可以隨意展示，但是3000個(gè)就不行了，很可能在算法的過程中用戶會(huì)頻繁看到重復(fù)的商品。所以使用雙列布局的方法并不合適。
所以這樣的產(chǎn)品首屏策略就顯得非常關(guān)鍵。我們可以看到常規(guī)的電商產(chǎn)品中，首屏基本上都是呈現(xiàn)這樣的策略，從頂部的搜索、分類、banner、分流入口、cta、營(yíng)銷瓷片區(qū)這樣的布局，從基本上能夠滿足一個(gè)大量sku電商產(chǎn)品的所有需求，但是如果用戶定位和產(chǎn)品本身的基礎(chǔ)無法支撐起這樣的場(chǎng)景又該如何去做首屏策略呢？
從交互角度入手，那么既然我們無法做到大而全，那么我們至少可以做到精準(zhǔn)、限時(shí)，讓用戶上癮的策略，上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營(yíng)銷瓷片以及以時(shí)間為緯度展示的大圖信息流。重點(diǎn)在于可隨意控制的營(yíng)銷工具，以及時(shí)間軸的商品推薦，讓有限的資源呈現(xiàn)更多的形式變化以及讓用戶有時(shí)間概念，每天固定時(shí)間來進(jìn)行活躍。
通過交互手段我們也可以給運(yùn)營(yíng)工具更加靈活化打基礎(chǔ)。例如我們經(jīng)?？吹降臓I(yíng)銷瓷片可以劃分為非常多樣式與可能性，并且在后臺(tái)工具中靈活控制，同時(shí)除了日常的營(yíng)銷目的之外，在大促或者活動(dòng)需求下更可以將整一個(gè)首屏切換為極具氛圍的信息呈現(xiàn)。
最后總結(jié)一下，我認(rèn)為交互設(shè)計(jì)也包含了視覺，所以我們?cè)跊Q定用什么樣的設(shè)計(jì)形式之前需要考慮更多，入業(yè)務(wù)、用戶價(jià)值等等，從而用更加有價(jià)值的交互策略提出問題、解決問題會(huì)比單純的用規(guī)范去搭建界面更加有效。
不管是做UI設(shè)計(jì)還是畫插畫，有很多同學(xué)覺得自己是因?yàn)樘熨x不夠所以對(duì)色彩的敏感度不夠，其實(shí)不然。一個(gè)可能是大家總結(jié)的太少，從來都是憑感覺和運(yùn)氣去配色，但其實(shí)都是有講究的。本文不會(huì)給大家重復(fù)講解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認(rèn)識(shí)色彩，并且在產(chǎn)品設(shè)計(jì)中使用的。
大家都知道，對(duì)于不同的顏色，我們對(duì)其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道我們眼睛內(nèi)存在兩種感光細(xì)胞：視錐細(xì)胞和視桿細(xì)胞，視桿細(xì)胞能夠感知光線強(qiáng)弱但無法感知顏色，而視錐細(xì)胞卻相反，視錐細(xì)胞內(nèi)還有3種對(duì)不同頻率光敏感的細(xì)胞。我們經(jīng)常會(huì)用到視錐細(xì)胞，而視桿細(xì)胞卻用的少，更多的是在黑暗的環(huán)境中使用的多。
視錐細(xì)胞的三種類型分別是低頻、中頻和高頻視錐細(xì)胞，分別對(duì)紅、綠、藍(lán)三種顏色的光敏感。而且這三個(gè)視錐細(xì)胞分別也有重合的部分。低頻視錐細(xì)胞對(duì)整個(gè)可見光頻譜都敏感，它的范圍包含的比較廣，特別是對(duì)于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍(lán)視錐細(xì)胞可以感知。
大家在平時(shí)生活中都能看到，在馬路上、機(jī)動(dòng)車道上以及一些警示牌都會(huì)采用黃色、橙色等標(biāo)識(shí)，因?yàn)檫@些非常醒目。更容易被紅視錐細(xì)胞感知到，但如果你的標(biāo)識(shí)用的是冷色調(diào)那這個(gè)交通事故可能要發(fā)生的頻繁的多。
我們來做個(gè)實(shí)驗(yàn)，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學(xué)看上去都會(huì)覺得是個(gè)漸變色，但其實(shí)它就是一個(gè)純色，不信的同學(xué)可以自己在工具中嘗試一下。
但如果你把這個(gè)色塊拿出來后，不在這個(gè)環(huán)境中直接進(jìn)行邊緣對(duì)比，那就不會(huì)出現(xiàn)漸變的情況了。那光說原理，我們也來看一下在產(chǎn)品設(shè)計(jì)中需要注意的地方，因?yàn)樵赨I界面設(shè)計(jì)中我們通常需要把一些圖片、卡片疊加放置，這樣就會(huì)造成邊緣視覺的對(duì)比，本來不明顯的兩個(gè)元素重疊之后變的很明顯。所以例如一些標(biāo)簽的背景色和頁(yè)面整體的背景色。
如果你想要讓兩個(gè)顏色接近的元素具有識(shí)別度，那么最好將這兩個(gè)元素進(jìn)行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設(shè)計(jì)，背景色一定不要過于灰暗也不要過于淺白，過于深的話會(huì)讓卡片輪廓過于明顯而導(dǎo)致整體看上去顯臟以及很明顯的對(duì)比，顯得不自然和舒適。如果過于淺的話也會(huì)導(dǎo)致信息的不聚焦。
還有，為什么被框起來的文字會(huì)看上去更加有點(diǎn)擊的欲望其實(shí)也是這個(gè)道理，因?yàn)槲淖趾捅尘隘B加產(chǎn)生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號(hào)，當(dāng)它被賦予顏色之后我們才會(huì)意識(shí)到它需要我們?nèi)プ⒁饣蛘呖杀稽c(diǎn)擊，但依然還是不夠明顯，所以為了強(qiáng)化可點(diǎn)擊這個(gè)感覺，我們才用了線框、背景色、箭頭等方式。
一般來說，產(chǎn)品都會(huì)有一個(gè)品牌的主色。而這個(gè)品牌的主色也通常會(huì)運(yùn)用在外面的產(chǎn)品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非常活潑、有趣、好玩的特性，無論是線上還是線下都使用了這個(gè)品牌黃色，從每一個(gè)線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產(chǎn)品進(jìn)行通用。例如之前的嚴(yán)選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的，所以在線上的界面用起來會(huì)非常不和諧，和整體偏淺色、輕的風(fēng)格對(duì)比起來太強(qiáng)烈，引起不適。
而且線上覺得還OK的顏色，由于印刷的原理，實(shí)物也會(huì)更加偏低飽和和偏暗。
我們?cè)谏弦黄f(wàn)個(gè)為什么文章里提到了人們?nèi)绾伍喿x信息，提到了一個(gè)視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會(huì)需要使用顏色的地方在于希望引導(dǎo)用戶和吸引用戶注意的地方才會(huì)使用色彩。例如下方產(chǎn)品，使用了高亮色來引導(dǎo)用戶視覺。
當(dāng)然色彩的運(yùn)用也會(huì)講整個(gè)頁(yè)面的層級(jí)凸顯出來，而不單純的用中性色來區(qū)分層級(jí)。
同樣是上兩張圖，大家可以清晰的看到，美團(tuán)中的附近熱賣好點(diǎn)、滿減標(biāo)簽、價(jià)格，其實(shí)都只具備信息的呈現(xiàn)，但不具備交互的特征和狀態(tài)。但淘票票中的“4.7萬(wàn)”和“展開”卻不一樣，“展開”使用了輔助藍(lán)色，這里的展開就具備這個(gè)文案所描述的這個(gè)控件具備的交互特性-點(diǎn)擊后將隱藏的文字展示出來。藍(lán)色一般我們都會(huì)使用在某個(gè)可點(diǎn)的鏈接上，當(dāng)然也會(huì)有其他的色彩來表示可點(diǎn)擊。
所以不是所有的元素都要賦予顏色，這樣會(huì)使整個(gè)頁(yè)面非常混亂
另外，UI設(shè)計(jì)中主色除了引導(dǎo)用戶的作用外，也可以表示當(dāng)前正被激活的信息狀態(tài)。例如愛奇藝app中播放詳情頁(yè)面，當(dāng)前板塊標(biāo)簽和正在播放劇集的激活狀態(tài)。
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營(yíng)造中也起了很大的作用，目前很多2c的產(chǎn)品往往會(huì)在界面氛圍的營(yíng)造中運(yùn)用一些手段。例如導(dǎo)航欄、底部標(biāo)簽欄上的圖標(biāo)，或者在首頁(yè)營(yíng)銷板塊的瓷片區(qū)域都會(huì)用品牌色在活動(dòng)時(shí)段內(nèi)進(jìn)行氛圍打造
在色彩的心理學(xué)上，大家都知道每個(gè)顏色具有一定的性格特征和表達(dá)。而且都會(huì)有正反兩面，可以看下方多種色彩的描述。
然而其實(shí)很多的產(chǎn)品使用的色彩和我們所認(rèn)知的會(huì)有一些差別，比如咖啡品牌的主色選擇，在我們常規(guī)人之中，咖啡應(yīng)該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實(shí)都用了和咖啡本質(zhì)沒什么關(guān)系的顏色
在瑞幸剛出來的時(shí)候，很多人其實(shí)不太習(xí)慣把這個(gè)藍(lán)色和咖啡結(jié)合起來，但是為了塑造品牌差異化，瑞幸一直將“藍(lán)色”作為品牌的主基調(diào)，“小藍(lán)杯”這一稱呼不但讓消費(fèi)者感到親切，也在眾多的咖啡中有了屬于自己的記憶點(diǎn)。在這支廣告片中，主基調(diào)同樣是使用藍(lán)色，不但符合了當(dāng)下消費(fèi)者的視覺偏好，也在為用戶留下記憶點(diǎn)之后，也讓用戶在看到藍(lán)色時(shí)自然而然的想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬(wàn)要避開。
會(huì)讓人產(chǎn)生“幻覺”！讓人產(chǎn)生視覺疲勞，例如我將餓了么這個(gè)界面的色調(diào)調(diào)整一下大家看一下，不亮瞎算我輸。
為什么很多時(shí)候我們總覺得界面臟兮兮的。是因?yàn)槲覀冊(cè)诮缑婊蛘吲渖惺褂昧诉^多的低飽和度、灰度較多的配色。所以這個(gè)也是要避免的
讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側(cè)重點(diǎn)，所以我們常用的方法是6、3、1的色彩配比。
熒光色絕對(duì)不可以使用在UI界面中，尤其是主色。會(huì)讓你瞬間失明！
在很多dribbble的飛機(jī)稿中，經(jīng)常能看到這樣的配色和練習(xí)。無論是在練習(xí)中還是實(shí)際項(xiàng)目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點(diǎn)且輕飄飄的感覺。
說真的，這樣的風(fēng)格確實(shí)耳目一新，但個(gè)人覺得可能不會(huì)成為主流。因?yàn)樗秃偷谖宸N一樣：信息可識(shí)別性很差。就不說色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結(jié)合感覺就是得了“白內(nèi)障”。另外我們常說的一點(diǎn)就是所有元素都強(qiáng)調(diào)就等于什么都沒有強(qiáng)調(diào)，這樣的風(fēng)格在每一個(gè)元素都具有陰影的情況下都在爭(zhēng)先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點(diǎn)自相矛盾的感覺。
為了營(yíng)造這樣的“新擬物”的輕量氛圍，還不得不在整個(gè)界面中簡(jiǎn)化大部分元素，能不加文字就不能加文字，說的好聽叫做使用了奧卡姆剃刀原則，有一句話一直非常影響我做設(shè)計(jì)：“設(shè)計(jì)是需要被簡(jiǎn)化的，但是簡(jiǎn)化的過程一定不簡(jiǎn)單”。所以不是單純的簡(jiǎn)化所有元素為了達(dá)到這個(gè)風(fēng)格的目的。
例如下方，兩種對(duì)抗色重疊后會(huì)引起視覺閃爍的感覺。是不是覺得我有點(diǎn)帥的晃眼
首先我們必須要說，色彩肯定是需要結(jié)合產(chǎn)品和用戶的定位去指定和提煉的，所以前期會(huì)需要去做一些研究例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類“真實(shí)的虛擬用戶”，從而確定一些主色的方案。然后我們?cè)谥魃倪x擇中需要避開上面體到的坑，并且對(duì)市面上的app進(jìn)行總結(jié)，我們發(fā)現(xiàn)大部分的產(chǎn)品色，簡(jiǎn)單來講在我們HSB模式中去色都在一個(gè)固定的范圍，就像這樣。
在上文中也說到用色比例的631法則，所以在選取輔助色的時(shí)候我們需要定義好輔助色可以用在什么地方。例如知乎，其實(shí)輔助色沒有非常明顯的1種或者兩種，都是多色的輔助色方案，都在一個(gè)配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略，一個(gè)主色搭配多個(gè)輔色，如果有其他獨(dú)立的板塊可能需要重新定義專屬的配色策略。
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對(duì)比，顯示層級(jí)，那么通常給2-3種層級(jí)即可，至少2種，至多3種。在選擇3個(gè)層次的中性色文字是，給大家一個(gè)建議：標(biāo)題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50，默認(rèn)文字不要大于80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：站酷 作者：應(yīng)駿
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在工作中常常被問到如何表達(dá)講述自己的設(shè)計(jì)，為了讓自己的設(shè)計(jì)有理可依，對(duì)接上下游匯報(bào)工作的時(shí)候，總結(jié)以下一些方法和觀點(diǎn)，幫助不知從何講述自己設(shè)計(jì)的人一些語(yǔ)言技巧。
以下僅是個(gè)人觀點(diǎn)，用作探討交流，文中所有舉例均為本人工作設(shè)計(jì)輸出。
設(shè)計(jì)師能做出好的設(shè)計(jì)，卻缺乏系統(tǒng)化的語(yǔ)言包裝，“如何講設(shè)計(jì)”不該讓它成為難題，做一個(gè)有產(chǎn)品思維的設(shè)計(jì)師，讓你的設(shè)計(jì)以理服人，我們要不止停留在視覺表層，更要從多緯度看待產(chǎn)品設(shè)計(jì)，本文將從以下三點(diǎn)簡(jiǎn)述：01.產(chǎn)品設(shè)計(jì)的五個(gè)層面，02.講述設(shè)計(jì)的流程，03.關(guān)于本次總結(jié)
做好產(chǎn)品設(shè)計(jì)的第一步，是了解產(chǎn)品， 要對(duì)于產(chǎn)品的需求如何確定、產(chǎn)品定位如何決定有一個(gè)基本的認(rèn)識(shí)，在產(chǎn)品常識(shí)里面最重要也最常用的就是產(chǎn)品設(shè)計(jì)的五個(gè)層面，也簡(jiǎn)稱用戶體驗(yàn)五要素——
作為UI設(shè)計(jì)師，所處的視覺設(shè)計(jì)是表現(xiàn)層，是確定產(chǎn)品的最終形態(tài)，因此也處于產(chǎn)品設(shè)計(jì)的頂層（能被看到），是一個(gè)具象畫的呈現(xiàn)；其次，往里推框架層，是確定產(chǎn)品外觀，將界面信息和導(dǎo)航設(shè)計(jì)有序歸類，讓用戶使用或者理解；結(jié)構(gòu)層是為用戶設(shè)計(jì)一個(gè)結(jié)構(gòu)化的體驗(yàn)，將零散的元素轉(zhuǎn)化為有序立體的空間；范圍層確定產(chǎn)品的功能和需求；最后戰(zhàn)略層是確定產(chǎn)品目標(biāo)和用戶需求；底層邏輯結(jié)構(gòu)決定上層意識(shí)形態(tài)表現(xiàn)，因此在設(shè)計(jì)前我們要知道產(chǎn)品是屬于洞察階段，設(shè)計(jì)中是屬于產(chǎn)品設(shè)計(jì)解決方案階段，整體的產(chǎn)品設(shè)計(jì)是一個(gè)概念通過無數(shù)個(gè)層面的努力，經(jīng)過時(shí)間，轉(zhuǎn)化為具象表現(xiàn)的過程，所以我們?cè)谕瓿梢豁?xiàng)設(shè)計(jì)時(shí)，應(yīng)該講述一個(gè)完整的設(shè)計(jì)思路 ，不要讓自己的設(shè)計(jì)思路僅停留在表面。
整個(gè)產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過程，設(shè)計(jì)的前期屬于產(chǎn)品洞察階段，這個(gè)時(shí)候一般由團(tuán)隊(duì)的老板領(lǐng)導(dǎo)結(jié)合當(dāng)下市場(chǎng)需要，有用戶的需求就有商機(jī)，想出產(chǎn)品大致的方向（戰(zhàn)略層）然后通過產(chǎn)品經(jīng)理整合梳理高層的意見確定產(chǎn)品大致的功能和內(nèi)容輸出原型（范圍層），交給交互設(shè)計(jì)師優(yōu)化產(chǎn)品細(xì)節(jié)邏輯和信息具體框架，經(jīng)過研發(fā)評(píng)估能夠技術(shù)實(shí)現(xiàn)產(chǎn)出交互稿（結(jié)構(gòu)、框架層），這里已經(jīng)過渡到設(shè)計(jì)解決問題執(zhí)行階段，最后是給到界面設(shè)計(jì)師美化視覺產(chǎn)出高保真（表現(xiàn)層）。
也就是到我們自己設(shè)計(jì)輸出之前要經(jīng)歷這么多，如果能在講述自己設(shè)計(jì)的時(shí)候，提前去了解這些，那么設(shè)計(jì)內(nèi)容就不愁沒法兒講，光是闡述自己的設(shè)計(jì)思路就可以講出一個(gè)故事，這也是為什么現(xiàn)在很多品牌賣貨都開始營(yíng)銷產(chǎn)品背后的故事由來。我們?cè)O(shè)計(jì)能做好，也要會(huì)用語(yǔ)言推銷自己的設(shè)計(jì)成果。
設(shè)計(jì)是對(duì)于某件事精心準(zhǔn)備的過程。好的設(shè)計(jì)作品，應(yīng)該擁有完整的設(shè)計(jì)流程，因此我們?cè)谥v述自己設(shè)計(jì)作品的時(shí)候，有一套完整系統(tǒng)化的方式是非常有效的。完整的設(shè)計(jì)流程包含以下4個(gè)步驟：
第一是我們需要去了解設(shè)計(jì)的需求背景，知道大概的方向——
來源（簡(jiǎn)單理解就是誰(shuí)提出的問題）需求有可能是你的老板、你的產(chǎn)品經(jīng)理、或者交互設(shè)計(jì)、或者視覺上的問題···
背景（籠統(tǒng)一點(diǎn)，就是這個(gè)需求是新需求還是原來有然后進(jìn)行改版優(yōu)化）需求的基層性質(zhì)是什么，原本調(diào)性是什么，我們要做什么樣的產(chǎn)品···
目標(biāo)（目標(biāo)一般都是需要解決什么問題）搞清楚為什么做這個(gè)需求，能解決什么痛點(diǎn)，不做無用功。
誰(shuí)提出的問題，是新的需求還是舊的問題，或者我們要解決什么？圍繞這幾個(gè)方向?qū)⒛愕脑O(shè)計(jì)概述出來，會(huì)讓非專業(yè)的人也能聽懂你做了什么，舉個(gè)簡(jiǎn)單的例子，我們公司后臺(tái)一個(gè)很小的產(chǎn)品bug需求，往往這種需求就是產(chǎn)品經(jīng)理的一個(gè)截圖和他標(biāo)注的兩句話——
然后你完成了這個(gè)需求單，在傳達(dá)給非產(chǎn)品經(jīng)理以外的人的時(shí)候，你有可能是以下轉(zhuǎn)述方式——
毫無疑問，你就是將需求者的意思一字不落的轉(zhuǎn)達(dá)了，但是對(duì)于其他的聽者來說，你的轉(zhuǎn)述平平無奇、毫無意義，甚至都沒有印象你做了什么，所以你應(yīng)該講清楚這個(gè)需求的背景——
設(shè)計(jì)需求來源是誰(shuí)，原本屬于產(chǎn)品哪個(gè)模塊（來源），他原來功能是怎么樣的，界面上展示的結(jié)構(gòu)哪里有問題（背景），視覺用了什么樣的方式改成什么樣，解決了什么痛點(diǎn)（目標(biāo)）
講清楚誰(shuí)給的需求，需要解決什么問題，是在原來的基礎(chǔ)上不變動(dòng)邏輯的情況下增加了什么達(dá)到了什么目的，才讓你的敘述更完整，聽起來更有邏輯。如果是一項(xiàng)新的需求，沒有背景，那還得從設(shè)計(jì)分析說起，設(shè)計(jì)分析就是讓你更專業(yè)的去做事，設(shè)計(jì)分析分為——用戶分析，設(shè)計(jì)目標(biāo)，和設(shè)計(jì)手段三個(gè)要點(diǎn)：
首先用戶分析就是，分析你做的東西給誰(shuí)看，而用戶又分為群體用戶和獨(dú)立用戶，在c端常見的就是獨(dú)立用戶，他們通常不定性，且有很多特征；在b端，目標(biāo)用戶一般是群體，他們大多數(shù)是有場(chǎng)景特性和行業(yè)特性，針對(duì)獨(dú)立用戶和群體用戶，我們得出的用戶特征、基本信息、需求結(jié)論也是不一致的，所以我們應(yīng)該結(jié)合產(chǎn)品的調(diào)性分析一下我們做出來的設(shè)計(jì)究竟給誰(shuí)看給誰(shuí)用。常見的用戶分析方法有：用戶畫像、用戶訪談、問卷調(diào)查、焦點(diǎn)小組、眼動(dòng)測(cè)試、用戶反饋以及大數(shù)據(jù)分析，這些方法中最簡(jiǎn)單的是用戶畫像，就是舉實(shí)際的例子列出真實(shí)用戶的特征信息及使用場(chǎng)景。B端用戶分析方法常用大數(shù)據(jù)分析和用戶反饋，這兩種方式通過對(duì)接需求的上下游就可以得知。
通過用戶分析得出需求結(jié)論，滿足需求就能達(dá)成設(shè)計(jì)目標(biāo)——
設(shè)計(jì)目標(biāo)結(jié)合卡諾模型來分析，卡諾模型—反應(yīng)產(chǎn)品性能和解決用戶需求的滿意度的一種非線性關(guān)系，具體想了解的可以自行百度，站在巨人的肩膀上我們看得更遠(yuǎn)。 卡諾模型具備4種屬性 ：1.必備屬性：滿足這個(gè)需求，用戶滿意度不會(huì)上升，但不滿足這個(gè)需求，用戶不滿意會(huì)大幅度降低 ；2.期望屬性：提供個(gè)性化需求，用戶滿意度會(huì)上升，不提供此需求，用戶滿意度會(huì)降低； 3.魅力屬性：用戶意想不到的效果，提供此屬性，用戶滿意度大幅提升，不提供也不會(huì)降低 ；4.無差異：無論提不提供，用戶滿意度都不會(huì)改變，根本不在意；因此在做需求的時(shí)候我們應(yīng)該盡力滿足基本需求和期望需求，而可有可無的需求盡量不去做，降低效率。幸福需求是不容易達(dá)到的，如果能滿足是非常棒的～這里就像是滿足了設(shè)計(jì)心理學(xué)的三個(gè)層次——本能、行為、反思。
接下來是大家都熟知的設(shè)計(jì)手段，適當(dāng)?shù)闹v一些述專業(yè)的設(shè)計(jì)技法，用不同的手段去實(shí)現(xiàn)的主畫面，最后達(dá)到完成設(shè)計(jì)目標(biāo)這樣的結(jié)果，會(huì)讓你顯得更專業(yè)。設(shè)計(jì)的手段有很多種，這里主要講述常用的三種，構(gòu)圖排版（采用什么構(gòu)圖方式，為什么這樣構(gòu)圖是因?yàn)槭裁丛O(shè)計(jì)原則）、色彩運(yùn)用（為什么使用這個(gè)顏色，因?yàn)檫@個(gè)顏色給人的心里感知是什么樣的）、設(shè)計(jì)風(fēng)格（采用什么風(fēng)格最貼近產(chǎn)品調(diào)性，為什么用這個(gè)風(fēng)格），但是講設(shè)計(jì)時(shí)一定要記住產(chǎn)品的調(diào)性，不能偏離產(chǎn)品本身，不要盲目套用絢麗的技法，否則是不合適的。
很多時(shí)候面對(duì)非專業(yè)需求方收稿時(shí)，可能看到如下話語(yǔ)————
（心里是不是xxxx····“萬(wàn)馬奔騰”，用個(gè)文明點(diǎn)的詞）
非專業(yè)人士無法理解這二者的區(qū)別，他們認(rèn)為他們的設(shè)計(jì)手段能達(dá)成設(shè)計(jì)目標(biāo)，而作為專業(yè)設(shè)計(jì)師的我們就應(yīng)該引導(dǎo)對(duì)方說出設(shè)計(jì)目標(biāo)，再用我們專業(yè)的手段去滿足對(duì)方的目標(biāo)，去實(shí)現(xiàn)減少改稿次數(shù)，而不是讓非專業(yè)人士去指導(dǎo)專業(yè)人士修改設(shè)計(jì)手段。分清這兩者的區(qū)別，我們就可以在設(shè)計(jì)引導(dǎo)中更加主動(dòng)。用設(shè)計(jì)分析的方法來講述設(shè)計(jì)，舉個(gè)例子——
會(huì)議管理——會(huì)議預(yù)約移動(dòng)端優(yōu)化，因?yàn)檫@是我們?cè)挟a(chǎn)品EKP里面的模塊，PC端和移動(dòng)端都有，因此用戶可能是群體也可能是個(gè)人。所以針對(duì)獨(dú)立用戶和群體用戶都做一個(gè)用戶畫像，得出他們的一些需求結(jié)論，然后目前幸福需求是沒有的，純屬個(gè)人建議，日后如果有此功能，想必用戶的滿意程度也會(huì)大大提升。
概括一下已完成的整體主要頁(yè)面，分析設(shè)計(jì)目標(biāo)：
頭部屬于流量量較高的區(qū)域，采用卡片式設(shè)計(jì)，將會(huì)議內(nèi)容置于此處，作為頁(yè)面信息關(guān)鍵層，采用左對(duì)齊方式排版，突出會(huì)議標(biāo)題和時(shí)間提醒用戶。
通過不同的顏色標(biāo)簽，區(qū)分參會(huì)人員狀態(tài)——
待進(jìn)行未有操作反饋，選用橙色，屬于可以持續(xù)進(jìn)行并有明顯提醒作用
已做反饋屬于成功操作，選用已有用戶認(rèn)知心理的綠色
已知信息拒絕參與，是不太重要的，屬于不再進(jìn)行的階段，選用灰色
接下來是設(shè)計(jì)作品的產(chǎn)出過程，一般情況下不可見的過程，為什么要去講， 因?yàn)橐粋€(gè)東西從無到有是很不容易的一件事，如果能講述過程，就可以引燃情緒共鳴，讓別人記住，讓自己的設(shè)計(jì)作品也能有始有終——
設(shè)計(jì)過程一般分為四個(gè)階段：初期階段、中期階段、最終定稿；具體的關(guān)鍵詞和描述可以通過以下方式提煉出來，這里就不做詳細(xì)說明了。
拿運(yùn)營(yíng)宣傳來舉個(gè)例子，我們公司中秋節(jié)月餅禮盒包裝主視覺設(shè)計(jì)——
整個(gè)過程應(yīng)該是有一個(gè)系統(tǒng)化的說明的，省略為寫字的地方是我們可以插入的具體圖片和過程，步驟差不多就是上述這些，可以有最初階段的頭腦風(fēng)暴-提取關(guān)鍵詞-清晰定位到中期階段的團(tuán)隊(duì)合作—風(fēng)格擬定-精選方案-細(xì)節(jié)刻畫以及和物料方溝通對(duì)接的打樣確定工藝等等過程…再到最后定稿的體驗(yàn)還原-問題優(yōu)化…主畫面的誕生是不容易的，強(qiáng)化這種過程參與，讓不被看見的事也能展現(xiàn)。如果實(shí)在不好記錄，你可以從一開始就截圖你繪制的過程——
上圖是用PS截圖，再用時(shí)間軸將每一幀動(dòng)態(tài)循壞播放，導(dǎo)出GIF然后截一張不變的底圖合成就可以了。
最后是數(shù)據(jù)驗(yàn)證階段，這個(gè)是設(shè)計(jì)落地的直觀證實(shí)，包含主觀認(rèn)可和客觀數(shù)據(jù)，具體內(nèi)容就是通過用戶或者專業(yè)的人士反饋給你設(shè)計(jì)落地的好壞，來判定你做的是否優(yōu)秀成功。通常這一塊的數(shù)據(jù)決定你驗(yàn)證你前面所有的過程，只要按照該流程認(rèn)真做了，最后效果通常不會(huì)太差，如果出現(xiàn)很大的偏差也往往是意料之外的，因該尋求團(tuán)隊(duì)一起解決，不是某一個(gè)人的問題。
根據(jù)以上最后我們總結(jié)，好的設(shè)計(jì)就是滿足以下4個(gè)方面：好看，好用，好記，能實(shí)現(xiàn)。設(shè)計(jì)師要考慮的維度不僅僅在視覺層面，什么是有產(chǎn)品思維的設(shè)計(jì)師，就是在執(zhí)行時(shí)候要考慮上下游不同職能的工作內(nèi)容，如果你的設(shè)計(jì)不能實(shí)現(xiàn)，再好看也是白費(fèi)功夫的～從產(chǎn)品交互視覺多層面談設(shè)計(jì)，會(huì)讓你的設(shè)計(jì)包裝顯得不那么單調(diào)，系統(tǒng)化的方法總結(jié)到此，不足之處多多包含～謝謝你的閱讀！
文章來源：站酷 作者：YiVi_eleven
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
盡管在工作中對(duì)于設(shè)計(jì)方案提出建設(shè)性和針對(duì)性的評(píng)價(jià)確實(shí)是非常難的，但不得不說，這一項(xiàng)技能對(duì)于每一位設(shè)計(jì)師，乃至每一位與設(shè)計(jì)師配合的職場(chǎng)人，都是非常重要的。
「只要我們付出了百分百的努力，最終結(jié)果一定會(huì)比第一版的設(shè)計(jì)要好。工作中，以專業(yè)的手段直接面對(duì)要解決的問題，切莫把過多的個(gè)人情緒帶到工作中去，就像馬東老師的米未傳媒貼在墻上的標(biāo)語(yǔ)：“有話直說是一種能力，也是一種責(zé)任?！?
從業(yè)這么多年，合作過的產(chǎn)品、運(yùn)營(yíng)、市場(chǎng)、研發(fā)、測(cè)試形形色色，但是對(duì)于設(shè)計(jì)師專業(yè)度的評(píng)價(jià)，每個(gè)人都不一樣，進(jìn)行綜合分析，我認(rèn)為，最核心就是一下3點(diǎn)：
「但這里我要說的是，你自己必須做到足夠?qū)I(yè)，以下的這些是基于你給出的設(shè)計(jì)方案確實(shí)是經(jīng)過認(rèn)真思考后的，否則被業(yè)務(wù)方懟了也是活該?！?
PART 01
在進(jìn)行設(shè)計(jì)評(píng)價(jià)時(shí)，不要單純的只是描述”我覺得…“、”我喜歡…“或者”我不喜歡…“，這無法真正解決問題，相信很多設(shè)計(jì)師也比較反感這樣的評(píng)價(jià)。
我們需要深挖的是：
1、你對(duì)業(yè)務(wù)目標(biāo)了解嗎？該業(yè)務(wù)是用什么樣的策略給目標(biāo)用戶帶來什么價(jià)值，以及是如何實(shí)現(xiàn)盈利的？
2、你對(duì)設(shè)計(jì)目標(biāo)清晰嗎？設(shè)計(jì)師是通過何種設(shè)計(jì)策略來給用戶帶來價(jià)值從何實(shí)現(xiàn)業(yè)務(wù)目標(biāo)的？
3、你有全局觀嗎？就是這樣的設(shè)計(jì)方案是否是在現(xiàn)有的技術(shù)限制、用戶認(rèn)知約束、時(shí)間周期等等諸多條件下得到的結(jié)果？
如果沒有以上，非設(shè)計(jì)師的朋友們直接指點(diǎn)界面顏色不好看，排版不合理，不夠高大上等諸多評(píng)論，其實(shí)是很不負(fù)責(zé)任的。希望大家不要做坐在設(shè)計(jì)師背后指點(diǎn)江山的神。
PART 02
提問有助于設(shè)計(jì)師和業(yè)務(wù)方更好的溝通和信息傳遞，但在提問中不要夾雜感性的評(píng)價(jià)，而多用理性的思考。比如不要指著某個(gè)東西說”這個(gè)按鈕太大了“，而要問”你為什么選擇這個(gè)尺寸的按鈕？“通過這種方式，你可以得到更多的背景和每個(gè)設(shè)計(jì)細(xì)節(jié)背后的原因，并感受到設(shè)計(jì)師是專業(yè)的，而不是一拍腦門的。
說服心理學(xué)中有一條鐵的定律就是：”沒有人喜歡被改變“。當(dāng)你對(duì)我的設(shè)計(jì)指指點(diǎn)點(diǎn)的時(shí)候就證明我可能錯(cuò)了，為了捍衛(wèi)我的設(shè)計(jì)我會(huì)非理性的做出防御性的對(duì)抗，感性的情緒表達(dá)只會(huì)讓雙方彼此矛盾升級(jí)，理性的表達(dá)和提問會(huì)讓人更愿意交流。
所以，學(xué)會(huì)提問，比提出問題更重要。
PART 03
評(píng)價(jià)者的品味對(duì)于設(shè)計(jì)方案來說并不重要，也不應(yīng)該成為討論的重點(diǎn)，就像我上面說的”我覺得…“，此時(shí)你可以發(fā)出黃曉明的動(dòng)圖：”我不要你覺得，我要我覺得…“
不要發(fā)表“我只是個(gè)人不喜歡，最終還是看你們?cè)O(shè)計(jì)師的”這樣的評(píng)論，說實(shí)話我每次聽到這樣的話都很火大，你都沒想清楚這樣不合適的理由，你跟我說什么？難道只是為了反對(duì)而反對(duì)嗎？
下次如果遇到講廢話的需求方，可以直接回復(fù)：如果你不能推薦一種更好或不同的設(shè)計(jì)方案，那就別說了，不要浪費(fèi)彼此的時(shí)間。
另外就是，建議必須清晰明確且可行，如果讓設(shè)計(jì)師誤解了你的意思，那可能比你什么都不說更嚴(yán)重，因?yàn)槭聭B(tài)可能會(huì)朝著完全相反的方向發(fā)展，因此詳細(xì)的闡明論點(diǎn)，也是一種職場(chǎng)溝通的能力。
PART 04
收到反饋后，首先，我們要分清哪些反饋對(duì)我們有用，哪些其實(shí)只是表達(dá)者的主觀感受，把有用的吸納進(jìn)來，并做好筆記，先自我情緒冷靜下來，不要急于去修改調(diào)整設(shè)計(jì)方案，多多思考流程和鏈路的問題。
很多設(shè)計(jì)師可能是出于多年的工作習(xí)慣，喜歡將別人的評(píng)論（尤其是有經(jīng)驗(yàn)的設(shè)計(jì)或者領(lǐng)導(dǎo)）視為行動(dòng)指南，在沒有經(jīng)過仔細(xì)思考的情況下采取和實(shí)施他們的想法，這很容易把自己變成一個(gè)提線木偶，久而久之徹底失去了設(shè)計(jì)師原本該有的創(chuàng)造力和反思能力。
設(shè)計(jì)是在美學(xué)與功能、解決用戶問題與業(yè)務(wù)之間平衡的探索，設(shè)計(jì)師的方案也是在用戶、公司也利益之間尋求平衡，沒有一個(gè)永遠(yuǎn)正確的決定。每個(gè)人都會(huì)犯錯(cuò)誤，每個(gè)人可能都有其背后的一番道理，無非是看問題的角度不一樣而已，不要糾結(jié)于某一個(gè)細(xì)節(jié)，也不要執(zhí)著于某一種特定的方案。
提升自己思考問題的視野和維度，知道如何拒絕毫無意義的反饋和評(píng)價(jià)，當(dāng)你從界面細(xì)節(jié)跳脫出來看問題時(shí)，離一名真正的專業(yè)設(shè)計(jì)師就不遠(yuǎn)了。
文章來源：站酷 作者：設(shè)計(jì)情報(bào)局
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
“作為用戶體驗(yàn)設(shè)計(jì)師，我們的使命之一就是如何以最正確，最有效的方式將產(chǎn)品意圖傳遞給用戶?！边@也是行業(yè)中大家的共識(shí)，關(guān)于設(shè)計(jì)原則也有很多，今天想給大家介紹的是 Don Norman 在《日常事物的設(shè)計(jì)》中提到的七項(xiàng)基本設(shè)計(jì)原則，我們將套理論付諸實(shí)踐，然后通過測(cè)試，驗(yàn)證和迭代來提升設(shè)計(jì)體驗(yàn)。
PART 01
諾曼（Norman）的七項(xiàng)基本設(shè)計(jì)原則可以幫助確定一系列問題的答案，這些問題從目標(biāo)開始，然后通過將結(jié)果與預(yù)期進(jìn)行比較后結(jié)束。這七項(xiàng)基本原則是：發(fā)現(xiàn)、反饋、概念模型、示能、意符、圖示、約束條件。接下來我們將從一個(gè)實(shí)際問題出發(fā)，來談?wù)勔韵略O(shè)計(jì)原則改如何運(yùn)用。
我們的第一個(gè)問題是目標(biāo)—我們實(shí)現(xiàn)目標(biāo)的動(dòng)力。舉個(gè)例子來說：
「目標(biāo)：“我們需要找到一雙新的，合腳的，確定顏色和尺寸的跑鞋?！?/strong>
下一階段是計(jì)劃如何通過發(fā)現(xiàn)和評(píng)估我們的選擇來實(shí)現(xiàn)我們的目標(biāo)。
假設(shè)我們選擇了耐克網(wǎng)站作為首選購(gòu)物平臺(tái)。當(dāng)我們初次進(jìn)入網(wǎng)站，我們會(huì)看到很多不同的選項(xiàng)。
「發(fā)現(xiàn)模塊」提升了選項(xiàng)的可見性。清晰的導(dǎo)航，突出的焦點(diǎn)和自然的視覺層次使其更容易發(fā)現(xiàn)和理解。
清晰的導(dǎo)航有助于我們輕松找到并了解網(wǎng)站的主要產(chǎn)品。但是，移動(dòng)端的體驗(yàn)實(shí)際體驗(yàn)效果并不佳，因?yàn)闈h堡導(dǎo)航很容易將信息遮蓋。
耐克網(wǎng)站的產(chǎn)品詳細(xì)信息頁(yè)面通過清晰的導(dǎo)航，突出的焦點(diǎn)和自然的視覺層次結(jié)構(gòu)選項(xiàng)更容易被識(shí)別。不過，您可能會(huì)爭(zhēng)辯說，這些復(fù)雜的信息干擾到 “添加到購(gòu)物袋”的這一關(guān)鍵行為。
焦點(diǎn)是吸引人視覺的主要區(qū)域，其中包括引人入勝的圖像和視頻，描述性標(biāo)題以及清晰的號(hào)召性用語(yǔ)，例如“了解更多”和“添加到購(gòu)物袋”。
以上所有組件均作為視覺層次結(jié)構(gòu)的一部分進(jìn)行排列，以幫助我們按照接收到的重要信息的順序進(jìn)行瀏覽。它們的位置也符合最佳的閱讀模式——例如，導(dǎo)航欄，過濾器控件和跑鞋結(jié)果分別組織在類別頁(yè)面的頂部，左側(cè)和右側(cè)。
其他設(shè)計(jì)原則（包括概念模型，示能，意符，映射和約束）也可以幫助我們弄清楚如何使用該網(wǎng)站。
許多網(wǎng)站功能中都存在概念模型，尤其是用于對(duì)結(jié)果進(jìn)行排序和過濾的導(dǎo)航和控件。這些熟悉的設(shè)計(jì)模式告訴我們它是如何使用的。例如，我們知道通過過濾器將有助于優(yōu)化篩選結(jié)果。
功能可供性應(yīng)用于各種網(wǎng)站組件，例如按鈕，選擇框和手風(fēng)琴導(dǎo)航，使我們可以了解如何控制和使用它們。但是，某些能力依賴于意符來闡明預(yù)期的操作。
意符被廣泛用于傳達(dá)應(yīng)在何處執(zhí)行操作，尤其是示能較弱的扁平化按鈕。一個(gè)簡(jiǎn)單的描述（例如“查看更多”或“添加到購(gòu)物袋”）足以告訴我們預(yù)期的操作。
映射向我們顯示了對(duì)象之間存在關(guān)系的位置，例如產(chǎn)品詳細(xì)信息頁(yè)面上，當(dāng)我們選擇適合的款式和顏色的選項(xiàng)時(shí)，我們會(huì)看到可用的尺寸和價(jià)格會(huì)與之對(duì)應(yīng)產(chǎn)生變化。
約束限制了可以使用信息的位置，地點(diǎn)和時(shí)間，以減少雜亂并降低認(rèn)知負(fù)擔(dān)。例如，導(dǎo)航最初僅向我們一級(jí)導(dǎo)航。
購(gòu)買工具為我們提供了可能選擇的選項(xiàng)序列的概念模型。禁用狀態(tài)還用于將我們的操作限制在只能選擇有庫(kù)存的商品的范圍內(nèi)。
了解了如何使用網(wǎng)站后，現(xiàn)在我們可以指定要執(zhí)行的一系列操作。讓我們?cè)诰W(wǎng)站上繼續(xù)進(jìn)行以下活動(dòng)：
「行動(dòng)：購(gòu)買時(shí)需選擇產(chǎn)品規(guī)格，包括合身性，顏色，尺寸，然后將其添加至購(gòu)物籃?！?/strong>
概念模型、可發(fā)現(xiàn)性、映射、約束、示能和意符可以幫助我們確定操作順序：選擇合適的→選擇顏色→選擇尺寸→選擇添加到購(gòu)物袋。
在某些情況下，某些選項(xiàng)（例如大小和顏色）可能缺貨。如果產(chǎn)品不可用，則禁用按鈕狀表達(dá)了操作行為的限制，只能選擇有庫(kù)存的商品，這是非常必要的。
不同的控件交流其功能，用法以及如何向我們展示其效果
現(xiàn)在，我們需要實(shí)際執(zhí)行我們選擇的一系列動(dòng)作。示能，意符和映射將幫助我們執(zhí)行操作。例如，按鈕的感知外觀使我們想要按下按鈕，標(biāo)簽告訴我們控件的功能，而映射使我們能夠看到剛剛操作的效果。
一個(gè)簡(jiǎn)單的確認(rèn)消息會(huì)通知用戶發(fā)生了什么，并提供一些其他選項(xiàng)的可見性
一旦執(zhí)行了選擇的一系列動(dòng)作，我們就需要收到有關(guān)請(qǐng)求的信息，這就是反饋。
購(gòu)物車確認(rèn)消息為我們提供了有關(guān)所選跑鞋的有用反饋信息，包括名稱，顏色，尺寸，價(jià)格和數(shù)量。同樣還提供了成功的信息和一些其他選項(xiàng)。
看到這些變化之后，我們現(xiàn)在需要將其轉(zhuǎn)化為有意義的東西。反饋對(duì)于再一次為我們提供足夠的信息來確定我們的行動(dòng)結(jié)果至關(guān)重要。成功信息——“已添加到購(gòu)物袋”和綠色的勾號(hào)圖標(biāo)說明發(fā)生了什么，其他選項(xiàng)表示我們現(xiàn)在已選擇購(gòu)買這雙跑步鞋。
每個(gè)粉絲都希望看到的確認(rèn)消息–真是令人高興的時(shí)刻！
最后一個(gè)問題詢問了結(jié)果是否符合我們的期望。我們可以將結(jié)果與目標(biāo)進(jìn)行比較。
到目前為止，我們已經(jīng)使用了所有七個(gè)設(shè)計(jì)原則來確定問題的答案?，F(xiàn)在，反饋將能夠確認(rèn)我們的行為是否帶來了成功的結(jié)果。如果結(jié)果不是我們期望的，那么我們至少需要了解發(fā)生了什么以及下一步該怎么做。
反饋可以誘發(fā)積極和消極的情緒。如果結(jié)果不是我們所期望的（例如錯(cuò)誤），則它們可能會(huì)引起混亂甚至憤怒的感覺。但是，當(dāng)我們實(shí)際執(zhí)行的動(dòng)作可以實(shí)現(xiàn)我們的目標(biāo)時(shí)，我們將感到非常喜悅！
例如，在耐克移動(dòng)應(yīng)用程序 SNEAKRS 中，客戶可以參加抽獎(jiǎng)來購(gòu)買限量版鞋。緊張的 30 分鐘倒計(jì)時(shí)結(jié)束后，獲勝者會(huì)收到一條特別的消息，確認(rèn)他們的抽獎(jiǎng)結(jié)果，這為他們的經(jīng)歷增添了很多樂趣。
「結(jié)果：看到此消息給我?guī)砹苏嬲钊藵M意的體驗(yàn)——幸運(yùn)的贏家。」
PART 02
應(yīng)用設(shè)計(jì)原則進(jìn)行 UX 設(shè)計(jì)是非常表層的。當(dāng)人們?cè)谑褂迷摦a(chǎn)品時(shí)，我們需要了解他們的想法，感受和看法。他們可以使用嗎？他們覺得有用嗎？他們會(huì)再次使用它嗎？
比設(shè)計(jì)原則更重要的是與真實(shí)用戶進(jìn)行測(cè)試，以了解他們對(duì)設(shè)計(jì)的行為和態(tài)度。然后，可以利用豐富的用戶見解來改進(jìn)產(chǎn)品。
我們?nèi)裟軌蛟皆缜以筋l繁的測(cè)試我們的想法，就能夠越早的迭代產(chǎn)品，以更快的速度滿足用戶需求以及幫助實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。以下是一些流行的研究方法的概述：
遠(yuǎn)程用戶測(cè)試是非?？焖倥c靈活的，并且非常適合于早期經(jīng)常需要設(shè)計(jì)驗(yàn)證的情況。參與者使用屏幕錄制軟件收集有關(guān)設(shè)計(jì)的反饋。遠(yuǎn)程用戶測(cè)試為獲得更多的洞見提供了便利。
面對(duì)面用戶測(cè)試，就是我們常說的線下用戶訪談，這種測(cè)試要適量，通常會(huì)有一個(gè)主持人。在研究期間，主持人可能會(huì)根據(jù)問題提出任務(wù)或新的活動(dòng)。這種類型的研究比較花費(fèi)精力和時(shí)間，但與大多數(shù)方法相比，它可以為您提供更有價(jià)值的見解。
游擊隊(duì)測(cè)試是指調(diào)研團(tuán)隊(duì)無拘無束地采訪隨機(jī)人群。您可以選擇某些地點(diǎn)來確定適合您所測(cè)試設(shè)計(jì)的受眾特征。迄今為止，這種研究方法是比較節(jié)省成本的，盡管您可能需要考慮向參與者提供少量獎(jiǎng)勵(lì)，以感謝他們的時(shí)間和努力。
定量測(cè)試涉及對(duì)大量用戶進(jìn)行研究。典型的測(cè)試包括卡片排序，樹形測(cè)試，點(diǎn)擊測(cè)試和超時(shí)測(cè)試。這些研究可能無法為您提供用戶做出某些決定的原因的答案，但是它們可以幫助確定點(diǎn)擊次數(shù)，思維模型和完成任務(wù)比率的時(shí)間。
PART 03
一旦用戶測(cè)試有了結(jié)果，就可以對(duì)結(jié)果進(jìn)行了。這可能需要一個(gè)漫長(zhǎng)的過程，即整合意見，將見解歸類并提出新的改進(jìn)建議。
研究建議可以幫助確定要解決的可用性問題和要關(guān)注的痛點(diǎn)，以及增強(qiáng)整體用戶體驗(yàn)的機(jī)會(huì)。這就是 UX 流程的迭代。使用相同的原理進(jìn)行設(shè)計(jì)優(yōu)化，然后進(jìn)行測(cè)試，直到產(chǎn)品滿足用戶需求為止。
諾曼的原則可以幫助我們加深對(duì)用戶交互的理解，包括人們提出的問題類型、他們的認(rèn)知過程以及情感水平。如耐克網(wǎng)站的案例研究所示，這七個(gè)基本設(shè)計(jì)原則可以幫助我們確定問題的答案，并找到影響積極情緒（如愉悅感）的方法。
但是，設(shè)計(jì)原則實(shí)際上只是UX過程的開始。為了確定產(chǎn)品的體驗(yàn)質(zhì)量，我們需要與真實(shí)的用戶一起測(cè)試設(shè)計(jì)，然后使用洞察力進(jìn)行必要的迭代。
以上內(nèi)容源于 Don Norman 的暢銷書《日常事物的設(shè)計(jì)》。它是 30 多年前編寫的，但至今仍然對(duì)設(shè)計(jì)行業(yè)有著深遠(yuǎn)的影響。當(dāng)然，還有更多的原則可以采用，但是 Norman 的設(shè)計(jì)哲學(xué)可以作為我們?cè)谠O(shè)計(jì)工作中遵循的 UX 基礎(chǔ)。
文章來源：站酷 作者：設(shè)計(jì)情報(bào)局
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
前言
在企業(yè)工作中，每一個(gè)問卷調(diào)研都始于一個(gè)商業(yè)問題，問卷的質(zhì)量也決定了最終結(jié)果是否能對(duì)業(yè)務(wù)起到幫助。本文將從定義問題-問卷設(shè)計(jì)-數(shù)據(jù)清洗與分析-報(bào)告撰寫這四個(gè)基本步驟相對(duì)完整地闡述企業(yè)問卷調(diào)研，希望可以給大家提供一些研究方法上的思路。
定義問題：情境分析法（SCQA）
在商業(yè)問題解決的過程中，既有公司內(nèi)部的因素，也有外部行業(yè)的因素，影響因素錯(cuò)綜復(fù)雜；周圍的環(huán)境也比較容易發(fā)生變化，具有很大的不確定性；同時(shí)又要保證解決方法的可落地性，產(chǎn)生實(shí)際的價(jià)值。相對(duì)來說，會(huì)比較復(fù)雜。在進(jìn)行問卷設(shè)計(jì)之前，更有必要的是將問題梳理清楚，再?zèng)Q定是否采用問卷這種方式。
1.1 結(jié)構(gòu)化思考：使用SCQA描述項(xiàng)目
SCQA是將不確定性考慮在內(nèi)，一種結(jié)構(gòu)化的問題分析方法，可以比較好地系統(tǒng)思考、查漏補(bǔ)缺。它包含四個(gè)環(huán)節(jié)：
情境（Situation）：由大家都熟悉的現(xiàn)狀或事實(shí)作為起點(diǎn)，包含對(duì)象、所處階段等
沖突（Complication）：實(shí)際情況往往和我們的目標(biāo)有沖突，顛覆了穩(wěn)定的狀態(tài)。說出行動(dòng)的原因，包含威脅、機(jī)會(huì)和等著我們?nèi)タ朔睦щy點(diǎn)
問題（Question）：基于沖突提出問題，要怎么解決這個(gè)困難點(diǎn)
回答（Answer）：我們的解決方案是什么，定位出需求點(diǎn)
1.2 如何洞悉情境和沖突：搞清楚為什么做調(diào)研
假設(shè)我們拿到上述案例作為調(diào)研項(xiàng)目，可以有兩種方式去進(jìn)行洞悉情境和沖突：
一是思考為什么要做這個(gè)研究；二是跟相關(guān)利益者訪談盡可能多地獲取信息。
1）思考為什么要做這個(gè)研究：
- 需要回答什么問題？
- 為什么回答這些問題很重要？
- 打算如何使用最終的調(diào)研結(jié)果？
2）跟相關(guān)利益者訪談：
- 核心業(yè)務(wù)方是誰(shuí)？其他業(yè)務(wù)方是？
- 每個(gè)業(yè)務(wù)方的關(guān)注點(diǎn)是什么？難點(diǎn)是什么？
- 各個(gè)相關(guān)方的目標(biāo)之間是否沖突，是什么沖突？
根據(jù)上述方法，可以得到對(duì)應(yīng)的情境和沖突：
情境：目前有三種產(chǎn)品方案A/B/C，分別對(duì)應(yīng)的價(jià)格為100元/1000元/10000元。通過上述思考和信息了解，會(huì)知道這個(gè)事情和誰(shuí)有關(guān)，在這個(gè)事件中承擔(dān)什么角色。
沖突：B的銷量不佳，跟其他方案差異不明顯，瞄準(zhǔn)客群很有可能有重疊，未成交客戶難轉(zhuǎn)化，希望可以方案B進(jìn)行調(diào)整。在用戶層，可能其他方案中的功能能滿足需求，不需要購(gòu)買方案B；在公司層，整體收入結(jié)構(gòu)可以更優(yōu)化、健康；在業(yè)務(wù)層，系統(tǒng)和流程可能不太合理，有些可能需要重構(gòu)。
1.3 問題拆解其實(shí)是建立一個(gè)假說/邏輯樹的過程
我們可以將問題進(jìn)行拆解，拆解應(yīng)遵循MECE原則（相互獨(dú)立且完全窮盡），這么做的好處是可以把問題進(jìn)行逐層分解，逐級(jí)分析，最大可能保證需要考慮的因素全面不遺漏。
案例中的問題，可以從用戶方面、競(jìng)品方面、成本/利潤(rùn)方面進(jìn)行拆解，針對(duì)每一個(gè)層面的問題又可以進(jìn)行拆分。
對(duì)問題進(jìn)行細(xì)致拆分之后，針對(duì)每個(gè)問題有不同的解決方案，有一些問題可以用問卷來解決，有一些問題需要使用其他方式進(jìn)行解答。
問卷并不能解答所有問題～～
問卷設(shè)計(jì)
2.1 問卷的用途：定量為主
一般通過問卷來進(jìn)行大樣本的數(shù)據(jù)收集，主要以用戶的基礎(chǔ)數(shù)據(jù)、行為數(shù)據(jù)和態(tài)度數(shù)據(jù)為主，既可以作為獨(dú)立的調(diào)研項(xiàng)目，可以跟其他方式進(jìn)行結(jié)合，比如說結(jié)合訪談、結(jié)合企業(yè)內(nèi)部的數(shù)據(jù)，本文比較推薦的方式是多種方式結(jié)合進(jìn)行交叉驗(yàn)證，提升調(diào)研結(jié)果的可靠性。
2.2 問卷設(shè)計(jì)的原則
基于第一部分的定義問題階段，已經(jīng)對(duì)問題進(jìn)行了分析，在此基礎(chǔ)之上，我們需要確定哪些問題可以由問卷進(jìn)行解答，并明確問卷的研究目標(biāo)與參與對(duì)象。特別地：利益相關(guān)方（項(xiàng)目組成員間）在項(xiàng)目前期應(yīng)該達(dá)成統(tǒng)一，避免后續(xù)產(chǎn)生分歧，付出額外的溝通成本不說，還有可能相互甩鍋。
2.3 問卷的基本結(jié)構(gòu)
一份問卷的基本結(jié)構(gòu)包含標(biāo)題、招募語(yǔ)、甄別題、主問卷、用戶基本特征、結(jié)束語(yǔ)。
2.4有邏輯的設(shè)計(jì)問題
一份有效的問卷需要從如何提問、如何措辭、如何設(shè)置答題邏輯、如何設(shè)置題目選項(xiàng)這些方面去考慮，設(shè)置有效的問題。以下是問卷設(shè)計(jì)中的一些基本原則：
2.5 提升回復(fù)率的tips
個(gè)性化：在說明信件/郵件或郵件開頭注明回復(fù)者的名字、研究活動(dòng)的目的、所需時(shí)間。向回復(fù)者強(qiáng)調(diào)他們反饋信息的重要性。需要注意的是，這里出現(xiàn)信息錯(cuò)誤，會(huì)降低回復(fù)率。
控制篇幅：?jiǎn)柧硗瓿蓵r(shí)間不要超過10分鐘，注意控制問題數(shù)量，避免出現(xiàn)需要大量思考、較難回復(fù)的題型。
用戶激勵(lì)：獎(jiǎng)勵(lì)參與者油卡/現(xiàn)金紅包/優(yōu)惠券等，昂貴的激勵(lì)物沒有特別顯著提高回復(fù)率，所以小的激勵(lì)就可以。
數(shù)據(jù)清洗與分析
3.1 數(shù)據(jù)清洗原則
剔除有效范圍外的數(shù)據(jù)：排除異常作答時(shí)間值（比如作答時(shí)間為10秒），判斷為作答不認(rèn)真?？梢愿鶕?jù)題項(xiàng)來確定，一般10道題設(shè)置篩選出60秒之內(nèi)的問卷。
剔除連續(xù)重復(fù)值：在時(shí)間范圍內(nèi)，再核查問卷是否出現(xiàn)連續(xù)重復(fù)值，出現(xiàn)的問卷予以刪除。如果問卷數(shù)量較大，可以使用STATA軟件編碼或Excel條件函數(shù)判斷進(jìn)行處理。
剔除違背邏輯一致性的數(shù)據(jù)：在時(shí)間范圍內(nèi)，核查問卷是否存在前后邏輯不一致的題，比如總體滿意度打分為非常滿意，但后續(xù)題目都選擇了非常不滿意。
剔除有缺失值的數(shù)據(jù)：嚴(yán)格來說應(yīng)該將有缺失值的用戶予以刪除，但有時(shí)候回收樣本量沒有那么大，則可保留。
3.2 數(shù)據(jù)分析方法
數(shù)據(jù)分析方法有非常多，要在眾多的分析方法中選擇一種也是比較難的事，無論選擇什么樣高大上的方法都是其次，最重要的是選擇的分析方法能說明問題，能體現(xiàn)數(shù)據(jù)的價(jià)值。
比較分析是一個(gè)簡(jiǎn)單的、比較通用的、易于理解的數(shù)據(jù)分析方法，可以分成趨勢(shì)分析、特征重要性、分組分析三種。
報(bào)告撰寫
最后，條理清晰地展現(xiàn)數(shù)據(jù)信息，表達(dá)你的觀點(diǎn)。報(bào)告寫作的過程是一個(gè)相對(duì)費(fèi)勁的過程，特別是數(shù)據(jù)量多的情況下，總是覺得還有一些數(shù)據(jù)價(jià)值沒有被挖掘出來，但此時(shí)不要拘泥細(xì)節(jié)，細(xì)節(jié)可以回頭再補(bǔ)，會(huì)大大提升效率。
4.1 問卷的報(bào)告框架
報(bào)告主要發(fā)現(xiàn)：將總結(jié)放在最前面，閱讀者可以通過簡(jiǎn)短的總結(jié)大致了解報(bào)告觀點(diǎn)，方便他們決定是否需要繼續(xù)了解詳細(xì)內(nèi)容
目錄和分目錄：報(bào)告包含的內(nèi)容組成部分，讓閱讀者對(duì)報(bào)告內(nèi)容有初步概覽
調(diào)研背景和目的：陳述整個(gè)報(bào)告的背景和目的，對(duì)調(diào)研的范圍進(jìn)行必要說明
單頁(yè)-詳細(xì)內(nèi)容描述：有邏輯的描述項(xiàng)目的發(fā)現(xiàn)，總結(jié)數(shù)據(jù)表現(xiàn)，挖掘價(jià)值
單頁(yè)-詳細(xì)內(nèi)容描述示例：
問卷調(diào)研不止是問卷本身，還包括前期項(xiàng)目組溝通、項(xiàng)目成員分工與配合、后續(xù)結(jié)果推廣、結(jié)果推動(dòng)落地等，前期做好項(xiàng)目組溝通、明確項(xiàng)目分工，建立一個(gè)清晰的運(yùn)行機(jī)制，有利于項(xiàng)目組成員對(duì)結(jié)果的認(rèn)同，后續(xù)也有清晰的路徑去分工解決問題。所以，每一個(gè)環(huán)節(jié)都體現(xiàn)工作的價(jià)值，都同樣重要。希望大家在關(guān)注研究方法提升的同時(shí)，也可以更多關(guān)注更多工作方法提升。
文章來源：站酷 作者：酷家樂UED
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
當(dāng)公司的發(fā)展規(guī)模到一定程度時(shí)，考慮到信息安全、持續(xù)采購(gòu)成本與相關(guān)風(fēng)險(xiǎn)，企業(yè)會(huì)采取自研的方式來實(shí)現(xiàn)部分協(xié)同工作軟件的自產(chǎn)與自用，本文將以內(nèi)部目標(biāo)管理系統(tǒng)為例，闡述我們是如何系統(tǒng)化的做企業(yè)系統(tǒng)設(shè)計(jì)改版？
什么是OKR？
OKR，是Objectives 和Key Results 的縮寫,即目標(biāo)和關(guān)鍵結(jié)果，它是企業(yè)進(jìn)行目標(biāo)制定和過程管理的重要手段?？峒覙吠瑯硬扇KR的管理方法，將公司目標(biāo)層層分解到團(tuán)隊(duì)，部門再到個(gè)人，在各個(gè)層面貫穿和統(tǒng)一起來，以幫助實(shí)現(xiàn)目標(biāo)達(dá)成。
理清業(yè)務(wù)目標(biāo)，制定設(shè)計(jì)策略，是系統(tǒng)性改版產(chǎn)品的前提，在實(shí)際工作中設(shè)計(jì)師很容易被產(chǎn)品的原型、對(duì)產(chǎn)品的描述蒙蔽，只有非常清楚的理清業(yè)務(wù)的目標(biāo)，才能制定系統(tǒng)性、合理的設(shè)計(jì)策略來支撐業(yè)務(wù)，通過專業(yè)的設(shè)計(jì)方法來助力業(yè)務(wù)結(jié)果的達(dá)成，在這個(gè)項(xiàng)目中我們是如何做的呢？
OKR系統(tǒng)的改版項(xiàng)目最開始是高層的訴求，提的業(yè)務(wù)要求很簡(jiǎn)單“ 讓大家用起來，目標(biāo)管理起來”，那么如何讓大家用起來、利用系統(tǒng)將目標(biāo)管理起來是當(dāng)前需要解決的的問題。
以一個(gè)普通員工【小何】為例，在OKR系統(tǒng)中進(jìn)行OKR制定時(shí)，通常需要與多個(gè)角色產(chǎn)生關(guān)聯(lián)：
③結(jié)束回顧，包含查看、追溯、復(fù)盤
（1） 清晰的頁(yè)面結(jié)構(gòu)：
讓用戶能明確的感知到系統(tǒng)的整體結(jié)構(gòu)是有規(guī)律的，可以簡(jiǎn)單被理解的，即左邊全局控制，右邊內(nèi)容展示
我們把消息類型通過兩個(gè)維度定義消息的優(yōu)先級(jí)：“重要性”和“緊急度”，通過四象限法則，我們拆出來了：
通過此模型和產(chǎn)品確定了每一個(gè)消息類型的所在位置，且清晰表達(dá)的了每個(gè)消息應(yīng)當(dāng)?shù)奈恢?
在設(shè)計(jì)的過程中，為了進(jìn)一步的驗(yàn)證設(shè)計(jì)合理性和易用性，針對(duì)角色代表進(jìn)行了8組可用性測(cè)試，最終普遍反饋新版的操作體驗(yàn)更好。
落地追蹤，拿到結(jié)果
文章來源：站酷 作者：酷家樂UED
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
你是否有在聽別人說某某原理法則時(shí)一臉懵B的時(shí)候？明明知道這個(gè)原理卻說不出它的名字？不要緊，本文就來介紹與人機(jī)交互設(shè)計(jì)相關(guān)的15個(gè)常見的設(shè)計(jì)心理學(xué)原理，約13000字，幫助你了解產(chǎn)品的定位，需求目的和交互邏輯，洞悉用戶的各種行為，也為自己的設(shè)計(jì)予以理論支撐。
1956年美國(guó)科學(xué)家米勒對(duì)人類短時(shí)間記憶能力進(jìn)行了研究，他注意到年輕人的記憶廣度為5-9個(gè)單位，就是7±2法則。與席克定律類似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上。
因?yàn)槿四X處理信息的能力有限，所以它通過把信息分成塊和單元來處理復(fù)雜問題。7±2法則應(yīng)用很廣泛，例如iPhone通訊錄中的手機(jī)號(hào)碼被分割成”xxx-xxxx-xxxx“的形式，還有銀行卡號(hào)、身份證號(hào)，我們總是喜歡把一長(zhǎng)串?dāng)?shù)字拆分開來讀寫，目的就是降低記憶成本，提高信息的易讀性，從而達(dá)到視覺防錯(cuò)的作用。
Web導(dǎo)航欄選項(xiàng)卡數(shù)量不超過9個(gè)
在設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航時(shí)，如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序，那么數(shù)量應(yīng)該控制在7個(gè)左右（不超過9個(gè)），如蘋果、Dribbble、behance等網(wǎng)站的導(dǎo)航分類。
Web導(dǎo)航欄選項(xiàng)卡數(shù)量過多時(shí)
如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)樹狀層級(jí)結(jié)構(gòu)來展示各級(jí)別關(guān)系，但要注意其廣度和深度的平衡。例如人人都是產(chǎn)品經(jīng)理和Dribbble，把更多子類別收在二級(jí)目錄里。
移動(dòng)端選項(xiàng)卡導(dǎo)航
在移動(dòng)端應(yīng)用設(shè)計(jì)中，常見的電商app例如奈雪和樂凱撒分類模塊，兩個(gè)產(chǎn)品的商品分類布局形式很相似，都是用了選項(xiàng)卡的方式來分類商品，層級(jí)明確，相應(yīng)的提升了用戶找尋單品的效率。
Tabbar區(qū)標(biāo)簽最多不超過5個(gè)
在移動(dòng)應(yīng)用設(shè)計(jì)中，底部Tabbar最少3個(gè)，最多為5個(gè)（幾乎沒幾個(gè)超過5個(gè)），這樣做除了減輕用戶記憶負(fù)擔(dān)，超過5個(gè)會(huì)降低視覺和操作上的體驗(yàn)。事實(shí)上就算只有4個(gè)，我們也經(jīng)常想不起微信底部的4個(gè)Tab分別是啥。
頂部導(dǎo)航欄頁(yè)簽
我們看到的大部分app頂部導(dǎo)航欄的頁(yè)簽數(shù)量都嚴(yán)格遵循了7±2法則，雖然在橫軸可無限滑動(dòng)，
但在顯示區(qū)域只保持7±2法則的顯示數(shù)量，例如馬蜂窩、飛豬旅行等。
金剛區(qū)圖標(biāo)不超過8個(gè)
我們常說的“八大金剛”就是一屏顯示8個(gè)圖標(biāo)，超過的則放在第二屏。如果兩行10個(gè)，往往第十個(gè)是“更多”入口，總的來說也沒超過9個(gè)。
banner文案不超過9個(gè)字
產(chǎn)品運(yùn)營(yíng)banner主文案字?jǐn)?shù)通常控制在9個(gè)字以內(nèi)，在設(shè)計(jì)時(shí)也通常把長(zhǎng)標(biāo)題一分為二排兩行，便于用戶快速閱讀，提升點(diǎn)擊率。
在交互設(shè)計(jì)中，7±2法則是減少用戶認(rèn)知負(fù)荷，提升用戶體驗(yàn)的重要環(huán)節(jié)。同時(shí)還強(qiáng)調(diào)了在設(shè)計(jì)過程中對(duì)產(chǎn)品的預(yù)見性，避免在不斷為產(chǎn)品添加功能時(shí)，破壞原有的視覺基礎(chǔ)。
0無需說明書
喬布斯曾說過：“蘋果應(yīng)該創(chuàng)造所有人都可以使用的產(chǎn)品，即使沒有用戶指南”。
1 一看就會(huì)
簡(jiǎn)單易懂，看一眼就明白你想說什么，不用教學(xué)就知道怎么用。
2秒法則
所謂“2秒法則”，是指用戶在使用某類系統(tǒng)時(shí)的等待時(shí)長(zhǎng)不超過2秒。在極短的時(shí)間內(nèi)展示重要信息，給用戶留下深刻的第一印象。這里的2秒只是一個(gè)象征意義上的表達(dá)，也許有一點(diǎn)隨意，但是這卻是一個(gè)合理的數(shù)量級(jí)。我們熟知的“F”瀏覽模式其實(shí)就是間接縮短用戶看到重要信息的時(shí)長(zhǎng)，達(dá)到快速瀏覽的目的。
進(jìn)入App的首頁(yè)加載時(shí)間如果過長(zhǎng)就會(huì)導(dǎo)致用戶產(chǎn)生厭煩情緒，很容易退出甚至卸載App的行為。因此我們看到許多應(yīng)用將首頁(yè)加載時(shí)的空白頁(yè)進(jìn)行占位圖設(shè)計(jì)。
下拉刷新也是一個(gè)設(shè)計(jì)點(diǎn)，為避免刷新時(shí)間過長(zhǎng)，設(shè)計(jì)師通常會(huì)在加載動(dòng)畫上做文章。充滿趣味性的動(dòng)效能安撫用戶焦躁不安的心情，無形中降低了用戶對(duì)等待時(shí)間的感知。
APP里面的banner設(shè)計(jì)要有視覺沖擊力，如果兩秒之內(nèi)沒有抓住用戶的眼球，可能就被用戶忽略了。
因此，在設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品的頁(yè)面時(shí)，用戶等待的時(shí)間越短，用戶體驗(yàn)越佳。反之，就會(huì)讓用戶產(chǎn)生焦慮的情緒。
3次點(diǎn)擊法則
用戶在3次點(diǎn)擊之內(nèi)如果還沒有找到他們想要的信息或了解網(wǎng)站特色，他們就會(huì)離開該網(wǎng)站。這條原則突出了清晰的導(dǎo)航，符合邏輯的結(jié)構(gòu)和易于理解的網(wǎng)站層級(jí)的重要性。(來自《眾妙之門》P133)
其實(shí)在交互體驗(yàn)中，點(diǎn)擊的次數(shù)往往是無關(guān)緊要的。只要每次點(diǎn)擊都是無需思考的，毫不費(fèi)力地順勢(shì)進(jìn)行，那么用戶的挫敗感就會(huì)大大降低。如果你的網(wǎng)站能夠讓用戶知道他在哪里，從哪里來，要到哪里去，并且能夠讓用戶了解如何完成目標(biāo)，這樣的點(diǎn)擊即使有10次也是沒有問題的。例如，在京東購(gòu)買一件商品需要經(jīng)過“立即購(gòu)買>確定>提交訂單>選擇支付方式”4次點(diǎn)擊才能到訂單支付頁(yè)面完成購(gòu)買，這過程中可能還穿插其他的點(diǎn)擊行為（比如選擇地址、優(yōu)惠券），用戶并沒有感受到不方便，使用過程流暢而自然。
在可用性測(cè)試領(lǐng)域，“三次點(diǎn)擊”定律一直是一個(gè)很具爭(zhēng)議內(nèi)容。體現(xiàn)在以下幾點(diǎn)：
·研究表明，用戶在超過3次點(diǎn)擊還沒到達(dá)想去的頁(yè)面時(shí)，往往并沒有退出網(wǎng)站，而是會(huì)繼續(xù)多點(diǎn)幾次；
·當(dāng)把一個(gè)3次點(diǎn)擊就能到達(dá)的流程改為4次點(diǎn)擊的時(shí)候，用戶發(fā)現(xiàn)目標(biāo)頁(yè)面的能力反而提升了600%；
·合理的導(dǎo)航系統(tǒng)比點(diǎn)擊次數(shù)更重要；
·比起“3次點(diǎn)擊”，有人提出了“1次點(diǎn)擊”定律，即用戶的每一次點(diǎn)擊都應(yīng)該讓他們更接近目標(biāo)，同時(shí)盡量減少能干擾實(shí)現(xiàn)這一目標(biāo)的因素；
·用戶抱怨要花很長(zhǎng)時(shí)間才能找到某個(gè)產(chǎn)品，實(shí)際上他們是在抱怨無法找到想要的東西，如果用戶找到了想要的東西，他們就不會(huì)抱怨點(diǎn)擊的次數(shù)了；
英國(guó)心理學(xué)家William Edmund Hick認(rèn)為，在簡(jiǎn)單的判斷場(chǎng)景中：一個(gè)人所面臨的選擇越多，做出決定所花的時(shí)間就越長(zhǎng)。有時(shí)候在選擇中花費(fèi)太長(zhǎng)時(shí)間從而導(dǎo)致決策失敗。
生活中我們也經(jīng)常會(huì)面臨選擇困難癥，比如早上起床就糾結(jié)今天穿什么？中午去食堂就會(huì)糾結(jié)吃什么？造成我們?nèi)绱思m結(jié)的原因就是因?yàn)檫x擇太多了（遠(yuǎn)古人就沒這些煩惱，尋找食物時(shí)逮著什么就吃什么）。
在設(shè)計(jì)中的應(yīng)用
應(yīng)用到界面設(shè)計(jì)中也是如此，選項(xiàng)越多，意味著用戶做出決策的時(shí)間越長(zhǎng)。
例如APP Store首頁(yè)，改版前的首頁(yè)把眾多app平鋪出來，對(duì)目的不明確的用戶來說選擇有點(diǎn)多。改版后的首頁(yè)大幅減少了App的數(shù)量，卡片的設(shè)計(jì)方式簡(jiǎn)潔且目標(biāo)清晰。
不得不面對(duì)較多選項(xiàng)時(shí)， 對(duì)主要和次要的選項(xiàng)做視覺權(quán)重區(qū)分，做好設(shè)計(jì)上的歸類，提升用戶做決定的效率。例如美團(tuán)外賣金剛區(qū)第一行5個(gè)入口的圖標(biāo)在尺寸和表現(xiàn)手法上都比下面的入口圖標(biāo)要大更醒目。“我的”頁(yè)面把一些低頻率功能或不太重要的功能收納到“設(shè)置”里，此外還可以通過置灰、鎖定等方法間接減少選項(xiàng)，降低干擾。
對(duì)于多流程的任務(wù)進(jìn)行分步操作，讓用戶專注眼前任務(wù)。 例如Clubhouse注冊(cè)時(shí)，把需要用戶選擇的選項(xiàng)分步引導(dǎo)完成，讓用戶能專注當(dāng)前行為。
對(duì)于多種類別的選項(xiàng)應(yīng)當(dāng)做二次分類的區(qū)分，我們都知道電商平臺(tái)的品類繁多，僅通過單一分類是不夠的，比如數(shù)碼頻道下面還分相機(jī)、影音娛樂、數(shù)碼配件、智能設(shè)備、電子教育等大的分類。商品詳情頁(yè)的篩選功能也是貼合使用場(chǎng)景來設(shè)計(jì)的，所以分類不怕多，就怕混亂。
適用邊界
雖然選擇越少，用戶做決策的時(shí)間越短，但這并不是提高用戶體驗(yàn)的唯一標(biāo)準(zhǔn)，過度的減少選項(xiàng)，可能導(dǎo)致負(fù)面效果。
如上圖右，如果在刪除App的彈窗中只有一個(gè)“刪除”選項(xiàng)，沒有明顯的取消之類的途徑，那么用戶會(huì)覺得特別難受，感覺被強(qiáng)迫去刪除。如果當(dāng)下有急需使用手機(jī)處理一些事情，那么這樣會(huì)把這種負(fù)面情緒給無限放大，讓用戶抓狂。
希克定律主要受影響于選項(xiàng)的多少，但是它不適用于需要高難度閱讀的任務(wù)。例如考試試題每道題只給你A、B兩個(gè)選項(xiàng)（學(xué)渣竊喜），那也太容易蒙了，這就是希克定律在答案試題中的局限性。
?？硕墒且粋€(gè)可以適用于設(shè)計(jì)的指南，記住要盡量減少用戶在一次決策中要做的選項(xiàng)，因?yàn)闆Q策效率是一個(gè)產(chǎn)品導(dǎo)致用戶流失的重要原因之一。引導(dǎo)用戶在明確的選項(xiàng)之間進(jìn)行選擇，以便快速將他們送到某個(gè)地方（例如賬單支付），這將大大提升用戶體驗(yàn)并達(dá)到你的目標(biāo)。
費(fèi)茨定律由心理學(xué)家Paul Fitts提出，用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時(shí)間越長(zhǎng)，目標(biāo)越大時(shí)間越短。舉例來說，你伸手去拿桌子上的咖啡杯，開始你的手臂迅速地往杯子位置移動(dòng)，接著你會(huì)放慢速度直至找到杯子把手，這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。
如上圖所示，如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo)target，最短路徑一定是D，最短路徑上容錯(cuò)的最長(zhǎng)路徑是D+W，只要水平上移動(dòng)超過了D+W你就點(diǎn)不到了，而這個(gè)點(diǎn)擊動(dòng)作所耗的時(shí)間是一個(gè)常數(shù)加上一個(gè)以D為正比W為反比的函數(shù)的和。
詳細(xì)解釋如下，圖中紅色方塊代表點(diǎn)擊目標(biāo)，虛線代表移動(dòng)路徑，此時(shí)因?yàn)榧t色方塊目標(biāo)較大，所以用戶從任何一處點(diǎn)擊都很容易（可以用鼠標(biāo)在屏幕任意點(diǎn)移至紅色方塊試試）。
相反，紅色方塊目標(biāo)變小，快速點(diǎn)擊就會(huì)困難很多，很難一次到位。
但如果紅色方塊目標(biāo)很小距離很近的話，因?yàn)橐苿?dòng)范圍小，也能準(zhǔn)確的點(diǎn)擊到。
按鈕越大越容易點(diǎn)擊
在頁(yè)面中，大而近的目標(biāo)區(qū)域意味著用戶不需要做太精細(xì)的調(diào)整就可以輕易的觸達(dá)目標(biāo)。比如頁(yè)面中的大按鈕。
將按鈕放置在離開始點(diǎn)較近的地方
夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域，相比常見頂部搜索欄更方便操作，效率更高。
相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊
注冊(cè)登錄界面，通常將「注冊(cè)」和「登錄」放到一起，不僅可以在視覺上增強(qiáng)用戶對(duì)他們相關(guān)性的認(rèn)知，還可以減少在他們之間的距離 。
適用邊界
費(fèi)茨定律鼓勵(lì)減少距離，增加目標(biāo)大小以提升用戶效率，但反過來亦適用。比如iPhone關(guān)機(jī)按鈕，沒有使用點(diǎn)擊關(guān)閉，而采用滑動(dòng)操作，還把按鈕放在屏幕頂部，這樣明顯增加了操作難度，進(jìn)而避免了用戶誤操作。
App彈窗經(jīng)常把“關(guān)閉”按鈕放在卡片的右上角離手遠(yuǎn)的地方，希望用戶先完成彈窗提示的任務(wù)。還有啟動(dòng)頁(yè)廣告，喜歡把“跳過”按鈕放在難以點(diǎn)擊的右上角（恰飯重要），以提高用戶的誤觸機(jī)率提高轉(zhuǎn)化。
思考小結(jié)
按鈕越大越容易點(diǎn)擊，因此在程序開發(fā)中，會(huì)增加按鈕點(diǎn)擊的熱區(qū)范圍，減輕用戶精準(zhǔn)點(diǎn)擊的壓力。但也不能過分的大，容易引起誤觸；
讓相關(guān)聯(lián)的內(nèi)容更靠近彼此，用視覺手法增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知。距離產(chǎn)生美，注意不要靠的太近，會(huì)出事；
將按鈕放置在離出發(fā)點(diǎn)較近的地方，比如頁(yè)面主按鈕一般會(huì)放在屏幕底部易操作區(qū)域；
屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)樵谄聊贿吘壓徒锹湮恢糜?strong style="outline:0px;margin:0px;padding:0px;">“無限可選中”的屬性，可以大膽操作而無需“微調(diào)”，參見macOS底部dock欄；
定律的反向使用可以適用一些特殊場(chǎng)景，比如想達(dá)到某種目的而降低按鈕被點(diǎn)擊的可能；
“任何事物都具有其固有的復(fù)雜性，無法簡(jiǎn)化”。
泰斯勒定律（Tesler’s Law）由Larry Tesler于1984年提出，也稱「復(fù)雜度守恒定律」。
該定律認(rèn)為：每一個(gè)過程都有其固有的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。
生活中很多我們習(xí)以為常，感覺便捷方便的生活方式，是無數(shù)卓越的數(shù)學(xué)家、工程師、設(shè)計(jì)師等無數(shù)的時(shí)間投入，才實(shí)現(xiàn)的某個(gè)小功能，是他們把這些復(fù)雜性轉(zhuǎn)移到自己身上替我們簡(jiǎn)化了。
說回移動(dòng)端，每個(gè)應(yīng)用中都有其無法簡(jiǎn)化的復(fù)雜度，也不能按照我們個(gè)人意愿去除這些功能。這就是為什么飛機(jī)稿都簡(jiǎn)潔好看，而一搬到線上就面目全非。常見的復(fù)雜性轉(zhuǎn)移有：“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉(zhuǎn)移跳轉(zhuǎn)，比如：頂部導(dǎo)航欄的更多圖標(biāo)，就是將常用的功能整合并隱藏在首頁(yè)設(shè)計(jì)的更多功能模塊中，把用戶的操作范圍轉(zhuǎn)移到另一個(gè)地方。
除此之外，還有一些降低操作復(fù)雜度的方法：
刪除、組織、隱藏
視覺層面的“降噪”方法，刪除會(huì)干擾用戶操作的選項(xiàng)；功能分類明確，圍繞用戶行為組織信息內(nèi)容；隱藏那些不常用而又不能少的功能，延遲及階段性展示?？偟膩碚f就是將復(fù)雜的信息收起來，展示重要且簡(jiǎn)潔的界面。
簡(jiǎn)化交互設(shè)計(jì)
可以用代碼節(jié)省用戶操作時(shí)間的地方，是互聯(lián)網(wǎng)人一致的追求。例如，B站的一鍵三連，用戶長(zhǎng)按點(diǎn)贊按鈕，會(huì)同時(shí)觸發(fā)點(diǎn)贊、投幣和收藏，省時(shí)省力。
算法解放“生產(chǎn)力”
個(gè)性化算法就是通過技術(shù)手段，將用戶復(fù)雜度降低，而轉(zhuǎn)移到開發(fā)者身上。抖音為什么會(huì)讓人上癮？是算法知道了你的喜好，專推給你喜歡的內(nèi)容而不用自己去找，誰(shuí)都喜歡私人定制。這對(duì)用戶來說是一件好事，但就像魯迅說的：“你覺得好，一定是有人在負(fù)重前行”，這里的簡(jiǎn)化復(fù)雜的難度就轉(zhuǎn)移到設(shè)計(jì)和開發(fā)身上了，還逼得機(jī)器去學(xué)習(xí)。例如抖音、淘寶、知乎首頁(yè)推薦的內(nèi)容都是基于你的喜好定制化推薦給你的。
我們常說以用戶為中心去設(shè)計(jì)，就需要從用戶角度出發(fā)，在交互設(shè)計(jì)中盡量簡(jiǎn)化操作的復(fù)雜度，降低學(xué)習(xí)成本。但如“復(fù)制粘貼之父” Larry Tesler (1945-2020) 所說：“任何事物都具有其固有的復(fù)雜性，無法簡(jiǎn)化”。因此，如何取得復(fù)雜度的“平衡點(diǎn)”就是重要的部分，是讓工程師及設(shè)計(jì)師花費(fèi)大量時(shí)間去降低產(chǎn)品的使用難度，還是在設(shè)計(jì)中保留一定的復(fù)雜度是我們需要思考的事。
該原理是由麥肯錫國(guó)際管理咨詢公司顧問Barbara Minto提出的理論，她強(qiáng)調(diào)結(jié)論先行，論點(diǎn)自上而下。
你是否遇到過這樣的場(chǎng)景，部門開會(huì)時(shí)有人口若懸河的講了半天，到最后你都不知道他想說什么。所以如果開會(huì)時(shí)你會(huì)走神，這不怪你，只怪講演者說話沒有邏輯，沒有重點(diǎn)。
金字塔原理指示結(jié)構(gòu)化表達(dá)遵循結(jié)論先行的原則，即任何問題都能歸納出一個(gè)中心點(diǎn)，讓受眾能夠第一時(shí)間清楚你想談?wù)摰闹黝}。然后由數(shù)個(gè)論據(jù)作支撐，而這些一級(jí)論據(jù)可以繼續(xù)由數(shù)個(gè)二級(jí)論據(jù)支撐，如此延伸，狀如金字塔。自上而下，上層影響下層。
應(yīng)用到交互設(shè)計(jì)上，即將信息展示的重點(diǎn)與交互行為的主任務(wù)優(yōu)先展示，再根據(jù)用戶在這個(gè)界面上所愿意停留時(shí)間逐級(jí)給予更多細(xì)節(jié)補(bǔ)充。以京東的商品詳情頁(yè)為例，首先金字塔的最上層是用戶目標(biāo)明確直接進(jìn)行“立即購(gòu)買”的底部全局按鈕，其次是商品的頭圖和用戶評(píng)價(jià)這些，讓用戶了解更多信息，進(jìn)一步促成購(gòu)買，最后一層是提供商品相關(guān)的全部信息、參數(shù)、評(píng)分等，確保交易的最終完成。在這個(gè)過程中，用戶在每一層花的時(shí)間也在逐級(jí)增加，呈金字塔狀。
映射到設(shè)計(jì)師身上也是如此，從設(shè)計(jì)新人到設(shè)計(jì)總監(jiān)，中間差的就是一個(gè)完整的設(shè)計(jì)技能金字塔。就像升級(jí)打怪，每完成一項(xiàng)任務(wù)獲得相應(yīng)的經(jīng)驗(yàn)值，累積的經(jīng)驗(yàn)值幫助我們更快的升到下一級(jí)。當(dāng)把工作中的需要攻克的難題一一解決之后，你的設(shè)計(jì)水平會(huì)在不知不覺中更加精進(jìn)，形成一套自己的設(shè)計(jì)風(fēng)格，成為一名優(yōu)秀的設(shè)計(jì)師。
有趣的是，把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下，激勵(lì)用戶成長(zhǎng)。它告訴我們：
用戶的需求是永遠(yuǎn)滿足不完的，所以什么值得做，什么是可分階段去實(shí)現(xiàn)的是決策人需要明白的。如喬布斯所說：“消費(fèi)者并不知道自己需要什么，直到我們拿出自己的產(chǎn)品，他們就發(fā)現(xiàn)，這是我要的東西”；
不斷完善主要功能，以滿足金字塔頂?shù)暮诵挠脩羧骸Q策者常常添加一些自己想要的而不是用戶想要的需求，比如在信息流中添加一個(gè)廣告位；
如何優(yōu)化完善產(chǎn)品架構(gòu)，檢驗(yàn)產(chǎn)品策略的合理性和完整性；
防錯(cuò)原則由世界著名的品質(zhì)管理專家新鄉(xiāng)重夫提出，即在過程失誤發(fā)生之前加以防止，是一種在作業(yè)過程中采用自動(dòng)作用、報(bào)警、標(biāo)識(shí)等手段。使操作人員不用特別注意也不會(huì)失誤的方法。
防錯(cuò)原則認(rèn)為大部分的意外都是由于設(shè)計(jì)的疏忽，而不是人為操作失誤，可以通過優(yōu)化設(shè)計(jì)把過失降到最低。該原則最初用于工業(yè)管理，后來應(yīng)用于界面交互設(shè)計(jì)中，當(dāng)使用條件沒有滿足時(shí)，常常通過功能失效來表示。
自動(dòng)檢測(cè)提示
bilibili在登錄時(shí)輸入框沒有內(nèi)容或沒有輸密碼時(shí)，登錄按鈕處于禁用的置灰狀態(tài)，只有兩者都滿足了才可以正常點(diǎn)擊。此外登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、郵箱錯(cuò)誤等不同的錯(cuò)誤。通常必須賬號(hào)和密碼同時(shí)滿足且匹配才能成功。
Twitter發(fā)帖時(shí)只允許用戶輸入140個(gè)字，為了提醒用戶，其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個(gè)字符，超過會(huì)以負(fù)數(shù)警示。知乎發(fā)布文章標(biāo)題過長(zhǎng)時(shí)也會(huì)提示錯(cuò)誤預(yù)警。
消除可能的失誤
防錯(cuò)法則認(rèn)為大部分的出錯(cuò)都是產(chǎn)品設(shè)計(jì)的不夠優(yōu)秀，而不該責(zé)怪用戶操作疏忽，通過設(shè)計(jì)手法可以把出錯(cuò)率降到最低。防錯(cuò)法則的核心觀點(diǎn)是，如何有效的在用戶出錯(cuò)之前就盡量避免錯(cuò)誤的發(fā)生。比如，美團(tuán)外賣在接受短信驗(yàn)證碼時(shí)，系統(tǒng)會(huì)自動(dòng)提取驗(yàn)證碼在鍵盤上方顯示，用戶點(diǎn)一下就可以自動(dòng)填寫，省去了跳出應(yīng)用——打開短信——記住驗(yàn)證碼——再輸入的繁瑣過程，有效預(yù)防了出錯(cuò)的機(jī)率。還有微信在綁定銀行卡時(shí)也是通過掃描銀行卡自動(dòng)提取賬號(hào)，避免手動(dòng)輸入的出錯(cuò)率。
將失誤降至最低
二次確認(rèn)，在一些比較重要的場(chǎng)景讓用戶二次確認(rèn)，通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結(jié)果，進(jìn)一步降低出錯(cuò)率。例如，最近大家都在用的報(bào)稅App，會(huì)在提交信息前再次確認(rèn)。
視覺暗示
可在視覺（置灰或隱藏）上屏蔽那些不能選的選項(xiàng)，避免用戶點(diǎn)擊后才報(bào)錯(cuò)或點(diǎn)擊沒反應(yīng)。
其次，一些不可恢復(fù)的操作，視覺上通常會(huì)給強(qiáng)標(biāo)識(shí)。例如，刪除短信時(shí)的文字顏色“變紅”。
為用戶犯的錯(cuò)買單
當(dāng)用戶輸入錯(cuò)誤信息時(shí)，比如打錯(cuò)字，系統(tǒng)應(yīng)該給予用戶想要的信息，而不是無動(dòng)于衷，冷漠視之。
范圍限制
其實(shí)限制用戶的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來定義可接受的選項(xiàng)，那么限制用戶可以輸入的類型是一個(gè)很好的策略。例如，Airbnb訂房可選日期和設(shè)置鬧鐘時(shí)的時(shí)間范圍。
研究得出，使用產(chǎn)品時(shí)有77.7%的錯(cuò)誤都是人為的，防錯(cuò)法則可以幫助設(shè)計(jì)師站在用戶體驗(yàn)的角度考慮設(shè)計(jì)方案，做到操作前、中、后都有及時(shí)的反饋，預(yù)測(cè)到他們有可能發(fā)生的誤操作狀態(tài)，讓用戶更快完成目標(biāo)，幫助用戶減少出錯(cuò)率。
每次拿起U盤插入電腦時(shí)，我就呆住了，到底朝那個(gè)方向才是對(duì)的？
防呆（Fool-proofing）是一種預(yù)防矯正的行為約束手段，運(yùn)用避免產(chǎn)生錯(cuò)誤的限制方法，使出錯(cuò)的機(jī)會(huì)降至最低，進(jìn)而達(dá)到“第一次就把工作做對(duì)”之境界。
設(shè)計(jì)師應(yīng)謹(jǐn)記：不要認(rèn)為用戶是專家。比如，我們都知道“漢堡”圖標(biāo)就是菜單，點(diǎn)擊這個(gè)按鈕就會(huì)調(diào)出某些功能。但是設(shè)計(jì)師忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是面包屑、什么是抽屜式導(dǎo)航、什么是3Dtouch、怎樣雙指滑動(dòng)。更何況普通用戶并不會(huì)研究App，在他們眼中產(chǎn)品只是眾多工具中的一個(gè)。因此，一定要把交互和設(shè)計(jì)做的簡(jiǎn)單，通用的圖標(biāo)、功能和交互方式最好保持用戶熟悉的樣子，減輕用戶重復(fù)學(xué)習(xí)的負(fù)擔(dān)。每個(gè)頁(yè)面應(yīng)強(qiáng)調(diào)一個(gè)重要的功能而不應(yīng)該讓用戶做選擇題，這些都是有效防呆的好方法。
△頁(yè)面的中主按鈕更突出
防呆設(shè)計(jì)是預(yù)防錯(cuò)誤發(fā)生的方法，讓非專業(yè)、無經(jīng)驗(yàn)的用戶可以高效完成正確操作，不要讓用戶去思考，而是我們時(shí)時(shí)為用戶思考。
又被稱作“簡(jiǎn)單有效原理”：“如無必要，勿增實(shí)體?！?
通俗點(diǎn)去理解“如無必要，勿增實(shí)體”可以理解為“不要浪費(fèi)較多東西去做用較少的東西同樣可以做好的事情。”或者表述為“在其他條件相同的情況下，要求得越少的那個(gè)就越好，越有價(jià)值”。
應(yīng)用到設(shè)計(jì)學(xué)領(lǐng)域，該法則認(rèn)為做產(chǎn)品時(shí)功能上不可過于繁瑣，應(yīng)該保證簡(jiǎn)潔和工具化。例如，產(chǎn)品中為用戶提供了收藏功能是否就不再需要喜歡？提供了喜歡是不是不再需要收藏？一定要保證功能上的克制。不必要的設(shè)計(jì)元素會(huì)導(dǎo)致使用效率降低，還會(huì)增加不可預(yù)知的后果。建議在不損及功能的前提下，干掉多余的元素，當(dāng)兩個(gè)設(shè)計(jì)方案都能達(dá)到設(shè)計(jì)目的時(shí)，選擇較為簡(jiǎn)單的那一個(gè)有利于更好地傳達(dá)內(nèi)容更好地用戶體驗(yàn)。
總的來說，我們可以結(jié)合《簡(jiǎn)約至上》一書中提到的刪除、組織、隱藏、轉(zhuǎn)移四個(gè)策略來將復(fù)雜的設(shè)計(jì)和體驗(yàn)變得更加簡(jiǎn)單。
刪除：關(guān)注核心，讓用戶注意力集中在自己要完成的目標(biāo)上，刪除不必要的功能、流程和造成視覺混亂的元素等；
組織：繁瑣的功能通過分塊，被組織成清晰的層次結(jié)構(gòu)。還記得我們前面說到的“7±2法則”嗎，把項(xiàng)組織到7加減2個(gè)塊中；分塊越少，選擇越少，用戶負(fù)擔(dān)約輕；
隱藏：隱藏那些主流用戶很少使用，但自身更新需要但功能。通過漸進(jìn)展示和適時(shí)出現(xiàn)的方法減少干擾；
轉(zhuǎn)移：把合適的功能轉(zhuǎn)移到合適的設(shè)備上去。讓用戶感覺簡(jiǎn)單的一個(gè)重要前提，就是先搞清楚把什么工作交給計(jì)算機(jī)，把什么工作留給用戶。
小測(cè)試，下列飲料中哪一種給你印象最深刻呢？文末揭曉。
可口可樂、雪碧、芬達(dá)、嶗山可樂、7喜、美年達(dá)
雷斯托夫效應(yīng)又稱隔離效應(yīng)（isolation effect），以及新奇效應(yīng)（novelty effect），前蘇聯(lián)心理學(xué)家馮·雷斯托夫認(rèn)為，某個(gè)元素越是違反常理，就越引人注意，收到更多的關(guān)注。
一樣?xùn)|西與以往經(jīng)歷明顯不同就產(chǎn)生了經(jīng)歷差異。比如人生中的很多第一次，第一次高考、大學(xué)的第一天、初戀、第一份工作等等。該差異也會(huì)出現(xiàn)在新奇面孔、電話號(hào)碼記憶中。奇特的面孔和特殊的電話號(hào)碼更能被人記住。
該理論以多種不同的方式應(yīng)用到設(shè)計(jì)中，最明顯的就是如果想要突出某個(gè)重點(diǎn)內(nèi)容，就要使它特殊化，通過色彩、尺寸、留白、字體粗細(xì)等設(shè)計(jì)手段。利用對(duì)比來凸顯想要表達(dá)的重要信息。例如金剛區(qū)、tab欄的運(yùn)營(yíng)活動(dòng)廣告，特殊化的設(shè)計(jì)讓它們?cè)诒尘爸忻摲f而出。
個(gè)人中心的會(huì)員卡為了吸引用戶注意，增加開通率，都成了重點(diǎn)設(shè)計(jì)對(duì)象。
與以往不同的界面設(shè)計(jì)可以更加的吸引用戶，加深用戶的記憶，同時(shí)擴(kuò)大了活動(dòng)對(duì)用戶的影響力。例如每年淘寶的雙11首頁(yè)設(shè)計(jì)都與往常不同。
Google doodle 會(huì)在一些比較特殊的日子改變 logo 的設(shè)計(jì)，把logo設(shè)計(jì)成與這個(gè)日子相關(guān)的插畫或涂鴉，與平時(shí)的 logo 形成差異化，幫助人們更好地記住這個(gè)日子。
因此我們?cè)诮缑嬖O(shè)計(jì)中，若想讓用戶對(duì)哪個(gè)模塊或者是元素引起注意或點(diǎn)擊，就可以打破常規(guī)對(duì)該元素進(jìn)行強(qiáng)調(diào)設(shè)計(jì)，使他在背景中脫穎而出。但是不要任何元素都強(qiáng)調(diào)，因?yàn)槭裁炊紡?qiáng)調(diào)就等于什么都沒強(qiáng)調(diào)，就沒有重點(diǎn)，所以要謹(jǐn)慎使用這個(gè)方法。
回到開篇的題目，答案是「嶗山可樂」。相比其他飲料，嶗山可樂遇到的少，反而成了最特別的一個(gè)了。你的答案是什么？歡迎在下方留言探討。
食之無味，棄之可惜
損失厭惡是指人們面對(duì)同樣數(shù)量的收益和損失時(shí)，認(rèn)為損失更加令他們難以忍受。 同量的損失帶來的負(fù)效用為同量收益的正效用的2.5倍。比如，丟100塊錢的痛苦感要遠(yuǎn)高于你撿到100塊錢帶來的幸福感，也就是說要至少撿到300塊才能平復(fù)之前的心情。
生活中類似的栗子還有很多，比如旅游時(shí)，雖然這個(gè)景點(diǎn)很爛，人們依然覺得來都來了，還是要看完再走才“不虧”；吃自助餐時(shí)，明明吃不下那么多，可想到花了那么多錢，就要盡可能的多吃才算“回本”，真是應(yīng)了那句話：“食之無味，棄之可惜”；花了50塊買了張電影票，過了10分鐘發(fā)現(xiàn)是部爛片，就算在電影院睡覺也不愿提前走，覺得這50塊錢不能白花...
那么，該如何將“損失厭惡”賦能給產(chǎn)品設(shè)計(jì)呢？
最典型的莫過于電商App中的各類券滿天飛，比如：買二送一、3件7折、倒計(jì)時(shí)xx小時(shí)后恢復(fù)原價(jià)等等。商家就是為了營(yíng)造現(xiàn)在不買就會(huì)錯(cuò)過的套路，用戶也會(huì)覺得失之可惜。一年一度的天貓雙11，京東618，還有情人節(jié)、中秋節(jié)等各種有的沒的節(jié)日都是商家利用“損失厭惡”心理為基礎(chǔ)刺激消費(fèi)。
我們App的用戶粘性不太理想，增加一個(gè)“簽到”功能吧，產(chǎn)品經(jīng)理如是說。如是我們看到各種簽到得禮品，贏紅包等活動(dòng)。中間還不能中斷，要連續(xù)簽到多少天才能得到獎(jiǎng)勵(lì)，用戶也擔(dān)心中斷的損失。
某網(wǎng)盤下載文件時(shí)，會(huì)給你一個(gè)10秒VIP高速下載的體驗(yàn)，計(jì)時(shí)過后又恢復(fù)到龜速，讓你恨的牙癢癢。雖然這招有點(diǎn)損，但用戶體驗(yàn)到了VIP的快感，很多人還是會(huì)乖乖成為付費(fèi)會(huì)員。
產(chǎn)品運(yùn)營(yíng)中會(huì)經(jīng)常發(fā)一些優(yōu)惠券，雖然知道自己不會(huì)用，也要先領(lǐng)了再說。這些券也都有時(shí)間限制，快過期的提醒也會(huì)加快用戶決策。還有0元開通會(huì)員，套路是第一個(gè)月免費(fèi)，次月開始按正常價(jià)自動(dòng)續(xù)費(fèi)，典型的“騙”進(jìn)來養(yǎng)肥了再“殺”。
人天生會(huì)對(duì)危險(xiǎn)的，不好的東西避而遠(yuǎn)之。如是我們就看到保險(xiǎn)行業(yè)，他們會(huì)用一些負(fù)面信息（空難、車禍）刺激你，用戶就會(huì)產(chǎn)生焦慮，自然就想規(guī)避掉這些概率小的風(fēng)險(xiǎn)。例如購(gòu)買機(jī)票時(shí)的意外險(xiǎn)，QQ退出登錄時(shí)的提示。
還有就是有用戶自己的內(nèi)容的東西，一般不會(huì)輕易舍去。拿我個(gè)人來說，飛書一直是我的寫作工具，后來看到幾個(gè)更好用的軟件，但要想到把原來的這么多東西全部轉(zhuǎn)移過去也是件很心累的事，太麻煩，還是繼續(xù)用飛書好了。QQ這個(gè)“古老”的軟件，估計(jì)很多人好久都沒打開過了吧，但是讓你刪了它，你還是不愿意的，因?yàn)槟巧厦嬗泻芏嗲啻旱幕貞洝?
用戶會(huì)將大部分時(shí)間花在其它網(wǎng)站上，因此他們會(huì)希望你的網(wǎng)站也能像他們已經(jīng)掌握的其它網(wǎng)站一樣，擁有相同的使用模式和習(xí)慣。
Jakob定律是由Jakob Nielsen提出的，他認(rèn)為用戶在其他網(wǎng)站所積累的經(jīng)驗(yàn)教會(huì)了他們?nèi)绾问褂镁W(wǎng)站，所以他們會(huì)希望你的網(wǎng)站可以與那些熟悉的網(wǎng)站一樣，相似的使用方式，在使用你的產(chǎn)品、服務(wù)、內(nèi)容和信息的時(shí)候，他們不會(huì)感到恐慌，而是輕車熟路。該原則鼓勵(lì)設(shè)計(jì)師遵循常見的設(shè)計(jì)模式，以避免混淆用戶或?qū)е赂叩恼J(rèn)知成本。
例如YouTube2017年改版前后的對(duì)比，在新版中，網(wǎng)站框架和功能上幾乎沒動(dòng)，只是在UI上做了順應(yīng)新的設(shè)計(jì)準(zhǔn)則，比如調(diào)整字體大小、顏色、欄目間距等。整體上和舊版沒太大區(qū)別，而且還給用戶提供了舊版的選擇。
在移動(dòng)端App中也應(yīng)如此，在具有相同功能的頁(yè)面，盡量保持一致。大到頁(yè)面底層框架（比如電商應(yīng)用中的購(gòu)物流程），小到UI設(shè)計(jì)中的一個(gè)按鈕，一個(gè)圖標(biāo)，甚至一句微文案。
在設(shè)計(jì)產(chǎn)品時(shí)，要先延續(xù)大眾早已習(xí)慣的概念模型。然后再?gòu)淖约旱漠a(chǎn)品出發(fā)，對(duì)其進(jìn)行改善。而不是從零開始制定自以為是的流程。
日常使用的各類修圖軟件，版式都高度相似，中間是圖片，各種濾鏡、貼紙、調(diào)整等功能都放在底部操作區(qū)域，很多相同功能的名稱都一樣。這是用戶最熟悉的布局，可降低用戶在同類軟件使用的學(xué)習(xí)成本提升使用效率。
也許你會(huì)質(zhì)疑當(dāng)所有產(chǎn)品都遵循相同都設(shè)計(jì)模式，會(huì)讓產(chǎn)品同質(zhì)化嚴(yán)重，答案是必然的。此時(shí)需要深入了解用戶的目標(biāo)和心智模型（用戶訪談、用戶畫像、用戶體驗(yàn)地圖等），并將其應(yīng)用到我們的產(chǎn)品設(shè)計(jì)中去，縮小我們與用戶心智模型之間的差距，從而獲得良好的用戶體驗(yàn)。上文YouTube例子中，就是通過簡(jiǎn)單的用戶授權(quán)（新舊版本選擇），避免了心智模型的不一致會(huì)帶來的問題，當(dāng)用戶準(zhǔn)備好隨時(shí)可以切換到新的版本。相反的案例Snapchat在18年設(shè)計(jì)改版時(shí)，因?yàn)樾碌牟季治茨艽_保改版前后用戶心智模型的一致性，導(dǎo)致大量用戶流向競(jìng)爭(zhēng)對(duì)手Instagram那里了。
但是也要注意設(shè)備之間的差異，比如在移動(dòng)端“漢堡包”式菜單是個(gè)不錯(cuò)的方案，可是放到桌面端可能并不太友好，因?yàn)榇笃聊豢梢暦秶螅⌒〉臐h堡包圖標(biāo)很容易被忽略，這時(shí)候平鋪出來可能會(huì)更好。
思考總結(jié)
1、用戶會(huì)把在其他產(chǎn)品使用中已熟悉的操作習(xí)慣轉(zhuǎn)移到另一個(gè)看起來相似的產(chǎn)品上；
2、利用現(xiàn)有的思維模型，使用戶可以專注于自己的目標(biāo)上，而不是學(xué)習(xí)新的操作方式；
3、在進(jìn)行必要的改版時(shí)，請(qǐng)給用戶過渡到新版本的機(jī)會(huì)，即可以選擇短時(shí)間內(nèi)繼續(xù)使用舊版本；
看名稱挺拗口，另一種翻譯叫做“對(duì)角線平衡的和諧狀態(tài)”。它告訴我們?yōu)g覽頁(yè)面是由左上至右下的視線流，左上角是視覺第一落點(diǎn)區(qū)，右下角是視覺最終落點(diǎn)區(qū)，因此右上角和左下角都是一個(gè)強(qiáng)烈的視覺盲點(diǎn)區(qū)，大多數(shù)時(shí)容易被忽略。
在進(jìn)行信息排布時(shí)，將最重要的信息放在左上角，右上角和左下角添加輔助元素，右下角作為整個(gè)視覺落點(diǎn)可以展示重要操作。運(yùn)用視覺元素來創(chuàng)建一條虛擬的“線”，讓用戶的視線跟隨左上到右下這條對(duì)角線移動(dòng)，符合用戶習(xí)慣性的眼動(dòng)規(guī)律。
古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁(yè)，在界面的頂部展示商品圖片、名稱、價(jià)格、快遞和優(yōu)惠等用戶主要關(guān)心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角則放置最終促成用戶交易的購(gòu)買按鈕。
我們都知道一般頁(yè)面按鈕都在界面底部是因?yàn)殡x手近，方便操作，但不僅僅如此。還因?yàn)闉g覽是用戶的第一行為，他們的視線會(huì)根據(jù)頁(yè)面元素進(jìn)行移動(dòng)，最終停留在底部結(jié)尾的地方。
看各種社交產(chǎn)品評(píng)論、點(diǎn)贊的位置，就知道產(chǎn)品希望用戶先干什么的想法。
彈窗的按鈕擺放一般都是左「取消」右「確認(rèn)」，目的是讓用戶最快地看到主要操作內(nèi)容。
余額寶的「轉(zhuǎn)出」在左，「轉(zhuǎn)入」在右，畢竟誰(shuí)也不想財(cái)往外流是吧。
既然如此，為什么“發(fā)布”頁(yè)面的按鈕都在右上角呢？因?yàn)榘l(fā)布頁(yè)是屬于“編輯頁(yè)面”，需要用戶謹(jǐn)慎操作，這里關(guān)注的核心應(yīng)該是可編輯內(nèi)容區(qū)域，而不是按鈕本身。
類似的例子還有很多，設(shè)計(jì)中與此視覺流與節(jié)奏規(guī)律相似的還有F型布局和Z型布局，合理運(yùn)用這些節(jié)奏模式，使用者會(huì)跟隨你“設(shè)計(jì)”的視覺流和運(yùn)動(dòng)規(guī)律來瀏覽頁(yè)面，有效提高用戶閱讀的節(jié)奏和理解能力。
美國(guó)心理學(xué)家亞伯拉罕·馬斯洛（Maslow.A.H.）從人類動(dòng)機(jī)的角度提出需求層次理論，該理論強(qiáng)調(diào)人的動(dòng)機(jī)是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求，依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于，它告訴了我們，人在滿足了基本的需求之后，就要去實(shí)現(xiàn)更高的需求和目標(biāo)。
馬斯洛需求層次理論有兩個(gè)基本出發(fā)點(diǎn)，一是人人都有需求，某層需求滿足后，另一層需求才出現(xiàn)；二是在上層需求未獲滿足前，首先滿足迫切需求，該需求滿足后，后面的需要才顯示出其激勵(lì)作用。例如，在能感受到愛之前，他們的生理和安全需求一定要得到滿足。
回歸到產(chǎn)品，一款產(chǎn)品，最核心的是解決用戶的需求。馬斯洛需求層次理論，為產(chǎn)品的需求分析指明了方向。
生理需求：滿足人的最基本需求，如衣、食、住、行、生理方面的需求。諸如美團(tuán)外賣、淘寶、馬蜂窩等為日常生活提供方便的應(yīng)用；
安全需求：人生安全、財(cái)產(chǎn)保險(xiǎn)，也是強(qiáng)需求。如是各類投資理財(cái)軟件層出不窮。
社交需求：包括友情、親情、愛情多個(gè)層次，滿足人類社會(huì)關(guān)系，讓每個(gè)人不再是孤單的個(gè)體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛；
尊重需求：每個(gè)人都有被尊重的需求，都希望展現(xiàn)自己，獲得人們認(rèn)可。此需求可以深度結(jié)合在社交需求中。
自我實(shí)現(xiàn)：最高層級(jí)的需求，完成與自己的能力相稱的一切事情，實(shí)現(xiàn)自己理想的需要。結(jié)合到產(chǎn)品可以理解為能滿足自己外在展示（炫耀）的需求，如各類美顏軟件，美化后的照片曬到朋友圈，給人看到最好的一面。
由此規(guī)律可以看出，越靠近底層需求越是剛需，越往上，就變得越來越不必要，如自我實(shí)現(xiàn)，變得可有可無，不再是所有人的剛需。一個(gè)優(yōu)秀的產(chǎn)品，深諳人性滿足用戶核心需求，才能形成持續(xù)穩(wěn)定高用戶粘性的產(chǎn)品。
序列效應(yīng)法則又叫系列位置效應(yīng)，是指一種記憶現(xiàn)象： 在列舉項(xiàng)目時(shí),排在最前面與最后面的元素，要比排在中間的更容易讓人記住。
因?yàn)槿藗儗?duì)排在頭、尾的項(xiàng)目，要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗，卻很少人知道第二位奧爾德林；班級(jí)里我們一般都知道成績(jī)最好的第一名和倒數(shù)第一名，至于排在中間的很難記住。因此對(duì)排在開頭的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果，稱為“首位效應(yīng)”( primacy effect)。對(duì)排在結(jié)尾的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果，稱為“近因效應(yīng)”( recency effect )。
分類頁(yè)簽中，我們通常都會(huì)記得“精選”、“熱門”這類標(biāo)簽，是希望給用戶進(jìn)入App后看到的主要內(nèi)容。這就是“首位效應(yīng)”，把重要性高的內(nèi)容放在首要位置。
我們都知道界面中“返回”按鈕放在左上角，除了操作習(xí)慣和防誤觸外，還因?yàn)樗霈F(xiàn)在頁(yè)面左上角最開始的地方，更長(zhǎng)久地儲(chǔ)存在長(zhǎng)期記憶之中，需要“返回”時(shí)能夠快速回憶出來。
tabbar數(shù)量不管是3個(gè)還是5個(gè)，用戶通常都會(huì)記得第一個(gè)“首頁(yè)”和最后一個(gè)“我的”，對(duì)排在中間的都會(huì)選擇性的忽略掉。
有時(shí)候新上一個(gè)功能，產(chǎn)品想提高它的位置引起用戶注意，會(huì)和“我的”互換位置。例如網(wǎng)易云音樂，新版本中把“我的”放在第三個(gè)tab，為了提升“云村”重要性，把它放置最后一個(gè)tab，正是利用了“近因效應(yīng)”。
近因效應(yīng)常用于及時(shí)進(jìn)行反饋的設(shè)計(jì)界面中，比如點(diǎn)贊、評(píng)論、分享等功能置于底部不僅可加深印象，同時(shí)用戶在看到有趣的內(nèi)容，想要評(píng)論或分享時(shí)，不用等到文章看完即可操作。從而增強(qiáng)內(nèi)容粘性，提高互動(dòng)率。
用戶的記憶具有系列位置效應(yīng)，而且人的短期記憶非常有限，通過序列效應(yīng)法則的應(yīng)用，我們可以幫助用戶減輕記憶負(fù)擔(dān)。在排列項(xiàng)目時(shí)，把重要的放在首位或末尾，以達(dá)到最好的記憶效果。
文章來源：站酷 作者：Fyin印跡
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn