你手頭是否有正在設(shè)計(jì)的 APP 項(xiàng)目？有沒有系統(tǒng)的設(shè)計(jì)計(jì)劃？你是直接動手設(shè)計(jì)，還是會中途停下來研究一下終端用戶的真實(shí)需求？你是否知道用戶打開 APP 第一眼到底更希望看到什么？

在考慮運(yùn)用哪些 用戶體驗(yàn) 相關(guān)技術(shù)的時(shí)候，它們的美學(xué)特征可能是相當(dāng)值得我們深思的。目前我們所看到的許多網(wǎng)站上所使用的設(shè)計(jì)理念和技巧，其實(shí)也可以很好地投入到APP設(shè)計(jì)中，只不過細(xì)節(jié)和樣式可能需要稍作調(diào)整，以適配更小的、高清的屏幕。對于熟知桌面端UI設(shè)計(jì)的設(shè)計(jì)師而言，接下來的7個(gè)設(shè)計(jì)要點(diǎn)能幫你快速轉(zhuǎn)向移動端設(shè)計(jì)，讓你看起來像是專業(yè)的移動端UI/UX設(shè)計(jì)師。

1、大膽鮮明的排版

更簡單的字體排版在小屏幕上具有更強(qiáng)的易讀性，尤其是在光線較暗或者逆光的情況下，這也是推動非襯線字體在移動端上廣泛運(yùn)用的重要原因之一。

幾年前，隨著設(shè)計(jì)趨勢的大幅轉(zhuǎn)變，設(shè)計(jì)師們更加傾向于選取筆畫更加厚重、風(fēng)格更加大膽的字體類型。此外，字體的尺寸也很重要。越來越多的移動端首頁設(shè)計(jì)開始借用尺寸超大、極具表現(xiàn)力的字體，營造出前景和背景的明顯對比，打造炫目的效果，以便于用戶瀏覽、導(dǎo)航。

這種趨勢的優(yōu)勢在于，大家開始更加注重于界面內(nèi)容的可讀性。不過在英文界面中，有一個(gè)問題需要注意，就是要盡量克制地使用大寫字母。以 The Weather Channel 為例，“SUNNY”這個(gè)詞只有5個(gè)字母也就算了，但是如果去是其他的天氣所用字母數(shù)量較多，視覺上可能會相當(dāng)?shù)睦圪槨Ｔ谥形牡淖煮w設(shè)計(jì)中也要盡量避免文案過長、過于復(fù)雜的問題。

所以，此處應(yīng)當(dāng)注意兩件事：

·排版和內(nèi)容應(yīng)當(dāng)盡量保持簡單
·背景和文字的對比度應(yīng)當(dāng)盡量明顯，保持最大可讀性

2、圖層和深度

Material Design 作為當(dāng)前最重要的設(shè)計(jì)趨勢而言，已經(jīng)被反復(fù)強(qiáng)調(diào)和提及了，這并不是沒有道理的。

首先，它是Google 所推出的設(shè)計(jì)平臺，作為一個(gè)實(shí)力型巨頭推出的產(chǎn)品，無疑會吸引大量的相關(guān)從業(yè)者跟進(jìn)，并且目前狀況就是這樣。Material Design 本身的設(shè)計(jì)理念也相當(dāng)?shù)闹庇^易懂，不論是用來設(shè)計(jì)還是對于用戶而言，都相當(dāng)?shù)牟诲e(cuò)。

Material design 最引人矚目的地方在于，其中的圖層創(chuàng)建對于用戶使用和交互設(shè)計(jì)都有極大的幫助。今天，Material design 風(fēng)格的界面已經(jīng)遍地開花，許多iOS平臺的應(yīng)用都開始遵循這一設(shè)計(jì)規(guī)范。

真正讓這些圖層發(fā)揮作用的技巧非常的微妙。圖層之間的區(qū)分靠的是曾經(jīng)“被大家所嫌棄”的陰影，它們非常淺但是很自然，同時(shí)它們還是視覺和交互的線索。最下面的圖層是信息的入口，而頂層的圖層則是交互的工具和元素。

看看Uber的設(shè)計(jì)，地圖圖層位于整個(gè)屏幕的最下層，通過移動底部圖層來設(shè)定上車位置，頂層的按鈕則用來下單，不同的層承擔(dān)著不同的功用，提供不同的交互方式。

3、單色配色方案

在小屏幕上使用最純粹的黑白配色是吸引用戶注意力的好辦法。此外，還可以使用相對少見、大膽的配色，這樣也容易脫穎而出。又或者使用添加其他的配色方案讓用戶選擇他們自己喜歡的配色方案。

單色配色方案的好處在于更容易營造一致、統(tǒng)一的視覺體驗(yàn)和感覺。正如同 Streeks 這款應(yīng)用的設(shè)計(jì)，用戶可以設(shè)定目標(biāo)，然后APP會提醒你完成任務(wù)。用戶可以基于任務(wù)類型來設(shè)定色彩，并且推送簡單的信息來告知你需要完成的事情。

單色配色、圖標(biāo)和簡約的字體在一起形成了令人驚艷的組合，易于閱讀也便于交互，這種設(shè)計(jì)已經(jīng)足夠完備順滑，吸引用戶在待辦事項(xiàng)中添加更多的事情來完成。

4、專注于微交互

那些足夠優(yōu)秀的APP當(dāng)中，通常都會包含著許多順滑無縫的優(yōu)秀微交互，來溝通不同的界面、動作和交互。微交互通常會很容易被忽略，但是在許多APP當(dāng)中，他們會作為必須的過渡、交互引導(dǎo)和效果提示而存在，所以相當(dāng)?shù)闹匾?/p>

微交互的存在，主要還是幫助用戶完成一些事情。從文本消息通知、消息推送到微博上點(diǎn)贊的提示，近乎無處不在。它們還有一個(gè)主要的功能：取悅用戶。

微交互的主要功能可以這樣總結(jié)：

·提供信息反饋，比如在Instagram 中點(diǎn)贊之后出現(xiàn)的提示特效
·呈現(xiàn)動作，比如點(diǎn)贊之后心形會從透明鏤空變?yōu)榧t色
·幫助用戶操作或者發(fā)現(xiàn)某些東西的存在，比如點(diǎn)贊之后，會有推送信息出現(xiàn)在通知欄，或者彈出框直接告知

5、卡片式設(shè)計(jì)

卡片式設(shè)計(jì)最早見于Pinterest ，隨后在Facebook、SoundCloud等網(wǎng)站上流行開來，成為了真正意義上的主流設(shè)計(jì)。不過今天的卡片式設(shè)計(jì)很大程度上受到了Material Design 的影響。

不論是對于設(shè)計(jì)還是對于開發(fā)而言，卡片都是大量內(nèi)容的可靠載體。每個(gè)卡片都可以承載不同的元素，作為不同的模塊，實(shí)現(xiàn)不同的功能。

所以，你可以讓一個(gè)卡片播放視頻，緊接著的卡片則鏈接到另外一個(gè)應(yīng)用，而下方的卡片則直接放置了一段長長的文字。卡片式設(shè)計(jì)在移動端上的另外一個(gè)優(yōu)勢就是非常的易用，尤其是在有APP之內(nèi)。絕大多數(shù)的應(yīng)用會在一個(gè)屏幕內(nèi)承載兩個(gè)卡片，就像 SoundCloud 這樣，又或者一屏就是一個(gè)卡片，這樣一來，即使用戶的手指再粗也不會錯(cuò)過任何內(nèi)容！

6、簡單的導(dǎo)航

隱藏式菜單、彈出式導(dǎo)航和大按鈕是不容忽視的設(shè)計(jì)要點(diǎn)。如今APP首屏使用的菜單數(shù)量正在逐步減少，寸土寸金的APP首頁上不再放置大量的菜單按鈕，隨之而來的是隱藏式菜單的流行。

有趣的是，越來越多的用戶并沒有被隱藏式設(shè)計(jì)惹惱，他們已經(jīng)熟知漢堡菜單中隱藏著更多的選項(xiàng)。當(dāng)然，使用漢堡菜單的技巧在于，其中隱藏的菜單應(yīng)當(dāng)是非常實(shí)用的功能和選項(xiàng)，而菜單按鈕本身也應(yīng)當(dāng)顯眼而靈敏。

Slack 絕對是導(dǎo)航菜單設(shè)計(jì)中的典范，它的菜單可以從屏幕的左右兩邊彈出顯示，而主要功能菜單是從右側(cè)彈出的，而特定頻道的菜單則是從左側(cè)彈出。

7、用動畫來潤色

有趣而漂亮的動畫，是讓你的應(yīng)用令人感覺非同凡響的另一手段。合理的動畫能提高應(yīng)用的易用性，能讓用戶更容易注意到重點(diǎn)，甚至能更加直接的給他們帶來快樂。

你無法確知用戶將在何時(shí)何地訪問你的應(yīng)用，更無法確知用戶使用的是哪種網(wǎng)絡(luò)連接，所以使用體積小、輕量級、不依賴于網(wǎng)絡(luò)的動畫是非常有必要的。

Strava 就是這樣一個(gè)包含了大量有趣的小動畫的應(yīng)用，其中許多有趣的動畫小到你可能會一不小心忽略掉。不同界面之間的切換會有有趣的過渡動效，比如上面的挑戰(zhàn)頁面就是。加載地圖的時(shí)候會有一個(gè)脈沖特效，當(dāng)你運(yùn)動的時(shí)候，會看到沿著運(yùn)動路徑變幻的小點(diǎn)。

結(jié)語

當(dāng)你打算讓你的移動端APP不再停留于構(gòu)思的時(shí)候，不妨先看看當(dāng)前網(wǎng)頁和數(shù)字設(shè)計(jì)都有哪些設(shè)計(jì)趨勢，看看它們當(dāng)中有哪些可以通過調(diào)整可以運(yùn)用到移動端設(shè)計(jì)上來。許多意想不到的小點(diǎn)子，可能會成就一個(gè)非常了不得的設(shè)計(jì)趨勢。

【技多不壓身的設(shè)計(jì)師才有高薪資！】

1. 平面設(shè)計(jì)： 《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)： 《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)： 《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)： 《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧： 《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案： 《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南： 《基礎(chǔ)知識學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖： 《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址： designshack
原文作者： Carrie Cousins
優(yōu)設(shè)譯文： @陳子木