一個(gè)網(wǎng)站不僅僅是一組鏈接過的頁面，而是一種體現(xiàn)苍蔬，一個(gè)空間诱建。在這個(gè)空間里，不同的人碟绑、組織會(huì)遇見俺猿、溝通、交互格仲。這些互動(dòng)能為訪問者提供體驗(yàn)押袍。作為一名ui設(shè)計(jì)師，我們的工作就是盡可能地使體驗(yàn)感受更好凯肋。
其中的關(guān)鍵就在于優(yōu)先并且始終考慮你的客戶谊惭。
幸運(yùn)的是，雖然網(wǎng)頁設(shè)計(jì)還是一門較新的學(xué)科否过，但它對(duì)人機(jī)交互（HCI）的科學(xué)研究的幫助很大午笛，而我們這篇文章就將會(huì)由9個(gè)來自HCI研究的準(zhǔn)則，他們都能幫助你在設(shè)計(jì)網(wǎng)站和程序時(shí)苗桂，更好地專注于用戶药磺。
界面設(shè)計(jì)側(cè)重于界面功能的布局，用戶體驗(yàn)設(shè)計(jì)則側(cè)重于更大的局面煤伟，也就是整個(gè)體驗(yàn)癌佩，界面設(shè)計(jì)只是其中的一個(gè)子集。
1. 了解客戶的需求?
最重要的是便锨，我們需要定位用戶——內(nèi)外都需要围辙。這就意味著我們的應(yīng)用能吸引多少流量，更重要的是放案，了解其中客戶地需求姚建，以及他們?cè)跐M足需求的道路上所遇到的障礙。
而要做到這種程度的分析吱殉，我們需要更細(xì)致的統(tǒng)計(jì)數(shù)據(jù)掸冤，這就需要深入了解網(wǎng)站的用戶了厘托。與用戶面對(duì)面交談，觀看他們的使用流程稿湿，詢問相關(guān)的問題铅匹，比如“你對(duì)這種設(shè)計(jì)有什么看法？”饺藤，或是其他更深的問題包斑。
用戶的需求是什么？是什么在阻礙他們滿足自己的需求涕俗？而我們的網(wǎng)站將會(huì)如何幫助他們解決或是克服這些阻礙罗丰？
千萬別空想你的用戶想要什么，你需要實(shí)地深入挖掘再姑。畢竟丸卷，欲望只是需求的產(chǎn)物，如果我們能夠滿足用戶深層次的需求询刹。就能滿足他們的一些愿望，以及更多的基本要求萎坷。
通過數(shù)據(jù)分析以及與用戶的溝通凹联，我們能夠得到許多問題的答案，這些問題可能是從如何使用界面哆档，或是界面的重點(diǎn)應(yīng)該放在哪里蔽挠。
2. 定義界面的使用方法
在設(shè)計(jì)界面之前，我們需要想清楚它的使用方法瓜浸。隨著觸屏的普及澳淑，觀察比想象更能發(fā)揮作用。
亮點(diǎn)：應(yīng)用程序的用戶體驗(yàn)大多來自輕松和流暢的橫向觸摸插佛。
人們有這么兩種方法來使用網(wǎng)站和應(yīng)用程序：通過與產(chǎn)品進(jìn)行交互的直接方法杠巡，與通過與產(chǎn)品外圍進(jìn)行交互的間接方法。
直接交互的例子:
點(diǎn)擊按鈕
刷卡
使用指尖進(jìn)行拖拽
簡介交互的例子:
使用鼠標(biāo)點(diǎn)擊
使用鍵盤命令/快捷鍵
鍵入表單輸入域
在Wacom上繪圖
有時(shí)交互很簡單雇寇。
用戶定位以及用戶所使用的設(shè)備會(huì)在很大程度上影響我們的決定氢拥。如果是為老年人或是手部受限的人群進(jìn)行設(shè)計(jì)，我們就不需要太多的橫向滑動(dòng)锨侯。如果是在為通過鍵盤來與應(yīng)用程序進(jìn)行溝通的編程人員或是作家進(jìn)行設(shè)計(jì)嫩海，那么我們需要支持所有常見的快捷鍵方式，以最大限度地減少鼠標(biāo)使用時(shí)間囚痴。
3. 設(shè)定預(yù)期
許多網(wǎng)站或是應(yīng)用都會(huì)出現(xiàn)這樣的情況：單擊按鈕就進(jìn)入付款界面叁怪、刪除網(wǎng)站或是一些不是很好的界面。每一次點(diǎn)擊都有結(jié)果，有時(shí)還會(huì)帶來焦慮阅束。
因此呜叫，一定要讓用戶知道如果點(diǎn)擊了這個(gè)按鈕會(huì)發(fā)生什么和悦。我們可以通過設(shè)計(jì)或是復(fù)制來做到這一點(diǎn)铆铆。
通過設(shè)計(jì)設(shè)定預(yù)期:
突出顯示所需的按鈕
使用約定俗成的符號(hào)沼溜，如用垃圾桶代表刪除趟佃、加號(hào)代表添加內(nèi)容例书，放大鏡用來表示搜索
選擇具有相關(guān)含義的顏色混驰，如綠色代表“前進(jìn)”攀隔，紅色代表“停止”
通過復(fù)制設(shè)定預(yù)期:
解釋清楚按鈕的作用
在空白處提供具有導(dǎo)向性和鼓勵(lì)性質(zhì)的文字說明
適時(shí)發(fā)出警告并要求確認(rèn)
對(duì)于不可逆的行為，如永久刪除某些內(nèi)容栖榨，則需要詢問用戶是否確定昆汹。
在InVision中，單擊垃圾桶圖標(biāo)并不會(huì)立即刪除婴栽，網(wǎng)站會(huì)詢問你是否確定满粗，并告知操作不能撤銷。
4. 預(yù)測可能出現(xiàn)的錯(cuò)誤
人都會(huì)犯錯(cuò)愚争，而神明會(huì)原諒犯錯(cuò)映皆。——Alexander Pope《論批評(píng)》
人總是會(huì)犯錯(cuò)轰枝，也總是不得不承擔(dān)后果捅彻。這里有兩種方法可以減少錯(cuò)誤的影響：
1.防止錯(cuò)誤發(fā)生
2.亡羊補(bǔ)牢，為時(shí)不晚
我們能在很多電子商務(wù)網(wǎng)站以及表單設(shè)計(jì)中看到很多規(guī)避錯(cuò)誤的方法：在填寫完所有空格錢鞍陨，按鈕并不被激活步淹；表單常常會(huì)檢測到電子郵件地址錯(cuò)誤；以及彈出詢問窗口詢問你是否真的想清空購物車诚撵。
與亡羊補(bǔ)牢相比缭裆，預(yù)測錯(cuò)誤從而規(guī)避往往沒那么沮喪，畢竟點(diǎn)擊“下一頁”或是“提交”時(shí)在發(fā)現(xiàn)錯(cuò)誤簡直太難過了寿烟。
在寫防錯(cuò)說明時(shí)澈驼，我們需要確定說明說清楚了兩件事：
1.把問題解釋清楚了，例如韧衣，“你說你出生在火星盅藻，但人類并沒有在火星上殖民，所以出錯(cuò)了”畅铭。
2.將問題的解決方法解釋清楚氏淑。例如，“請(qǐng)選擇地球上的一個(gè)出生地”硕噩。
另外假残，請(qǐng)注意我們還需要一個(gè)保留之前的某些狀態(tài)，好查看之前并沒有出現(xiàn)錯(cuò)誤的情況。例如辉懒，如果我不小心刪除了某些重要文件阳惹，但實(shí)際上可以回復(fù)文件，請(qǐng)使用一行文字讓我知道有這個(gè)功能眶俩，就像“您可以轉(zhuǎn)到垃圾桶還原已刪除的項(xiàng)目”一樣莹汤。
預(yù)測用戶錯(cuò)誤的原理稱為poka-yoke原理，這是一個(gè)日本術(shù)語颠印，意為“防錯(cuò)”纲岭。
5. 反饋迅速
在現(xiàn)實(shí)世界中，環(huán)境總是給予我們反饋线罕，我們說話止潮，別人回應(yīng)；我們擼貓钞楼，貓則會(huì)發(fā)出咕嚕聲或是嘶嘶聲喇闸，當(dāng)然這取決于它的心情。
數(shù)字界面往往不會(huì)給予我們反饋询件，我們總是不知道是否該重新加載頁面燃乍、重新啟動(dòng)筆記本電腦，還是將它關(guān)閉宛琅，從最近可用窗口中刪除橘沥。
所以我們可以設(shè)計(jì)一個(gè)加載動(dòng)畫。當(dāng)我們點(diǎn)擊它時(shí)夯秃，讓那個(gè)按鈕彈出并反彈，當(dāng)然幅度不要太大痢艺。如果我完成了一些事的時(shí)候仓洼，也可以設(shè)計(jì)一個(gè)虛擬的“擊掌”，讓我知道我的完成情況堤舒。
??MailChimp在用戶安排或者發(fā)送電子郵件是提供反饋和建議
但要確保反饋?zhàn)顗蜓杆偕āsability.gov將任何沖過1秒鐘的延遲定義為中斷，超過10秒基本可以說是受損了舌缤。但實(shí)際上箕戳，只需要三秒鐘，就能讓美國一般的人口受到影響国撵。
如果頁面只能在5秒左右加載好陵吸，就不需要顯示進(jìn)度條了，因?yàn)檫@會(huì)使得加載時(shí)間看起來更長了介牙。單可以使用并不明示前進(jìn)的可視化壮虫，例如Mac的“死亡風(fēng)車”。如果我們需要在網(wǎng)站上使用進(jìn)度條，請(qǐng)考慮嘗試使用一些視覺技巧囚似，這樣能讓加載看起來更快一些剩拢。
6. 仔細(xì)考慮元素的位置和大小
Fitt定律是人機(jī)交互（HCI）的基本原理，它是指：
獲取目標(biāo)的時(shí)間是目標(biāo)距離和大小的函數(shù)饶唤。
換一句話說徐伐，如果元素越大或是越近，我們就能更快地把光標(biāo)放在上面募狂。這句話對(duì)人機(jī)交互和UI設(shè)計(jì)來說意義深厚办素，但其中最重要的有三個(gè)：
我們需要使得按鈕和其他需要點(diǎn)擊地元素大到能夠輕松地被點(diǎn)擊和查看。這對(duì)于菜單一類地連接列表來說十分重要熬尺，如果空間不足摸屠，我總會(huì)點(diǎn)進(jìn)錯(cuò)誤的鏈接。
為更常用的操作制造更大更突出的按鈕粱哼。
在屏幕的邊緣或是角落防止導(dǎo)航季二，或者是其他常見的交互元素，例如搜索欄揭措】柘希可能你會(huì)覺得這有違常識(shí)，但在邊緣就減少了對(duì)準(zhǔn)確性的要求绊含，用戶就不用擔(dān)心點(diǎn)到范圍外去了桑嘶。
在考慮元素的放置位置和大小時(shí)，請(qǐng)始終記得考慮交互方式躬充。如果你的網(wǎng)站是水平滾動(dòng)而不是垂直滾動(dòng)的逃顶，就需要考慮在何處、如何給用戶提示這一特殊的滾動(dòng)方式充甚。
7. 不要忽視標(biāo)準(zhǔn)
作為創(chuàng)意性職業(yè)以政，設(shè)計(jì)師總是傾向于重塑食物，但這并不總是最好的主意伴找。
為什么盈蛮？因?yàn)槭煜そ缑娴母倪M(jìn)會(huì)增加我們的“認(rèn)知負(fù)荷”，這使得用戶要再次思考自己的學(xué)習(xí)過程技矮。我們的確可以隨心所欲地重新設(shè)計(jì)車輪的形狀抖誉，但這一切都要建立在實(shí)用的基礎(chǔ)上。
這一法則正好解釋了為什么Google文檔的菜單欄幾乎與Vista系統(tǒng)之前的Microsoft Word的菜單欄相同：
Vista系統(tǒng)之前的Microsoft Word
?
Google 文檔菜單欄衰倦，2015
???
這也解釋了為什么Pocket為什么要在其Android應(yīng)用程序中更改歸檔按鈕的位置袒炉。
更改按鈕位置后的界面更符合Android的設(shè)計(jì)風(fēng)格，也使得新用戶繼續(xù)使用Poket的可能性增加了23%樊零。
在2013年的秋天梳杏，歸檔按鈕被放置在了屏幕的左上角，右側(cè)是Android設(shè)計(jì)規(guī)范所說的“向上”按鈕。Pocket想讓人們更關(guān)注閱讀體驗(yàn)十性，而不是簡單地重復(fù)一些簡單的操作叛溢，但更改過后的位置會(huì)使得新用戶以外關(guān)閉并歸檔他們正在閱讀的文章，而不是像預(yù)期那樣順利地返回到他們地閱讀列表中劲适。
這一微小地變化楷掉，增加了新用戶繼續(xù)使用Pocket23%的可能。
8. 增強(qiáng)界面的可讀性
當(dāng)談到可讀性時(shí)霞势，人們常常會(huì)引用哈佛大學(xué)心理學(xué)家George Miller的論文《神奇的數(shù)字7（+-2）——我們信息處理能力的一些限制》烹植，文章提出，人們?cè)诙唐诘挠洃浿兄荒苡行У靥幚?-9件事愕贡。米勒本人稱這是巧合草雕，但這并不阻礙這句話地流傳。
也就是說固以，簡單的事情更容易合乎邏輯墩虹，在短期內(nèi)更容易被記住。因此憨琳，我們需要控制界面中需要記住的事情的數(shù)量诫钓，以提高界面的可讀性。我們可以通過分塊來達(dá)到這一目的篙螟，即將信息分成更容易消化的小塊菌湃。
這一想法與Tesler復(fù)雜性保護(hù)定律不謀而合，該定律認(rèn)為UI設(shè)計(jì)師應(yīng)該盡可能簡化他們?cè)O(shè)計(jì)的界面遍略。這可能意味著盡可能地掩蓋界面背后應(yīng)用程序的復(fù)雜性惧所。但Microsoft Word是一款沒有很好遵守此定律的流行產(chǎn)品。
大多數(shù)人只會(huì)用Word來打字绪杏，但另一些人可以用Word來做各種高級(jí)的事纯路。在全球范圍內(nèi)，每個(gè)人都使用相同的用戶界面打開相同版本的Word寞忿，這就使得只需要打字的人被很多他們可能永遠(yuǎn)不會(huì)使用的選項(xiàng)所淹沒。
從而就有了漸進(jìn)式公開的概念顶岸，其中高級(jí)功能被隱藏在了次級(jí)菜單中腔彰。我們?cè)诰W(wǎng)站中經(jīng)常遇到這種情況：介紹產(chǎn)品的文本往往比較短小，然后可以鏈接到更多詳細(xì)信息的頁面辖佣。這也是移動(dòng)射擊的最佳時(shí)間霹抛，如何構(gòu)建一個(gè)強(qiáng)大的導(dǎo)航也是我們一直面臨著的挑戰(zhàn)。
專業(yè)提示：避免在鏈接和按鈕中使用過多的“了解更多”和類似的非特定文本卷谈。為什么杯拐？因?yàn)檫@些文本并不能告訴客戶他們會(huì)知道更多什么。通常人們只是瀏覽界面以找到一個(gè)連接到他們西昂區(qū)的地方的鏈接，即使重復(fù)15次“了解更多”端逼，也并不會(huì)使得用戶更關(guān)注這里朗兵，屏幕閱讀器的用戶尤其如此。
9. 使決策變得簡單
現(xiàn)在的網(wǎng)站總是如此的喧囂：橫幅突然進(jìn)化成了全屏廣告顶滩，消息彈出余掖、全是請(qǐng)求我們訂閱但我們卻沒有機(jī)會(huì)閱讀的博客，視頻插頁式的廣告迫使我們消耗寶貴的觀看秒數(shù)礁鲁，甚至各種小部件盐欺、彈出窗口、工具提示……
有時(shí)候我十分渴望擁有一個(gè)平靜的網(wǎng)絡(luò)仅醇，Hick法則也告訴我冗美，我真的需要一個(gè)這樣的網(wǎng)絡(luò)。Hick法則是說析二，給用戶提供的選擇越多粉洼，他們就越難做出決定。
這幾乎影響了所有我們所構(gòu)建的內(nèi)容：
總體布局
導(dǎo)航菜單
價(jià)格頁面
博客索引
內(nèi)容提要
列表還很長甲抖，不過結(jié)果都一樣：我們?cè)O(shè)計(jì)得越簡單漆改，用戶做出我們希望他們做出的決定就越快越容易。這正是很多登陸頁面和非實(shí)時(shí)電子郵件只有一個(gè)號(hào)召性用語的原因准谚。
專業(yè)提示：有時(shí)候挫剑，我們又需要用戶放慢速度并仔細(xì)選擇。這就是為什么Pinterest柱衔、Dribbble和許多博客得平鋪設(shè)計(jì)都運(yùn)行良好樊破。畢竟，經(jīng)過抉擇唆铐，用戶更可能選擇了一個(gè)更適合自己的選項(xiàng)哲戚。
10. 以數(shù)據(jù)為參考對(duì)象
盡管我們都希望我們能夠以純粹的藝術(shù)價(jià)值來看待我們的設(shè)計(jì)作品，但事實(shí)上艾岂，借以設(shè)計(jì)來實(shí)現(xiàn)目的同樣重要顺少。
盡管借助用戶調(diào)研，我們能在設(shè)計(jì)中更好地進(jìn)行決策王浴，以實(shí)現(xiàn)設(shè)計(jì)地目的脆炎，但啟用設(shè)計(jì)后的數(shù)據(jù)仍具有極大地指導(dǎo)意義。
因此氓辣，我們可以為網(wǎng)站設(shè)置一個(gè)分析后臺(tái)秒裕，并定期進(jìn)行分析。現(xiàn)在有很多不同的分析工具钞啸，但我建議使用Google Analytics或是Mixpanel几蜻，具體就要視項(xiàng)目類型而言了喇潘。
Mixpanel專注于事件，因此它會(huì)根據(jù)訪問者在您的網(wǎng)站上的操作收集數(shù)據(jù)梭稚，而Google Analytics更具有行為性颖低，可為您提供操作時(shí)間和流量來源等。雖然這兩種工具都可以提供這兩種形式的數(shù)據(jù)哨毁，但它們的側(cè)重點(diǎn)各不相同枫甲，我們需要選擇最適合需求的那一款。
注意：這兩種工具都可以在一定數(shù)量內(nèi)免費(fèi)使用扼褪。Webflow和類似平臺(tái)通常通過簡單的API密鑰交換使得分析設(shè)置變得更加容易想幻。
Webflow中值得稱道的交互設(shè)計(jì)
許多Webflow的設(shè)計(jì)師已經(jīng)使用這些原則來構(gòu)建直觀且引人入勝的交互，比如說：
擴(kuò)展的圈式導(dǎo)航
Waldo brooodryk設(shè)計(jì)了一個(gè)有趣的可移動(dòng)的话浇，并且對(duì)桌面十分友好的動(dòng)畫菜單脏毯。在頁面加載時(shí)，右下角的源泉顯示菜單幔崖，單擊時(shí)食店，它會(huì)展開以顯示可用頁面和對(duì)X的更改，從而允許用戶關(guān)閉菜單并專心于內(nèi)容赏寇。
這是一個(gè)設(shè)計(jì)簡潔且迷人的組合吉嫩，同時(shí)十分切合Fitts法則：在屏幕邊緣防止鏈接是最適用的。當(dāng)用戶不希望在導(dǎo)航中隱含層次結(jié)構(gòu)時(shí)嗅定，循環(huán)導(dǎo)航會(huì)是一個(gè)不錯(cuò)的選擇自娩。
你會(huì)為這位女孩買杯酒嗎？
設(shè)計(jì)師Shane Hurt將這個(gè)互動(dòng)決策放在了一起渠退，以幫助您決定是否為這位女孩購買一杯酒忙迁。這樣的設(shè)計(jì)其實(shí)包含了很多內(nèi)容，但能讓用戶專注于眼前的任務(wù)：回答此時(shí)的問題碎乃，并繼續(xù)朝著我們想要的決定前進(jìn)姊扔。這也是一種保持簡潔的方法。
重新設(shè)計(jì)優(yōu)衣庫
有一天梅誓，設(shè)計(jì)師Tim Noah在優(yōu)衣庫網(wǎng)站上購物時(shí)恰梢，他發(fā)現(xiàn)他們的導(dǎo)航系統(tǒng)十分復(fù)雜，他想要重塑這一元素梗掰，采用更平板化嵌言、對(duì)移動(dòng)端更友好的方式。
我最喜歡的愧怜，就是他將優(yōu)衣庫的需要幾次點(diǎn)擊和頁面加載才能遍歷完的多層級(jí)導(dǎo)航重新設(shè)計(jì)成了單頁體驗(yàn)。公平地說妈拌，優(yōu)衣庫在他們的移動(dòng)端網(wǎng)站上做了同樣的事情拥坛，但他只是一個(gè)移動(dòng)子域名蓬蝶，并不是桌面網(wǎng)站的相應(yīng)版本。
需要注意的是猜惋，這次重新設(shè)計(jì)只是一個(gè)個(gè)人行為丸氛，和優(yōu)衣庫無關(guān)。
引領(lǐng)運(yùn)動(dòng)加速器
2017年初著摔，設(shè)計(jì)師Jaro Quastenberg推出了一個(gè)真正展現(xiàn)Webflow視覺交互能力的網(wǎng)站——引領(lǐng)運(yùn)動(dòng)加速器缓窜。
這個(gè)網(wǎng)站在前面所提到的亮點(diǎn)上十分突出。第一谍咆，了解客戶禾锤。引領(lǐng)運(yùn)動(dòng)加速器知道他們需要吸引產(chǎn)品制造商的注意力，而他們的網(wǎng)站則會(huì)留下第一印象摹察。第二恩掷，提供反饋。無論是滾動(dòng)供嚎、懸停還是點(diǎn)擊跳轉(zhuǎn)黄娘，網(wǎng)站都會(huì)立即響應(yīng)訪問者的操作，并且還是一些令人驚喜的方式克滴。
從菜單到滾動(dòng)的交互逼争，這些都是功能優(yōu)化的很好的例子了。
至此劝赔，你已經(jīng)掌握基本知識(shí)了
現(xiàn)在就可以去一些網(wǎng)站誓焦，看看這些UI設(shè)計(jì)是否合理~
UI設(shè)計(jì)培訓(xùn) www.xijin999.com
