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

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

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

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

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

頭圖來(lái)自 grasshopperherder.com：What is UX?

1. 美觀(guān)

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

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

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

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

2. 清晰

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

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

3. 相似

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

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

4. 簡(jiǎn)明

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

把一些選項類(lèi)的東西做成最直觀(guān)的樣子。

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

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

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

5. 一致性

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

一致性的 UI 設計使得用戶(hù)能夠養成相對固定的使用習慣，讓他們在同一開(kāi)發(fā)者的多款應用間，或者同一應用的新舊版本間，自由的切換使用，而不需付出太大的學(xué)習成本。

一個(gè)最標準的例子：Microsoft Office 套件，他們的菜單的一致性設計是業(yè)界的楷模。

6. 及時(shí)響應

“及時(shí)響應”意味著(zhù)：

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

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

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

7. 操作效率

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

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

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

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

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

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

后話(huà)

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