做到這8條 讓你的產(chǎn)品界面盡善盡美

TECH2IPO/創(chuàng)見的編輯團(tuán)隊(duì)由5個(gè) 處女座 追求盡善盡美的編輯組成，由于見過、用過了太多的應(yīng)用產(chǎn)品和實(shí)物產(chǎn)品，每當(dāng)我們拿到新東西準(zhǔn)備把玩一番時(shí)，對(duì)于界面、操作邏輯等方面的吐槽完全停不下來。

這也難怪，特別在國(guó)內(nèi)，好的 UI 設(shè)計(jì)格外的少。就拿手機(jī)應(yīng)用來說，國(guó)內(nèi)部分大公司和大產(chǎn)品為了迎合已經(jīng)被慣壞的用戶，跨平臺(tái)移植用戶界面、傻大粗的按鈕文字等設(shè)計(jì)行為，頻頻出現(xiàn)，。亦或者直接抄襲照搬國(guó)外的產(chǎn)品設(shè)計(jì)，比如新浪微博手機(jī)客戶端抄襲 Tumblr 的發(fā)布器設(shè)計(jì)。

而國(guó)外的公司、設(shè)計(jì)人員，通常會(huì)學(xué)習(xí)正統(tǒng)的設(shè)計(jì)知識(shí)，對(duì)于圖形設(shè)計(jì)、交互設(shè)計(jì)和工業(yè)設(shè)計(jì)這三者的獨(dú)立與融合，具有良好的理解。從設(shè)計(jì)這個(gè)詞語進(jìn)入我們的視野，開始指導(dǎo)我們的生活開始，我們見到的大多數(shù)情況都是國(guó)內(nèi)抄襲國(guó)外，而國(guó)外一直沒有停止創(chuàng)新。中外設(shè)計(jì)差異，總是差著那么幾年(近幾年追的速度快多了呵呵)。

對(duì)于設(shè)計(jì)者來說，不論你是采用包豪斯風(fēng)格，以博朗(Braun)和蘋果(Apple)的實(shí)物或虛擬產(chǎn)品為例，還是是極簡(jiǎn)風(fēng)格，以 Android 4.0 操作系統(tǒng)以來的設(shè)計(jì)規(guī)范“Holo Design”為例，你都能夠，且應(yīng)該按照符合現(xiàn)代人美感、操作習(xí)慣去設(shè)計(jì)產(chǎn)品。

于是，我們總結(jié)了8條能夠指導(dǎo)你設(shè)計(jì)出優(yōu)雅、精致的產(chǎn)品 UI 的原則，希望能給設(shè)計(jì)者、開發(fā)者們帶來幫助。

頭圖來自 grasshopperherder.com：What is UX?

1. 美觀

顧名思義，我們不要難看的設(shè)計(jì)，我們不要難看的顏色搭配，不要奇形怪狀的按鈕，不要任何讓眼睛難受的元素存在。好看、美觀的設(shè)計(jì)，不僅僅能讓你的用戶用的開心，還能讓他們想再用，一直用。你的產(chǎn)品獲得了很高的

一萬個(gè)人心中有一萬個(gè)哈姆雷特，這意味著不是所有的用戶都覺得某一種界面設(shè)計(jì)風(fēng)格很好看。設(shè)計(jì)者應(yīng)該去了解最大部分的用戶需求，了解到他們心中“美觀”的交集在哪里。

這是Google Chrome瀏覽器(for Mac)的標(biāo)簽界面。Google 崇尚極簡(jiǎn)風(fēng)格設(shè)計(jì)，這不代表他們做好最基本之后就結(jié)束了。你能從這個(gè)界面清楚地看到，他們花了很大心思打磨 UI，在保障了功能性的同時(shí)讓用戶賞心悅目(跟 TECH2IPO/創(chuàng)見 的風(fēng)格也很搭配呢)。同樣，你的桌面/網(wǎng)頁/移動(dòng)應(yīng)用，是不是也應(yīng)該在完成所有功能之后，先別匆匆上線，而是找?guī)讉€(gè)設(shè)計(jì)師再打磨優(yōu)化一下呢?

在簡(jiǎn)約、扁平化設(shè)計(jì)流行的今天，你的應(yīng)用和網(wǎng)站應(yīng)該采用一或幾種平滑、大氣、優(yōu)雅的配色方案。http://flatuicolors.com/ 這是筆者經(jīng)常使用和參考的一個(gè)配色網(wǎng)站，你也來看看吧。

2. 清晰

清晰是 UI 設(shè)計(jì)中最重要的部分：試想用戶在你的產(chǎn)品上根本找不到需要的功能在哪兒，而不想要的功能堆疊、羅列在眼前，心煩意亂，又怎能使用的開心呢?

這是知名博客服務(wù) WordPress 中，創(chuàng)建新文章的工具條 (Toolbar) 界面。這個(gè)按鈕是干什么用的?鼠標(biāo)放置在上面一會(huì)，一個(gè)簡(jiǎn)單的功能介紹 (Tooltip) 就會(huì)出現(xiàn)，告訴你這個(gè)按鈕的作用。同時(shí)，設(shè)計(jì)者在這個(gè)按鈕上使用了符合功能說明的圖標(biāo)，讓你印象更深更清晰，下次需要用到這個(gè)功能的時(shí)候就不用再費(fèi)力尋找了。同樣，你的桌面/網(wǎng)頁/移動(dòng)應(yīng)用每一個(gè)按鈕是干什么用，你確認(rèn)用戶都知道嗎?打個(gè)比方，如果你沒有使用 iOS/Android 的開發(fā)工具包，沒有使用他們提供的設(shè)計(jì)規(guī)范設(shè)計(jì)你的應(yīng)用，很有可能用戶不知道你在這個(gè)地方放置一個(gè)齒輪/加號(hào)/三橫線是干什么用的，而這很有可能導(dǎo)致誤操作，惡化用戶體驗(yàn)。

3. 相似

當(dāng)然，我不是在鼓勵(lì)你把自己的應(yīng)用做的和別人的應(yīng)用、那些熱門應(yīng)用差不多，那樣根本就不是在設(shè)計(jì)，是在抄襲。相似的意義在于，用戶進(jìn)入到你的產(chǎn)品中，使用了某一個(gè)功能，之后，他就知道其他功能的位置和使用方法了。假如所有的功能都被羅列在一個(gè)菜單下，或使用選項(xiàng)卡規(guī)整的排列好，有效降低用戶學(xué)習(xí)成本，對(duì)用戶體驗(yàn)將有很大的提升。

以下圖片，分別是網(wǎng)頁端 Gmail，和 iOS 端 Twitter 的頂級(jí)界面圖，在 Gmail 界面的左邊和上邊你能清楚的看到所有的信箱/標(biāo)簽卡羅列出來。Twitter 也是，點(diǎn)過一個(gè)信箱/標(biāo)簽卡，就知道點(diǎn)其他的是干什么用的了。

4. 簡(jiǎn)明

太多的菜單，太多的標(biāo)簽，太多的圖標(biāo)，太多的 Tooltip ……好的東西堆積多了的話，也變成了不好的事。我們需要精確，需要簡(jiǎn)明。一句話能說明白的事，絕對(duì)不說3句。

把一些選項(xiàng)類的東西做成最直觀的樣子。

這是 OSX 工具欄中的音量調(diào)整選項(xiàng)，很簡(jiǎn)明直觀：從下到上就是從小到大。大部分的音量、亮度等選項(xiàng)也是這樣的，要么就是從左到右。當(dāng)然，這只是一個(gè)例子，目的是告訴你不要把音量做成“音量 1”、“音量 2”、“音量 3”這樣的感覺。

同樣，錯(cuò)誤提示也是很多設(shè)計(jì)的大問題“丟失關(guān)鍵的 xxxx.DLL 文件”、“xxxx 指令引用的 xxxx 內(nèi)存，該內(nèi)存不能 written ”，這是什么東西?跟我有什么關(guān)系?我要解決問題，而不是先被大棒打暈再解決問題;很多開發(fā)者干脆忽略了錯(cuò)誤提示，出現(xiàn)故障的時(shí)候應(yīng)用直接閃退，用戶的所有修改全都丟失。不好好處理錯(cuò)誤提示，會(huì)導(dǎo)致極差的用戶體驗(yàn)。

錯(cuò)誤提示可以做的很簡(jiǎn)單：“應(yīng)用剛崩潰了，不過你的修改已在崩潰前上傳云端/本地緩存”。或者更簡(jiǎn)單，一句話“崩潰已恢復(fù)”就搞定了。用戶不需要知道機(jī)器或應(yīng)用到底什么地方出了毛病，他只需要知道還可以繼續(xù)用。

5. 一致性

針對(duì)單獨(dú)的應(yīng)用設(shè)計(jì)適合的 UI，這是正確的，具體情況具體分析，這是馬克思主義哲學(xué)教導(dǎo)我們的。但，如果一個(gè)開發(fā)者開發(fā)了多款應(yīng)用，他是否應(yīng)該給這些應(yīng)用設(shè)計(jì)一致的界面呢?

一致性的 UI 設(shè)計(jì)使得用戶能夠養(yǎng)成相對(duì)固定的使用習(xí)慣，讓他們?cè)谕婚_發(fā)者的多款應(yīng)用間，或者同一應(yīng)用的新舊版本間，自由的切換使用，而不需付出太大的學(xué)習(xí)成本。

一個(gè)最標(biāo)準(zhǔn)的例子：Microsoft Office 套件，他們的菜單的一致性設(shè)計(jì)是業(yè)界的楷模。

6. 及時(shí)響應(yīng)

“及時(shí)響應(yīng)”意味著：

(1)快：不管背后的應(yīng)用運(yùn)算，還是網(wǎng)絡(luò)傳輸，至少界面的所有動(dòng)作要快。要么整個(gè)界面讀取迅速，要么界面元素先最快速度讀取出來，內(nèi)容隨后跟上也成。因?yàn)?ldquo;加載中”“小菊花”這樣的界面元素，實(shí)在是令用戶心碎。

(2)即時(shí)反饋：這個(gè)按鈕我按了還是沒按來著?網(wǎng)絡(luò)信息瞬息萬變，這一秒按了什么下一秒我也許就不記得了。不論用戶在 UI 上進(jìn)行了何種操作，UI 都應(yīng)該給予用戶適當(dāng)?shù)姆答仭Ｄ敲催@個(gè)按鈕能不能至少呈現(xiàn)一個(gè)“被按下”的樣式?讓用戶知道剛才按過這個(gè)按鈕了。盡管網(wǎng)速慢或是運(yùn)算速度慢，但至少用戶知道應(yīng)用不是死掉了，后臺(tái)在很努力的加載新內(nèi)容當(dāng)中。

這是 Gmail 第一次加載收件箱的界面。郵箱界面元素加載需要時(shí)間，用戶郵件內(nèi)容加載也需要時(shí)間。為了不讓用戶看著“白菊花”干瞪眼，或者看著沒有成行的網(wǎng)頁框架逐漸加載出來，Google 加入了這個(gè)非常簡(jiǎn)單的加載界面。既告訴了用戶后臺(tái)正在加載，沒有“死機(jī)”，向用戶通報(bào)了加載的進(jìn)度。

7. 操作效率

UI就是一輛觀光車，不同的功能是這輛車帶你去的地方。那么，為了讓游客玩得舒心，玩的放心，除了讓他們?cè)谲嚿系臅r(shí)候坐得舒服(上一條：及時(shí)響應(yīng))之外，一輛好的觀光車至少應(yīng)該能快速地把游客帶到他們想要去的地方，而不是順路經(jīng)過了太多別的地方(冗余功能)。這就是操作效率的問題所在。

使用 iPhone 的朋友都知道 iOS 的圖片分享功能，這個(gè)功能就是 UI 設(shè)計(jì)中注重操作效率的典范。選擇了一張圖片之后，iOS 早就幫用戶想好了我可能要拿這張圖片做什么：分享到 Twitter 或是微博?和附近的朋友通過 AirDrop 分享?當(dāng)做朋友頭像，或是設(shè)定為墻紙?有了這一步操作邏輯的加入，用戶不再需要單獨(dú)打開對(duì)應(yīng)的應(yīng)用，再進(jìn)行操作。“圖片分享”就是用戶的一站式解決方案。

8. 操作可修正(錯(cuò)誤-友好)

人無完人，即便是經(jīng)常使用的網(wǎng)站或應(yīng)用，用戶都可能因?yàn)檎`操作而丟失數(shù)據(jù)：這封郵件不小心刪除了，為什么回不來?你這破郵箱怎么設(shè)計(jì)的?滾粗吧!大部分用戶都是無情，不要指望他們理解你作為一個(gè)開發(fā)者有多苦多累。你需要做的，就是讓自己的應(yīng)用盡善盡美，而修正用戶誤操作，就是其中重要的一項(xiàng)體驗(yàn)方面。

這是 Gmail 的撤銷操作提示。Gmail 為用戶刪除郵件的動(dòng)作提供了雙重可反悔的選項(xiàng)。第一重，你可以點(diǎn)擊這個(gè)撤銷動(dòng)作的按鈕。第二重，你還可以在“已刪除”郵件箱里面找到所有刪掉的郵件，30 天內(nèi)的已刪除郵件都有機(jī)會(huì)恢復(fù)。

Mailbox是一款知名的郵件應(yīng)用，之前一度要求用戶排隊(duì)注冊(cè)。該應(yīng)用使用 GTD、To-Do List的操作邏輯，為用戶提供了一種革新的郵件處理模式。我們都知道，To-Do List是一個(gè)重要的效率管理方式，完成的項(xiàng)目可以被歸檔，而不是簡(jiǎn)單的刪除。在 Mailbox 當(dāng)中，郵件被當(dāng)成了待辦事項(xiàng)，而對(duì)一封已讀郵件的處理方式，包括了“已辦”和“刪除”。所以，被用戶處理掉的郵件，要么在“已辦”當(dāng)中，要么在“已刪”當(dāng)中，而這封郵件的狀態(tài)可以在“已辦”、“已刪”、“待辦”、“推遲以后辦”的數(shù)種狀態(tài)中來回切換。

后話

即便了解以上 8 點(diǎn)，想要為產(chǎn)品和應(yīng)用設(shè)計(jì)優(yōu)雅、精致的 UI，開發(fā)者還是會(huì)發(fā)現(xiàn)他們陷入了矛盾當(dāng)中：設(shè)計(jì)地簡(jiǎn)約一些，會(huì)功能表達(dá)不完整，用戶學(xué)習(xí)成本太高。而功能表達(dá)完整了，界面又變得臃腫不堪。在所有的要點(diǎn)中達(dá)到均衡，需要不斷時(shí)間和項(xiàng)目的不斷磨練。最關(guān)鍵的在于，開發(fā)者要根據(jù)自己的產(chǎn)品/應(yīng)用類型，實(shí)施最適合的 UI 設(shè)計(jì)。如果我要做一款記賬應(yīng)用，我可以考慮為頂級(jí)界面設(shè)計(jì)一個(gè)按周或者按月展開的監(jiān)視表，這是一種邏輯;我也可以選擇按照流水的種類：收入、支出、借貸等項(xiàng)目按菜單羅列清晰，而這又是一種邏輯。選擇適合產(chǎn)品的設(shè)計(jì)風(fēng)格，才是最重要的事。