132021-10

從體驗層面出發(fā)，分析App搜索框設(shè)計的要點

ui設(shè)計分享達(dá)人

搜索動作在App中依靠搜索框來完成，好用的搜索框很大程度上決定了產(chǎn)品的搜索體驗如何。大多數(shù)搜索框存在相似性，但真正好的搜索框會在細(xì)節(jié)上為用戶帶來差異化的反饋，帶來很暖很貼心的感覺。

1、搜索框結(jié)構(gòu)分析

從體驗層面上看，一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為：

使用前-找到搜索框入口；使用中-點擊輸入內(nèi)容；使用后-展示搜索結(jié)果。

其中使用中會涉及到跳轉(zhuǎn)和輸入兩種不同的狀態(tài)，在下面的文章里我會展開來分析。

2、搜索框的常見類型

回想常用App的搜索框，好像它們的樣式看起來差別并不是很大，但其實每個搜索框的細(xì)節(jié)都是經(jīng)過精心設(shè)計的，下面總結(jié)了幾種常見的搜索框類型。

搜索圖標(biāo)

頁面上只提供一個放大鏡圖標(biāo)，通常需要用戶點擊圖標(biāo)后才能跳轉(zhuǎn)到搜索頁面，例如小紅書就將搜索圖標(biāo)放置在頁面右上角。

基本搜索框

基本的搜索框組成包括放大鏡圖標(biāo)、文字提示、輸入框三部分。微信主頁的搜索框采用了這種基本形式，文字提示為搜索，簡潔清晰。

文字提示類搜索框

和基本搜索框的唯一不同的地方在于，這類搜索框中的文字提示部分不再是搜索兩個字，而是根據(jù)產(chǎn)品需求支持預(yù)置多組文字提示并在搜索框內(nèi)循環(huán)展示。

▲ 在大眾點評的頂部搜索框中，文字提示部分循環(huán)展示了三組不同的內(nèi)容，引導(dǎo)用戶快速檢索到好吃和好玩的。

功能類搜索框

之所以叫做功能類搜索框，是在文字提示類搜索框的基礎(chǔ)上根據(jù)產(chǎn)品功能的需要額外添加了常用的功能性圖標(biāo)，如掃碼圖標(biāo)、拍照圖標(biāo)、語音圖標(biāo)等，賦予搜索框更多的功能屬性。

▲ 經(jīng)常使用豆瓣看書評的同學(xué)可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標(biāo)，點擊之后可以快速掃描圖書條碼或二維碼，快速識別書的內(nèi)容，省去檢索的麻煩。

▲ 淘寶搜索框的組成更復(fù)雜，除了支持掃碼外還有相機圖標(biāo)，方便用戶拍照識別商品。

3、搜索框設(shè)計狀態(tài)分析

使用搜索框搜索的過程總體可以分為四部分：搜索前、點擊搜索框、輸入中、搜索后。設(shè)計分析過程中我們要先理清整體的搜索流程，再考慮每個狀態(tài)對應(yīng)的交互細(xì)節(jié)及反饋，這樣才能保持邏輯清晰。

搜索前-默認(rèn)狀態(tài)

位置

大多數(shù)搜索框出現(xiàn)在頁面頂部，作為一個大的觸摸目標(biāo)更符合用戶的認(rèn)知習(xí)慣，更容易被用戶發(fā)現(xiàn)和使用。

▲ 在蘋果自帶的地圖應(yīng)用中，搜索框放在頁面中部偏下的位置，相比于頂部搜索框，這樣的位置分布更方便用戶單手操作。

樣式

搜索前的狀態(tài)除了前面講的幾種常見的搜索框樣式外，有些產(chǎn)品會直接在搜索框增加“搜索”按鈕。

▲ 阿里系產(chǎn)品包括淘寶、支付寶、閑魚等主頁搜索框都額外添加了“搜索”按鈕，相比于點擊搜索框再點擊鍵盤搜索內(nèi)容推薦，直接點擊按鈕簡化了搜索流程。

點擊后-獲取焦點

搜索框

點擊搜索框后，框內(nèi)的放大鏡圖標(biāo)會消失，出現(xiàn)閃爍的光標(biāo)引導(dǎo)用戶輸入，搜索框右側(cè)會出現(xiàn)“取消”按鈕。

▲ 點擊大眾點評的搜索框后，搜索頁會出現(xiàn)三個選項，點擊每一個選項，搜索框內(nèi)的文字提示都會改變，有效幫助用戶提升搜索準(zhǔn)確度，雖然是很小的點但做的很用心。

鍵盤

點擊搜索框后會彈起鍵盤，在不輸入內(nèi)容的情況下，點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內(nèi)容。

搜索頁

搜索頁的內(nèi)容通常包括歷史搜索、搜索發(fā)現(xiàn)、熱門推薦等版塊，記錄用戶的搜索行為，推薦目標(biāo)商品或服務(wù)，提高轉(zhuǎn)化率。

▲ 豆瓣將最熱門的內(nèi)容都展現(xiàn)在搜索頁中，包括實時更新的熱門書影音榜單、熱門小組、熱門話題等，為用戶提供有效的引導(dǎo)。

關(guān)于歷史搜索我們還可以繼續(xù)深入分析，思考這些記錄怎么排序、最多顯示幾條記錄……

▲ 網(wǎng)易云音樂的歷史搜索最多可以保留10條，采用橫向滑動的手勢交互可以節(jié)省屏幕空間。根據(jù)內(nèi)容長短一屏一次可以顯示2-3條記錄，這會導(dǎo)致排在后面的歷史記錄不容易被用戶快速發(fā)現(xiàn)。

▲ 淘寶的歷史搜索可以容納更多的數(shù)量，當(dāng)搜索記錄超過兩行時會有一個小的展開按鈕，點擊按鈕可以查看早期的記錄，這樣既能節(jié)省屏幕空間也能最大化容納歷史記錄。

搜索中-輸入內(nèi)容

刪除/取消

當(dāng)開始輸入內(nèi)容時，在搜索框的右側(cè)會出現(xiàn)刪除圖標(biāo)，方便用戶一鍵刪除輸入的內(nèi)容，這里要注意區(qū)分刪除和取消的區(qū)別。

▲ 在淘寶中點擊“刪除”圖標(biāo)，頁面會返回到上一級也就是搜索頁；

▲ 點擊“取消”按鈕，頁面會直接返回到主頁也就是搜索前的狀態(tài)。

搜索提示

在用戶輸入內(nèi)容時，產(chǎn)品會根據(jù)用戶輸入的內(nèi)容提供相對應(yīng)的搜索推薦，這是搜索框的必備的交互反饋。

通過合理的詞條推薦能極大降低用戶的思考時間，提高搜索效率，同時省去再次點擊搜索按鈕的流程，降低用戶的操作步驟。

字?jǐn)?shù)限制

目前我所知道的大多數(shù)App在搜索時都沒有字?jǐn)?shù)限制問題。

回顧一下搜索使用場景會發(fā)現(xiàn)用戶在搜索框內(nèi)輸入任何內(nèi)容都是有可能的，盡量不要約束用戶的輸入內(nèi)容。無論用戶輸入多少內(nèi)容，點擊都可以完成基本的搜索操作，這樣整個流程才完整。

▲ 在百度中輸入過多字符時，會提示查詢限制在38個漢字以內(nèi)，多的字符會被忽略，雖然給出了提示但并未打斷用戶的操作流程，可以讓用戶繼續(xù)完成搜索。

搜索后-展示結(jié)果

符合預(yù)期

搜索的理想狀態(tài)是搜索到的結(jié)果符合用戶的預(yù)期，滿足用戶的搜索需求，并把最吻合的搜索結(jié)果排在前面，為用戶帶來清晰的結(jié)果展示。

智能提示

智能提示是對用戶輸入內(nèi)容上的一種提示或糾正，如果用戶輸入的內(nèi)容有問題或不夠標(biāo)準(zhǔn)，在搜索結(jié)果中會能給最貼切的搜索結(jié)果。

▲ 在淘寶中輸入“shouji”或“souji”，淘寶會根據(jù)拼音給出“手機”的搜索結(jié)果，但仍保留原標(biāo)簽，方便用戶再次點擊搜索；輸入“手ji”時，會直接給出“手機”標(biāo)簽，這種差異化的反饋能更好的為用戶服務(wù)。

無結(jié)果提示

如果沒有搜索到用戶輸入的內(nèi)容，搜索頁會顯示一個空狀態(tài)，提示用戶沒有搜索結(jié)果。關(guān)于空狀態(tài)如何設(shè)計可以看我之前寫的一篇文章——如何做好「空狀態(tài)」設(shè)計？來看資深設(shè)計師的總結(jié)！詳細(xì)分析了空狀態(tài)的設(shè)計方法。

▲ 相比于直接顯示搜索無結(jié)果的狀態(tài)，拼多多的搜索結(jié)果首先會標(biāo)明相關(guān)商品較少，然后將搜索內(nèi)容拆分成不同的標(biāo)簽進(jìn)一步引導(dǎo)用戶來發(fā)現(xiàn)內(nèi)容。

文章來源：站酷作者：Clippp
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

評論(0) 瀏覽(1476)

132021-10

如何選擇合適的圖標(biāo)？來看這份圖標(biāo)類型和風(fēng)格匯總

ui設(shè)計分享達(dá)人

常見的分類是簡單的線性分類，缺少立體化的圖標(biāo)分類思維。文章通過梳理來幫助大家對不同類型及風(fēng)格的圖標(biāo)有一個體系化的認(rèn)知。

大家好，我是Clippp?？吹胶玫膱D標(biāo)我們會習(xí)慣性地截圖保存，但隨著收集的圖標(biāo)越來越多，會發(fā)現(xiàn)對圖標(biāo)的分類會變得越來越混亂…做設(shè)計時也不清楚到底該參考或運用哪種風(fēng)格最合適。來看看如何解決這些問題！

一、定義圖標(biāo)類型

對圖標(biāo)進(jìn)行分類時，普遍會遇到的問題是一個圖標(biāo)有多種風(fēng)格。例如下面這個水滴圖標(biāo)，樣式很簡單，但可以劃分到多個類別中。

面對這樣的問題，推薦使用系統(tǒng)性的結(jié)構(gòu)來劃分圖標(biāo)類別：

首先將圖標(biāo)按尺寸大小分為兩類；
繼續(xù)細(xì)分對應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型；
最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。

利用這種結(jié)構(gòu)層級，可以明確定義圖標(biāo)類別。

二、圖標(biāo)尺寸

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來很酷，但把它縮小到16px，這些酷炫的效果都無法呈現(xiàn)出來。

在對圖標(biāo)歸類時，首先要考慮圖標(biāo)用在什么位置需要多大尺寸。這里將圖標(biāo)分為兩大類：

大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo)，例如App啟動圖標(biāo)或代表品牌形象；
小尺寸圖標(biāo)用作UI控件，起到引導(dǎo)功能或裝飾目的。

三、圖標(biāo)類型

確定圖標(biāo)尺寸后，進(jìn)一步細(xì)分圖標(biāo)類型：

面性圖標(biāo)

線性圖標(biāo)

線面結(jié)合圖標(biāo)

扁平化圖標(biāo)

擬物化圖標(biāo)

利用這種簡單的分類方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中，所以在小圖標(biāo)分類中沒有展示。

四、圖標(biāo)組成

圖標(biāo)尺寸越小，展示的細(xì)節(jié)越有限。相比于大圖標(biāo)，小圖標(biāo)的尺寸有一定局限性，圖標(biāo)組成包括 標(biāo)準(zhǔn)和容器兩種。

大圖標(biāo)利用尺寸上的優(yōu)勢能展示更多內(nèi)容，分為多種組成形式。

五、小尺寸圖標(biāo)樣式

簡單的圖像可以更具包容性。圖標(biāo)的尺寸越小，越考驗設(shè)計師傳達(dá)信息的能力。

1.面性圖標(biāo)

1.1標(biāo)準(zhǔn)面性圖標(biāo)

面性圖標(biāo)易識別，適合應(yīng)用在小尺寸圖標(biāo)中。

關(guān)鍵點：

確保圖標(biāo)有清晰的邊緣，避免羽化；

圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。

1.2帶有背景色的面性圖標(biāo)

彩色背景為簡約設(shè)計帶來了更多可能。通過這個技巧使面性圖標(biāo)更友好，更具吸引力。

關(guān)鍵點：

為背景選擇4-12種顏色。

考慮圖標(biāo)是淺色還是深色，是否適用于所有背景色。

在彩色背景上使用白色圖標(biāo)比黑色效果更好。

2.線性圖標(biāo)

2.1標(biāo)準(zhǔn)線性圖標(biāo)

線性圖標(biāo)因為簡潔性和現(xiàn)代性而受到用戶的歡迎。隨著屏顯越來越清晰，我們可以更加大膽地使用線性圖標(biāo)。

關(guān)鍵點：

確保輪廓像素清晰。

越簡單越好。

追求更簡單的細(xì)節(jié)。

2.2雙色線性圖標(biāo)

設(shè)計小尺寸圖標(biāo)時，必須放棄細(xì)節(jié)并強調(diào)簡單的形狀。但當(dāng)使用一種顏色效果不太理想時，可以考慮添加一些顏色。

關(guān)鍵點：

使用兩種搭配和諧的顏色。

考慮將一種顏色用于主要形狀，另一種顏色用于細(xì)節(jié)。

少即是多。

使用粗線條。

3.線面結(jié)合圖標(biāo)

線面結(jié)合擁有更多細(xì)節(jié)，提升用戶的愉悅感。

關(guān)鍵點：

最好使用深色而不是純黑色描邊。

限制圖標(biāo)的顏色種類。

避免過多細(xì)節(jié)。

4.扁平化圖標(biāo)

扁平化圖標(biāo)既簡單又巧妙，表達(dá)品牌形象的同時具有豐富的內(nèi)涵。

關(guān)鍵點：

避免在<20px的尺寸中使用此圖標(biāo)樣式。

選擇2-3種顏色，可以一起使用。

一種顏色為主色，另一種顏色應(yīng)為高光/細(xì)節(jié)色。

六、大尺寸圖標(biāo)樣式

大尺寸圖標(biāo)在界面中使用較少，更多用于產(chǎn)品標(biāo)識或品牌宣傳。

1.線性圖標(biāo)

1.1標(biāo)準(zhǔn)線性圖標(biāo)

在設(shè)計任何圖標(biāo)前，都可以先創(chuàng)建一個線性輪廓，確保形狀看起來足夠美觀后再添加顏色。

關(guān)鍵點：

這類圖標(biāo)最容易制作。

避免出現(xiàn)輪廓羽化。

線條粗細(xì)要一致。

不要害怕添加細(xì)節(jié)。

1.2漸變線性圖標(biāo)

添加一些漸變能讓原本單一的線性圖標(biāo)賦予更多的個性。

關(guān)鍵點：

在小尺寸圖標(biāo)中添加漸變會降低圖標(biāo)的可視性。

選擇漸變時，首先考慮鄰近色。

線條越粗，漸變越明顯。

線條細(xì)節(jié)越多，漸變越明顯。

1.3等距線性圖標(biāo)

2.5D圖標(biāo)做起來會花費很多時間，但效果會很好。在設(shè)計汽車、房屋、家具等實體產(chǎn)品時，建議優(yōu)先使用2.5D圖標(biāo)。

關(guān)鍵點：

同一組圖標(biāo)要使用相同的等軸測網(wǎng)格。

2.5D等軸圖標(biāo)很復(fù)雜，在較小的尺寸下會失去作用。

如果可以，讓所有圖標(biāo)都朝向同一個方向。

1.4手繪線性圖標(biāo)

隨著設(shè)計趨勢向簡約化、扁平化發(fā)展，很多設(shè)計師喪失了手繪圖標(biāo)的能力。實際上手繪圖標(biāo)讓品牌更真實甚至更有趣。

關(guān)鍵點：

手繪圖標(biāo)掃描后，再用數(shù)字方式重新繪制，這樣可以保證線條粗細(xì)一致。

盡量讓所有的線條保持相同的顏色，這會使文件更小。

1.5斷線圖標(biāo)

標(biāo)準(zhǔn)的線性圖標(biāo)看起來可能會很單調(diào)，而簡單靈活的斷線處理能為圖標(biāo)增加更多個性。

關(guān)鍵點：

斷線粗細(xì)應(yīng)該相同。

圖標(biāo)的中斷次數(shù)盡可能保持一致。

1.6雙色線性圖標(biāo)

關(guān)鍵點：

確保兩種顏色具有相同的對比度，否則可能會導(dǎo)致用戶看不清其中一種顏色，因此無法識別完整的圖標(biāo)。例如左下角的淺綠色對于視力弱的用戶來說就很不友好。

2.線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)可以看作是添加顏色后的線性圖標(biāo)。線面結(jié)合具有很強的輪廓，讓圖標(biāo)能夠清晰可見。

2.1標(biāo)準(zhǔn)線面結(jié)合圖標(biāo)

關(guān)鍵點：

使用有限的顏色和統(tǒng)一的線條風(fēng)格，使圖標(biāo)具有品牌性。

使用線條和點來添加更多細(xì)節(jié)。

避免使用純黑色描邊。

2.2帶有背景色的線面結(jié)合圖標(biāo)

關(guān)鍵點：

描邊斷開時，圖標(biāo)效果很更好。

避免在小尺寸時使用。

使用有限的調(diào)色板。

考慮使用較淺的描邊/背景色。

考慮在圖標(biāo)下方添加一條水平線，使圖形具有相同的位置(中間的圖標(biāo)示例)

2.3錯位線面結(jié)合圖標(biāo)

當(dāng)填充色與描邊錯位時，顏色移到右邊圖標(biāo)左上角留出高光，帶來一種清新的感覺。

關(guān)鍵點：

考慮使用斷線描邊。

使用有限的調(diào)色板。

確保描邊和填充色簡單且一致。

2.4色塊圖標(biāo)

這種風(fēng)格的圖標(biāo)的特點在于并不依賴于顏色，僅將其用于裝飾。

關(guān)鍵點：

選擇有限的調(diào)色板。

先關(guān)注輪廓再關(guān)注顏色，顏色僅用于裝飾。

避免形狀色和背景色過于相似，降低可見度。

2.4單色線面結(jié)合圖標(biāo)

關(guān)鍵點：

避免使用暖色調(diào)尤其是紅色，會讓用戶感到壓抑。

首先確定合適的描邊顏色，再考慮填充色。

3.扁平化圖標(biāo)

扁平化圖標(biāo)通常沒有描邊，主要使用形狀和顏色來完成組合搭配。簡潔、友好和適當(dāng)?shù)募?xì)節(jié)，讓這類圖標(biāo)非常具有吸引力。

3.1標(biāo)準(zhǔn)扁平化圖標(biāo)

關(guān)鍵點：

使用柔和的調(diào)色板，避免明亮的顏色。

分清簡化和添加細(xì)節(jié)之間的界限。

3.2帶有容器的扁平化圖標(biāo)

嘗試讓圖形打破容器，帶來動態(tài)的感覺。

關(guān)鍵點：

嘗試讓圖形從容器中凸出來，以增加深度。

因為在容器中，可以添加更多的細(xì)節(jié)而不用擔(dān)心圖形變得混亂。

嘗試使用正方形、橢圓形或與品牌相關(guān)的容器形狀。

3.3等距圖標(biāo)

關(guān)鍵點：

保持所有圖標(biāo)朝向同一方向。

選擇恰當(dāng)?shù)恼{(diào)色板能讓圖標(biāo)看起來更一致。

避免小尺寸使用。

3.4半陰影扁平圖標(biāo)

半陰影圖標(biāo)是在扁平圖標(biāo)的基礎(chǔ)上添加半色調(diào)陰影，得到更具個性的圖標(biāo)。

關(guān)鍵點：

小尺寸圖標(biāo)不起作用。

使用有限的調(diào)色板。

確保所有的圖標(biāo)色調(diào)相似。

3.5長陰影扁平圖標(biāo)

當(dāng)圖標(biāo)位于容器中時，可以考慮添加長陰影，主要包括純色陰影和漸變陰影兩種類型。

關(guān)鍵點：

使容器具有相同的顏色或類似的色調(diào)。

只在大尺寸圖標(biāo)中使用。

將半陰影與長陰影組合使用效果更好。

4.擬物化圖標(biāo)

擬物化圖標(biāo)實際上已經(jīng)包含了大部分的樣式，例如它們是立體的，有豐富的漸變和陰影。

這種風(fēng)格的圖標(biāo)看起來與現(xiàn)實生活中的圖標(biāo)盡可能類似，讓用戶感到更舒適。

關(guān)鍵點：

考慮添加底部陰影。

使光源來自同一方向。

確保圖標(biāo)都朝向相同的方向。

目前絕大多數(shù)界面不在有這種風(fēng)格的圖標(biāo)，可以考慮使用3D建模來實現(xiàn)這種效果。

總結(jié)

希望大家能對圖標(biāo)的分類及設(shè)計有更全面深入的認(rèn)識，從而構(gòu)建一套完整的圖標(biāo)思維體系。

文章來源：站酷作者：Clippp
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

評論(0) 瀏覽(2117)

132021-10

掌握這20條用戶體驗設(shè)計原則，助力設(shè)計成長！

ui設(shè)計分享達(dá)人

文章整理了20條用戶體驗設(shè)計原則，希望通過這份簡潔易懂的合集能夠讓你對用戶體驗領(lǐng)域有一個初步的概覽和了解。

1.以用戶為中心

這是最常被提及的用戶體驗設(shè)計基礎(chǔ)，當(dāng)涉及到產(chǎn)品設(shè)計決策時，提醒我們要學(xué)會使用同理心，而不是僅憑個人的想法或意見。

真正好的用戶體驗設(shè)計是為用戶量身打造的，用戶的意見、痛點、愿望、偏好和需求對產(chǎn)品來說至關(guān)重要，所以在項目初始階段需要投入大量的時間和精力去了解用戶。

用戶體驗研究重點是了解用戶，為接下來的產(chǎn)品設(shè)計做準(zhǔn)備。以用戶為中心的設(shè)計理念是設(shè)計師迎合用戶的需求，區(qū)分了設(shè)計任何人都可以使用的產(chǎn)品和為目標(biāo)用戶設(shè)計的產(chǎn)品。

一款特定的產(chǎn)品需要面對不同的目標(biāo)群體，前期研究中需要了解目標(biāo)人群需要什么并在產(chǎn)品中反映出來，這是針對性很強的設(shè)計研究。

2.了解信息架構(gòu)

可能很多人對信息架構(gòu)的定義很模糊，這里舉個例子來具象說明一下信息架構(gòu)的含義。

例如在一款產(chǎn)品中，如果把所有內(nèi)容都堆到一個列表或頁面中，可能我們將無法使用這款產(chǎn)品，所以我們看到大多數(shù)的App和網(wǎng)站都包含很多的導(dǎo)航和頁面結(jié)構(gòu)，按照內(nèi)容重要程度有序地來組織內(nèi)容。

信息體系結(jié)構(gòu)的最終目標(biāo)是幫助用戶理解他們在看什么，并幫助他們找到需要尋找的內(nèi)容。

信息架構(gòu)在制作線框圖或原型之前完成，因為它是產(chǎn)品的基礎(chǔ)，有助于設(shè)計師考慮什么功能是最重要的，哪些是用戶最需要的以及哪些次要內(nèi)容可以隱藏起來等。

這種結(jié)構(gòu)與產(chǎn)品的導(dǎo)航設(shè)計密切相關(guān)，有助于將用戶引導(dǎo)到正確的位置。導(dǎo)航和信息架構(gòu)都試圖讓用戶以最少的認(rèn)知努力來完成操作。

信息架構(gòu)的設(shè)計不當(dāng)會造成重大故障甚至可能危及整個產(chǎn)品。如果用戶在使用產(chǎn)品時找不到任何想要的內(nèi)容，點擊任何元素都沒有反應(yīng)，會給用戶帶來很糟糕的使用體驗。

3.考慮使用場景

沒有場景，任何設(shè)計都很難生效。設(shè)計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。

這條原則有助于設(shè)計師考慮還有哪些因素會影響用戶和產(chǎn)品，很多產(chǎn)品設(shè)計會為用戶提供一些有助于消除使用摩擦的操作提示。

例如在設(shè)計表單時，會盡可能的添加 輸入提示，最大程度地減少用戶出錯的機會。

4.了解一致性及其重要性

保持一致性是用戶體驗設(shè)計的關(guān)鍵原則。擁有一致設(shè)計的產(chǎn)品可以更快地被新用戶接受，因為用戶不需要再次學(xué)習(xí)如何操作，他們會回憶起之前的操作習(xí)慣并將其作為指導(dǎo)，這也解釋了為什么同類型的產(chǎn)品例如電商類App頁面設(shè)計的很相似。

保持一致意味著在需要時可以重復(fù)使用某些UI組件，并在整個產(chǎn)品中保持一致的行為。例如當(dāng)點擊或懸停在按鈕上面時，所以按鈕的狀態(tài)應(yīng)該是一致的。

從邏輯上講，產(chǎn)品越大，這種一致性會變得越來越有挑戰(zhàn)性，這促使許多設(shè)計團(tuán)隊創(chuàng)建自己的設(shè)計系統(tǒng)。一款產(chǎn)品的學(xué)習(xí)曲線越長越陡，放棄的用戶就會越多，在市場營銷中，這通常被稱為銷售漏斗中的漏洞。

5.給予用戶適當(dāng)?shù)目刂茩?quán)

這條原則意味著用戶希望能控制產(chǎn)品，無論是完成任務(wù)還是定制滿足他們需求的內(nèi)容。

在設(shè)計過程中一直試圖給用戶盡可能多的控制權(quán)，例如允許用戶撤消操作、更改設(shè)置、自定義UI外觀、創(chuàng)建快捷方式等中。

需要注意的是，當(dāng)提供太多選項或用戶太依賴于自己的選擇時，用戶可能會不知所措，造成所謂的 選擇悖論。所以在設(shè)計時要了解用戶樂于掌控的余地，不能讓用戶感到使用壓力。

6.把可用性放在首位

在整體上看，建立高標(biāo)準(zhǔn)的可用性是為用戶做的最好的事情，有助于檢查用戶是否能夠輕松地完成任務(wù)、產(chǎn)品是否正常運行以及是否完成工作。

可用性的重要之處在于要理解可用性的靈活性和重要性。

7.了解用戶測試

結(jié)合可用性的概念，我們還要進(jìn)行用戶測試，這是設(shè)計師對工作進(jìn)行測試的方式，對新的產(chǎn)品來說至關(guān)重要。

當(dāng)設(shè)計思想和理念被轉(zhuǎn)化為有形的原型時，設(shè)計師要觀察真實的用戶是如何與之交互的，可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現(xiàn)。

測試通常分幾輪進(jìn)行，團(tuán)隊在向原型添加更多細(xì)節(jié)之前驗證每個步驟。隨著測試結(jié)果的出現(xiàn)，設(shè)計也隨之發(fā)生了變化。

如果發(fā)生更改，將會進(jìn)行新一輪的測試，通過這個過程，設(shè)計團(tuán)隊可以改進(jìn)他們的工作，直到達(dá)到可用性標(biāo)準(zhǔn)。

8.少即是多

在創(chuàng)造力和創(chuàng)造獨特事物的渴望中，很多設(shè)計師很容易無意中弄亂產(chǎn)品界面甚至產(chǎn)品本身。

功能過多的產(chǎn)品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊，但也會給用戶帶來負(fù)面體驗，在設(shè)計時要學(xué)會克制并優(yōu)先考慮真正關(guān)鍵的部分很重要。

另外手機端的屏幕空間非常小，創(chuàng)建一個有效的布局，想出巧妙的方法來隱藏次要元素并創(chuàng)建一個令人愉悅的界面需要付出很大的努力和創(chuàng)造力。

9.視覺層次

視覺層次是向用戶傳達(dá)產(chǎn)品中元素重要性的方式。良好的層次結(jié)構(gòu)有助于用戶視線在界面上移動，并立即了解最重要的內(nèi)容以及這些內(nèi)容與其他部分的關(guān)系。

視覺層次結(jié)構(gòu)與布局設(shè)計緊密相連，幫助用戶消化所接觸到的信息。

創(chuàng)建層次結(jié)構(gòu)從概念的草圖開始，一直持續(xù)到完成設(shè)計。例如發(fā)送按鈕通常會用綠色而是不紅色，而次要按鈕會顯示為灰色或與背景混合，并顯示“撤消”或“返回”。

10.了解用戶的心智模型

為用戶創(chuàng)建心智模型是嘗試使用同理心的一種方式，是幫助設(shè)計師從用戶的角度看待問題的工具。

正確使用意味著用戶無需投入精力就可以使用的直觀產(chǎn)品，而錯誤的思維模型會導(dǎo)致一些問題，例如界面混亂、高昂的交互成本。

為了匹配用戶的心智模型，可以采用多種不同類型的研究方法，常見的方法包括 卡片分類、決策樹、對用戶行為的密切觀察，或者使用大量的數(shù)據(jù)來建立關(guān)鍵用戶的心理模型。

11.設(shè)計中的講故事

講故事的方式更加直觀，利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設(shè)計中的視覺敘事是為了喚起用戶的情感，給用戶留下持久的印象。

想出一種可視化的方式來傳達(dá)復(fù)雜的內(nèi)容具有挑戰(zhàn)性，但同時也是有益的，可以更好地接近用戶并將其作為提高產(chǎn)品可學(xué)習(xí)性的方法。

12.不要直接跳到高保真原型上

高保真原型是設(shè)計項目的最終目標(biāo)，但是直接使用原型軟件不斷添加各種頁面細(xì)節(jié)是錯誤的操作。

避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下，一款產(chǎn)品無論具有多少的細(xì)節(jié)都有可能面臨不符合用戶使用的情況。

13.可訪問性測試很重要

不僅要檢查關(guān)鍵用戶是否可以流暢地使用產(chǎn)品，還應(yīng)該檢查其他所有用戶例如少數(shù)群體等是否都能夠正常使用產(chǎn)品。

事實上，殘疾人和其他用戶一樣需要數(shù)字產(chǎn)品，但很多產(chǎn)品在設(shè)計時并沒有考慮到這些群體，但這也提供了一個機會，為所有用戶提供一個可以依賴的好產(chǎn)品。

14.熟悉并在用戶體驗設(shè)計中使用

我們知道為用戶提供一致的設(shè)計有助于克服學(xué)習(xí)曲線，同時為用戶提供熟悉的東西也有助于縮短學(xué)習(xí)曲線。

例如，大多數(shù)用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕)，這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

使用用戶已經(jīng)熟悉的東西并不一定會讓產(chǎn)品的獨特性消失，有經(jīng)驗的設(shè)計師會利用這種熟悉性來來創(chuàng)造一些獨特的設(shè)計，同時也是直觀的，不需要太多努力就可以使用。

設(shè)計一個完全不依賴熟悉度的產(chǎn)品可能是具有風(fēng)險的行為，因為它很容易讓那些不熟悉產(chǎn)品的用戶超負(fù)荷，形成巨大的學(xué)習(xí)曲線，增加用戶負(fù)擔(dān)。

15.了解交付成果的力量

可交付成果是可以在整個團(tuán)隊中交付的內(nèi)容，包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等，是一種有形和具體的表現(xiàn)。

可交付成果是用戶體驗設(shè)計原則，可以幫助設(shè)計團(tuán)隊和其他利益相關(guān)者理解和交流概念。

▲ 用戶畫像可以捕捉理想用戶，并提供可以相關(guān)聯(lián)的真實面孔，是一種指導(dǎo)設(shè)計的工具。用戶旅程圖幫助設(shè)計師了解用戶完成任務(wù)需要的具體步驟，有助于確保這些步驟確實可以輕松執(zhí)行，并且整個過程很流暢。

這些交付成果服務(wù)于關(guān)鍵功能，設(shè)計師需要在整個項目中都依賴它們，不斷轉(zhuǎn)換為用戶可以與之交互的真實有形的設(shè)計。

16.專業(yè)的原型設(shè)計工具

用戶體驗設(shè)計的過程不是線性的，而是一個循環(huán)。無論創(chuàng)建什么樣的產(chǎn)品，都需要專業(yè)的原型工具，將基本框架放在一起，然后添加可能需要的所有細(xì)節(jié)。

從邏輯上講，設(shè)計團(tuán)隊的具體需求會因團(tuán)隊而異，但一些關(guān)鍵功能例如團(tuán)隊協(xié)作、需求管理、交互設(shè)計和開發(fā)移交等，對于大多數(shù)團(tuán)隊來說是必要的。

17.精心管理產(chǎn)品需求

一切都從收集需求開始，然后慢慢創(chuàng)建關(guān)鍵列表。雖然簡單地列出一個列表聽起來很容易，但隨著項目的進(jìn)展，要保持列表的條理性確實是一個挑戰(zhàn)。

除了創(chuàng)建需求和檢查復(fù)選框之外，還有一個問題就是調(diào)整需求，需要從 設(shè)計、技術(shù)和業(yè)務(wù)各個方面來處理各種需求，還要確保這些需求之間沒有相互矛盾。

18.了解移動和網(wǎng)絡(luò)產(chǎn)品之間的差異

網(wǎng)頁端和移動端產(chǎn)品最明顯的區(qū)別是屏幕尺寸，這意味著所有的視覺層次結(jié)構(gòu)和信息架構(gòu)都將將從Web到App發(fā)生變化。

移動端產(chǎn)品會有更多影響設(shè)計決策的因素，例如設(shè)備的操作系統(tǒng)、使用產(chǎn)品的環(huán)境等。了解移動端產(chǎn)品在 導(dǎo)航設(shè)計、用戶流程等關(guān)鍵方面的差異是至關(guān)重要的用戶體驗設(shè)計原則。

19.利用UX設(shè)計模式

幾乎所有的產(chǎn)品都專注于設(shè)計模式，它們可靠、易于查找并通過減少設(shè)計時間來為項目增加實用性。

▲ 當(dāng)用戶在谷歌搜索中輸入的內(nèi)容有問題時，谷歌會提供一個相關(guān)的搜索提示，輔助用戶進(jìn)行精確地搜索，解決用戶使用不同方式在搜索欄中傳達(dá)他們正在尋找的內(nèi)容的問題。

20.使用合適的工具才能有效

擁有單一的內(nèi)容來源可以為團(tuán)隊帶來清晰性和高效性，如果線框和原型分散在多個渠道中，這種內(nèi)容的集合就會變得很難達(dá)成。

通過合適高效的工具能夠避免產(chǎn)品在到達(dá)終點時遇到各種各樣的可用性問題，防止產(chǎn)品細(xì)節(jié)沒有表現(xiàn)出來或者被忽略。

最后

通過這份用戶體驗設(shè)計原則的合集希望能夠讓你對這個領(lǐng)域有一個大致的了解。

沒有人知道用戶體驗設(shè)計在未來會引領(lǐng)我們走向哪里，不過我們可以確定，無論它帶給我們什么，肯定都會很有趣。

慢慢來比較快，希望對你有所幫助～

文章來源：站酷作者：Clippp
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

評論(0) 瀏覽(1837)

132021-10

騰訊公益小紅花火爆全網(wǎng)，背后的設(shè)計思維是什么？

ui設(shè)計分享達(dá)人

今年是騰訊發(fā)起99公益日的第七個年頭。騰訊公益不僅在配捐機制、產(chǎn)品體系、企業(yè)聯(lián)動、公益基礎(chǔ)建設(shè)上全面升級，還連接數(shù)億網(wǎng)友、近萬家慈善組織和愛心企業(yè)，為全民公益交出一張漂亮的成績單：

數(shù)據(jù)顯示，小紅花互動人次超1.25億，送小紅花、答公益題目等行為公益實現(xiàn)破圈傳播，億萬愛心網(wǎng)友共同領(lǐng)取了超9000萬朵助力小紅花，共計有超過6870萬人次在99公益日期間捐出35.69億元，加上騰訊公益慈善基金會的6億元資金支持，共募得善款41.69億元。

99 公益日為何能實現(xiàn)破圈傳播，作為騰訊公益日和 99 公益日的品牌符號，小紅花的設(shè)計背后又傳達(dá)了怎樣的思考？今天就來聊聊小紅花那些事。

2015年9月9日，騰訊公益聯(lián)合國內(nèi)數(shù)百家公益組織、知名企業(yè)共同發(fā)起了中國第一個互聯(lián)網(wǎng)公益日。

為了讓用戶了解互聯(lián)網(wǎng)公益的核心特色與參與方式，讓更多的人參與到互聯(lián)網(wǎng)公益中，第一屆 99 公益日的活動主題定調(diào)為“一起愛”，在logo的設(shè)計中也借用了“無限”符號表示“愛無止境”的含義。

在前三年的 99 公益日中，募款額度得到了廣度上的增長，在用戶已經(jīng)了解到互聯(lián)網(wǎng)公益低門檻、多形式、透明度、可記錄的特點之后，如何留住用戶，對互聯(lián)網(wǎng)公益形成日常習(xí)慣和持久投入，就成為了設(shè)計亟需解決的問題。

“小紅花”是騰訊公益平臺在2018年給出的答案。因為小紅花作為國人的集體回憶，關(guān)聯(lián)著你我兒時從老師那里收獲到的鼓勵。每一朵小紅花背后，是我們完成的一件“好事”。

延續(xù)小紅花的記憶線索進(jìn)行延展，在公益中，小紅花是對用戶的捐贈給予的最大肯定，是受助者正在發(fā)生的改變。在傳播上，小紅花是記錄用戶每一次公益行為的符號，通過「戴小紅花，一塊做好事」而得到成就感的有效激勵。

于是，2018年99公益日的主視覺上，無數(shù)的愛心化為花瓣，匯聚成一朵小紅花，這是小紅花在騰訊公益平臺的初次綻放。

為了讓品牌有延續(xù)性，加深用戶對小紅花和99公益日的認(rèn)知，小紅花作為核心品牌元素開始貫穿在每一年99公益日的主視覺中，并通過不同的畫面故事表達(dá)每一年的主題。

比如，2018年的主題是積小善，成大愛，于是在設(shè)計中，讓很多愛心小花匯聚在一起，讓小的愛心變成大愛；2019年的主題是一塊做好事，通過每個人的善意匯聚成小紅花……

在2019年，“小紅花”正式成為騰訊公益與99公益日的品牌符號。

從2020年開始，小紅花開始發(fā)力于傳播，聯(lián)動外部品牌 IP 如QQ、微信、Bilibili、狐妖小紅娘等開啟推廣，在各種不同的場景，詮釋“一塊做好事”的內(nèi)涵。

這一年，小紅花之歌火了，同名神曲MV播放量超1億次；在線下，小紅花也開到喜茶等連鎖品牌的店里。

而2021年，屬于用戶獨特的小紅花愛心賬戶上線了，用戶在騰訊公益平臺做好事打卡，向好友發(fā)起集小紅花的自發(fā)傳播，從而爭取更大的配捐額，在增強用戶捐款積極性的同時，撬動更多用戶了解并參與到活動中來。

小紅花愛心賬戶

用戶還可將積累的小紅花兌換周邊禮品。在推廣上則從創(chuàng)作入手，發(fā)起共繪小紅花的活動。

可以說，小紅花串聯(lián)起了用戶從感知、到行動、到反饋的全流程，保證了用戶參與互聯(lián)網(wǎng)公益的動機和動力。

在預(yù)熱推廣階段，騰訊公益推出一支小紅花為主角的宣傳片，試圖為小紅花是什么，做出來自官方的定義。

不管是線上線下征集用戶繪制的小紅花，“每個人的小紅花”畫展，還是在感恩日隨證書送出的小紅花畫作，都讓用戶全方位地感受到騰訊公益小紅花的“玩法”，也為小紅花元素賦予了豐富的內(nèi)涵。

征集到的部分小紅花作品

寄出公益榮譽證書

愛心用戶的開箱視頻

99公益日期間，小紅花與騰訊新聞、微保、騰訊視頻、騰訊會議等多產(chǎn)品的玩法聯(lián)動，讓小紅花開遍“地球村”。

多款產(chǎn)品聯(lián)動一塊做好事

而在線下，小紅花也伴隨系列廣告，落地在線上下，IP聯(lián)盟、異業(yè)合作、核心城市燈光投影秀等，讓小紅花無處不在。

部分城市地標(biāo)燈光投影秀

最后，小紅花這一品牌形象的成功，不僅在公益設(shè)計這一領(lǐng)域上有借鑒的意義，在品牌IP的設(shè)計上同樣有值得學(xué)習(xí)的地方。

文章來源：站酷作者：零弟小武
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

評論(0) 瀏覽(2126)

132021-10

為什么越簡單的設(shè)計越說不出理由

ui設(shè)計分享達(dá)人

常見場景

設(shè)計師日常工作中，經(jīng)常遇見的那些顯而易見的設(shè)計邏輯，卻難以給出設(shè)計理由的情況到底指的是什么呢？

以我自己近期的工作為例，不妨為大家舉個簡單的例子：

下圖是一個補貼規(guī)則的設(shè)置流程，在用戶未設(shè)置補貼規(guī)則之前，明確告知用戶還未設(shè)置補貼規(guī)則，當(dāng)用戶設(shè)置了補貼規(guī)則后，可以對補貼規(guī)則進(jìn)行修改。

我認(rèn)為這是一個非常簡單且合理的頁面路徑跳轉(zhuǎn)，并且在很多現(xiàn)有的產(chǎn)品中都有類似這樣的邏輯存在。然而在與上下游同學(xué)對接的過程中，卻遇到了不同的意見：有人認(rèn)為沒有必要區(qū)分用戶是否設(shè)置了規(guī)則，用戶未設(shè)置規(guī)則可以直接展示系統(tǒng)默認(rèn)的補貼條件和補貼范圍，如果用戶認(rèn)為不合理，自行修改便是。

不知道大家看到這里是什么感覺，我在聽到「方案二」時的反應(yīng)是：能夠理解卻并不認(rèn)同，說不出來哪里不對，就是覺得這事它不應(yīng)該這樣。

以上，就是在我工作中發(fā)生的一次非常具體的案例。

直覺真的不如推理靠譜嗎？

那么為什么我會產(chǎn)生“感覺哪里不對，卻又說不出為什么”的強烈感受呢？

最直接的原因是，這樣的設(shè)計方案（方案一）是用直覺做出來的，缺少了對方案本身的思考。

直覺，指的是那些沒有經(jīng)過分析推理的觀點，因此常常給人一種不靠譜的感覺。

可是有時候我們依賴「直覺」做事真的就完全不靠譜嗎？帶著這樣的疑惑，我去查閱了一些相關(guān)的資料來輔助我更好理解這種直覺性思考，恰好找到了一個真實的實驗案例：

1997年，Bechara, Antoine et在一個賭博游戲?qū)嶒炛邪l(fā)現(xiàn)：「直覺」比「意識」更能指引正常人做出有利的的選擇。

該實驗先后邀請了10名正常人和6名前額葉損傷的決策缺陷患者，以探究人們做出正確選擇是在對相關(guān)知識進(jìn)行推理之前還是之后。在游戲開始前，工作人員給予每位參與者2000美金、發(fā)放4副牌，要求參與者在游戲過程中翻出100張卡片，并盡可能的多贏錢，但他們不會告知參與者每副牌中的卡片價值：從A、B兩副牌中翻出正常的卡片能賺100美金，C、D兩副牌中的正?？ㄆ?0美金，同時每副牌中也隱藏著罰款，A、B兩副牌中的罰款比C、D兩副牌的罰款重，參與者很可能會輸光所有的錢。

實驗結(jié)果顯示：正常人在意識到哪副牌贏面更大之前就開始選擇有利的卡牌，而決策缺陷患者即使知道了正確的策略，卻仍然繼續(xù)選擇對自己不利的卡牌。

根據(jù)上述實驗，我們起碼能發(fā)現(xiàn)直覺未見得不可靠，也就是說，憑借直覺出的設(shè)計方案，并不意味著不是一個正確的方案。

可是在日常溝通協(xié)作的過程中，「直覺設(shè)計」一旦遇到不同的意見，就會缺少理論支撐。決策者無法判斷設(shè)計師的直覺是否可靠，從而覺得方案本身也不可靠。

遇到這種看似「死胡同」的情況，我們應(yīng)該怎么去思考呢？

很簡單，直覺在前，策略性推理在后。

喬納森?海特（Jonathan Haidt），著名社會心理學(xué)家，在《正義之心》中有提到：

判斷和論證是兩個相互分離的過程，直覺與推理的關(guān)系就像大象與騎象人，騎象人（推理）騎在大象（直覺）上，騎象人不斷發(fā)展以服務(wù)于大象。

拿上述的方案來說，當(dāng)我面對這類的質(zhì)疑時，我也會有愣住，但我知道我不能驚慌，而是該讓騎象人（推理）表演了。

其實仔細(xì)分析一下上述案例就會發(fā)現(xiàn)，方案一和方案二最本質(zhì)的區(qū)別在于：

是否需要區(qū)分用戶（商家）自行設(shè)置過「補貼規(guī)則」？

百度百科對規(guī)則的定義是：

規(guī)則，一般指由群眾共同制定、公認(rèn)或由代表人統(tǒng)一制定并通過的，由群體里的所有成員一起遵守的條例和章程。

規(guī)則本身是屬于利益相關(guān)者之間的約定。按照這個邏輯，「補貼規(guī)則」可以理解為用戶（商家）與消費者形成的基本約定。

用戶（商家）未設(shè)置規(guī)則，如果系統(tǒng)直接展示默認(rèn)的補貼條件和補貼范圍，就會給用戶（商家）一種平臺借以商家的名義與消費者形成了約定的印象，這與現(xiàn)實不符，甚至可能給用戶（商家）的業(yè)務(wù)帶來不必要的紛爭。因此，區(qū)分用戶是否設(shè)置過補貼規(guī)則是非常有必要的。

為什么要為自己的設(shè)計辯護(hù)？

在上述場景中，雖然我的直覺先于理性給我發(fā)送了信號，但設(shè)計師如果光依靠直覺卻給不出任何說明，同樣會帶來一系列麻煩。

湯姆·格里弗（Tom Greever）在一篇文章提到，偉大的設(shè)計往往取決于你怎么說。

描述設(shè)計不是一件容易的事情，但每個設(shè)計師都不得不向很多沒有設(shè)計經(jīng)驗的人講述自己的設(shè)計，并且要讓他們信服自己是對的，這群人很可能是方案的決策者。決策者通常會選擇那個聽上去最合理的方案，所以方案的表述對于最終方案的確立至關(guān)重要。

普通設(shè)計師和頂級設(shè)計師之間的差距不僅僅是他們解決問題的能力，還在于他們能否用一種讓人心服口服、并促使人們同意的方式來闡述他們是怎么解決問題的。理論上，最好的設(shè)計應(yīng)該勝出，然而事實并非如此，設(shè)計評審很容易變成設(shè)計批判會，每個人都在告訴設(shè)計師要怎么設(shè)計。

最終，那些能夠說服別人“我是對的”的人會勝出。設(shè)計師如果沒有辦法說服別人為什么他們要這么做，就不得不按照他們不同意的方式去修改設(shè)計，原因僅僅是因為他們沒有辦法簡要的為自己的設(shè)計辯護(hù)。

聽起來似乎這些決策有失公允，甚至成了設(shè)計師的辯護(hù)大會，那么對于一些有著出色能力卻不善言辭的設(shè)計師而言，就真的沒有任何方法了嗎？

如何突破直覺，能言善辯？

設(shè)計師要想守衛(wèi)自己的設(shè)計，就要警惕那些單憑設(shè)計直覺做出來的方案。

設(shè)計直覺的形成與個人經(jīng)歷、閱讀經(jīng)歷相關(guān)。遇到相似的問題，設(shè)計師如果有這方面的經(jīng)驗固然是好的，直接復(fù)用之前的做法可以大大提升設(shè)計效率。但我們完成設(shè)計后，最好想想哪些地方存在路徑依賴，以確保自己的方案能經(jīng)得住質(zhì)疑。

一個最實用的可以判斷自己的設(shè)計方案，是不是由直覺得來的，就是多向自己提問。

同樣，我們來用實際的案例做個說明：

想想下圖中「智能上傳」「更多操作」按鈕放在表格的左下方行不行？

很明顯不行，但重點是支持這么做不行的理由是什么？

如果你的理由是：

“別的頁面是將按鈕放在了列表左上角的”

“放在左下角不好看呀”

“沒見過有產(chǎn)品這么放啊”

“......”

那這個方案就是直覺設(shè)計的產(chǎn)物了。

想要突破直覺設(shè)計，設(shè)計師需要盡可能在每個設(shè)計點上多思考幾步，比如：

為什么別的頁面會將按鈕放在左上角？

根據(jù)2006年NNGroup 在眼動實驗中的發(fā)現(xiàn)，人們在網(wǎng)絡(luò)中的閱讀成F型，即用戶進(jìn)入頁面中的第一眼，通常會落在頁面的左上角，也就是說左上方的區(qū)域是頁面的黃金區(qū)?！钢悄苌蟼鳌埂父嗖僮鳌箤儆陧撁娴暮诵牟僮?，那么放在列表左上方是非常合理的。

此外，我們可以看到頁面的翻頁器是可以篩選列表展示的條數(shù)，假設(shè)用戶設(shè)置的條數(shù)，超出了屏幕顯示范圍，也就意味用戶進(jìn)入到頁面會看不到操作選項，所以按鈕放在表格的左下方也是不合理的。

為什么別的頁面按鈕放在左上角這個頁面也要這么做？

因為我們需要保障產(chǎn)品的一致性，產(chǎn)品的核心操作方式保持一致，可以有效地降低用戶的學(xué)習(xí)成本，避免不必要的思考。

總結(jié)

在設(shè)計協(xié)作的過程中，設(shè)計師不可避免地會接收到來自四面八方的聲音，而我自己也曾在設(shè)計溝通中陷入過類似困境，因此我越發(fā)明白只有清晰地表述出自己的設(shè)計思考，才可能贏得每個人的支持。

憑借直覺出的設(shè)計方案，并不意味著不是一個正確的方案。
直覺在前，策略性推理在后。
頂尖的設(shè)計師，也是頂尖的交流者。
要想守衛(wèi)自己的設(shè)計，就要警惕那些單憑設(shè)計直覺做出來的方案。
多向自己提問，以確保自己的方案能經(jīng)得住質(zhì)疑。

以上是關(guān)于這篇文章的關(guān)鍵思考總結(jié)，回到設(shè)計師個體而言，我認(rèn)為我們需要對直覺設(shè)計保持警惕，因為看似簡單的設(shè)計背后往往蘊含著復(fù)雜的設(shè)計原理，而一個好的設(shè)計師除了擁有過硬的設(shè)計能力，強大的設(shè)計思考力和表達(dá)能力以外，我相信同樣在跨學(xué)科的研究和學(xué)習(xí)上會遠(yuǎn)強于普通設(shè)計師，否則根本無法支撐起背后的設(shè)計思考。

文章來源：站酷作者：范思蜀
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

評論(0) 瀏覽(1573)

262021-9

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航，到底哪種更好用？

ui設(shè)計分享達(dá)人

桌面和大屏幕上導(dǎo)航欄要怎么設(shè)計其實是一個經(jīng)常被拿來探討的問題，如今這也是 B 端設(shè)計中繞不開的一個設(shè)計問題。Jennifer Rose Kingsburg 曾經(jīng)有針對網(wǎng)頁的三級菜單導(dǎo)航進(jìn)行過一份研究，結(jié)論是在左側(cè)設(shè)置導(dǎo)航好處多多。此外還有很多類似的研究，你可以在這里看到很多相關(guān)研究的摘要。值得注意的是，這些研究大都是 2017年之前的研究成果，而如今很多設(shè)計范式發(fā)生了變化。