1.阻斷性原則

網(wǎng)易新聞

Pinterest

Artand

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷    作者：WseSteven 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

很多受歡迎的產(chǎn)品中都有我們值得學(xué)習(xí)和借鑒的設(shè)計(jì)思考點(diǎn)，通過分析海外主流產(chǎn)品，帶大家掌握底部導(dǎo)航欄（Tab Bar）的基本知識(shí)，找到解決問題的方法并開拓創(chuàng)意思維。

在開始之前，請(qǐng)大家先思考下面兩個(gè)問題～

問題 1：你的產(chǎn)品真的需要 Tab Bar 嗎？

好像并不是。雖然淘寶、微信、微博、美團(tuán)等大多數(shù)主流的產(chǎn)品都在使用 Tab Bar，但這并不意味著所有產(chǎn)品都需要它。

很多APP沒有Tab Bar，比如日歷、計(jì)算器、滴滴、Uber等。對(duì)于是否要在APP中使用Tab Bar，應(yīng)該分不同的情況靈活考慮。

問題 2：為什么產(chǎn)品要有 Tab Bar？

答案是為了易于使用，意味著通過 Tab Bar 這種簡單的設(shè)計(jì)可以輕松幫助用戶導(dǎo)航到頁面。

明白了上面的問題后，接下來就要考慮如何來設(shè)計(jì) Tab Bar，能更好的滿足用戶的需求和體驗(yàn)。

1. 顯示最重要的信息

導(dǎo)航欄應(yīng)該只包含最有用的信息，不能添加過多無用的標(biāo)簽使導(dǎo)航欄混亂。許多 App 在導(dǎo)航欄上添加搜索功能，因?yàn)檫@有助于用戶更快地導(dǎo)航和檢索內(nèi)容。

在Spotify底部導(dǎo)航中，主頁選項(xiàng)用于播放或收聽所有內(nèi)容，搜索選項(xiàng)用于搜索下一首歌曲和播客，音樂庫選項(xiàng)用于播放列表中喜歡和保存的歌曲，單獨(dú)的會(huì)員選項(xiàng)方便用戶輕松點(diǎn)擊并快速完成購買操作。

2. 擴(kuò)展導(dǎo)航的功能

主流 App 更喜歡在底部導(dǎo)航欄中使用 4-5 個(gè)標(biāo)簽，這樣能保持導(dǎo)航欄的整潔，還避免了標(biāo)簽過多導(dǎo)致用戶難以精確點(diǎn)擊選項(xiàng)的情況。

Pinterest的導(dǎo)航欄上只有四個(gè)選項(xiàng)，這有助于用戶輕松點(diǎn)擊。消息選項(xiàng)會(huì)實(shí)時(shí)更新消息數(shù)量，對(duì)用戶來說這樣的提示很直觀。另外搜索功能包含在導(dǎo)航欄中，方便輕松地在主頁和搜索結(jié)果之間來回切換。

3. 容納多種標(biāo)簽形式

多數(shù) App 底部導(dǎo)航欄會(huì)使用「圖標(biāo)+文字」的標(biāo)簽形式，這樣能清楚地告知用戶點(diǎn)擊標(biāo)簽之后的結(jié)果。

有時(shí)候我們也會(huì)看到有些產(chǎn)品的導(dǎo)航欄只有圖標(biāo)沒有文字，但這種形式并不會(huì)影響我們的操作，因?yàn)楫?dāng)導(dǎo)航欄的標(biāo)簽使用了用戶特別熟悉的形狀和內(nèi)涵，完全可以省略文字。

宜家App的導(dǎo)航欄使用了大眾都很熟悉的圖標(biāo)，所以即使不加文字，我們也能清楚地知道這3個(gè)圖標(biāo)分別代表了主頁、分類、我的。

相對(duì)于宜家，Youtube的導(dǎo)航欄就顯得有點(diǎn)復(fù)雜，因?yàn)閅outube的圖標(biāo)含義用戶可能并不是很熟悉，加上文字說明很有必要。

4. 文字標(biāo)簽應(yīng)該簡短

文字標(biāo)簽應(yīng)該簡短而清晰，準(zhǔn)確的文字說明能對(duì)用戶使用正確導(dǎo)航起到關(guān)鍵作用。

TikTok導(dǎo)航所有的文字標(biāo)簽都簡短，并且中間的添加圖標(biāo)還隱藏掉了文字，以此來引吸引用戶的注意力。

5. 避免隱藏導(dǎo)航欄

Tab Bar 通常包含了最重要的導(dǎo)航信息，應(yīng)該始終向用戶展示，避免在用戶滾動(dòng)頁面的情況下被隱藏掉。

Pinterest導(dǎo)航欄的設(shè)計(jì)是個(gè)例。當(dāng)滾動(dòng)頁面時(shí)，底部的導(dǎo)航欄會(huì)隱藏，這么設(shè)計(jì)的原因可能是為了防止導(dǎo)航欄遮擋圖像，保證用戶看到更多的圖像內(nèi)容。

6. 傳達(dá)位置

Tab Bar 幫助用戶輕松導(dǎo)航，但如果用戶不知道自己的位置，將會(huì)影響他們?yōu)g覽和使用產(chǎn)品的體驗(yàn)。

多鄰國App通過改變導(dǎo)航圖標(biāo)的樣式來讓用戶清晰的知道自己所有的板塊。

Headspace在底部導(dǎo)航欄加上了線條裝飾，每次切換選項(xiàng)，線條都會(huì)跟著一起切換，確保告知用戶確切的位置。

7. 從反饋中學(xué)習(xí)并不斷改進(jìn)

反饋是關(guān)鍵，如果想改善產(chǎn)品的導(dǎo)航欄設(shè)計(jì)，就要考慮并測(cè)試用戶最喜歡哪個(gè)導(dǎo)航選項(xiàng)，不使用哪個(gè)導(dǎo)航，需要四個(gè)還是五個(gè)選項(xiàng)等等。

Pinterest通過收集用戶的使用反饋情況來不斷改進(jìn)導(dǎo)航欄的設(shè)計(jì)，幫助用戶更方便地使用產(chǎn)品，這些不斷打磨的改進(jìn)真是產(chǎn)品成功的關(guān)鍵。

8. 在導(dǎo)航欄中顯示更新

Tab Bar 不僅僅起到導(dǎo)航的作用，很多時(shí)候還能通過狀態(tài)變化告知用戶更多的信息。

在Twitter主頁導(dǎo)航中，當(dāng)有新內(nèi)容推送時(shí)，主頁就會(huì)出現(xiàn)更新的狀態(tài)，提示用戶查看新內(nèi)容。這樣的設(shè)計(jì)在Youtube、Pinterest等很多主流產(chǎn)品中都有使用。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：優(yōu)設(shè)    作者：Clip設(shè)計(jì)夾

注冊(cè)和登錄是進(jìn)入產(chǎn)品的首要操作，毫無疑問好的用戶體驗(yàn)能為產(chǎn)品加分，同理好的注冊(cè)和登錄體驗(yàn)會(huì)讓用戶對(duì)產(chǎn)品留下更好的印象。

簡單的注冊(cè)和登錄流程中也存在著很多交互細(xì)節(jié)，這里介紹 10 個(gè)平常經(jīng)常用得到的設(shè)計(jì)細(xì)節(jié)，一起來看看～

自動(dòng)對(duì)焦首選項(xiàng)

交互設(shè)計(jì)的基本原則之一是去除雜亂，去除每一次不必要的操作，避免用戶長時(shí)間的等待或思考。

用戶進(jìn)入注冊(cè)頁面注冊(cè)賬號(hào)時(shí)，會(huì)第一時(shí)間填寫郵箱，那么我們是不是可以考慮自動(dòng)對(duì)焦郵箱選項(xiàng)，省去用戶再次點(diǎn)擊的麻煩。

實(shí)時(shí)驗(yàn)證內(nèi)容

我們?cè)谳斎胱?cè)信息的時(shí)候，可能并沒有意識(shí)到錯(cuò)誤，通常會(huì)在賬號(hào)全部輸入完畢之后才會(huì)出現(xiàn)錯(cuò)誤提示，因此我們又要重新再輸入一遍冗長的賬號(hào)信息，過程很繁瑣。

對(duì)于填寫郵箱之類的操作，進(jìn)行模糊驗(yàn)證是有意義的，避免了用戶信息全部填寫完整后再驗(yàn)證，而是在系統(tǒng)發(fā)現(xiàn)錯(cuò)誤后盡快讓用戶知道。

使標(biāo)簽可點(diǎn)擊

盡可能讓創(chuàng)建的每個(gè)帶標(biāo)簽的文本輸入都有可單擊的標(biāo)簽，如密碼應(yīng)該是可點(diǎn)擊的，并將焦點(diǎn)放在密碼字段上。

輸入密碼時(shí)顯示要求

輸入密碼總是讓人頭疼的一件事，尤其是當(dāng)密碼有大小寫、數(shù)字、符號(hào)等要求時(shí)，往往需要輸入很多次后才能成功登錄。

不應(yīng)該讓用戶去猜測(cè)密碼有什么要求，相反應(yīng)該在用戶開始輸入密碼時(shí)就給出明確的提示要求。

允許用戶查看密碼

允許用戶查看輸入的密碼，這樣方便他們對(duì)密碼進(jìn)行二次校驗(yàn)和修改，同時(shí)這種方式比再次重新輸入密碼要簡單。

使用清晰的文案

清晰的按鈕文案既能吸引用戶點(diǎn)擊，也可以引導(dǎo)完成他們想要完成的操作。沒有用戶喜歡模棱兩可的文案提示，尤其是在做選擇的時(shí)候。

讓用戶明確服務(wù)條款

每個(gè)產(chǎn)品的注冊(cè)頁面都會(huì)有這樣的服務(wù)條款，在情況允許的條件下，盡可能提供默認(rèn)的選擇結(jié)果，避免用戶再次選擇和操作。

允許在登錄和注冊(cè)之間切換

如果用戶不小心選擇了錯(cuò)誤的選項(xiàng)，要保證用戶能從注冊(cè)和登錄中快速地切換。最常見的形式是在底部添加一個(gè)鏈接。

說明密碼錯(cuò)誤的具體原因

當(dāng)用戶輸入密碼并顯示密碼錯(cuò)誤時(shí)，需要具體說明密碼不符的原因，告訴用戶如何修改密碼。

保留賬號(hào)信息

如果用戶密碼輸入錯(cuò)誤，應(yīng)該保留賬號(hào)信息，不必再讓用戶重復(fù)輸入賬號(hào)，只需要輸入密碼即可。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：優(yōu)設(shè) 作者：Clip設(shè)計(jì)夾

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

當(dāng)互聯(lián)網(wǎng)不斷的深入到我們的生活中，我們對(duì)安全感的需求也延續(xù)到了互聯(lián)網(wǎng)使用中，特別體現(xiàn)于互聯(lián)網(wǎng)金融產(chǎn)品。由于其具有風(fēng)險(xiǎn)性、收益性、流動(dòng)性等特點(diǎn)，用戶對(duì)于資產(chǎn)安全的掌控感更為關(guān)注，產(chǎn)品使用體驗(yàn)欠佳也直接影響客戶安全感。

以下將基于自身工作總結(jié)和行業(yè)經(jīng)驗(yàn)，聚焦互聯(lián)網(wǎng)金融產(chǎn)品分享和總結(jié)如何向用戶營造安全感。

目錄：

一、需要什么樣的安全感？

二、如何傳達(dá)出安全感？

三、怎樣體現(xiàn)出安全感？

需要什么樣的安全感？

安全感是人類最底層的需求，但不同類用戶群體需要的安全感也各有千秋，我們參考第一財(cái)經(jīng)商業(yè)數(shù)據(jù)中心×螞蟻財(cái)富的2019線上理財(cái)人群報(bào)告，將線上理財(cái)?shù)娜巳悍譃樗念悾?

分別是初入職場的95后、職場新興力量的90后、理財(cái)中堅(jiān)力量的80后和經(jīng)歷風(fēng)雨的70后。其中近一年的新增移動(dòng)互聯(lián)網(wǎng)基民中超五層為90后、95后，成為金融移動(dòng)互聯(lián)網(wǎng)的中堅(jiān)力量。

這類型的投資者由于具有碎片化處理事務(wù)的習(xí)慣和金融知識(shí)不足、理財(cái)經(jīng)驗(yàn)不豐富、資金的抗風(fēng)險(xiǎn)能力不高的特點(diǎn)，當(dāng)市場普遍行情下跌時(shí)，更容易產(chǎn)生焦慮的情緒而導(dǎo)致“割韭菜”，進(jìn)而可能會(huì)影響到卸載APP的行為。根據(jù)Mob研究院的數(shù)據(jù)顯示，在2021年3月天天基金日均卸載用戶規(guī)模為前兩個(gè)月的6倍，而當(dāng)時(shí)對(duì)應(yīng)的市場行情正為基金普遍大跌。

因此從安全感的需求上他們更側(cè)重高效的信息降維、足夠的理財(cái)產(chǎn)品的風(fēng)險(xiǎn)提示、合理的預(yù)期收益宣傳以及投后虧損及時(shí)的內(nèi)容陪伴。

而根據(jù)騰訊理財(cái)通×國家金融與發(fā)展實(shí)驗(yàn)室出品的2021年互聯(lián)網(wǎng)理財(cái)行為與安全研究報(bào)告顯示，理財(cái)知識(shí)更充足，理財(cái)經(jīng)驗(yàn)更豐富的80后、70后在安全感的維護(hù)上則更關(guān)注理財(cái)產(chǎn)品的信息披露風(fēng)險(xiǎn)、信息不透明風(fēng)險(xiǎn)、市場政策風(fēng)險(xiǎn)、個(gè)人信息泄露風(fēng)險(xiǎn)此類問題。

如何傳達(dá)出安全感？

安全感是一種感性的心理感受，而人類的情感由本能、行為、反思三個(gè)層面共同決定的。

這三個(gè)層次作為人類大腦的運(yùn)作的規(guī)律，映射到設(shè)計(jì)當(dāng)中，同樣是可供遵循、值得探究的。

本能層

先于意識(shí)和思維，它是外觀要素和第一印象形成的基礎(chǔ)，著重于產(chǎn)品的外觀、觸感等。“美觀即實(shí)用原則”人們會(huì)潛意識(shí)里認(rèn)為好看的東西也是好用的，所以在界面設(shè)計(jì)當(dāng)中，主要設(shè)計(jì)對(duì)象是視覺設(shè)計(jì)。

而金融產(chǎn)品中，常用藍(lán)、綠等冷色調(diào)的色彩，給人以冷靜，穩(wěn)定的感覺，表現(xiàn)金融產(chǎn)品的科技感和可靠性；常用紅、黃、橙等暖色調(diào)，代表著熱情、溫暖與責(zé)任。

行為層

是人類身體日常行為的運(yùn)作，行為層的設(shè)計(jì)與產(chǎn)品使用過程中的愉悅感和效率有關(guān)。好的行為層設(shè)計(jì)對(duì)應(yīng)產(chǎn)品功能傳達(dá)、易學(xué)性與易用性，以及正面的心情感受。在界面設(shè)計(jì)當(dāng)中，主要設(shè)計(jì)對(duì)象是交互設(shè)計(jì)。（將在下文通過投資場景詳細(xì)分析）

反思層

超越了本能層和行為層，存在意識(shí)和更高級(jí)的感覺、情緒及知覺。對(duì)應(yīng)的是產(chǎn)品的情感溫度，主要的設(shè)計(jì)對(duì)象是正向情感的結(jié)果反饋以及品牌信任。

良好的企業(yè)品牌形象和口碑很大程度上會(huì)給用戶帶來認(rèn)知上的安全感。用戶在初次選擇購買金融產(chǎn)品時(shí)，往往強(qiáng)大的品牌背書起到了關(guān)鍵作用，即使是同一只基金，用戶也會(huì)選擇在自己信賴的平臺(tái)里購買。

我們可以通過在頁面設(shè)計(jì)中加入更多的品牌元素，如品牌主題色、LOGO、品牌IP形象、品牌slogan等，來潛移默化地讓用戶感受企業(yè)的價(jià)值：

另一種常見于一些平臺(tái)利用強(qiáng)大的背書以及所獲的成就，清晰地向用戶展示可以提供的保障權(quán)益，責(zé)任條款及資質(zhì)介紹等來傳達(dá)企業(yè)對(duì)用戶負(fù)責(zé)的態(tài)度，提升用戶對(duì)產(chǎn)品乃至對(duì)企業(yè)的信任感：

如何體現(xiàn)出安全感？

我們將金融的生命周期分為三個(gè)階段，分別可以概括為：投資前（產(chǎn)品選擇）、投資中（產(chǎn)品交易）、投資后（產(chǎn)品管理），不同階段的關(guān)注點(diǎn)不同，而對(duì)于安全感需求各不相同：

投資前

結(jié)合文章一開始對(duì)人群的分析，由于投前的行為特點(diǎn)更多聚焦于產(chǎn)品的選擇，因此從理財(cái)小白的角度對(duì)于安全感的缺乏更集中于“買了會(huì)不會(huì)虧錢？”、“產(chǎn)品買對(duì)了嗎”、“看不懂規(guī)則”、“這個(gè)適合我嗎”等，尤其存在于一些新形式的理財(cái)組合產(chǎn)品和策略智能投產(chǎn)品中。

在這個(gè)階段的安全感維護(hù)，除了相關(guān)頁面的信息降維、必要的投教啟蒙以外，還需要考慮用戶疑問的快速解答、合理的預(yù)期收益宣傳等。另外投錢的啟蒙教育更可以考慮結(jié)合一些運(yùn)營活動(dòng)，讓小白用戶通過更有趣的方法了解產(chǎn)品，了解自己適合的產(chǎn)品。

而對(duì)于較有經(jīng)驗(yàn)的理財(cái)“老司機(jī)”而言，安全感的缺乏更集中于“過往表現(xiàn)怎么樣，如最大回測(cè)率等”、“市場行情、政策是否利好”、“基金經(jīng)理的資歷”等，而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產(chǎn)品的對(duì)比等來表達(dá)產(chǎn)品的未來盈收能力可期。

投資中

當(dāng)投資者已經(jīng)選擇好信任的理財(cái)產(chǎn)品時(shí)，在產(chǎn)品交易的各個(gè)界面也需要關(guān)注交易流程中安全感的反饋。

其中包括正向反饋和負(fù)向反饋。正向反饋是指用戶跟產(chǎn)品發(fā)生正確的交互時(shí)，系統(tǒng)給予用戶的正確引導(dǎo)，可以幫助用戶打消顧慮，建立信心，讓用戶感受到一切都在順利地進(jìn)行著，這對(duì)那些在設(shè)備操作方面缺乏信心的用戶來說尤為重要，用戶不會(huì)對(duì)自己的操作或?qū)ζ脚_(tái)產(chǎn)生質(zhì)疑，如：專屬的密碼輸入鍵盤、正向反饋如金額輸入時(shí)的金額提示、特別提出易誤解的交易規(guī)則等

而反向反饋是指用戶在操作過程中出現(xiàn)或疑似出現(xiàn)誤操作時(shí)，系統(tǒng)向用戶展示提示或二次確認(rèn)以促進(jìn)錯(cuò)誤的糾正或確保此操作無誤。它能確保在第一時(shí)間告知用戶出現(xiàn)了不正確操作，及時(shí)更改，使流程順利進(jìn)行，尤其是對(duì)于一些理財(cái)小白而言，合理的容錯(cuò)設(shè)計(jì)更促進(jìn)有效投資，提高未來的盈利體驗(yàn)。如撤銷操作二次確認(rèn)、購買超出風(fēng)險(xiǎn)承受能力的產(chǎn)品、輸入錯(cuò)誤金額時(shí)的反饋。

引起思考：

雖然天天基金的撤單確認(rèn)展示了退回帳戶，但是此彈窗的取消按鈕引導(dǎo)性過強(qiáng)，首次操作僅通過銀行卡的列表的箭頭較難聯(lián)想到是確認(rèn)撤單的下一步操作（還以為是可選擇退的帳戶）。

投資后

產(chǎn)品交易成功后，投資者的關(guān)注會(huì)更集中于自己的資產(chǎn)的變化，產(chǎn)品的未來走勢(shì)等，因此在安全感的提供上，需要向投資者傳達(dá)準(zhǔn)確的交易狀態(tài)、資產(chǎn)狀態(tài)、資產(chǎn)的保護(hù)等，甚至可以在產(chǎn)品購買的完成頁設(shè)置快捷加入自選和漲跌提醒等

引起思考：

在支付寶的基金總金額中，存在交易進(jìn)行中的提示文案為“買入待確認(rèn)*元”，但不少小白會(huì)產(chǎn)生疑問，當(dāng)前展示的基金總金額是否包含提示的待確認(rèn)金額，此時(shí)是否可將文案改為“含買入待確認(rèn)*元”（畢竟也有部分直銷app并不會(huì)將待確認(rèn)金額包含進(jìn)產(chǎn)品的總金額中）

另一方面的更需要考慮當(dāng)基金產(chǎn)品存在虧損時(shí)，及時(shí)向投資者傳達(dá)情感陪伴和合理的投資交易，以促進(jìn)投資者優(yōu)化持倉或保持中長期持有，避免頻繁的短期交易而導(dǎo)致不良的盈利體驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

App界面設(shè)計(jì)對(duì)于設(shè)計(jì)師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉(zhuǎn)移到了移動(dòng)平臺(tái)，使得更多的UI設(shè)計(jì)師涌入移動(dòng)端領(lǐng)域，甚至出現(xiàn)了市場飽和的言論，對(duì)于從事移動(dòng)端的UI設(shè)計(jì)師來講，充滿壓力的同時(shí)又面臨無限機(jī)遇，唯有不斷的學(xué)習(xí)才能滋生出源源不斷的設(shè)計(jì)靈感，站穩(wěn)腳跟。

摹客想在這方面給各位設(shè)計(jì)師朋友做點(diǎn)什么，除了提供簡單好用的設(shè)計(jì)工具，我們也整理了非常多的優(yōu)秀設(shè)計(jì)案例，希望可以對(duì)設(shè)計(jì)師朋友有借鑒意義。這將會(huì)是一個(gè)系列的專題，我們以月為單位，整理了國內(nèi)外設(shè)計(jì)師的優(yōu)秀APP界面設(shè)計(jì)案例，我們是搬運(yùn)工，更是好設(shè)計(jì)的傳達(dá)者，希望你會(huì)喜歡。

接下來為大家分享精美的app UI設(shè)計(jì)案例：

--手機(jī)appUI設(shè)計(jì)--

  更多精彩文章：

      手機(jī)appUI界面設(shè)計(jì)賞析（一）

       手機(jī)appUI界面設(shè)計(jì)賞析（二）

       手機(jī)appUI界面設(shè)計(jì)賞析（三）

       手機(jī)appUI界面設(shè)計(jì)賞析（四）

       手機(jī)appUI界面設(shè)計(jì)賞析（五）

       手機(jī)appUI界面設(shè)計(jì)賞析（六）

       手機(jī)appUI界面設(shè)計(jì)賞析（七）

       手機(jī)appUI界面設(shè)計(jì)賞析（八）

       手機(jī)appUI界面設(shè)計(jì)賞析（九）

        手機(jī)appUI界面設(shè)計(jì)賞析（十）

       手機(jī)appUI界面設(shè)計(jì)賞析（十一）

      手機(jī)appUI界面設(shè)計(jì)賞析（十二）

      手機(jī)appUI界面設(shè)計(jì)賞析（十三）

      手機(jī)appUI界面設(shè)計(jì)賞析（十四）

      手機(jī)appUI界面設(shè)計(jì)賞析（十五）

      手機(jī)appUI界面設(shè)計(jì)賞析（十六）

      手機(jī)appUI界面設(shè)計(jì)賞析（十七）

      手機(jī)appUI界面設(shè)計(jì)賞析（十八）

      手機(jī)appUI界面設(shè)計(jì)賞析（十九）

      手機(jī)appUI界面設(shè)計(jì)賞析（二十）

      手機(jī)appUI界面設(shè)計(jì)賞析（二十一）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十二）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十三）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十四）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十五）

以前，設(shè)計(jì)師們都需要去跟開發(fā)溝通并手動(dòng)標(biāo)注所有文件，現(xiàn)在，有了像 Zeplin 和 Abstract 這樣實(shí)用的標(biāo)注工具，設(shè)計(jì)師幾乎不需要花太多的時(shí)間在對(duì)接上。

但是，還是避免不了很多東西會(huì)在對(duì)接過程中出現(xiàn)問題。比如，這個(gè)按鈕是固定大小的還是彈性大??？是保持底部邊距固定還是在一個(gè)較大的對(duì)象內(nèi)居中？讓我們來看下約束布局在對(duì)接過程中的使用方法。

約束布局是定義控制應(yīng)用中內(nèi)容的規(guī)則。這些規(guī)則通過使用統(tǒng)一的元素和間距，保持跨平臺(tái)、跨環(huán)境和跨屏幕大小的一致性。通常應(yīng)用在 iOS 和 Android 中。

彩云注：這里想跟大家科普下相對(duì)布局和約束布局的區(qū)別。相對(duì)布局是通過相對(duì)定位的方式讓控件出現(xiàn)在布局任意位置，相對(duì)布局因?yàn)檫壿嬙颍瑢蛹?jí)較多；而約束布局能夠有效解決布局過多問題，讓頁面更加扁平化，布局之間相對(duì)位置也更好控制。約束布局也是繼相對(duì)布局后，谷歌官方針對(duì)相對(duì)布局問題給出的一個(gè)更優(yōu)解決方案，意在將來替代掉相對(duì)布局。當(dāng)然，這里不再過多闡述，感興趣的可以自行去了解下，可能偏開發(fā)方面會(huì)更多一些。

約束條件

如果在 sketch 文件中已經(jīng)設(shè)計(jì)布局好了所有元素，就可以開始了！

1. 基礎(chǔ)單位

8×8

首先從定義基本單位開始，每個(gè)度量值都是其倍數(shù)。我建議使用偶數(shù) 8 來調(diào)整大小和間距，因?yàn)檫@樣可以方便且一致地適配各種設(shè)備。

• 8 更容易整除！10/4=2.5 vs 8/4=2
• 大多數(shù)流行的屏幕尺寸都可以被 8 整除，這樣更容易適配（與 6 或 10 相比）
• 分辨率為 1.5 倍的設(shè)備很難清晰地顯示像素為奇數(shù)的，若按 1.5 倍縮放 5 個(gè)像素就會(huì)導(dǎo)致半像素偏移。

在 Sketch 中選擇首選項(xiàng)>畫布，將“通過 Shift+方向鍵調(diào)整移動(dòng)對(duì)象中的 10px 改成 8px”，這樣會(huì)解決很多問題！

2. 間隔單位

間隔單位是常用間距的視覺表達(dá)。例如，一個(gè)“2 間隔單元”是 16 pt/dp，因?yàn)?2×8=16。這些符號(hào)應(yīng)該在設(shè)計(jì)中使用，別名應(yīng)該被標(biāo)注成代碼，以便在和開發(fā)對(duì)接時(shí)使用相同的語言。

垂直和水平間隔

在項(xiàng)目很趕的時(shí)候，你可能沒有足夠的時(shí)間手動(dòng)做到完美像素對(duì)齊。通過使用這些通用單位來標(biāo)識(shí)，而不是標(biāo)注工具自動(dòng)生成的標(biāo)注像素，它可以告訴開發(fā)實(shí)際間距。數(shù)字別名與“Shift +方向鍵”移動(dòng)對(duì)象的次數(shù)相匹配。

響應(yīng)式按鈕：iPhone8、三星 Galaxy S8、iPhoneSE

間隔大小永遠(yuǎn)不會(huì)改變。如果是水平間隔，則垂直高度被鎖定，反之亦然。這意味著在不同的手機(jī)寬度上，組件的尺寸會(huì)發(fā)生變化，但用于創(chuàng)建它的邊距的間距將保持不變。

對(duì)齊指標(biāo)

有時(shí)元素在間隔之間對(duì)齊。間隔之間對(duì)齊的主要方法是中心對(duì)齊和底部對(duì)齊。

垂直居、中水平居中和居中對(duì)齊

中心對(duì)齊是指你想要一個(gè)對(duì)象或一組對(duì)象向中間集中對(duì)齊。對(duì)象可以水平居中，垂直居中，或者向中間集中對(duì)齊。

底部對(duì)齊

底部對(duì)齊是指希望對(duì)象與其中一個(gè)對(duì)象的底部對(duì)齊。當(dāng)有兩種不同的文本大小并且想要在基線處對(duì)齊時(shí)，底部對(duì)齊就是比較常見使用方法。

1. 點(diǎn)擊對(duì)象

48 x 48

在手機(jī)上，最小點(diǎn)擊對(duì)象尺寸為 48x48dp /pt。這尺寸來自于谷歌設(shè)計(jì)指南，物理尺寸約等于 12 英寸。(HIG 建議使用 44x44pt，所以我選擇更大的)。將元素放在一起時(shí)考慮點(diǎn)擊對(duì)象大小。你也可以使用點(diǎn)擊對(duì)象符號(hào)來表示元素的哪些部分是可點(diǎn)擊的。

組件布局

讓我們通過一些組件示例切換來測(cè)試所有約束的使用：

組件示例：列表項(xiàng)、按鈕和復(fù)選框

2. 基本尺寸

組件的基本尺寸，它的最小高度和寬度，應(yīng)該基于最小點(diǎn)擊對(duì)象的尺寸。視覺上小于點(diǎn)擊對(duì)象的組件仍應(yīng)由相同的最小點(diǎn)擊對(duì)象大小觸發(fā)。這意味著，如果用戶在復(fù)選框之外觸摸了一點(diǎn)，也會(huì)承認(rèn)他們點(diǎn)擊了復(fù)選框。

組件相對(duì)于最小點(diǎn)擊對(duì)象的視覺尺寸：精確、高于和低于。

3. 內(nèi)邊距

使用間隔表示組件內(nèi)的邊距。

長字符串的水平邊距

你可以通過設(shè)置水平邊距來限制元素的水平位置，比如文本框。當(dāng)文本太長時(shí)，你需要指出文本是否應(yīng)該調(diào)整大小、換行和/或截?cái)唷Q行到兩行比截?cái)嘁恍懈茫?

動(dòng)態(tài)類型的水平和垂直邊距

垂直填充最常用于動(dòng)態(tài)適配。盡管組件在當(dāng)前手機(jī)尺寸、當(dāng)前語言和當(dāng)前字體大小下看起來可能很好——但所有這些因素都是最壞情況下的變量。當(dāng)類型增加時(shí)，組件將變得比它的基本大小更大，并且你希望確保它仍然有垂直填充。

4. 基線對(duì)齊

使用居中和基線標(biāo)記來示意，如何讓那些沒有接觸到所有邊的間隔元素表現(xiàn)出來。這部分主要是方便給開發(fā)理解的。

垂直居中的列表項(xiàng)文本、底部對(duì)齊的價(jià)格和居中的復(fù)選框

界面布局

現(xiàn)在你已經(jīng)布局好了一個(gè)頁面，使用與在組件中相同的方式使用間隔、點(diǎn)擊目標(biāo)和對(duì)齊符號(hào)。

插圖來源于 Meg

……瞧!這就是移動(dòng)端的響應(yīng)式布局!

提示：為你在界面布局中引用的組件創(chuàng)建單獨(dú)的 symbol 畫板。在組件中，將所有組件規(guī)范包含在一個(gè)文件夾中，該文件夾可以輕松打開和關(guān)閉。沒有什么比同時(shí)標(biāo)記組件和界面布局更好了。

總結(jié)

即使是一個(gè)精心制作的交接文件也不能取代你與開發(fā)之間良好的語言交流。這應(yīng)該與開始、移交和書面文檔一起使用。你越讓開發(fā)了解你的設(shè)計(jì)，還原的結(jié)果就越接近實(shí)際發(fā)布的產(chǎn)品。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：優(yōu)設(shè)  作者：彩云譯設(shè)計(jì)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

導(dǎo)語：“自選”作為金融類產(chǎn)品的基礎(chǔ)功能，迭代至今已經(jīng)非常成熟了。放眼望去，市面上主流金融產(chǎn)品的自選功能似乎都大同小異，但是體驗(yàn)下來會(huì)發(fā)現(xiàn)，細(xì)分領(lǐng)域下的設(shè)計(jì)側(cè)重點(diǎn)卻有所不同。

一、把握需求

如果我們將“自選”轉(zhuǎn)化為熟悉的C端功能，它類似于“收藏夾”、“關(guān)注列表”的概念，是用戶管理交易對(duì)象的重要陣地。除了常見的管理對(duì)象（交易概念中稱作“標(biāo)的”）、管理分組外，“自選”還會(huì)存在對(duì)數(shù)據(jù)和使用習(xí)慣的管理需求。

• 站在業(yè)務(wù)視角：券商的核心優(yōu)勢(shì)在于“交易”，所以業(yè)務(wù)目標(biāo)自然為“交易”服務(wù)?！白赃x”相當(dāng)于一張快捷交易導(dǎo)航，我們提供的諸多功能都是在幫助用戶快速、便捷的調(diào)整這張表，直到它達(dá)到“為我所用”的程度。
• 站在用戶視角：不同交易習(xí)慣的用戶，對(duì)自選的操作頻率有高有低，在保證效率的同時(shí)，還需要讓每一類用戶都能用的順手。

二、競品調(diào)研

1. A梯隊(duì)：美港股券商，富途、長橋

• 共同的設(shè)計(jì)側(cè)重點(diǎn)：功能的組織符合用戶心理模型，任務(wù)專一，功能精煉，不追求全面、追求使用效率。
• 共同的弊端：“管理分組”的交互設(shè)計(jì)不夠流暢。

富途“管理分組”采用的交互方案，初期學(xué)習(xí)成本是很高的，它雖然充分考慮了效率問題，卻低估了用戶理解上的困難。（截止本文發(fā)布前，富途最新版對(duì)現(xiàn)方案做了視覺樣式上的更新，看來設(shè)計(jì)師也意識(shí)到了該方案目前存在著一些不夠清晰的地方，期待后續(xù)交互上的迭代。）

長橋將分組的“新建、排序、刪除、重命名”拆的很散，理解上不困難，操作起來較為繁瑣。

2. B梯隊(duì)：平臺(tái)類產(chǎn)品，騰訊自選、東方財(cái)富

• 共同的設(shè)計(jì)側(cè)重點(diǎn)：相關(guān)功能盡可能的聚合在一起
• 共同的弊端：當(dāng)用戶目前僅想完成一項(xiàng)任務(wù)時(shí)，產(chǎn)品每次都會(huì)同時(shí)提供多項(xiàng)任務(wù)，操作通常很難專注。用戶不可避免的會(huì)多花些時(shí)間和好奇，來理解與本次操作任務(wù)無關(guān)的信息

3. C梯隊(duì)：社區(qū)類產(chǎn)品，雪球

設(shè)計(jì)側(cè)重點(diǎn)：管理標(biāo)的、分組與數(shù)據(jù)、使用習(xí)慣的設(shè)置完全分開

一些細(xì)節(jié)問題：比如“管理本頁股票”，在批量操作的場景下，底部欄卻存在不能批量操作的選項(xiàng)

小結(jié)：對(duì)三類產(chǎn)品的競品調(diào)研也驗(yàn)證了我們最初對(duì)需求目標(biāo)的把握，為券商類產(chǎn)品設(shè)計(jì)“自選功能”，效率和流暢度是最關(guān)鍵的。設(shè)計(jì)目標(biāo)明確了，接下來我們看看目前都存在哪些問題，以及對(duì)應(yīng)的解法。

三、問題與解法

1. 當(dāng)用戶精準(zhǔn)搜索一個(gè)標(biāo)的，并將其添加至自選后，并不能在當(dāng)前完成該標(biāo)的的分組

如圖所示，現(xiàn)在如果想完成上述任務(wù)，需要4步、且每次僅能將標(biāo)的添加至1個(gè)組。優(yōu)化后我們可以通過3步完成，且每次可以將標(biāo)的同時(shí)添加至多個(gè)組。

（注：Snackbar雖然源于安卓原生的MD設(shè)計(jì)系統(tǒng)，在IOS并無此原生控件。但是隨著二者在設(shè)計(jì)上日漸趨同，且控件的應(yīng)用上也早已互通有無，所以Snackbar在IOS的使用，合理即可，不必糾結(jié)于平臺(tái)差異。）

交互關(guān)鍵點(diǎn)：

• 想提升操作效率，不僅局限于步數(shù)、路徑的縮短，它還可能是場景的正確連結(jié)、重復(fù)操作的合并；
• 使用Snackbar，本質(zhì)上是給用戶選擇的余地。在操作a完成后的2-3秒決定是繼續(xù)進(jìn)行操作b，還是離開當(dāng)前場景。

2. A功能和B功能在自選場景分別有兩條觸達(dá)路徑，不過多路徑的存在不但沒有提升功能的使用體驗(yàn)，反而帶來了不小的認(rèn)知負(fù)擔(dān)

關(guān)于“冗余路徑”應(yīng)該保留還是去除，一直以來都存在爭議。討論這個(gè)爭議的前提是：冗余路徑雖然不是最優(yōu)路徑，但是滿足了特定場景下用戶的特定操作習(xí)慣。

當(dāng)“冗余”只是冗余、沒有任何增益時(shí)，也要敢于做減法；因?yàn)橥瑫r(shí)還需要考慮一點(diǎn)：出發(fā)前的選擇越多，用戶的決策時(shí)間越長。

交互關(guān)鍵點(diǎn)：

在業(yè)務(wù)方提出為同一個(gè)功能再添加一條新的路徑時(shí)，我們必須要弄清楚，這條新路徑是為解決什么問題存在的。不解決問題的需求，大部分是對(duì)產(chǎn)品的無效堆砌。做好產(chǎn)品的“守門員”，給出專業(yè)的判斷，是交互設(shè)計(jì)師的重要職責(zé)之一。

3. 關(guān)于“自選”的設(shè)置功能，這里會(huì)討論到幾個(gè)典型的“欲速則不達(dá)”的交互問題

1）對(duì)功能的整理和歸類，是我們?yōu)橛脩袅粝碌氖褂镁€索。如果推理時(shí)間過長，說明線索的指向性出了問題。

• 問題：將“管理分組”歸至“設(shè)置”，分類不清晰；“數(shù)據(jù)項(xiàng)”Tab中的設(shè)置項(xiàng)沒有根據(jù)相關(guān)性進(jìn)行分組；
• 解法：在“設(shè)置”中去掉“分組” ；數(shù)據(jù)設(shè)置項(xiàng)根據(jù)相關(guān)性進(jìn)行分組 （指標(biāo)→顯示→排序）。

2）如果層級(jí) 1 包含層級(jí) 1.x，那么層級(jí) 1.x 的操作不應(yīng)放置在層級(jí) 1 的認(rèn)知區(qū)域。

• 問題：數(shù)據(jù)項(xiàng)Tab的“默認(rèn)數(shù)據(jù)”放在頂部導(dǎo)航欄，功能層級(jí)不匹配；
• 解法：功能層級(jí)調(diào)整至匹配。

3）如果用戶設(shè)置了一些項(xiàng)目，無法在預(yù)期場景看到對(duì)應(yīng)的效果，應(yīng)提前給與說明。

• 問題：完成數(shù)據(jù)項(xiàng)設(shè)置后，無法在豎屏看到全部生成效果；
• 解法：在數(shù)據(jù)項(xiàng)設(shè)置頁頂部進(jìn)行生成效果的說明提示。

交互關(guān)鍵點(diǎn)：

注重“效率”是沒錯(cuò)的，比如上述case中看似有“效率”的Tab結(jié)構(gòu)。但是這里面隱藏著更多的“清晰”問題。如果一個(gè)功能設(shè)計(jì)的讓用戶用不明白，也就談不上“效率”的提升。

4. 最后一個(gè)case我們看下互聯(lián)網(wǎng)產(chǎn)品中最常被忽視的細(xì)節(jié)-文案

場景1：批量管理標(biāo)的。

文案問題：按鈕表意都是“刪除”，帶來的實(shí)際結(jié)果是不同的，存在歧義。

場景2：數(shù)據(jù)項(xiàng)設(shè)置。

文案問題：沒有進(jìn)行規(guī)范化處理，增加了選項(xiàng)的理解難度。

交互關(guān)鍵點(diǎn)：

很多時(shí)候，一套語義清晰、邏輯順滑的文案，可以等價(jià)于某個(gè)功能優(yōu)化的迭代周期。實(shí)際功能點(diǎn)不變，只是替換文案，就能讓用戶用的清爽明白。這樣的“好買賣”，卻一直被嚴(yán)重低估。

四、總結(jié)思考

遇到同質(zhì)化較高的需求重構(gòu)時(shí)，初期應(yīng)扔掉“套路”思維，從用戶視角、業(yè)務(wù)視角推導(dǎo)出主要設(shè)計(jì)思路。帶著問題去分析競品，推敲競品在此類需求設(shè)計(jì)上的精細(xì)差異。不要對(duì)行業(yè)top給出的方案習(xí)慣性盲從，要經(jīng)過思考和反復(fù)論證，推導(dǎo)出最適合自己所負(fù)責(zé)產(chǎn)品的交互方案。

當(dāng)設(shè)計(jì)深入到細(xì)節(jié)，出現(xiàn)了可A可B的選擇時(shí)，回頭看看我們經(jīng)過深思熟慮推導(dǎo)出來的設(shè)計(jì)目標(biāo)。重新評(píng)估A/B方案是否符合目標(biāo)、是否有助益于實(shí)現(xiàn)目標(biāo)。沒有太多“怎么設(shè)計(jì)都可以”的方案，從我們的選擇中，也透露了決策的傾向。只是我們需要時(shí)刻確認(rèn)這種“傾向”在整體邏輯中是自洽的。

每一份交互輸出都應(yīng)該是有觀點(diǎn)的輸出，即使最終我們的觀點(diǎn)被業(yè)務(wù)方、協(xié)作方的諸多因素所淹沒，仍要保持、增進(jìn)自己提出觀點(diǎn)的能力。那些常被用戶生動(dòng)提起的、打造出特色和性格的產(chǎn)品，都是由一個(gè)個(gè)鮮明觀點(diǎn)鑄造而成的。




藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

翻譯：Siyang  審校：ArialXu  |   UXRen翻譯組 #376譯文
原作者：Denislav Jeliazkov
原標(biāo)題：《Is Your UI Messy? 7 Common Mistakes to Avoid》

當(dāng)我們?cè)O(shè)計(jì)高品質(zhì)產(chǎn)品時(shí)，任何微小的細(xì)節(jié)都是至關(guān)重要的。

很多人會(huì)爭論好的用戶體驗(yàn)和好的用戶界面哪個(gè)更重要，而我則認(rèn)為兩者都非常重要。如果其中一個(gè)失敗了，你就無法對(duì)用戶產(chǎn)生影響。然而，很多時(shí)候用戶并不會(huì)考慮用戶體驗(yàn)是什么，而是基于外觀來評(píng)價(jià)一款產(chǎn)品。

1. 忽視邊界/糟糕的規(guī)劃

Ignoring Scope/Bad Planning

那些含有l(wèi)orem ipsum（模板里填充的默認(rèn)文本）的產(chǎn)品和庫存照片，你多久使用一次? 我想大家都從來沒用過。如果你想提升你的技能，設(shè)計(jì)時(shí)請(qǐng)注入真實(shí)內(nèi)容。網(wǎng)頁會(huì)展示哪些真實(shí)的圖片，真實(shí)的標(biāo)題可能有多長字符？一旦你美麗的設(shè)計(jì)被真實(shí)的內(nèi)容填滿，它就會(huì)面目全非。

具體來說，在開始UI設(shè)計(jì)之前，你需要知道頁面的每個(gè)部分將顯示什么類型的內(nèi)容。你還需要知道內(nèi)容的最小和最大尺寸。這些轉(zhuǎn)折點(diǎn)（turning point）被稱為極限情況（edge case），因?yàn)樗鼈儧Q定了界面何時(shí)以及如何改變。

圖片的選擇

你還需要提前研究圖片的使用限制。如果你的客戶沒有任何定制照片或不打算購買任何照片，那你就沒必要使用來自Unsplash的漂亮但毫無意義的照片。

為什么毫無意義? 因?yàn)檫@些照片都是純概念性的。用漂亮的東西是不夠的。相反，你需要選擇那些能夠創(chuàng)造故事情節(jié)或具有深遠(yuǎn)意義的圖像。

無論你做什么，不要使用那些毫無必要的照片。如今，人們被大量信息淹沒。額外一點(diǎn)無用的視覺信息只會(huì)激怒他們。

理解重復(fù)模塊

另一種極限情況與重復(fù)模塊有關(guān)。例如，圖像+文本、圖標(biāo)+文本、數(shù)字+文本…。你應(yīng)該考慮兩行文本和十行文本時(shí)這些模塊會(huì)是什么樣子，以及它們是否會(huì)一個(gè)接一個(gè)地出現(xiàn)。

對(duì)于描述性功能的小型文本模塊，使用三列布局是一個(gè)很好的選擇。然而，如果你的文本超過五行，并且不能使用省略號(hào)（…）來收起文本，你就必須想出另一種視覺解決方案。為什么？因?yàn)橛终珠L的大段文本只適合原始的報(bào)紙閱讀，而對(duì)網(wǎng)絡(luò)閱讀十分不友好。可能的解決方案包括這兩種：水平滑動(dòng)的輪播模式（Slides）和兩列布局。。

提前為擴(kuò)展性做規(guī)劃

了解內(nèi)容的極限情況有助于更有效地使用屏幕空間，并為界面的各個(gè)模塊選擇正確的界面處理方式。但是要記住，極限情況并不僅僅是你當(dāng)前已經(jīng)遇到的情況。優(yōu)秀的設(shè)計(jì)師總是會(huì)主動(dòng)思考客戶將來擴(kuò)展UI的可能性。

2. 沒有區(qū)分操作行為的主次

No difference between primary and secondary actions

設(shè)計(jì)應(yīng)用程序時(shí)，會(huì)涉及到很多需要用戶完成的操作。強(qiáng)化主操作（primary actions）的視覺重要性非常重要。所有的導(dǎo)航都是通過按鈕完成，所以你必須通過加粗和突出的方式讓用戶更容易識(shí)別主操作，次要操作（Secondary actions）則不要那么突出，但如果用戶需要尋找它們，它們是可見的即可。

以下是區(qū)分主操作和次要操作的方法：

• 在主按鈕和次要按鈕上采用不同的視重（visual weights），視重最強(qiáng)的按鈕會(huì)得到更多的關(guān)注。
• 因此，使用強(qiáng)烈的顏色、粗體文本和按鈕大小來強(qiáng)化主按鈕的視重，次級(jí)按鈕正好相反。

3. 令人沮喪的出錯(cuò)狀態(tài)

Frustrating error states

當(dāng)你在設(shè)計(jì)用戶界面時(shí)，不要忘記任何用戶界面的核心目標(biāo)：在用戶和服務(wù)之間提供盡可能流暢的交互。界面不應(yīng)存在疑惑、沒有答案的問題，亦或是任何的不確定性。

設(shè)計(jì)師應(yīng)該向用戶提供產(chǎn)品狀態(tài)的清晰反饋，特別是在產(chǎn)品處于出錯(cuò)狀態(tài)時(shí)。因此，出錯(cuò)時(shí)的提醒應(yīng)滿足以下的幾個(gè)簡單規(guī)則：

• 它們應(yīng)該是可識(shí)別的和引人注目的。（例如，紅色是表示錯(cuò)誤的常見 UI 模式）
• 它們應(yīng)該清楚地解釋發(fā)生了什么，以及用戶可以如何修復(fù)。
• 它們應(yīng)該與上下文相關(guān)聯(lián)。（顯示錯(cuò)誤提示的地方最好緊鄰出錯(cuò)的UI元素）
• 它們不應(yīng)該是帶刺激性的。（你的用戶對(duì)這個(gè)錯(cuò)誤還不夠惱火嗎？）

設(shè)計(jì)師還應(yīng)該注意那些意外錯(cuò)誤情況（如服務(wù)器錯(cuò)誤、頁面未找到）。任何錯(cuò)誤都是用戶使用流程上的障礙。這就是我們需要幫助用戶處理它的原因，提供任何可能的解決方案，并試圖消減糟糕的體驗(yàn)，尤其是那些非用戶自身原因造成的錯(cuò)誤。例如，對(duì)于404和500錯(cuò)誤（頁面未找到），一個(gè)可能的好方案是為這些頁面設(shè)計(jì)插圖或動(dòng)畫。

慎重對(duì)待表單校驗(yàn)

在設(shè)計(jì)錯(cuò)誤狀態(tài)時(shí)，盡你的最大努力不要惹惱用戶。特別要注意那些所有可能發(fā)生的表單校驗(yàn)情況。

舉例而言，假設(shè)你有一個(gè)包含必需字段的表單。這意味著開發(fā)人員有一個(gè)相應(yīng)的校驗(yàn)：“所有的必填字段不能為空。”假設(shè)用戶試圖以隨機(jī)的順序填寫表單，當(dāng)?shù)?個(gè)必填字段失去焦點(diǎn)狀態(tài)時(shí)，它會(huì)彈出一個(gè)錯(cuò)誤提示：“請(qǐng)?zhí)顚懘俗侄危撨x項(xiàng)是必填項(xiàng)!”

看到這個(gè)反饋的可憐用戶驚叫道：“等一下伙計(jì)，我只是在表單項(xiàng)之間切換，還沒有點(diǎn)擊‘提交’呢!”事情甚至可能變得更糟，例如，假設(shè)你有另一個(gè)校驗(yàn)設(shè)置：在所有必需字段全部填寫前，“提交”按鈕是禁用狀態(tài)。

想想看吧！你那些可憐的用戶什么也沒做，就無法提交表單，但是你已經(jīng)將好幾個(gè)錯(cuò)誤歸咎于他。這肯定會(huì)激怒所有人，你最好避免這種情況的出現(xiàn)。

衡量成本與價(jià)值

不要聽那些開發(fā)工程師忽悠：“按你想要的交互方式開發(fā)程序，這需要耗費(fèi)大量精力”。請(qǐng)記住: 如果不能避免這個(gè)問題會(huì)讓你付出代價(jià)，“失去用戶”的巨大代價(jià)！即使它的開發(fā)成本很低，沒有用戶的產(chǎn)品一文不值。

4. 沒有對(duì)齊

Poor alignment

好吧，我承認(rèn)，我是個(gè)對(duì)齊狂魔。但這只是因?yàn)橐坏┠惆l(fā)現(xiàn)了對(duì)齊的魔力，你就會(huì)意識(shí)到它是讓任何布局看起來漂亮和和諧的關(guān)鍵。

許多設(shè)計(jì)師認(rèn)為使用柵格系統(tǒng)（grid）會(huì)限制你的創(chuàng)造力，在某種程度上，這的確是真的。然而，如果你是一名剛?cè)胄械腢I設(shè)計(jì)師，我認(rèn)為你十分有必要在打破這些規(guī)則之前，先學(xué)會(huì)它們。

適當(dāng)?shù)奶畛洌╬adding）和間距（spacing）可以讓你的版面保持整潔有序，同時(shí)也能讓讀者更容易地閱讀和理解信息。

在邏輯塊（logical blocks）周圍應(yīng)該設(shè)置相同尺寸的間距（例如，在頂部和底部，以及在左邊和右邊）。如果間距尺寸不一，你的頁面看起來會(huì)很混亂，導(dǎo)致用戶對(duì)不同部分投入不均等的注意力。

而填充太小則意味著用戶無法將內(nèi)容分解成更多的邏輯模塊。為了防止邏輯模塊混雜在一起，你需要把它們分開，并在它們之間插入一個(gè)大的間距。

維持視覺層級(jí)結(jié)構(gòu)的一個(gè)簡單方法，是遵循如下的簡單規(guī)則：不同邏輯模塊之間的填充尺寸應(yīng)該大于每個(gè)模塊內(nèi)標(biāo)題和文本之間的填充尺寸。例如，假設(shè)你有一個(gè)包含主標(biāo)題、副標(biāo)題和段落的超長文本，那么你需要：

• 將標(biāo)題的底部填充（padding-bottom）設(shè)置為40px，然后再在后面在插入文本段落。
• 段落的底部填充（padding-bottom）設(shè)置為10px。
• 如果段落后面有一個(gè)副標(biāo)題，副標(biāo)題的頂部填充（padding-top）設(shè)置為30px（也即，段落與副標(biāo)題之間的間隔是30px），并將其底部填充（padding-bottom）設(shè)置為20px（也即，副標(biāo)題與下一個(gè)段落之間的間隔是20px）。

這樣的設(shè)計(jì)可以很好的強(qiáng)調(diào)重點(diǎn)。主標(biāo)題是最大號(hào)的文本，周圍有相對(duì)較大的空間，但仍與緊隨其后的元素保持相近的距離。

5. 弱對(duì)比度

Low Contrast

設(shè)計(jì)產(chǎn)品和設(shè)計(jì)一座公共建筑（如圖書館、學(xué)校等）有些相似之處，產(chǎn)品需要很高的包容性，能滿足不同人的需求，這也包括了盲人、色盲和弱視群體。

你可以問問達(dá)美樂披薩是否認(rèn)同產(chǎn)品包容性的重要價(jià)值。達(dá)美樂的網(wǎng)站設(shè)計(jì)一點(diǎn)也不無障礙（accessible），他們被一位無法通過網(wǎng)站訂購披薩的盲人告上法庭。請(qǐng)不要學(xué)達(dá)美樂，做設(shè)計(jì)一定要考慮無障礙。

我們作為設(shè)計(jì)師，往往關(guān)注如何做好看的設(shè)計(jì)，而忽視了多元化用戶的交互需求。

作為一個(gè)成熟的設(shè)計(jì)師，我已經(jīng)能夠心平氣和地對(duì)待那些限制我做出“完美設(shè)計(jì)”的條條框框了，這其中就包括ADA（美國殘疾人士法案）的相關(guān)條例。

為了讓文字和水平空間更協(xié)調(diào)，而把字號(hào)縮小到8px；或是僅僅為了美觀而使用淺灰色，這些行為都忽視了弱視訪客的使用需求。

為了在Dribbble集贊，設(shè)計(jì)時(shí)我們可以忽略無障礙，但是當(dāng)我們?cè)跒檎鎸?shí)的用戶設(shè)計(jì)產(chǎn)品的時(shí)候，忽略無障礙顯然不是個(gè)好主意。

按照網(wǎng)絡(luò)端內(nèi)容無障礙設(shè)計(jì)指南（WCAG）的要求，我們至少需要提供4.5:1的色彩對(duì)比度。這份指南還闡述了針對(duì)運(yùn)動(dòng)、聽覺和認(rèn)知障礙用戶的視覺設(shè)計(jì)指導(dǎo)方針。

為確保符合這些規(guī)范要求，你可以下載Stark軟件，它可以幫助檢查你的設(shè)計(jì)是否滿足了無障礙設(shè)計(jì)的要求。

使用留白

我的意思是，如果你把兩個(gè)完全不同的元素緊挨著排列，用戶無法搞清楚哪個(gè)元素是“主要”的，哪個(gè)是“次要的”。這就是為什么我們會(huì)說，強(qiáng)調(diào)對(duì)比不僅僅是將不同的視覺效果應(yīng)用到各個(gè)元素上，也需要使用留白的藝術(shù)。有時(shí)候?yàn)榱耸乖匦纬蓪?duì)比，你需要用留白來分隔它們。

留白很重要，它使內(nèi)容更便于用戶閱讀。當(dāng)然，有時(shí)候留白也會(huì)使用不當(dāng)，比如有太多的空白或者在一個(gè)小區(qū)域內(nèi)塞進(jìn)了太多的內(nèi)容，這都不是正確使用留白的例子。許多充斥各種廣告的網(wǎng)站也缺乏足夠的留白。

確保文本和圖像之間有足夠的對(duì)比度

避免把低對(duì)比度的文本放置在圖像上。文字和背景之間應(yīng)該有足夠的對(duì)比。為了使文本突出，可以在圖像上放置一個(gè)提高對(duì)比度的濾鏡。黑色很流行，但你也可以使用明亮的色彩，搭配使用。

另一種做法是從一開始就使用高對(duì)比度的圖像。在這種情況下，你可以把文本放在照片或圖像的深色區(qū)域。

6. 糟糕的圖標(biāo)設(shè)計(jì)

Poor Iconography

當(dāng)你需要通過一個(gè)小符號(hào)來表達(dá)意思或簡單說明一種含義時(shí)，圖標(biāo)非常有用。它們也是現(xiàn)代界面設(shè)計(jì)的基本組成部分，特別是在移動(dòng)終端上。

在應(yīng)用程序中，圖標(biāo)通常相當(dāng)于按鈕?？纯碔nstagram，你只會(huì)看到圖標(biāo)和文字。

這就是選擇正確的視覺圖標(biāo)來呼應(yīng)元素含義如此重要的原因。聽起來很簡單，對(duì)吧？其實(shí)并不簡單。找到正確圖標(biāo)的過程是非常痛苦的。

你需要用大家都能理解的、簡單的、常見的圖標(biāo)來表達(dá)語義。其次，你還需要將這些圖標(biāo)與整體UI風(fēng)格相匹配，最后，你需要以SVG格式把圖標(biāo)提供給開發(fā)人員。

或許你曾經(jīng)搜索過免費(fèi)圖標(biāo)，當(dāng)你為所有元素找到對(duì)應(yīng)的漂亮圖標(biāo)時(shí)，你會(huì)很興奮。你想，它們是多么完美地吻合啊! 它們會(huì)被每個(gè)人理解！遺憾的是，你所選擇的圖標(biāo)庫給人的整體印象往往是凌亂的。如何才能避免這種凌亂呢？以下是一個(gè)簡要策略:

• 線寬（Line width）
  調(diào)整尺寸后，所有圖標(biāo)的線寬應(yīng)該都是一樣的。否則，用戶會(huì)明顯感受到線寬不等所帶來的混亂。
• 圓角半徑（Corner radius）
  如果你的圖標(biāo)包含一些矩形形狀，仔細(xì)核對(duì)你圖標(biāo)庫中每個(gè)圖標(biāo)的圓角半徑。如果它們尺寸不同，你最好把它們調(diào)成一樣的。
• （針對(duì)線型圖標(biāo)的）線段末端形狀（Line cap shape）
  它可以是矩形的，也可以是圓形的。
• （針對(duì)線型圖標(biāo)的）線段轉(zhuǎn)角形狀（Corners join shape）
  它可以是矩形的，也可以是圓形的。

確實(shí)，沒那么細(xì)心的用戶可能不會(huì)特別注意到線寬或圓角半徑的不統(tǒng)一。盡管如此，設(shè)計(jì)給人的整體印象還是哪里怪怪的，用戶能感覺得到。

換句話說，雖然使用免費(fèi)圖標(biāo)并沒有錯(cuò)，但最好還是不要用太多。使用免費(fèi)圖標(biāo)會(huì)讓產(chǎn)品看起來很廉價(jià)，甚至是不專業(yè)的。另外，還有很多免費(fèi)的圖標(biāo)，人們很容易一下子認(rèn)出來。為什么? 因?yàn)樗麄冊(cè)缇桶l(fā)現(xiàn)這些圖標(biāo)被到處濫用。

這也是我建議嚴(yán)格篩選免費(fèi)圖標(biāo)的原因，當(dāng)然，如果能自己設(shè)計(jì)圖標(biāo)就更好了。自定義圖標(biāo)總是為用戶提供更優(yōu)越的體驗(yàn)。

7. 未考慮多終端

Not thinking cross platform

是的，理想情況下，這在當(dāng)下應(yīng)該不再是一個(gè)問題。

我們都知道，大多數(shù)用戶通過移動(dòng)設(shè)備訪問網(wǎng)絡(luò)服務(wù)。不幸的是，許多設(shè)計(jì)師仍然會(huì)忘記這一事實(shí)。(我猜或許是因?yàn)榭蛻舨辉敢饣ㄥX去做移動(dòng)端設(shè)計(jì)的優(yōu)化？)

然而，對(duì)于專業(yè)的設(shè)計(jì)師來說，不考慮多設(shè)備的兼容優(yōu)化，這種情況不應(yīng)該發(fā)生。在創(chuàng)建UI時(shí)，你應(yīng)該始終牢記“手機(jī)端優(yōu)先”的法則。

請(qǐng)關(guān)注一下不同的用戶在每個(gè)頁面上所看到的內(nèi)容。然后，問自己：“為了展示某個(gè)特定的內(nèi)容，我選用的UI控件是否合適？”

你可能選了一個(gè)很好的UI控件，它可以完美地在桌面設(shè)備上工作，但對(duì)于手機(jī)用戶來說，它就并不是那么好用了。反之亦然。這就是為什么我們必須時(shí)刻牢記現(xiàn)今設(shè)計(jì)必須考慮多設(shè)備終端的原因。

糟糕的觸摸區(qū)域

微小的點(diǎn)觸目標(biāo)會(huì)讓用戶感到沮喪，因?yàn)樗鼈儗?dǎo)致用戶難以完成預(yù)期的操作。我們都經(jīng)歷過在智能手機(jī)上點(diǎn)錯(cuò)按鈕，等待錯(cuò)誤頁面加載時(shí)的沮喪感！

所以，在設(shè)計(jì)可點(diǎn)擊元素時(shí)，請(qǐng)記住用戶的手指大小都是不同的:

• 記住成年人食指的平均寬度是1.6-2cm，要設(shè)計(jì)適合手指點(diǎn)觸的目標(biāo)。
• 保證你的點(diǎn)觸目標(biāo)至少有45-57px的寬度。這將給用戶足夠的空間擊中目標(biāo)，而不必?fù)?dān)心準(zhǔn)確性。

App界面設(shè)計(jì)對(duì)于設(shè)計(jì)師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉(zhuǎn)移到了移動(dòng)平臺(tái)，使得更多的UI設(shè)計(jì)師涌入移動(dòng)端領(lǐng)域，甚至出現(xiàn)了市場飽和的言論，對(duì)于從事移動(dòng)端的UI設(shè)計(jì)師來講，充滿壓力的同時(shí)又面臨無限機(jī)遇，唯有不斷的學(xué)習(xí)才能滋生出源源不斷的設(shè)計(jì)靈感，站穩(wěn)腳跟。

摹客想在這方面給各位設(shè)計(jì)師朋友做點(diǎn)什么，除了提供簡單好用的設(shè)計(jì)工具，我們也整理了非常多的優(yōu)秀設(shè)計(jì)案例，希望可以對(duì)設(shè)計(jì)師朋友有借鑒意義。這將會(huì)是一個(gè)系列的專題，我們以月為單位，整理了國內(nèi)外設(shè)計(jì)師的優(yōu)秀APP界面設(shè)計(jì)案例，我們是搬運(yùn)工，更是好設(shè)計(jì)的傳達(dá)者，希望你會(huì)喜歡。

接下來為大家分享精美的app UI設(shè)計(jì)案例：

--手機(jī)appUI設(shè)計(jì)--

  更多精彩文章：

      手機(jī)appUI界面設(shè)計(jì)賞析（一）

       手機(jī)appUI界面設(shè)計(jì)賞析（二）

       手機(jī)appUI界面設(shè)計(jì)賞析（三）

       手機(jī)appUI界面設(shè)計(jì)賞析（四）

       手機(jī)appUI界面設(shè)計(jì)賞析（五）

       手機(jī)appUI界面設(shè)計(jì)賞析（六）

       手機(jī)appUI界面設(shè)計(jì)賞析（七）

       手機(jī)appUI界面設(shè)計(jì)賞析（八）

       手機(jī)appUI界面設(shè)計(jì)賞析（九）

        手機(jī)appUI界面設(shè)計(jì)賞析（十）

       手機(jī)appUI界面設(shè)計(jì)賞析（十一）

      手機(jī)appUI界面設(shè)計(jì)賞析（十二）

      手機(jī)appUI界面設(shè)計(jì)賞析（十三）

      手機(jī)appUI界面設(shè)計(jì)賞析（十四）

      手機(jī)appUI界面設(shè)計(jì)賞析（十五）

      手機(jī)appUI界面設(shè)計(jì)賞析（十六）

      手機(jī)appUI界面設(shè)計(jì)賞析（十七）

      手機(jī)appUI界面設(shè)計(jì)賞析（十八）

      手機(jī)appUI界面設(shè)計(jì)賞析（十九）

      手機(jī)appUI界面設(shè)計(jì)賞析（二十）

      手機(jī)appUI界面設(shè)計(jì)賞析（二十一）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十二）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十三）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十四）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十五）