作者：Nick Babich；翻譯：風(fēng)口上的豬毛
譯者注：我是一個(gè)帶有感情色彩的搬運(yùn)工...
回顧近些年來(lái)大多數(shù)成功的交互設(shè)計(jì)，都嚴(yán)格遵循著一些基礎(chǔ)準(zhǔn)則砰碴。他們適應(yīng)人類的自然行為，悄無(wú)聲息得減少干擾，專注于視覺(jué)呈現(xiàn)和交互體驗(yàn)以及其擴(kuò)展性犬绒。一起了解一下這些重要的設(shè)計(jì)技巧，并且學(xué)以致用吧
有效的排版方式
應(yīng)用中的內(nèi)容可以建立用戶和APP之間的精確關(guān)系兑凿，并且?guī)椭脩暨_(dá)成訴求凯力。在這個(gè)交互過(guò)程中，排版起到了很大的作用礼华。文字大小和布局影響了最終的屏幕閱讀體驗(yàn)：小的文字咐鹤、小的行距、留白不夠都會(huì)耗費(fèi)較長(zhǎng)的閱讀時(shí)間圣絮，因此用戶會(huì)忽略掉大部分信息祈惶。在高亮的小屏手機(jī)中尤其明顯。因此，屏幕越小捧请，排版意義就越重大凡涩。
移動(dòng)端的排版要注意權(quán)衡易讀性和空間利用率。選擇一個(gè)合適的字體尺寸及留白是設(shè)計(jì)師最關(guān)注的疹蛉。為了減輕閱讀負(fù)擔(dān)是內(nèi)容易讀活箕，字體應(yīng)當(dāng)足夠大（譯者注：iOS HIG中默認(rèn)標(biāo)題/內(nèi)容大小使用17pt；注釋最小字體不小于11pt）可款，行與行的間距也要適當(dāng)育韩。
PS：為了保證移動(dòng)設(shè)備上的易讀性座慰，單行建議顯示30-40個(gè)字符（譯者注：約15-20個(gè)漢字，含空格和標(biāo)點(diǎn)）翠拣。這是根據(jù)PC端頁(yè)面建議的字符數(shù)（60-75個(gè)字符）的一半作出的保守估計(jì)版仔。
簡(jiǎn)單的配色方案
配色是視覺(jué)設(shè)計(jì)中最復(fù)雜的部分。簡(jiǎn)化配色方案能提高用戶體驗(yàn)误墓，復(fù)雜的配色反而會(huì)有一些消極的影響蛮粮；要拒絕混亂的配色方案！通過(guò)調(diào)節(jié)某個(gè)色相的明度和飽和度谜慌，你就可以得到多種顏色然想，這種組合也不會(huì)讓人覺(jué)得有視覺(jué)負(fù)擔(dān)。
下面這個(gè)APP案例使用了單色的配色方案变泄，利用了特定顏色不同的色調(diào)、明度和色彩恼琼。
PS：自己創(chuàng)造一套配色方案會(huì)比較難妨蛹，但也沒(méi)有大多數(shù)人想象得那么復(fù)雜。比如將一種亮色添加到另一種中性色調(diào)中就是一種簡(jiǎn)單的配色方法晴竞。亮色可以簡(jiǎn)單且有效地吸引眼球蛙卤。
內(nèi)容至上的導(dǎo)航和卡片設(shè)計(jì)
無(wú)論你想讓APP頁(yè)面承載怎樣的內(nèi)容，你總是希望用戶盡可能多得感知到內(nèi)容噩死〔眩基于內(nèi)容的導(dǎo)航是在概述和詳細(xì)內(nèi)容之間進(jìn)行跳轉(zhuǎn)的一種設(shè)計(jì)模式。這種導(dǎo)航通常表現(xiàn)為卡片已维，卡片在用來(lái)組織和擴(kuò)展信息量較大的內(nèi)容上真是一項(xiàng)偉大的發(fā)明行嗤，它使內(nèi)容更容易被識(shí)別和理解（譯者注：所謂的信息模塊化）：
- 卡片將內(nèi)容篩選到有效區(qū)域內(nèi)，因此占用了更少的空間垛耳。類似于在一篇文章中的類似“句子”“段落”這種文本組合方式栅屏，卡片將內(nèi)容篩選并且組合成一條有效信息捂敌。
- 卡片更利于手勢(shì)操作，用戶不必費(fèi)心理解這些內(nèi)容該怎么用既琴，他們潛意識(shí)中能理解物理卡片的意義，打開(kāi)一張卡片來(lái)查看更多信息泡嘴，或者跳過(guò)查看其它卡片信息甫恩。
PS:應(yīng)當(dāng)盡量讓你的UI設(shè)計(jì)弱化，讓用戶關(guān)注內(nèi)容酌予。
圖層和層次
PC端和移動(dòng)屏幕之間最大的不同就是尺寸磺箕。移動(dòng)端網(wǎng)頁(yè)和APP的空間比較有限，為了克服這個(gè)缺點(diǎn)抛虫，越來(lái)越多的頁(yè)面開(kāi)始充分利用多個(gè)圖層在Z軸上疊加的表現(xiàn)形式松靡。
分層的設(shè)計(jì)可以參考google的Material design的規(guī)范雕欺，還原在現(xiàn)實(shí)生活中人與物體之間的交互。圖層幫助用戶理解設(shè)計(jì)棉姐。面和投影在傳達(dá)頁(yè)面結(jié)構(gòu)上有重要的意義屠列，通過(guò)投影來(lái)表現(xiàn)元素和物體不在一個(gè)平面之內(nèi)。
一些常見(jiàn)的應(yīng)用中分層設(shè)計(jì)頁(yè)面有以下這些元素：
-?懸浮按鈕：這種形式的按鈕用于正向操作（promoted action）笛洛。一個(gè)圓形圖標(biāo)很明顯得懸浮在頁(yè)面上。
- 放大（譯者注：內(nèi)容的連續(xù)性/元素的復(fù)用）：通常表現(xiàn)在當(dāng)用戶選擇列表中的某項(xiàng)后乃坤，信息會(huì)跟蹤到放大的詳情頁(yè)面并且可以返回到列表頁(yè)苛让。
- 導(dǎo)航吸附：在用戶與頁(yè)面交互過(guò)程中，簡(jiǎn)化的菜單入口應(yīng)當(dāng)始終保留在屏幕中（譯者注：現(xiàn)在也有很多沉浸式體驗(yàn)的APP會(huì)隱藏導(dǎo)航湿诊，但當(dāng)我們進(jìn)行上滑等逆向操作時(shí)狱杰，導(dǎo)航會(huì)立刻復(fù)現(xiàn)，如AppSo）厅须。
- 動(dòng)態(tài)窗口：就像PC端一樣九杂，你可以將一個(gè)窗口完全覆蓋在當(dāng)前頁(yè)面之上颁湖，以確保用戶能夠注意到，比如登錄例隆、廣告甥捺，提醒功能。
PS：簡(jiǎn)化用戶流——確保每個(gè)頁(yè)面能傳達(dá)一件事并且只傳達(dá)一件事镀层。
重復(fù)的操作手勢(shì)
電容屏镰禾、大屏手機(jī)的興起很大程度上改變了人機(jī)互動(dòng)方式皿曲。屏幕不僅是閱讀的目標(biāo)也成為了手勢(shì)動(dòng)作的目標(biāo)∥庹欤滑動(dòng)屋休，點(diǎn)擊和放大是最常用的手勢(shì)，已經(jīng)成為類似移動(dòng)和點(diǎn)擊這樣的本能動(dòng)作备韧。通過(guò)手勢(shì)操作可以執(zhí)行返回劫樟、查看菜單、調(diào)整當(dāng)前視圖或刪除類目等功能织堂。
一個(gè)應(yīng)用依賴的手勢(shì)操作越多叠艳，屏幕上的按鈕越少，可以節(jié)約更多的空間來(lái)表現(xiàn)內(nèi)容易阳。這是真正的沉浸式體驗(yàn)附较。
PS：以上提到的都屬于標(biāo)準(zhǔn)手勢(shì)。如果你要使用原創(chuàng)的手勢(shì)一定要謹(jǐn)慎潦俺。在判斷使用手勢(shì)（標(biāo)準(zhǔn)或者原創(chuàng)）時(shí)拒课，心中要謹(jǐn)記一點(diǎn)，手勢(shì)都是隱藏的事示。所以如果沒(méi)有視覺(jué)提示捕发，用戶可能會(huì)疑惑以至于不知道如何使用你的APP。
實(shí)用的動(dòng)效
實(shí)用的動(dòng)效其實(shí)就是在用戶操作流中插入的一些微妙的動(dòng)態(tài)效果很魂。它像是你的交互助理：
- 提供給你視覺(jué)反饋
- 平緩的狀態(tài)轉(zhuǎn)換并且讓用戶感知到變化
PS：你可以通過(guò)微妙的動(dòng)態(tài)效果和轉(zhuǎn)換來(lái)提高用戶體驗(yàn)法挨。但也要慎用動(dòng)效，并且懷有目的性幅聘。不僅僅出于好玩高興這樣的理由凡纳，應(yīng)當(dāng)專注于能服務(wù)用戶的實(shí)用的動(dòng)效。
小結(jié)
UI設(shè)計(jì)正朝著 簡(jiǎn)化一切不必要的元素而專注功能的方向發(fā)展帝蒿。干凈的界面荐糜，簡(jiǎn)單的配色方案以及愉悅的視覺(jué)感官使頁(yè)面更有現(xiàn)代感也更有易用性。
原文鏈接：http://babich.biz/mobile-design-techinques/
