相信網(wǎng)站視覺(jué)設(shè)計(jì)的重要性大家應(yīng)該都清楚，對(duì)于普通訪客來(lái)說(shuō)，網(wǎng)站的框架、交互邏輯等這些都是其次的，訪客首先感受到的是網(wǎng)站的視覺(jué)設(shè)計(jì)，同時(shí)視覺(jué)也能夠直觀地表達(dá)出我們所要傳遞的價(jià)值。因此，我們?cè)诮ㄔO(shè)網(wǎng)站時(shí)，一方面需要確保網(wǎng)站的視覺(jué)效果足夠優(yōu)秀，另一方面需要保證視覺(jué)能夠傳遞正確的商業(yè)價(jià)值。
藝術(shù)與商業(yè)的本質(zhì)其實(shí)是感性與理性，兩者之間沒(méi)有絕對(duì)的好與壞，相輔相成才是發(fā)揮價(jià)值的關(guān)鍵。
企業(yè)以盈利為目的，其網(wǎng)站不可避免地也附帶了商業(yè)屬性，甚至是網(wǎng)站本身就是為了商業(yè)而創(chuàng)造出來(lái)的，其商業(yè)價(jià)值占比也更重。但人類作為視覺(jué)動(dòng)物，視覺(jué)感受對(duì)于訪客來(lái)說(shuō)尤為重要，視覺(jué)上的演繹比起網(wǎng)站其他內(nèi)容，更會(huì)影響網(wǎng)站的可信度，因此，網(wǎng)站的視覺(jué)起碼需要保證符合受眾群體的基礎(chǔ)審美。
增長(zhǎng)超人這些年接觸了大大小小幾千家企業(yè)及企業(yè)官網(wǎng)，深入探究之后我們找到了一些規(guī)律，網(wǎng)站的視覺(jué)設(shè)計(jì)其實(shí)關(guān)鍵在于：
·品牌基礎(chǔ) VI 設(shè)計(jì)的應(yīng)用；
·平衡藝術(shù)與商業(yè)的網(wǎng)站設(shè)計(jì)思維。
我們常見(jiàn)的企業(yè)網(wǎng)站存在著一個(gè)嚴(yán)重的問(wèn)題，缺乏品牌辨識(shí)度，假如把網(wǎng)站左上角的品牌 LOGO 遮住，可能完全看不出這是哪家公司的官網(wǎng)，又或者把品牌 LOGO 替換一下，就成了別家公司的官網(wǎng)。
這是網(wǎng)站嚴(yán)重缺乏品牌視覺(jué)識(shí)別所導(dǎo)致地，這種網(wǎng)站無(wú)法讓訪客記住其品牌，更無(wú)法在訪客心里占領(lǐng)一席之地。
品牌基礎(chǔ) VI 設(shè)計(jì)的應(yīng)用是最基礎(chǔ)也是最容易忽視的細(xì)節(jié)，它不僅是存在于初期建站，更是在網(wǎng)站迭代中，持續(xù)保持企業(yè)網(wǎng)站差異化的關(guān)鍵。
VI（視覺(jué)識(shí)別系統(tǒng)）是品牌的視覺(jué)符號(hào)化，是品牌識(shí)別中最具傳播力和感染力的部分，它可以將品牌識(shí)別系統(tǒng)的非可視化內(nèi)容，轉(zhuǎn)化為靜態(tài)的視覺(jué)識(shí)別符號(hào)，它包含了品牌 LOGO、標(biāo)準(zhǔn)色、象征圖形、標(biāo)準(zhǔn)字體等等。另外還會(huì)包含品牌核心價(jià)值和個(gè)性，不同的品牌 VI 是各個(gè)品牌之間形成差異化的根本原因之一。
因此，我們可以通過(guò)與品牌 VI 相結(jié)合的方式進(jìn)行設(shè)計(jì)，品牌 VI 可以有非常豐富多樣的應(yīng)用形式，在廣泛的層面上進(jìn)行直接的傳播，能夠在不同場(chǎng)景中進(jìn)行應(yīng)用，讓人們快速辨認(rèn)出該品牌。
品牌 LOGO 則是最具辨識(shí)度的視覺(jué)符號(hào)，通過(guò)提取 LOGO 中的基因，延用到我們網(wǎng)站中，更有助于提升品牌辨識(shí)度。我們可以從兩個(gè)維度來(lái)提?。?
·LOGO 的“形”
·LOGO 的“色”
首先，我們可以通過(guò)提取 logo 的形狀作為網(wǎng)站視覺(jué)設(shè)計(jì)中的「視覺(jué)符號(hào)」，也可以參考 VI 手冊(cè)中的「象征圖形」進(jìn)行延展，提取 logo 外形結(jié)構(gòu)做成相應(yīng)的 icon 或是動(dòng)效等是 logo 元素的直觀體現(xiàn)。
舉個(gè)例子，天虹的 logo 是一抹橙色極簡(jiǎn)的彩虹形狀，天虹企業(yè)簡(jiǎn)介的Banner 以及每個(gè)頁(yè)面的底部導(dǎo)航，都有將 Logo 這一特征延展出來(lái)的圖形設(shè)計(jì)。
▲天虹官網(wǎng)頁(yè)面 Banner 展示（增長(zhǎng)超人出品）
▲天虹官網(wǎng)底部展示（增長(zhǎng)超人出品）
這種方法需要我們很好地提取 logo 中的部分結(jié)構(gòu) , 或根據(jù)造型轉(zhuǎn)變?yōu)閯?dòng)效、icon 等，這樣在網(wǎng)頁(yè)中的融入感十分可觀。
提取 logo 中的標(biāo)準(zhǔn)色或代表性的顏色與網(wǎng)頁(yè)元素相呼應(yīng)，也是一種常見(jiàn)的方式。將 Logo 顏色通過(guò)網(wǎng)站中的文字、頁(yè)面板式、icon 設(shè)計(jì)表現(xiàn)出來(lái)，這是很好的一種呼應(yīng)方法。
比如：綠色是綠革的標(biāo)志性顏色。打開(kāi)綠革官網(wǎng)，可以清晰直觀地看到綠革將 logo 中的兩種綠色元素，融入到網(wǎng)站界面 UI 中，需要突出的文案也會(huì)運(yùn)用這兩種綠色去做表達(dá)和強(qiáng)調(diào)。
▲ 綠革L(fēng)OGO
▲ 綠革官網(wǎng)首頁(yè)展示（增長(zhǎng)超人出品）
在網(wǎng)站設(shè)計(jì)中，我們可以將標(biāo)準(zhǔn)色換到標(biāo)題文字、icon、控件。訪客打開(kāi)網(wǎng)站時(shí)會(huì)很容易被這些顏色吸引，也不會(huì)感到突兀，合理運(yùn)用 logo 顏色，可以統(tǒng)一網(wǎng)站的整體視覺(jué)且做到突出重點(diǎn)與更有效地傳達(dá)信息。
品牌 VI 可以在三個(gè)維度應(yīng)用到網(wǎng)站設(shè)計(jì)，來(lái)提升網(wǎng)站的辨識(shí)度：
品牌 VI 的應(yīng)用常見(jiàn)的方式就是在 icon 圖標(biāo)的設(shè)計(jì)上。icon 作為網(wǎng)站的重點(diǎn)圖形，能夠讓訪客感知品牌，精致的 icon 可以讓表達(dá)更簡(jiǎn)單高效，要打造一套精致的 icon，我們可以從識(shí)別性、規(guī)范性、整體性和品牌感四個(gè)方面著手。
識(shí)別性：icon 的作用即是幫助訪客理解網(wǎng)站信息，特別是在沒(méi)有文字說(shuō)明 的情況下，icon 的設(shè)計(jì)需要具備讓訪客快速認(rèn)出的高識(shí)別度，不能讓訪客 產(chǎn)生疑惑。
規(guī)范性：每個(gè) icon 要保持視覺(jué)大小、色彩等一致性，以及圖標(biāo)飽滿度等細(xì) 節(jié)都需遵循同一規(guī)律，例如：繪制風(fēng)格是否一致，使用的圓角或直角是否統(tǒng) 一等等。
整體性：除了 icon 自身的設(shè)計(jì)之外，整體的設(shè)計(jì)風(fēng)格要與網(wǎng)站基調(diào)達(dá)成一 致，不同網(wǎng)站有不同定位，面向的目標(biāo)訪客群體自然有所差別，那么整個(gè)網(wǎng) 站的 icon 設(shè)計(jì)也不一樣。
品牌感 : 提升品牌辨識(shí)度離不開(kāi)品牌感， icon 設(shè)計(jì)要與品牌調(diào)性、理念相 符合，傳達(dá)給訪客一致的感受。比如：提取品牌色、采取品牌圖形作為圖標(biāo)設(shè)計(jì)視覺(jué)元素，從而加深訪客對(duì)品牌色的感知。
icon 設(shè)計(jì)中的品牌感是將品牌 VI 應(yīng)用到網(wǎng)站的關(guān)鍵，比如上方的那套icon，是由增長(zhǎng)超人根據(jù)英威騰本身的品牌色彩和品牌調(diào)性進(jìn)行設(shè)計(jì)，應(yīng)用于官網(wǎng)是這樣的：
另外，icon 是網(wǎng)站中不可或缺的元素，充當(dāng)路標(biāo)，讓訪客能知道點(diǎn)擊后下一步是什么，也就有明確的心理預(yù)期。如果 icon 按鈕不夠明確，訪客可能會(huì)不知道下一步是要購(gòu)買(mǎi)產(chǎn)品還是注冊(cè)用戶，并且可能直接瀏覽網(wǎng)站后就直接離開(kāi)。
版式如何融入品牌調(diào)性是很多設(shè)計(jì)師會(huì)忽略的一點(diǎn)，訪客來(lái)瀏覽網(wǎng)站時(shí)，首先感受到的第一點(diǎn)是色彩，第二則是版式，也就是整體給訪客的感覺(jué)。符合品牌定位且具有辨識(shí)度的網(wǎng)頁(yè)版式設(shè)計(jì)應(yīng)該怎么做，它更需要從品牌特性中提取，無(wú)法像 icon 一樣從品牌 logo 和標(biāo)準(zhǔn)色中提取元素就可以做到的，更多是一個(gè)風(fēng)格化的設(shè)計(jì)。
除了靜態(tài)的圖形設(shè)計(jì)，品牌 VI 也可以融入網(wǎng)站動(dòng)效，利用品牌 LOGO 的設(shè)計(jì)元素和結(jié)構(gòu)進(jìn)行設(shè)計(jì)的動(dòng)效，可以讓整個(gè)網(wǎng)站更有品牌風(fēng)格。一個(gè)好的動(dòng)效能夠滿足網(wǎng)站功能的表達(dá)，強(qiáng)化品牌特質(zhì)，而不是只追求表面炫酷花哨的效果。
▲天虹部分動(dòng)效展示（增長(zhǎng)超人出品）
在網(wǎng)站視覺(jué)設(shè)計(jì)中，品牌 VI 的應(yīng)用不僅能夠形成區(qū)別于同行的差異化為品牌賦能，還能通過(guò)規(guī)范化的 VI 應(yīng)用，提高訪客對(duì)其品牌的信任度。
品牌的基礎(chǔ) VI 設(shè)計(jì)應(yīng)用于網(wǎng)站是我們的常規(guī)操作，但要注意細(xì)節(jié)，別忽視了其作為網(wǎng)站基礎(chǔ)的重要性，對(duì)于網(wǎng)站視覺(jué)設(shè)計(jì)，我們?cè)诒ＷC基礎(chǔ)設(shè)計(jì)無(wú)誤的情況下，需要深入到思維上，一個(gè)網(wǎng)站的設(shè)計(jì)看似簡(jiǎn)單，像是色調(diào)、排版，都是設(shè)計(jì)師的基礎(chǔ)功夫，但是要真正做到一個(gè)優(yōu)質(zhì)的網(wǎng)站，其實(shí)并沒(méi)有想象中那么容易。
開(kāi)頭我們有提到：視覺(jué)設(shè)計(jì)如何平衡藝術(shù)與商業(yè)？大多數(shù)設(shè)計(jì)師在初入職場(chǎng)時(shí) , 都不具備商業(yè)思維，首先會(huì)經(jīng)歷一段自我懷疑的過(guò)程：完成一個(gè)稿件后，反反復(fù)復(fù)被要求改稿，始終無(wú)法達(dá)到上級(jí)的要求，個(gè)人價(jià)值開(kāi)始逐漸模糊，淪為一介改稿工具人。
在我們看來(lái)，企業(yè)網(wǎng)站的視覺(jué)設(shè)計(jì)必須具備商業(yè)思維，也就是視覺(jué)設(shè)計(jì)需要體現(xiàn)其想表達(dá)的商業(yè)價(jià)值。因此，在建設(shè)企業(yè)網(wǎng)站時(shí)，我們需要記住以下幾點(diǎn)。
不為設(shè)計(jì)而設(shè)計(jì)不是將藝術(shù)“一棒打死”，也并非拋棄創(chuàng)新創(chuàng)意，而是應(yīng)該更注重于強(qiáng)化產(chǎn)品，給滿足需求的產(chǎn)品力加持。市面上有很多花里胡哨的網(wǎng)站，第一眼可能會(huì)驚艷到你，但是再深入瀏覽發(fā)現(xiàn)內(nèi)容很空洞。事實(shí)上，能夠讓訪客長(zhǎng)時(shí)間記住你的并非第一眼，而是其內(nèi)在，也是我們一直堅(jiān)持的長(zhǎng)期主義價(jià)值。
過(guò)于強(qiáng)調(diào)設(shè)計(jì)、藝術(shù)、創(chuàng)意，不僅會(huì)給網(wǎng)站帶來(lái)開(kāi)發(fā)難度，也給訪客瀏覽帶來(lái)沉重的負(fù)擔(dān)。
商業(yè)環(huán)境下，視覺(jué)設(shè)計(jì)的本質(zhì)應(yīng)該是強(qiáng)化產(chǎn)品，升華價(jià)值，實(shí)際上，設(shè)計(jì)同樣需要具備產(chǎn)品思維。增長(zhǎng)超人在建站中已將產(chǎn)品思維全流程化，這種模式下，每一環(huán)都串聯(lián)起來(lái)，不管是用戶體驗(yàn)，還是價(jià)值傳遞都非常有利。
產(chǎn)品思維全流程化
設(shè)計(jì)需要理解功能目的，為什么策劃這個(gè)功能？如何通過(guò)設(shè)計(jì)讓訪客使用更順暢？如何讓訪客愛(ài)上這個(gè)功能？這都是設(shè)計(jì)需要不斷探討和思考的問(wèn)題。設(shè)計(jì)與產(chǎn)品之間通過(guò)產(chǎn)品思維進(jìn)行聯(lián)動(dòng)，能夠確保核心目標(biāo)一致、步調(diào)一致，真正創(chuàng)造出一個(gè)有價(jià)值的網(wǎng)站。
我們始終要對(duì)設(shè)計(jì)的結(jié)果負(fù)責(zé)，各個(gè)環(huán)節(jié)的品牌維護(hù)及更新必須形成閉環(huán)的設(shè)計(jì)思考，最終達(dá)到“設(shè)計(jì)應(yīng)時(shí)輸出，信息精準(zhǔn)傳達(dá)，符合結(jié)果預(yù)期”，在落地層面始終執(zhí)行著的“四環(huán)建設(shè)”：
第一環(huán)：讓出品更好看（視覺(jué)側(cè)）
第二環(huán)：讓出品更好用（體驗(yàn)側(cè)）
第三環(huán)：讓出品高轉(zhuǎn)化（營(yíng)銷(xiāo)側(cè)）
第四環(huán)：讓出品高價(jià)值（品牌側(cè)）
我們一直在講視覺(jué)設(shè)計(jì)，視覺(jué)設(shè)計(jì)不僅是靜態(tài)形式，還可以是動(dòng)態(tài)形式，也就是網(wǎng)站上的交互動(dòng)效，交互不可避免涉及到的領(lǐng)域就是「用戶體驗(yàn)」。08年蘋(píng)果推出 AppStore，App 興起至今，用戶體驗(yàn)就廣為人知，在 App 的設(shè)計(jì)領(lǐng)域更是奉為“宗旨”，當(dāng)然，在網(wǎng)站設(shè)計(jì)上同樣如此，“以用戶為本”就是產(chǎn)品的關(guān)鍵價(jià)值，這是我們不可忽視的方面。我們可以參考以下提高用戶體驗(yàn)的關(guān)鍵因素：
有用：內(nèi)容能夠滿足需求。
可用：網(wǎng)站的內(nèi)容應(yīng)該很容易被找到。
可?。?/strong>設(shè)計(jì)元素應(yīng)該貼合情感且具備可欣賞性。
可發(fā)現(xiàn)：網(wǎng)站內(nèi)容容易被定位、被找到且可導(dǎo)航。
無(wú)障礙：為有障礙的用戶提供幫助。
可信：網(wǎng)站內(nèi)容應(yīng)該有權(quán)威性且值得被相信。
網(wǎng)站的視覺(jué)設(shè)計(jì)一方面需要服務(wù)于內(nèi)部，另一方面則服務(wù)于用戶，內(nèi)部指的是內(nèi)部需求，比如上級(jí)、老板等他們的視覺(jué)審美，這是不可避免的，其中平衡的技巧在這里就不過(guò)多講解了。
重點(diǎn)還是在于用戶身上，也就是訪客。先通過(guò)市場(chǎng)調(diào)研分析出訪客畫(huà)像，可以掌握對(duì)訪客的審美基礎(chǔ)和交互邏輯認(rèn)知，結(jié)合起來(lái)進(jìn)行設(shè)計(jì)，當(dāng)然我們也提倡盡可能簡(jiǎn)化交互，并且讓網(wǎng)站貼合訪客喜好，內(nèi)容一目了然。
舉個(gè)例子：兒童教育服務(wù)的品牌網(wǎng)站，在慣性思維中，大多數(shù)人會(huì)將其設(shè)計(jì)得更偏向兒童 , 迎合兒童的喜好 , 但是真正瀏覽這個(gè)網(wǎng)站的訪客其實(shí)是父母。
因此，從偏向兒童的思路一開(kāi)始就是錯(cuò)誤的，這也是很多企業(yè)建設(shè)網(wǎng)站的時(shí)候會(huì)掉入的誤區(qū)，了解用戶是設(shè)計(jì)不可缺少的一步。
增長(zhǎng)思維作為增長(zhǎng)超人網(wǎng)站建設(shè)三大思維之一，也是三大思維中最能激發(fā)網(wǎng)站商用價(jià)值的思維。在視覺(jué)設(shè)計(jì)當(dāng)中，運(yùn)用增長(zhǎng)思維能夠有效強(qiáng)化網(wǎng)站，加強(qiáng)網(wǎng)站價(jià)值。
我們需要先探討“網(wǎng)站內(nèi)容中哪些信息最重要？”“傳遞這些信息的目的是什么？”例如，一個(gè)促銷(xiāo)活動(dòng)版塊的營(yíng)銷(xiāo)點(diǎn)是免費(fèi)領(lǐng)取資料，我們需要理解：最打動(dòng)訪客的是資料還是“免費(fèi)”，是資料的圖片需要更突出還是“免費(fèi)”的文案更突出？在商業(yè)之下，設(shè)計(jì)也需要理解營(yíng)銷(xiāo)，也需要懂增長(zhǎng)。
理解了基礎(chǔ)邏輯，就需要進(jìn)行下一步——強(qiáng)化它們，有效傳遞價(jià)值，實(shí)際落地可以參考兩個(gè)基礎(chǔ)理論：
·視覺(jué)動(dòng)線
·視覺(jué)層級(jí)
視覺(jué)動(dòng)線是指人們?cè)陂喿x時(shí)，視覺(jué)移動(dòng)時(shí)所形成的方向路徑。早在十多年前，用戶體驗(yàn)專家雅各布·尼爾森博士提到“人們很少逐字閱讀網(wǎng)頁(yè)，相反，他們掃描頁(yè)面，挑選單個(gè)單詞和句子”。正是如此，人們?cè)陂喿x的時(shí)候才會(huì)形成幾種常見(jiàn)的視覺(jué)動(dòng)線規(guī)律。
Z 型
F 型
基于這兩種常見(jiàn)的視覺(jué)動(dòng)線，我們?cè)谧鼍W(wǎng)站的版式設(shè)計(jì)時(shí)，可以更合理地策劃視覺(jué)動(dòng)線，其好處不僅能夠幫助訪客快速閱讀，快速獲取信息，提升用戶體驗(yàn)，還可以幫助我們引導(dǎo)訪客閱讀預(yù)設(shè)的信息，高效傳遞高價(jià)值信息，提高營(yíng)銷(xiāo)效率。
視覺(jué)層次應(yīng)該很好理解，即人們?cè)陂喿x時(shí)，能從視覺(jué)中感受到信息的層次，優(yōu)秀的視覺(jué)層次能夠非常高效地引導(dǎo)訪客閱讀更多內(nèi)容，并且通過(guò)信息的優(yōu)先級(jí)設(shè)計(jì)更直觀地幫助我們達(dá)成相應(yīng)的數(shù)據(jù)指標(biāo)。
比如下面兩個(gè)示例：
視覺(jué)動(dòng)線可以作為網(wǎng)站整體的版式設(shè)計(jì)思路，而視覺(jué)層次則是單個(gè)版塊的設(shè)計(jì)方向，版塊的視覺(jué)層級(jí)設(shè)計(jì)應(yīng)分為三層：
第一層：訪客掃一眼就能理解整個(gè)版塊的主要內(nèi)容；
第二層：訪客通過(guò)仔細(xì)瀏覽能夠獲取關(guān)鍵內(nèi)容；
第三層：訪客想深入了解可以查看更多，引導(dǎo)深入。
通過(guò)上述三層，能有效實(shí)現(xiàn)我們?cè)鲩L(zhǎng)的目的。 常見(jiàn)的設(shè)計(jì)技巧為 : 通過(guò)「大小」、「色彩」、「重量」形成信息之間的層級(jí)對(duì)比，建立信息優(yōu)先級(jí)。
除此之外，我們?cè)诓邉澮恍┚W(wǎng)站轉(zhuǎn)化路徑時(shí)，還涉及到了「 CTA 行動(dòng)號(hào)召按 鈕」的設(shè)計(jì)，這在網(wǎng)站的增長(zhǎng)思維中是常見(jiàn)的應(yīng)用，我們必須確保 CTA 足夠 顯眼、突出、目標(biāo)清晰，常規(guī)技巧包括：顏色對(duì)比、放置顯眼位置、層級(jí)引導(dǎo)、 文案簡(jiǎn)潔清晰。
通過(guò)這兩個(gè)基礎(chǔ)的設(shè)計(jì)理論與增長(zhǎng)思維的結(jié)合，我們可以延伸出很多合理的設(shè)計(jì)思路，形成有理有據(jù)的設(shè)計(jì)語(yǔ)言，有了方法論才是真正的有效設(shè)計(jì)，而非“摸瞎過(guò)河”。
網(wǎng)站的視覺(jué)設(shè)計(jì)可以被視為一種藝術(shù)形式，但與純藝術(shù)截然不同，網(wǎng)站的視覺(jué)設(shè)計(jì)需要建立在牢固的科學(xué)基礎(chǔ)之上，以理性客觀去審視這樣設(shè)計(jì)是否真的能有效傳遞價(jià)值。
視覺(jué)設(shè)計(jì)的本質(zhì)是什么？很多人認(rèn)為只是單純的美，或者無(wú)非就是關(guān)于審美的答案。其實(shí)，這種理解是十分表象的，大多數(shù)人并沒(méi)有理解視覺(jué)設(shè)計(jì)的根本價(jià)值。
視覺(jué)設(shè)計(jì)是網(wǎng)站的一個(gè)重要層面，網(wǎng)站作為互聯(lián)網(wǎng)產(chǎn)品，其視覺(jué)設(shè)計(jì)的本質(zhì)是價(jià)值傳遞，我們一直以增長(zhǎng)思維和產(chǎn)品思維與視覺(jué)設(shè)計(jì)相融合，就是為了實(shí)現(xiàn)高效傳遞高價(jià)值信息。
訪客通過(guò)對(duì)視覺(jué)信息的感知，來(lái)決定自己的行為。當(dāng)我們從信息的角度去理解視覺(jué)設(shè)計(jì)時(shí)，可以打破慣性思維對(duì)我們的限制，因?yàn)橐曈X(jué)設(shè)計(jì)是一個(gè)由抽象信息轉(zhuǎn)換為圖像信息的過(guò)程，理解這層道理才能真正打造出一個(gè)具有高顏值和高價(jià)值的網(wǎng)站。
文章來(lái)源：站酷 作者：增長(zhǎng)超人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
用戶喜歡在網(wǎng)上收藏各種東西，把收藏到的東西占為己有，滿足自我的占有欲，每個(gè)用戶都為此而樂(lè)此不疲。
很多互聯(lián)網(wǎng)產(chǎn)品在用戶點(diǎn)擊收藏后，讓用戶去選擇收藏夾。其實(shí)用戶并不喜歡去選擇，他們只想簡(jiǎn)單的把自己喜歡的東西收藏下來(lái)。
選擇本身并不是一件很容易的事情，尤其是對(duì)于那些有選擇困難癥的人來(lái)說(shuō)。實(shí)際上，我每次都是選默認(rèn)那個(gè)。
這并不是一個(gè)好的用戶體驗(yàn)。
當(dāng)然也有一些做的很好的體驗(yàn)，比如微信的收藏，收藏后會(huì)出現(xiàn)一個(gè)“收藏成功”的非模態(tài)反饋。
同時(shí)可以添加標(biāo)簽，但這個(gè)并非強(qiáng)制，為了滿足那些有這種需求的用戶。添加標(biāo)簽的目的是為了方便用戶在日后的檢索。
在收藏列表，微信會(huì)根據(jù)收藏的內(nèi)容自動(dòng)分成鏈接、文件、圖片和視頻等，最近使用位于第一位。
也就是說(shuō)并不需要用戶去創(chuàng)建自定義分類。
你也可以搜索標(biāo)簽來(lái)找到之前收藏的內(nèi)容。通過(guò)這些方式基本上滿足了大部分用戶的需求。
網(wǎng)站會(huì)根據(jù)你采集的圖片在極短的時(shí)間內(nèi)，自動(dòng)識(shí)別出圖片對(duì)應(yīng)的收藏夾類型。可以直接采集到對(duì)應(yīng)的文件夾。
然而經(jīng)過(guò)測(cè)試，經(jīng)常會(huì)出現(xiàn)誤差。因?yàn)閳D片的分類其實(shí)很復(fù)雜的，屬于高度自定義，很顯然，智能識(shí)別并不是一個(gè)好的解決方案。
花瓣是一個(gè)設(shè)計(jì)師收集靈感的網(wǎng)站，該網(wǎng)站常見(jiàn)的用戶使用場(chǎng)景是，設(shè)計(jì)師在瀏覽素材時(shí)，會(huì)大量采集自己感興趣的素材，但每次都要選擇文件夾，非常繁瑣且低效。
后來(lái)花瓣網(wǎng)加入了快速采集的功能，其邏輯是網(wǎng)站會(huì)默認(rèn)選擇上一次采集的收藏夾，這大大提高了用戶采集圖片的效率。
而如果你需要選擇其他文件夾則可點(diǎn)擊普通采集。這兩種采集方式滿足了設(shè)計(jì)師的不同需求。
社區(qū)類產(chǎn)品有各種點(diǎn)贊，收藏等互動(dòng)信息，但用戶又不想被別人知道這些信息。
因此，在規(guī)劃產(chǎn)品時(shí)需要考慮到用戶互動(dòng)隱私的保護(hù)，這是用戶側(cè)的剛性需求。
抖音個(gè)人主頁(yè)的點(diǎn)贊列表，我記得剛開(kāi)始是公開(kāi)的，且不能設(shè)置為私密。
用戶點(diǎn)贊的視頻會(huì)出現(xiàn)在這里，卻少有人希望這些信息被別人看到，總有些點(diǎn)贊視頻你并不想被別人看到。
如果點(diǎn)贊列表可見(jiàn)，那么用戶在點(diǎn)贊的時(shí)候就會(huì)有所顧慮，這不利于平臺(tái)的互動(dòng)率。
特別是隨著抖音上熟人也越來(lái)越多，強(qiáng)關(guān)系社交場(chǎng)景在漸漸加強(qiáng)。
抖音后來(lái)也發(fā)現(xiàn)了這個(gè)問(wèn)題，把它設(shè)計(jì)成了默認(rèn)隱藏。（當(dāng)然可以自己設(shè)置為公開(kāi)，但只有極少數(shù)用戶會(huì)這樣做。）
由于點(diǎn)贊是私密的，用戶可以隨心所欲的點(diǎn)贊自己喜歡的視頻，毫無(wú)社交壓力。
這是為何？
源于人性心理學(xué)：窺私欲。人人都喜歡窺視別人的隱私，而不喜歡自己的隱私被窺視。
不然為何如今的QQ空間基本上都設(shè)置了權(quán)限，畢竟，誰(shuí)想被別人窺視當(dāng)年那個(gè)煞筆的自己呢？
現(xiàn)在訂閱號(hào)打開(kāi)率越來(lái)越低，朋友圈分享曾是訂閱號(hào)流量來(lái)源的一大入口。
朋友圈早已淪為了一個(gè)人設(shè)打造的陣地，現(xiàn)在的人發(fā)圈越來(lái)越謹(jǐn)慎。
用戶似乎越來(lái)越不愿意在朋友圈分享文章了，除非是有利于自己人設(shè)打造的內(nèi)容。
為了減輕用戶的這種社交壓力，微信推出了“在看”的功能。
用戶點(diǎn)了“在看”后，此文章會(huì)出現(xiàn)在看一看這個(gè)模塊，且七天前的分享將不可見(jiàn)，這就相當(dāng)于一個(gè)弱化版的分享功能。
這將大大減輕用戶分享的社交壓力。對(duì)于公眾號(hào)主來(lái)說(shuō)，相當(dāng)于增加了一個(gè)流量入口，激發(fā)他們創(chuàng)作更多的內(nèi)容。
視頻號(hào)點(diǎn)贊也是同理，會(huì)被朋友看到，導(dǎo)致用戶在點(diǎn)贊的時(shí)候就會(huì)有所顧慮。
他會(huì)考慮，我點(diǎn)贊了這個(gè)視頻，我老師、上司、父母、親戚、朋友會(huì)不會(huì)看到？他們會(huì)怎么想？
但他在抖音上點(diǎn)贊是沒(méi)有這么多顧慮的，單純的喜歡就行。
第一，抖音是弱關(guān)系平臺(tái)；
第二，抖音上的點(diǎn)贊默認(rèn)是私密的。
因此，微信才推出了私密贊的功能，需要長(zhǎng)按才能觸發(fā)。
這并是一個(gè)優(yōu)雅的解決方案，一是操作成本有點(diǎn)高，二是用戶存在較高的學(xué)習(xí)成本。
微信作為一個(gè)強(qiáng)關(guān)系社交場(chǎng)景，這正是微信與抖音不一樣的地方。
以上兩者的目的都是一致的，那就是為了減輕用戶的社交壓力。
同時(shí)用過(guò)mac OS和windows系統(tǒng)的用戶不知是否發(fā)現(xiàn)，這兩個(gè)操作系統(tǒng)的彈窗按鈕“確定”和“取消”的位置是不一樣的？
mac的彈窗按鈕確定在右，取消在左；而windows的剛好反過(guò)來(lái)，確定在左，取消在右。
為什么會(huì)有這樣的差異？哪一種更加合理？
在交互設(shè)計(jì)中，這種彈窗叫做模態(tài)反饋，艾倫·庫(kù)珀在《About Face 4》中提到：模態(tài)模式一種臨時(shí)模式，它通過(guò)遮罩將用戶當(dāng)前看到的內(nèi)容和之前看到的內(nèi)容區(qū)分開(kāi)來(lái)，界面中只有 popup（彈出層）組件具有可交互行為，需要用戶操作才能退出該模式。模態(tài)的優(yōu)勢(shì)在于讓用戶專注于完成某個(gè)任務(wù)而不被干擾。
首先我們要明白這兩個(gè)按鈕哪個(gè)使用率更高，一般來(lái)說(shuō)，“確定”的點(diǎn)擊率要遠(yuǎn)遠(yuǎn)高于“取消”。這是因?yàn)榇蠖鄶?shù)用戶對(duì)于自己的操作行為是明確的。
所以這兩個(gè)按鈕在視覺(jué)上一定要做出差異化，“確定”的視覺(jué)層級(jí)要高于“取消”，這樣用戶才會(huì)一目了然，不會(huì)感到困惑。
回到剛才的問(wèn)題，逆向思考這兩者背后的邏輯差異。
windows彈窗的背后邏輯：
人的閱讀習(xí)慣是從左到右，所以把點(diǎn)擊率更高的按鈕放在左邊更加符合人的正常閱讀習(xí)慣。
mac彈窗的背后邏輯：
根據(jù)一般的任務(wù)的流程，“取消”在左代表返回上一步操作，而“確定”在右代表進(jìn)入下一步任務(wù)流程。
看上去似乎都有道理，這兩種交互方式本身沒(méi)有絕對(duì)的對(duì)與錯(cuò)。只要在整個(gè)系統(tǒng)中保持一致性，讓用戶形成操作習(xí)慣就沒(méi)有啥問(wèn)題。
從個(gè)人的使用習(xí)慣而言，個(gè)人更傾向于mac的這種方式。
手機(jī)上的實(shí)體按鍵電源鍵和音量鍵通常有兩種分布方式，放在左右兩側(cè)或都放在右側(cè)，前者以iPhone為代表，后者以安卓手機(jī)為代表。
這兩種方式有什么區(qū)別？哪種方式更加合理？電源鍵和音量鍵屬于完全不同類型的兩種按鍵，且都是高頻使用，它們的功能自然不用贅述。
我們先來(lái)看看都放在右側(cè)會(huì)有什么問(wèn)題，以下使用場(chǎng)景相信用戶不會(huì)陌生：
用戶a，在地鐵上玩王者，聲音有點(diǎn)大，想把聲音調(diào)小，結(jié)果不小心按到了電源鍵，導(dǎo)致手機(jī)息屏，而此刻你正在激烈的團(tuán)戰(zhàn)，內(nèi)心有一萬(wàn)只“草尼瑪”奔騰而過(guò)……
用戶b，每次按電源鍵（解鎖或鎖屏）都會(huì)不小心同時(shí)按到音量鍵，結(jié)果直接就截圖了！這種情況發(fā)生了不止一次，因?yàn)檫@兩個(gè)按鍵離的太近了……
用戶c，自家的小米11，電源鍵位于中間位置，右手拿時(shí)大拇指會(huì)觸碰到，左手拿時(shí)中指剛好會(huì)觸碰到，而電源鍵又有指紋鎖功能，導(dǎo)致手機(jī)在不斷的解鎖，而你毫無(wú)察覺(jué)……
通過(guò)上面的案例，可以得出結(jié)論：若按鍵都放在右側(cè)，會(huì)導(dǎo)致用戶經(jīng)常誤觸而造成不必要的麻煩。
放在兩側(cè)就不會(huì)有這樣的問(wèn)題?？梢杂行Х乐拐`觸，尤其是盲按，不用擔(dān)心按錯(cuò)，減少誤操作的幾率。
值得一提的是，iPhone手機(jī)的電源鍵一開(kāi)始是位于頂部位置，這是為何？
因?yàn)閯傞_(kāi)始時(shí)手機(jī)都是小屏幕（3.5～4寸左右），對(duì)于iPhone5S及以前的手機(jī)來(lái)說(shuō)，單手操控，拇指Home，食指電源，剛剛好。
所以電源鍵放在頂部既按得到又可以減少誤操作。
后來(lái)隨著手機(jī)大屏的趨勢(shì)（4.7寸以上），這個(gè)時(shí)候單手已經(jīng)不方便按到頂端了，從6代開(kāi)始就把電源鍵放在右側(cè)了。
但無(wú)論是哪種方式， 兩個(gè)按鍵都是分開(kāi)放。
還有一個(gè)小細(xì)節(jié)，iPhone的實(shí)體鍵不是在右側(cè)正中間，而是在靠上的位置。
iPhone設(shè)計(jì)理念是單手持握，并且大多數(shù)人右手握手機(jī)，大拇指經(jīng)常會(huì)碰到右側(cè)邊框，若果放中間，這樣會(huì)造成誤觸音量鍵和靜音鍵。
其實(shí)上面的案例3就已經(jīng)說(shuō)明了按鍵放在中間的弊端。
我想起了當(dāng)年的錘子T1，左右按鍵一樣大且位于兩側(cè)的中間，這是典型的為了追求完美的對(duì)稱而向用戶體驗(yàn)妥協(xié)。
iPhone從初代開(kāi)始就已經(jīng)建立了自己的設(shè)計(jì)理念，不管是工業(yè)設(shè)計(jì)還是界面設(shè)計(jì)，并沿用至今。
從初代開(kāi)始，iPhone機(jī)身左側(cè)音量鍵上方就有一個(gè)靜音鍵。
這些年來(lái)，iPhone一直在減少各種實(shí)體按鍵以及外部接口，比如3.5mm耳機(jī)孔、home鍵。
但直到如今這個(gè)靜音鍵卻一直保留下來(lái)，為何iPhone對(duì)于這個(gè)按鍵情有獨(dú)鐘？
靜音鍵開(kāi)啟后，任何來(lái)電或通知都是無(wú)聲的，震動(dòng)也會(huì)消失。
在無(wú)需點(diǎn)亮屏幕的情況下實(shí)現(xiàn)一鍵靜音，方便快捷，深受用戶的青睞。
根據(jù)自身的使用習(xí)慣以及用戶研究，無(wú)非以下幾種使用場(chǎng)景，比如看電影、開(kāi)會(huì)、上課等：
1.進(jìn)電影院看電影前，我一般都會(huì)撥一下，避免在看電影的過(guò)程中被來(lái)電鈴聲打擾，影響了自己和別人觀影。
2.開(kāi)會(huì)的時(shí)候也會(huì)撥一下，以防在開(kāi)會(huì)的時(shí)候突然被來(lái)電鈴聲所打擾，避免不必要的尷尬。
3.學(xué)生黨在上課前一般也會(huì)開(kāi)啟，這樣整節(jié)課都不怕打電話進(jìn)來(lái)了。
總之，就是不希望自己的手機(jī)鈴聲打擾到自己和別人，帶來(lái)不必要的麻煩。
如果是虛擬靜音鍵，需要先解鎖手機(jī)，對(duì)著手機(jī)屏幕一頓操作。
而實(shí)體鍵不需要這么麻煩，可以盲操作，放在褲兜里都不影響操作。
這個(gè)按鍵這么重要，卻很少看到安卓手機(jī)上有（除了一加基本上沒(méi)有）。
實(shí)體靜音鍵并非蘋(píng)果首創(chuàng)，之前的Palm、Blackberry（黑莓）早已有這樣的設(shè)計(jì)。
可能的原因是安卓控制中心很早有靜音按鈕，甚至有些定制系統(tǒng)還可以把靜音按鈕直接放在桌面上，設(shè)置靜音非常方便，也就沒(méi)必要再多加一個(gè)實(shí)體鍵了，顯得多余又徒增成本。
上面提到過(guò)的，作為安卓陣營(yíng)唯一的靜音鍵，一加手機(jī)引以為傲的三段式按鍵，該設(shè)計(jì)可以通過(guò)物理鍵直接實(shí)現(xiàn)在靜音、免打擾與正常模式當(dāng)中快速切換。
但個(gè)人認(rèn)為這個(gè)設(shè)定復(fù)雜了，三種模式遠(yuǎn)比兩種模式復(fù)雜。用戶并不一定能搞明白，有一定的學(xué)習(xí)成本。
在早期，iPhone的控制中心并沒(méi)有靜音按鈕，想要設(shè)置個(gè)靜音并不是一件容易的事情，而這個(gè)功能又是必須的，蘋(píng)果索性直接做了一個(gè)實(shí)體物理鍵。
這樣靜音的時(shí)候只需要把靜音鍵撥過(guò)來(lái)就可以了，一步到位，使用體驗(yàn)也很好，所以一直保留至今。
雖然現(xiàn)在iPhone的控制中心已經(jīng)加入了勿擾模式，但考慮到老用戶的使用習(xí)慣，以及品牌調(diào)性，蘋(píng)果對(duì)于這個(gè)實(shí)體按鍵的去掉還是顯得很謹(jǐn)慎。
考慮到之后iPhone在防水、機(jī)身內(nèi)部空間的改進(jìn)，不排除蘋(píng)果終有一天會(huì)取消iPhone上這個(gè)靜音鍵。
靜音鍵雖好，但也并非沒(méi)有缺點(diǎn)。用戶有時(shí)候會(huì)無(wú)意中觸發(fā)這個(gè)按鍵而不自知，或者開(kāi)啟后忘記關(guān)閉，導(dǎo)致錯(cuò)過(guò)了一些重要的電話。
雖然開(kāi)啟了靜音鍵，但并不是絕對(duì)的靜音。如果是鬧鐘，鈴聲還是會(huì)響起，因?yàn)轸[鐘的優(yōu)先級(jí)要遠(yuǎn)高于靜音模式。
蘋(píng)果這是考慮到了如果有用戶不小心觸發(fā)了靜音鍵，或者開(kāi)啟后忘記了關(guān)閉，害怕用戶耽誤了重要事情。
這就很好的解釋了為何明明開(kāi)啟了靜音模式，卻還可以調(diào)解音量大小的原因所在。細(xì)微之處方見(jiàn)真功夫。
在日常生活中，旋鈕是個(gè)很常見(jiàn)的東西，比如音箱，微波爐，收音機(jī)，老式電視，車(chē)載旋鈕……
在機(jī)械產(chǎn)品上，旋鈕凸起的把手和它下面的圓盤(pán)刻度，是最明顯不過(guò)的旋轉(zhuǎn)暗示，符合人的自然感知。
旋鈕式交互是個(gè)人非常偏愛(ài)的一種交互方式，我認(rèn)為這種交互跟iPhone的home鍵一樣經(jīng)典，主要原因有三：
旋鈕操作簡(jiǎn)單，看到這種按鈕，一歲小孩子都會(huì)忍不住用手去抓。對(duì)于用戶來(lái)說(shuō)，幾乎不需要學(xué)習(xí)成本。
在旋轉(zhuǎn)的過(guò)程中，可調(diào)大調(diào)小，一切盡在用戶的掌控之中，用戶感覺(jué)到有十分的安全感。
在調(diào)節(jié)的過(guò)程中，調(diào)大調(diào)小都能立刻收到即時(shí)的反饋，這是用戶最喜歡的交互方式。
我們?cè)谟|摸屏上很少看到這種旋鈕式交互，因?yàn)檫@種交互是要建立在抓住旋鈕實(shí)物的感受。
而觸控屏是個(gè)二維的世界，沒(méi)有真實(shí)抓握的手感，無(wú)法還原出三維世界的真實(shí)手感。
汽車(chē)上最常見(jiàn)的旋鈕就要數(shù)音量和空調(diào)了。然而自從特斯拉在車(chē)上推廣大屏幕后，越來(lái)越多的國(guó)內(nèi)廠家開(kāi)始盲目跟風(fēng)，把絕大部分的功能按鈕集成到屏幕中，比如空調(diào)，不僅不方便，行車(chē)中使用還容易造成危險(xiǎn)駕駛。
車(chē)上的觸控體驗(yàn)跟手機(jī)上是完全是兩碼事，使用場(chǎng)景也完全不同。最大的區(qū)別在于后者沒(méi)有安全問(wèn)題。
都知道開(kāi)車(chē)不玩手機(jī)，可是行車(chē)時(shí)操作中控屏跟玩手機(jī)有什么兩樣？
對(duì)于駕駛員來(lái)說(shuō)更加安全，通過(guò)旋鈕調(diào)節(jié)空調(diào)，熟悉后完全可以實(shí)現(xiàn)盲操，邊開(kāi)車(chē)邊操作毫無(wú)壓力。
如果是觸控屏，你必須看著屏幕，一頓操作猛如虎，而在開(kāi)車(chē)過(guò)程中眼睛哪怕離開(kāi)前方一秒鐘就意味著危險(xiǎn)。
而安全是汽車(chē)駕駛的重中之重。
用戶的操作有真實(shí)的物理反饋，旋鈕阻尼。
屏幕上虛擬按鍵反饋根本無(wú)法與實(shí)體旋鈕相提并論。
軟件系統(tǒng)用久了會(huì)變卡，可能會(huì)死機(jī)，難免會(huì)有bug。而這些不穩(wěn)定因素將成為汽車(chē)駕駛的潛在危險(xiǎn)因素。
一旦屏幕失靈，或者系統(tǒng)死機(jī)了，那所有按鍵都失效了。
雖然特斯拉為了提升其車(chē)載系統(tǒng)的穩(wěn)定性下了很大功夫，但是問(wèn)題從來(lái)都沒(méi)有停止過(guò)。
但是硬件基本上很少會(huì)出問(wèn)題，物理旋鈕才讓人100%放心。
無(wú)論廠家如何吹噓，虛擬屏幕按鍵在大多數(shù)情況下都不會(huì)比實(shí)體按鍵有更好的使用體驗(yàn)。
因此，有一些實(shí)體鍵出于安全駕駛的考慮還是應(yīng)該保留，將各種功能按鈕都集成在屏幕里并不見(jiàn)得是一個(gè)明智的選擇。盲目的把實(shí)體按鍵變?yōu)橛|摸按鍵存在安全隱患。
后記：
以上產(chǎn)品體驗(yàn)涉及到3個(gè)軟件層面，3個(gè)硬件層面。其實(shí)產(chǎn)品體驗(yàn)從來(lái)就不是軟件產(chǎn)品的專屬，而是體現(xiàn)在日常生活的方方面面。不要把自己僅僅局限于互聯(lián)網(wǎng)，不要老是沉浸在虛擬世界，回歸于現(xiàn)實(shí)世界，多觀察生活、體驗(yàn)生活。
文章來(lái)源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ǔ)的概念但對(duì)我們?cè)O(shè)計(jì)師來(lái)說(shuō)也極其重要，概念雖然很簡(jiǎn)單，但實(shí)際在設(shè)計(jì)中也會(huì)頻繁的遇到問(wèn)題。我們先用比較正緊的文案來(lái)描述一下這些比較“枯燥”的概念，映射是一個(gè)術(shù)語(yǔ)，從數(shù)理理論借用而來(lái)，表示兩組事物要素之間的關(guān)系。（書(shū)中諾曼先生的原話）
上兩篇文章我們說(shuō)的示能和意符，表示了事物本身具備或傳達(dá)的功能和被交互性，而映射則是表示了控制器和被控制對(duì)象的關(guān)系。
好的示能和意符的設(shè)計(jì)，可以讓映射變的自然。
第一篇示能我們舉了一個(gè)開(kāi)關(guān)的例子，多控開(kāi)關(guān)之所以讓人抓狂首先是缺少了意符的表達(dá)，其次是映射的不合理。就如同我們?cè)跁?shū)中見(jiàn)過(guò)的一個(gè)煤氣灶的案例，4個(gè)灶頭下方有4個(gè)控制開(kāi)關(guān)，左右兩種不同的排列方法，體現(xiàn)出好的映射有多重要。
諾曼老師在如何設(shè)計(jì)映射中提到，自然映射設(shè)計(jì)可以分為3種層次
這三種映射的層次在體驗(yàn)中的滿意度與效率一次遞減，我們依次在舉例說(shuō)明
例如門(mén)把手在門(mén)上，我們就覺(jué)得這映射設(shè)計(jì)的很自然，通過(guò)轉(zhuǎn)動(dòng)把手可以對(duì)門(mén)進(jìn)行開(kāi)和關(guān)。再例如我家的洗衣機(jī)上有一個(gè)用來(lái)選擇洗滌模式的旋鈕，洗滌模式圍繞在旋鈕的周?chē)o上有光點(diǎn)，旋轉(zhuǎn)旋鈕光點(diǎn)就會(huì)旋轉(zhuǎn)到我們需要的洗滌模式上，這也是控件與對(duì)象一體的形式，滿足用戶對(duì)控制器與被控制對(duì)象的心理預(yù)期。
那在數(shù)字產(chǎn)品中我們也會(huì)遇到類似的情況，例如我們想展開(kāi)放置在一個(gè)卡片中的文字，我們通常最好的方式是在文本的邊上設(shè)計(jì)一個(gè)提示展開(kāi)的“可點(diǎn)擊按鈕”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的區(qū)域，因?yàn)橛成潢P(guān)系逐漸減弱到無(wú)關(guān)。
再舉個(gè)例子iOS系統(tǒng)中如果要調(diào)節(jié)音量，可以在音量模塊中直接通過(guò)手指的滑動(dòng)來(lái)調(diào)節(jié)，而不需要在模塊中或者模塊外部加上兩個(gè)用來(lái)增減音量的按鈕。不過(guò)說(shuō)實(shí)話，華為的曲面屏雙擊側(cè)邊喚出音量控制模塊，個(gè)人覺(jué)得成本還要比物理實(shí)體按鍵更高一點(diǎn)。
除此之外，智能手機(jī)在逐漸演變進(jìn)化的過(guò)程中，手勢(shì)操作功不可沒(méi)，利用手勢(shì)代替按鈕也節(jié)省了更多的成本并且在效率方面也得到了提升。例如視頻播放器的應(yīng)用中，會(huì)有相應(yīng)的控件用來(lái)控制視頻的播放、暫停、聲音、進(jìn)度、亮度、橫豎等等，這些按鈕其實(shí)就是最佳的映射設(shè)計(jì)
這個(gè)也就是我們常說(shuō)的格式塔心理學(xué)中的接近原則，因?yàn)樵娇拷较嚓P(guān)，很好理解。某些物件在設(shè)計(jì)時(shí)無(wú)法將控件和被控對(duì)象結(jié)合設(shè)計(jì)，那么我們只能退而求其次，讓他倆能更靠近一些，在映射關(guān)系上可以更清晰。
接下來(lái)我會(huì)給大家看我家的冰箱和電飯煲的操作界面，大家就知道，次佳的映射如果不好好設(shè)計(jì)，也會(huì)顯的很糟糕。
如圖所示，其實(shí)界面的信息設(shè)計(jì)無(wú)非就是這樣，如果你可以把這些界面的信息設(shè)計(jì)的有邏輯有層次，那么在其他的用戶界面中也能夠如法炮制。
例如電飯煲的烹飪模式和其對(duì)應(yīng)的按鈕，都是通過(guò)點(diǎn)擊多次按鈕進(jìn)行控制，而不是在單獨(dú)的模式中具有單獨(dú)的按鈕，而最好的方法那肯定就是想選什么模式直接選，而不是做一個(gè)按鈕來(lái)多次切換。
這里是因?yàn)楸旧磉@款電飯煲沒(méi)有智能面板，所以通過(guò)物理按鈕只能這么做，否則，按鈕一多就更難操作了。那有小伙伴問(wèn)他能不能和洗衣機(jī)一樣做個(gè)旋鈕呢？當(dāng)然也可以，因?yàn)樾饋?lái)也比多點(diǎn)幾次按鈕來(lái)的方便，只不過(guò)旋鈕做上去之后其他的按鈕可能也要變成旋鈕，在產(chǎn)品設(shè)計(jì)上就有更多的問(wèn)題要探討啦。
所以我們?cè)賮?lái)看它的按鈕分布，發(fā)現(xiàn)其實(shí)控制按鈕和被控制的參數(shù)其實(shí)缺少了距離關(guān)系，當(dāng)你看著想要控制的參數(shù)卻找不到控制按鈕的時(shí)候就會(huì)比較抓狂，因?yàn)樵谶@個(gè)布局中既沒(méi)有滿足最佳也沒(méi)有滿足次佳，甚至連在空間分布上也無(wú)法產(chǎn)生對(duì)應(yīng)。
然后我們?cè)倏催@個(gè)電冰箱，這個(gè)西門(mén)子電冰箱的用戶面板我也屬實(shí)沒(méi)有看懂，但距離關(guān)系已經(jīng)做的比咱電飯煲要好一些了，至少左右兩側(cè)的按鈕應(yīng)該是控制左右兩側(cè)不同的溫度。
左右兩側(cè)分別是冷凍和冷藏的設(shè)置，但是中間只有兩個(gè)溫度，一共4個(gè)按鈕和兩個(gè)溫度，這顯然在自然理解下是不能理解的，這就和艾爾登法環(huán)里的boss們的關(guān)系一樣混亂，那4個(gè)按鈕為什么只有2個(gè)溫度呢，因?yàn)樽髠?cè)的兩個(gè)按鈕分別是切換不同的溫度設(shè)定，而右側(cè)的一個(gè)按鈕和溫度并沒(méi)有任何的血親關(guān)系，因?yàn)樗褪且粋€(gè)鎖！不仔細(xì)看還以為它是用來(lái)控制溫度的，因?yàn)楹推渌齻€(gè)按鈕太像了！這不就是在濫竽充數(shù)么。
這里的兩個(gè)案例我們發(fā)現(xiàn)，在次佳的映射中，其實(shí)就對(duì)格式塔心理學(xué)里的原則應(yīng)用的比較多，為了讓控制器和被控制對(duì)象的關(guān)系更緊密。
在某些場(chǎng)景下，我們是無(wú)法通過(guò)設(shè)計(jì)讓控件與對(duì)象滿足1、2兩個(gè)要求，所以就會(huì)有第三種，在空間分布上一致，例如在一個(gè)大空間中的燈與開(kāi)關(guān)，開(kāi)關(guān)不可能做在燈本體上，也沒(méi)有辦法讓它倆靠的更近，所以只能在空間分布上更加一致，才能夠讓映射關(guān)系合理。
其實(shí)數(shù)字產(chǎn)品的用戶界面設(shè)計(jì)，基本上我們可以做到1、2點(diǎn)，因?yàn)?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">本身區(qū)域有限，控制器和對(duì)象也幾乎在彈丸之地互相映襯，大部應(yīng)用的控件操作起來(lái)也都很簡(jiǎn)單，但是不外乎一些較為復(fù)雜的工具類產(chǎn)品，例如車(chē)機(jī)系統(tǒng)，通過(guò)中控屏來(lái)控制車(chē)輛的一系列功能例如：空調(diào)、座椅、車(chē)窗等等，那我們也發(fā)現(xiàn)其按鈕的分布也是滿足了這樣的交互映射，將物理按鈕變?yōu)樘摂M按鈕集成在中控屏幕中，為了讓用戶更好的映射出它們之間的關(guān)系，于是我們就需要利用空間分布的關(guān)系，來(lái)讓用戶明白，按鈕與控制對(duì)象的關(guān)聯(lián)邏輯。
例如在特斯拉的UI界面中，將整體分為3塊區(qū)域，左邊是形式儀表右側(cè)是多功能區(qū)域底部則是車(chē)輛相關(guān)的控制功能，你想控制前后車(chē)燈，那么按鈕就會(huì)在車(chē)輛模型的前后兩側(cè)，如果你想打開(kāi)空調(diào)則在底部工具欄的中間即可打開(kāi)，如果你想給座椅加熱那么也可以像圖片中那樣在4個(gè)座位的圖片中進(jìn)行交互就可以實(shí)現(xiàn)。這樣的設(shè)計(jì)讓控件與被控制的對(duì)象能夠遠(yuǎn)距離在控件上形成一個(gè)映射關(guān)系。
還有在日常生活中，大家家里是否用過(guò)升降式晾衣架，通過(guò)旋轉(zhuǎn)把手來(lái)操控升降，這里其實(shí)也很難應(yīng)用到空間部分，因?yàn)閮烧咚幍钠矫娌煌?，就更加無(wú)法對(duì)應(yīng)起來(lái)，有沒(méi)有一種比較好的方式來(lái)解決這個(gè)問(wèn)題呢，我覺(jué)得可以用顏色或者標(biāo)記來(lái)做映射的對(duì)應(yīng)。所以為了映射的相關(guān)性、同型、同色、靠近等方式都可以用來(lái)提升二者的相關(guān)性。
數(shù)字產(chǎn)品中的映射也是關(guān)于控制器和被控制對(duì)象的故事。數(shù)字產(chǎn)品中也有不少的控制器我們就稱之為控件，例如一個(gè)圖標(biāo)按鈕、一個(gè)下拉列表或者一個(gè)滑塊，它們都有各自的控制對(duì)象。而我們常說(shuō)什么樣的設(shè)計(jì)滿足用戶心智，指的就是讓用戶覺(jué)得當(dāng)他操控控件后帶來(lái)的結(jié)果與反饋是他預(yù)期之中的，這就會(huì)讓其覺(jué)得是合理的、自然的。
例如在這個(gè)案例中，設(shè)計(jì)師其實(shí)是想通過(guò)按鈕來(lái)控制車(chē)中相關(guān)的功能，但是大家能發(fā)現(xiàn)問(wèn)題嗎？映射的前提是控件要先滿足示能和意符的表達(dá)，其次再通過(guò)映射告訴用戶，誰(shuí)控制誰(shuí)。但我們發(fā)現(xiàn)這個(gè)界面中的按鈕其實(shí)在示能和意符上出現(xiàn)了歧義，例如熱車(chē)的圖標(biāo)，我們通常認(rèn)為這樣的宮格形式布局都是以入口形式存在，點(diǎn)擊后會(huì)進(jìn)入下一個(gè)界面，但是設(shè)計(jì)師在這里其實(shí)把一些情況搞混了。
所以我們仔細(xì)看，這些圖標(biāo)就像是電飯煲上的按鈕，只要點(diǎn)擊就會(huì)觸發(fā)車(chē)輛狀態(tài)的變化，相當(dāng)于一個(gè)開(kāi)關(guān)，咱們先不說(shuō)這樣的設(shè)計(jì)是否方便用戶，我們看映射其實(shí)就會(huì)發(fā)現(xiàn)用戶其實(shí)很難做到空間布局上的對(duì)照，從而更高效的來(lái)對(duì)車(chē)輛進(jìn)行控制。并且也存在一定的邏輯錯(cuò)誤，例如熱車(chē)和解鎖是什么邏輯，車(chē)窗開(kāi)到一半想停止怎么辦，空調(diào)要調(diào)節(jié)冷熱和溫度怎么辦，所以這里不再單純的是一個(gè)開(kāi)關(guān)集合的區(qū)域，會(huì)遇到很復(fù)雜的情況。
我們?cè)賮?lái)看一個(gè)案例，其實(shí)在數(shù)字界面中很多映射并非有直接對(duì)應(yīng)關(guān)系，而是需要用戶通過(guò)交互來(lái)觸發(fā)。在下面的界面中，是一個(gè)課程的詳情頁(yè)面，用戶可以發(fā)布自己的學(xué)習(xí)筆記通過(guò)音頻的方式發(fā)布在該頁(yè)面中，而底部的工具欄在當(dāng)前的設(shè)計(jì)中就會(huì)出現(xiàn)映射相關(guān)的問(wèn)題。
我們即然要發(fā)布音頻那么我們有這些問(wèn)題可以提前預(yù)設(shè)好
1.需要有什么控件來(lái)控制嗎？例如一個(gè)按鈕
2.那么這個(gè)按鈕是點(diǎn)擊后松開(kāi)再開(kāi)始錄音，還是需要長(zhǎng)按開(kāi)始錄音，亦或者點(diǎn)擊之后進(jìn)入一個(gè)編輯頁(yè)面，再通過(guò)錄音或者上傳音頻的形式來(lái)編輯呢？
3.點(diǎn)擊麥克風(fēng)錄完音頻后頁(yè)面會(huì)怎樣顯示
4.能否試聽(tīng)、編輯，邊上的輸入框和麥克風(fēng)有關(guān)嗎？
5.我可以直接輸入文字再點(diǎn)擊發(fā)布嗎或者直接點(diǎn)發(fā)布會(huì)出現(xiàn)什么呢？等等
不管如何我們從需要有一個(gè)入口，所以這個(gè)入口比較關(guān)鍵。通過(guò)這個(gè)入口（按鈕）來(lái)觸發(fā)上傳音頻的整個(gè)交互流程，它也是一個(gè)映射關(guān)系，只是沒(méi)有全部展開(kāi)，因?yàn)檫@里無(wú)法展開(kāi)。
有同學(xué)想問(wèn)，為什么不能展開(kāi)呢？其實(shí)這個(gè)很好理解，就像我們做登錄和注冊(cè)的時(shí)候不會(huì)把兩個(gè)流程做在一個(gè)界面中一樣，造成頁(yè)面的復(fù)雜、不兼容。所以如果這里不需要音頻以外形式的發(fā)布內(nèi)容那么就無(wú)需把麥克風(fēng)、輸入框和發(fā)布按鈕拆解開(kāi)來(lái)做，造成了沒(méi)有必要的浪費(fèi)。
一個(gè)按鈕可以作為一個(gè)入口來(lái)開(kāi)啟一個(gè)單獨(dú)的任務(wù)流程，但是如果這樣拆解開(kāi)那么任務(wù)流程就無(wú)法再高效的完成，并產(chǎn)生很大的歧義。數(shù)字化產(chǎn)品的映射往往是線性的
再說(shuō)一個(gè)類似的案例，這個(gè)也是小伙伴做的一個(gè)界面。初學(xué)者的問(wèn)題就比較明顯，在于他們沒(méi)有分步和階段性控制的概念?？傁胫粋€(gè)界面能完成多個(gè)任務(wù)，當(dāng)然在這里也沒(méi)有考慮好映射怎么做。
從這界面我們能很明顯的看出來(lái)這其實(shí)是一個(gè)發(fā)布的界面，從外部一個(gè)按鈕中進(jìn)行跳轉(zhuǎn)而來(lái)的。
如果讓你去評(píng)價(jià)你會(huì)怎么說(shuō)，是不是哪里都想說(shuō)一點(diǎn)，好像里面的信息、按鈕、功能就不應(yīng)該在這個(gè)界面？
你可能會(huì)有這些問(wèn)題：怎么把視頻、音頻、圖片做成tab，選擇不同的類型去發(fā)布？點(diǎn)擊錄制后音頻會(huì)出現(xiàn)在哪里？錄好一條后錄制按鈕還在不在？錄好一條后我切換到圖片再傳一張圖片再點(diǎn)擊下一步會(huì)出現(xiàn)什么？點(diǎn)擊草稿箱又會(huì)進(jìn)入什么界面？我什么都不操作直接點(diǎn)下一步會(huì)怎樣？這些問(wèn)題都將困擾我們完成一個(gè)發(fā)布任務(wù)。
將一個(gè)交互流程做清晰，就需要讓用戶有一個(gè)清晰的功能映射。所以點(diǎn)擊發(fā)布后，按鈕應(yīng)該要先控制發(fā)布類型這個(gè)對(duì)象，讓用戶選擇發(fā)布類型，然后再跳轉(zhuǎn)出對(duì)應(yīng)類型的發(fā)布流程。
3.總結(jié)
映射在交互體驗(yàn)的設(shè)計(jì)中也是很重要的概念之一，要結(jié)合示能和意符一起思考。同時(shí)剩余的概念我們也會(huì)在下期一起分享給大家，對(duì)于初學(xué)者來(lái)說(shuō)，這些概念很重要，在我們?cè)O(shè)計(jì)案例的時(shí)候務(wù)必要時(shí)刻思考與結(jié)合。
聽(tīng)到“約束”這個(gè)詞，但從字面意思大家可能會(huì)覺(jué)得它有多層含義，比如你小時(shí)候，媽媽總是約束你不能吃很多的糖，不能在地上滾來(lái)滾去，這是來(lái)自父母的約束。那么我們?cè)谏钪羞€有很多的約束，比如道德約束、法律約束、規(guī)則約束等等。
所以從字面意思上約束的意思就是：限制管束使不越出范圍。在體驗(yàn)設(shè)計(jì)中，約束也被分為了4個(gè)大的類型，分別是：物理約束、文化約束、語(yǔ)義約束以及邏輯約束。接下去我們通過(guò)對(duì)這四個(gè)約束類型來(lái)聊一聊在設(shè)計(jì)中，如何利用這些約束來(lái)提升用戶體驗(yàn)。
這個(gè)很好理解，一個(gè)圓形的井蓋只能用對(duì)應(yīng)尺寸的圓形來(lái)覆蓋住，其他形狀或者尺寸就不能匹配。一把鎖也只能通過(guò)相應(yīng)鑰匙才能打開(kāi)。所以物理約束取決于物體本身外部的特性，決定了其操作方法。設(shè)計(jì)師們?cè)谠O(shè)計(jì)一些產(chǎn)品、界面的時(shí)候，務(wù)必要考慮物體的物理特性，例如不同的設(shè)備、不同的材料等等。
諾曼老師在設(shè)計(jì)心理學(xué)中舉了一個(gè)電池正負(fù)極放置的例子，我打算換一個(gè)手機(jī)的例子。大家是否有想過(guò)為什么手機(jī)是豎著操作的，橫著操作不行嗎？當(dāng)然不排除我們?cè)谕嬗螒蚩措娪皶r(shí)一些特殊場(chǎng)景需要將手機(jī)橫過(guò)來(lái)，但是日常我們通過(guò)手機(jī)來(lái)使用應(yīng)用的時(shí)候為什么不是橫過(guò)來(lái)的。
大家可以嘗試著單手橫過(guò)來(lái)去發(fā)一個(gè)微信給好友信息，或者在淘寶買(mǎi)一件商品，首先這倆產(chǎn)品在移動(dòng)端的手機(jī)上都沒(méi)有支持橫版適配的設(shè)計(jì)，因?yàn)闄M置無(wú)法有效進(jìn)行導(dǎo)航，而且很難瀏覽內(nèi)容，更不要提用單手橫過(guò)來(lái)去做一些交互行為。
所以我們發(fā)現(xiàn)移動(dòng)端手機(jī)本身的物理特性和受到的約束來(lái)自于我們?nèi)祟惖氖?/strong>，四根較長(zhǎng)的手指在一側(cè)，一根較短的拇指在另一側(cè)，這種自然生物的進(jìn)化就告訴我們，我們的祖先是習(xí)慣通過(guò)“握”這個(gè)行為來(lái)對(duì)物體進(jìn)行交互的，而手機(jī)除了滿足人手的特性約束以外，也要滿足日常使用的場(chǎng)景：單手手持（單手握比單手托省力很多）、打電話（如果你的聽(tīng)筒和麥克在屏幕的兩側(cè)，腦補(bǔ)一下打電話的樣子）......
所以手機(jī)的外形設(shè)計(jì)，是受到了使用者本體的物理約束，我們的手、我們的耳朵、嘴巴等等，大家也可以再試想一下，如果我們要設(shè)計(jì)一款專門(mén)為沒(méi)有手的殘障人士用的通訊工具，我們?cè)撛趺丛O(shè)計(jì)？例如他們習(xí)慣用鼻子操作、用腳掌操作等等。
好了，講完了人類對(duì)手機(jī)的約束后，我們?cè)賮?lái)看手機(jī)本身對(duì)我們數(shù)字界面有哪些物理約束。即然手機(jī)現(xiàn)在被設(shè)計(jì)成了豎著的樣子，于是我們的口袋也變成了豎著的，同時(shí)我們數(shù)字界面的內(nèi)容也變成了自上而下的內(nèi)容顯示順序。觸摸式智能手機(jī)也將原來(lái)只支持點(diǎn)擊操作的手勢(shì)進(jìn)化出支持滑動(dòng)、3d觸摸的更豐富的交互手勢(shì)。
我們?cè)谠O(shè)計(jì)界面中元素、組件的時(shí)候其實(shí)也可以把他們理解為一種“物體”，既然是“物體”那么必然有其特性，例如屬性、狀態(tài)、布局規(guī)則....，具有一定特性的組件就只能使用在其固定的位置，并給予一定的尺寸范圍和交互方式。
例如現(xiàn)在我們有這樣幾個(gè)信息，人物頭像、人物昵稱、個(gè)人簡(jiǎn)介、關(guān)注按鈕這四個(gè)元素，我們需要做一個(gè)用戶信息模塊，我們會(huì)怎樣布局。很顯然將這幾個(gè)元素通過(guò)排列組合放進(jìn)一個(gè)容器里，有無(wú)數(shù)種排列方法，但如果我們提前給這個(gè)模塊加上一些物理約束，比如它的高度和寬度是30px*100px，同時(shí)滿足信息閱讀的順序和效率最優(yōu)，那就只有一種排列方式。如果這個(gè)容器的尺寸變成100px*100px，那么就會(huì)有更多的布局，例如居中對(duì)齊，個(gè)人信息與關(guān)注按鈕上下分布等等。而且不同的排列布局、呈現(xiàn)位置給受眾帶來(lái)的視覺(jué)感知、瀏覽效率也是不同的。如果這個(gè)容器是可折疊、可滑動(dòng)的呢？那么布局又會(huì)發(fā)生什么變化？
所以物理約束在生活中可能是一種硬約束，但是在數(shù)字化設(shè)計(jì)中，我們用的更多的是“偏軟”的物理約束，例如一張卡片的大小、圖文的間距、控件的展開(kāi)面積等等，無(wú)法用硬約束來(lái)控制，因?yàn)槭艿礁嘁蛩氐挠绊?，不適合用硬約束來(lái)規(guī)范這些設(shè)計(jì)元素。
設(shè)計(jì)師們?cè)谧龇桨傅臅r(shí)候要學(xué)會(huì)尋找最優(yōu)解，做設(shè)計(jì)不像是用鑰匙開(kāi)門(mén)或者拼圖這樣每一塊都有他固定的位置，有時(shí)候就像是你身邊有幾根不同粗細(xì)和長(zhǎng)短的木棍，你需要插到一個(gè)洞里，不可能有非常完美契合的情況，那我們就要考慮你更在乎的是插緊？填滿？還是堵?。恳`活運(yùn)用。
文化約束在書(shū)中的原話是：每種文化都有一套社交行為準(zhǔn)則，如果置身于不熟悉的文化環(huán)境，原有的準(zhǔn)則和行為就會(huì)不適用。
例如大陸的駕駛室在左側(cè)，但是香港地區(qū)就是在右側(cè)。再例如日本東京和大阪搭乘電扶梯的站位也有左右的區(qū)別。所以文化的約束就更像是不同的社會(huì)認(rèn)知、習(xí)慣、歷史造就人群的行為差異。
例如在不同文化中，信息閱讀的順序并不一樣，就像阿拉伯地區(qū)在閱讀時(shí)順序是從右往左。再例如國(guó)際版本的amazon在新增收貨地址的時(shí)候，無(wú)論哪個(gè)國(guó)家，只提供輸入框讓用戶自己填寫(xiě)，但是在本地化產(chǎn)品中，就會(huì)針對(duì)中國(guó)用戶的特殊地址進(jìn)行設(shè)計(jì)。
文化差異還有很多，例如不同國(guó)家有不同國(guó)家的禁忌和喜好，例如顏色，俄羅斯比較極忌諱黑色、黃色，巴西比較禁忌紫色、黃色，而英國(guó)則不喜歡墨綠色。同樣還有手勢(shì)、動(dòng)植物、數(shù)字、肢體語(yǔ)言、信仰等等。
文化約束不僅僅存在于國(guó)家、宗教之前，人與人之間都會(huì)有不同的文化差異。所以文化說(shuō)白了就是不同群體的認(rèn)知與共識(shí)。說(shuō)起文化約束讓我又想起了設(shè)計(jì)師與業(yè)務(wù)方之間的交流，為什么總是會(huì)存在障礙。或許一部分原因就是因?yàn)槲覀兏髯杂兄幕町惡土?chǎng)。業(yè)務(wù)方在自己的文化認(rèn)知中會(huì)提出同時(shí)放大并縮小、五彩斑斕的黑這樣的需求，而設(shè)計(jì)師聽(tīng)到這樣的需求就會(huì)覺(jué)得有點(diǎn)無(wú)理取鬧，其實(shí)這很正常，這就和我們?cè)谘b修時(shí)給設(shè)計(jì)師提出的要求一樣，想要在10平方米的空間打造出多個(gè)大面積的空間一樣。其實(shí)這些都是我們對(duì)另一方的一種期望，只是在表達(dá)的過(guò)程中不那么專業(yè)，作為專業(yè)的設(shè)計(jì)師，我們要學(xué)會(huì)理解客戶/業(yè)務(wù)的真實(shí)需求，并幫助他們?nèi)ゲ鸱帜繕?biāo)，一步一步接受最后的結(jié)果。
語(yǔ)義約束在書(shū)中提到的不多，但是我想展開(kāi)聊一聊。諾曼老師在解釋語(yǔ)義的時(shí)候是這么說(shuō)的：語(yǔ)義約束是指利用某種境況的特殊含義來(lái)限定可能的操作方法。舉了一個(gè)例子就是摩托車(chē)的擋風(fēng)玻璃之所以這么設(shè)計(jì)是因?yàn)槿笋{駛摩托車(chē)的方向位置從而使得擋風(fēng)玻璃必須這么設(shè)計(jì)。所以一個(gè)事物被設(shè)計(jì)后的結(jié)果取決于它是為誰(shuí)而設(shè)計(jì)的，同時(shí)語(yǔ)義約束依據(jù)的是我們對(duì)現(xiàn)實(shí)情況和外部世界的理解。
現(xiàn)在我們可以通過(guò)門(mén)把手的轉(zhuǎn)動(dòng)來(lái)開(kāi)啟門(mén)，那么如果我通過(guò)人臉識(shí)別認(rèn)證后，是否可以自動(dòng)開(kāi)門(mén)而不需要再設(shè)計(jì)一個(gè)門(mén)把手呢？這種案例其實(shí)很多了，例如醫(yī)院的手術(shù)室等場(chǎng)所。隨著科學(xué)技術(shù)發(fā)展，人與物的交互方式在不斷的改變，從小屏幕到大屏幕的發(fā)展，我們觀察到移動(dòng)端設(shè)計(jì)中的返回上一頁(yè)、滾動(dòng)至頂部、鍵盤(pán)的拆分等等設(shè)計(jì)應(yīng)運(yùn)而生。
我再拿數(shù)字產(chǎn)品中的一些組件給大家舉個(gè)例子，在以前的文章中，我找到了一個(gè)產(chǎn)品的交互有些問(wèn)題，就是在某個(gè)界面的頂部導(dǎo)航中嵌入一個(gè)下拉的控件。
在這里，無(wú)論該控件本身示能表達(dá)還是用戶的預(yù)期理解，都表示這當(dāng)我們點(diǎn)擊下拉按鈕后，會(huì)展開(kāi)更多同類型的選項(xiàng)，并且導(dǎo)航欄是保持固定位置的，而不會(huì)將導(dǎo)航欄給頂下去，出現(xiàn)原本不存在的新模塊。那么為什么就不可以像后者一樣，點(diǎn)擊下拉控件后將導(dǎo)航給頂下去呢？
這就要?dú)w結(jié)于頂部導(dǎo)航和下拉控件本身的用法與規(guī)則。
導(dǎo)航欄嵌入下拉實(shí)際上就是導(dǎo)航+下拉控件，那么該控件就具備了兩個(gè)屬性，那就是原本導(dǎo)航欄的屬性和下拉控件的屬性，導(dǎo)航欄需要固定在頂部。
在移動(dòng)端本身的組件定義中，它是一種固定在頂部不可動(dòng)搖的一個(gè)bar，所以很早以前的移動(dòng)端、web端設(shè)計(jì)的時(shí)候，頂部導(dǎo)航欄在視覺(jué)上也是優(yōu)先級(jí)很高的，例如微信、淘寶等頂部導(dǎo)航欄在舊版本都是帶有顏色的，就像是一個(gè)盒子必須有一個(gè)蓋子，沒(méi)有蓋子的容器不嚴(yán)謹(jǐn)，不安全。
同時(shí)這個(gè)“蓋子”有幾個(gè)作用：
1.當(dāng)前定位/說(shuō)明 ，可以放單個(gè)頁(yè)面的標(biāo)題也可以放幾個(gè)tab來(lái)切換頁(yè)面
2.當(dāng)前界面輔助操作 ，例如分享
3.可以嵌入入口，例如搜索框、設(shè)置等等。
即然是一個(gè)下拉控件，那么你要下拉的是你本身，而不是整個(gè)導(dǎo)航。所以導(dǎo)航本身就有它自己語(yǔ)義，導(dǎo)航+下拉控件，也必須滿足這些約束條件。
語(yǔ)義約束需要設(shè)計(jì)師們時(shí)刻觀察當(dāng)下用戶的認(rèn)知水平以及設(shè)計(jì)的發(fā)展階段，去做更合理的運(yùn)用，我們之前說(shuō)創(chuàng)新，其實(shí)也只是在不斷的跟著科技、文化、用戶習(xí)性在進(jìn)行同步更新，保守未必是錯(cuò)的，但是想要有所突破不能一味墨守陳規(guī)。
這個(gè)概念諾曼老師在書(shū)中舉的是一個(gè)修水龍頭的例子，說(shuō)的是當(dāng)你把水龍頭修好，最后發(fā)現(xiàn)有一個(gè)零件沒(méi)有安裝上去，那么顯然是裝錯(cuò)了。這個(gè)和我們之前講的映射是一個(gè)道理，自然映射為我們提供邏輯的約束，元素的組成可能存在空間或功能上的邏輯關(guān)系，例如不同的開(kāi)關(guān)控制不同的燈。
那么我們還是簡(jiǎn)單的來(lái)看一下“邏輯”這個(gè)概念，我們是不是經(jīng)常會(huì)遇到這樣的場(chǎng)景，當(dāng)我們把方案或者一個(gè)事情講述給別人，會(huì)聽(tīng)到別人說(shuō)：你這個(gè)邏輯不對(duì)，那到底什么是邏輯呢？這里不進(jìn)行長(zhǎng)篇大論的解釋，邏輯的概念很大，但是我們可以來(lái)比較形象的了解一下。
首先我們要知道在邏輯推理的過(guò)程中需要先對(duì)概念進(jìn)行客觀描述，例如男人喜歡女人，這是一種自然的客觀規(guī)律。其次我們要對(duì)事物中的對(duì)象進(jìn)行判斷是否為真，例如，老王是男人。當(dāng)我們已知這兩個(gè)條件后，可以推導(dǎo)出一個(gè)結(jié)論，那就是老王喜歡女人。但是這樣的推理并不嚴(yán)謹(jǐn)，因?yàn)槔贤蹩赡芟矚g女人或者都喜歡。如果有其他的條件，結(jié)論才會(huì)更準(zhǔn)確，例如老王交往過(guò)5個(gè)女朋友。
設(shè)計(jì)中，也會(huì)存在很多的邏輯，例如業(yè)務(wù)邏輯、交互邏輯、視覺(jué)邏輯等等。業(yè)務(wù)邏輯指的是商品的展示排列規(guī)則、每簽約一個(gè)供應(yīng)商就會(huì)展示該供應(yīng)商的詳情、權(quán)限角色的類型不同導(dǎo)致判斷順序不同等。交互邏輯指的交互過(guò)程中出現(xiàn)的狀態(tài)變化和規(guī)則，例如點(diǎn)擊卡片跳轉(zhuǎn)至xxx界面，點(diǎn)擊后若用戶未登錄則跳轉(zhuǎn)至登錄頁(yè)。而視覺(jué)邏輯則是指根據(jù)用戶的瀏覽順序和信息的優(yōu)先級(jí)進(jìn)行視覺(jué)布局的設(shè)計(jì)。
這里我們來(lái)舉一個(gè)美食產(chǎn)品的智能組菜的功能設(shè)計(jì)，來(lái)看看在這個(gè)方案中，邏輯約束是如何影響到我們整個(gè)設(shè)計(jì)過(guò)程的。智能組菜這個(gè)功能是這樣的，用戶可以將想要烹飪的食材進(jìn)行自由組合成為一道美食，進(jìn)而衍生出了該功能。在做這個(gè)方案之前，我們要對(duì)這些概念進(jìn)行描述和解析
1.解析概念
智能組菜：
1.智能：通過(guò)什么算法，如何通過(guò)算法呈現(xiàn)給用戶？如何讓用戶感知到智能？（業(yè)務(wù)邏輯）
2.組菜：組是什么意思？（把食材搭配到一起）怎么組？（用戶選擇食材后生成）組什么（各種食材）？（交互邏輯）
2.設(shè)計(jì)策略與交互邏輯的思考
1.怎么把食材搭配到一起：讓用戶自由選擇食材
2.怎么才能讓用戶自由選擇食材：提供食材的搜索、分類
3.怎么提供食材的分類和搜索：設(shè)計(jì)搜索功能流程、食材分類功能流程
特殊場(chǎng)景思考：對(duì)于食材的名稱用戶是否知道，如果不知道該如何搜索？可以提供食材分類和拍照識(shí)別這樣的功能。
我們先做的簡(jiǎn)單一點(diǎn)，只做食材的搜索。然后接下去思考他的交互邏輯
當(dāng)用戶進(jìn)入搜索流程后狀態(tài)會(huì)發(fā)生什么變化？選擇的食材會(huì)出現(xiàn)在哪里？如何新增繼續(xù)新增、刪除食材？這里有兩種做法：
1.用戶選擇完食材后就進(jìn)入一個(gè)新界面，界面中可以繼續(xù)添加食材。
2.用戶選擇完食材后在當(dāng)前界面出現(xiàn)“菜籃”模塊用來(lái)承載已經(jīng)選擇的食材
如果是你會(huì)選擇哪種方式？這兩種交互方式在邏輯上都是正確的，但是邏輯正確并不意味著交互體驗(yàn)和效率是最優(yōu)的。
例如搜索場(chǎng)景中需要考慮鍵盤(pán)遮擋的問(wèn)題，如果是第一種，那么沒(méi)有鍵盤(pán)遮擋的困擾，但是每次選完都要重新點(diǎn)擊新增按鈕，并且新頁(yè)面的版面利用率很低。而第二種在當(dāng)前界面出現(xiàn)菜籃則會(huì)被鍵盤(pán)遮擋，只能在頁(yè)面上方出現(xiàn)，但上方的內(nèi)容比較飽和，需要再進(jìn)一步思考。那么當(dāng)前遇到了兩個(gè)問(wèn)題比較難以權(quán)衡，于是我們需要根據(jù)更多的條件來(lái)約束最后的結(jié)果：
1.用戶在選擇食材的時(shí)候大概率是目標(biāo)明確的，搜索類目不會(huì)很寬泛，例如青菜、排骨，所以搜索結(jié)果不會(huì)很多。
2.大部分用戶的手機(jī)為某為p40、某果12，頁(yè)面較長(zhǎng)，空白區(qū)域比較充裕。
3.大部分情況一道菜的主要食材在3種左右。
也有小伙伴會(huì)問(wèn)，會(huì)不會(huì)出現(xiàn)批量選擇的情況?；静粫?huì)，因?yàn)榫拖裎覀儎偛耪f(shuō)的，組菜是基于用戶對(duì)當(dāng)前已有的食材進(jìn)行組合的行為，所以用戶的目標(biāo)是單一、明確的，我有什么菜，我看看能組合出什么。而不是直接搜一個(gè)蔬菜，然后批量選擇蔬菜類目下的其他食材，這不符合用戶場(chǎng)景。所以不需要提供批量選擇。
最后結(jié)論是第二種方式有足夠的區(qū)域來(lái)放置需要選擇的食材。
3.最后的方案
當(dāng)我們確定好了策略后，我們可以大致繪制一下原型方案。用戶通過(guò)在當(dāng)前頁(yè)面搜索后選擇搜索結(jié)果的食材，顯示在鍵盤(pán)上方。鍵盤(pán)收起后會(huì)置于底部。食材搜索的結(jié)果不需要分類，用宮格形式鋪開(kāi)，盡可能的利用頂部的面積去展示，不要用列表。然后不需要做搜索按鈕，因?yàn)檫@里的數(shù)據(jù)量很小，直接輸入完文字后就可以自動(dòng)聯(lián)想匹配。同時(shí)我們?cè)侔呀M菜記錄和拍照識(shí)別的功能放進(jìn)去。
做完這些基本的交互后我們不要忘了思考一些異常流程和場(chǎng)景，例如搜不到內(nèi)容怎么辦？用戶同時(shí)搜索了兩種不同的食材怎么辦？用戶第二次選擇了同樣的食材怎么辦？選擇超過(guò)5個(gè)怎么提示？等等。
好了，這個(gè)案例講完后，大家有沒(méi)有發(fā)現(xiàn)，其實(shí)一個(gè)方案的產(chǎn)生，其中要思考很多的條件、邏輯來(lái)約束不同的設(shè)計(jì)結(jié)果。
假如我們需要加入食材的分類模塊，那么現(xiàn)在的方案和流程還合適嗎？如果業(yè)務(wù)覺(jué)得用戶使用智能組菜是不知道吃什么，一種“窮途末路”的場(chǎng)景，那么我們是不是可以提供一種送即食菜肴的服務(wù)，例如最近在電梯廣告里看到了一個(gè)“舌尖英雄”的app，他就是將一道菜的食材進(jìn)行單獨(dú)包裝，然后賣(mài)給用戶，把烹飪的步驟也用線上視頻的方式教給用戶，用戶一學(xué)就會(huì)。這也是一種業(yè)務(wù)創(chuàng)新，同時(shí)在智能組菜的場(chǎng)景種插入也不失為一種辦法。
文章來(lái)源：站酷 作者：應(yīng)駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
你們會(huì)發(fā)現(xiàn)其實(shí)想做交互設(shè)計(jì)比UI設(shè)計(jì)難很多，那為什么交互設(shè)計(jì)比較難呢？因?yàn)閁I設(shè)計(jì)相當(dāng)于從0.5到1，而交互則是從0到1。但并不意味著UI就比交互來(lái)的層次低，交互注重邏輯，UI注重對(duì)品牌和質(zhì)感的表現(xiàn)，沒(méi)有孰優(yōu)孰劣，但是在入手和執(zhí)行層面，UI相對(duì)簡(jiǎn)單一些。
交互設(shè)計(jì)也可以說(shuō)是體驗(yàn)設(shè)計(jì)的核心。我們需要根據(jù)已有的“材料”來(lái)進(jìn)行任務(wù)流程、用戶行為的設(shè)計(jì)，以確保用戶能高效、滿意的完成任務(wù)達(dá)成目標(biāo)和解決問(wèn)題。所以在這整個(gè)環(huán)節(jié)中，要思考的信息和判斷的邏輯會(huì)更復(fù)雜。交互設(shè)計(jì)往往覺(jué)得很有成就感的地方在于自己設(shè)計(jì)的流程或者一些創(chuàng)新的交互能夠獲得用戶的好評(píng)以及業(yè)務(wù)數(shù)據(jù)的提升，在這個(gè)方面UI設(shè)計(jì)的成就感知會(huì)來(lái)的不夠明顯，因?yàn)橐?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">覺(jué)表現(xiàn)很難量化，用戶也只能通過(guò)好不好看來(lái)表達(dá)，所以UI設(shè)計(jì)師們也希望通過(guò)一些方法來(lái)找到屬于自己的成就感，例如我們也會(huì)選擇一些平臺(tái)發(fā)表自己的視覺(jué)創(chuàng)意來(lái)獲得同行們的認(rèn)可等等。
那么今天我們一起來(lái)聊一個(gè)交互案例，來(lái)看看需求從“材料”到具象化表現(xiàn)都需要思考什么。當(dāng)然，學(xué)案例是為了擴(kuò)充自己的知識(shí)面，但是想要真正學(xué)會(huì)，我們要從底層開(kāi)始學(xué)。
首先來(lái)講一個(gè)發(fā)布菜譜的功能：一個(gè)美食類產(chǎn)品中需要設(shè)計(jì)一個(gè)用戶自己創(chuàng)建菜譜的流程，基于這個(gè)概念我們可以如何設(shè)計(jì)流程。我們都知道商業(yè)設(shè)計(jì)離不開(kāi)業(yè)務(wù)，那么這里我們先不考慮這么多，只考慮如何將流程設(shè)計(jì)做到最高效，有需要的時(shí)候再將業(yè)務(wù)加入進(jìn)來(lái)。
這里和工作中常規(guī)的步驟不一樣，在工作中我們往往第一步都是去分析這個(gè)需求的背景、用戶的定位、業(yè)務(wù)目標(biāo)什么的，但是這里不用，我們只單純的做交互方案，所以就不去啰嗦那些了。
在腦爆前，準(zhǔn)備好3個(gè)問(wèn)題：
1.什么是菜譜
2.為什么要發(fā)布菜譜
3.怎么發(fā)布菜譜。
通過(guò)這3個(gè)問(wèn)題我們就可以大致知道這個(gè)任務(wù)所包含的信息、形式、流程。
1.什么是菜譜：菜譜是通過(guò)圖文、視頻等方式給用戶提供做菜步驟的教學(xué)內(nèi)容
2.為什么要發(fā)布菜譜：希望通過(guò)用戶自主發(fā)布內(nèi)容的形式來(lái)提高整體用戶的活躍度以及平臺(tái)對(duì)用戶個(gè)人品牌的塑造。讓用戶之間產(chǎn)生更多的互動(dòng)。
3.怎么發(fā)布菜譜：這里要根據(jù)第一個(gè)問(wèn)題腦爆之后再進(jìn)行流程的設(shè)計(jì)。
接下來(lái)我們根據(jù)菜譜這個(gè)概念進(jìn)行拓展：1.菜譜的基本介紹 2.菜譜的制作流程 3.其他支線選項(xiàng)。
在真實(shí)工作中其實(shí)產(chǎn)品經(jīng)理會(huì)把這個(gè)流程要包含的功能和信息點(diǎn)都列舉清楚，只是我們現(xiàn)在自己來(lái)從0到1設(shè)計(jì)一次。
菜譜的基本介紹可以包含菜譜的封面、菜譜的名稱、菜譜的簡(jiǎn)介、難度、時(shí)間、食材，菜譜的制作流程可以包含需要的圖片、文字描述。但是這里的顆粒度大小不一，例如難度、時(shí)間顆粒度小，但是食材我們可以再繼續(xù)細(xì)化拓展：食材的名稱、用量。菜譜的其他編輯選項(xiàng)，例如菜肴的口味、菜系的分類，編輯這個(gè)選項(xiàng)是有助于其他用戶在篩選菜系和分類的時(shí)候更快的找到這個(gè)菜譜。
例如菜譜的封面，那么我們就需要一個(gè)容器來(lái)上傳圖片或視頻，可以用一個(gè)占位圖image來(lái)代替，先不用考慮放什么位置以及在哪個(gè)節(jié)點(diǎn)，先將每一個(gè)信息點(diǎn)都進(jìn)行控件化。接下來(lái)菜譜的名稱和簡(jiǎn)介都是輸入模塊text。難度和時(shí)間有兩種形式：輸入和選擇，那我們當(dāng)然用選擇，因?yàn)椴僮骱屠斫獬杀靖?，能用選擇就不要用輸入。選擇用什么形式呢？可以用picker、actionsheet動(dòng)作面板、展開(kāi)單選，那哪個(gè)更方便高效呢？這里如果需要選擇的選項(xiàng)不多，也不需要滾動(dòng)、聯(lián)動(dòng)，那么用actionsheet就可以了。如果你想讓選項(xiàng)更直觀更方便操作那么你可以把選項(xiàng)直接放出來(lái)。
接下來(lái)是食材，食材又分為食材的名稱和用量，那么也是一個(gè)輸入的行為，需要兩個(gè)輸入框，這里就不能用選擇的交互了，因?yàn)樵谶@個(gè)場(chǎng)景中選項(xiàng)是根據(jù)用戶需求隨機(jī)、特定的，需要用戶自己輸入。
最后是菜譜制作流程中的圖片和文字描述，也是圖片和視頻的上傳和文字輸入模塊。這樣我們就把這些控件具像化了，就更直觀的幫助我們進(jìn)行接下來(lái)的操作。
根據(jù)用戶的操作習(xí)慣和場(chǎng)景，我們將操作順序捋一遍。什么樣的操作順序更符合我們上傳的習(xí)慣呢？先填寫(xiě)制作順序嗎？不對(duì)，應(yīng)該先編輯基本信息，也就是我們通過(guò)烹飪的流程，先想好要做什么菜，再去準(zhǔn)備食材，再開(kāi)始一系列烹飪的步驟。
所以我們要先讓用戶去添加封面編輯標(biāo)題和介紹，烹飪難度和時(shí)間其實(shí)放在開(kāi)頭和末尾都可以，但是考慮到這些信息在列表中會(huì)一起展示，那么我們索性就在開(kāi)頭就直接一起編輯。
接下來(lái)是添加食材，添加食材的場(chǎng)景中會(huì)涉及到對(duì)食材的添加、刪除、清空以及智能編輯（類似添加收貨地址），所以這里的場(chǎng)景不要漏掉。那有的小伙伴要問(wèn)是不是可以再加一個(gè)拍照識(shí)別食材的功能？其實(shí)不需要，因?yàn)槲覀冊(cè)跍?zhǔn)備做菜譜之前肯定對(duì)這道菜有了解，知道每一個(gè)食材的名稱我們才會(huì)去做菜，否則連什么食材都不知道就去做，那萬(wàn)一有毒呢？所以這個(gè)場(chǎng)景是不存在的。
再接著是編輯制作步驟，依然是思考用戶場(chǎng)景，除了上傳圖片和文字以外，還需要提供步驟添加、刪除、調(diào)整位置、批量傳圖等功能。這些場(chǎng)景我們?cè)谀X爆的時(shí)候或多或少會(huì)遺漏掉。
移動(dòng)端產(chǎn)品的層級(jí)和路徑主要是根據(jù)頁(yè)面來(lái)劃定的，所以頁(yè)面越多路徑就越深，但是路徑深并不意味著一定就多余，路徑少也并不意味著操作就簡(jiǎn)單。路徑階段的劃分主要是根據(jù)這幾點(diǎn)來(lái)考慮的：
1.當(dāng)前頁(yè)面內(nèi)容是否溢出、符合場(chǎng)景、滿足預(yù)期也就是說(shuō)當(dāng)前頁(yè)面中的內(nèi)容是否符合當(dāng)前場(chǎng)景的用戶，以及是不是過(guò)載了。例如我們?nèi)ベ?gòu)買(mǎi)電影票的流程，當(dāng)我們?cè)诓榭措娪霸斍榈臅r(shí)候，不會(huì)出現(xiàn)電影院和電影場(chǎng)次的選擇，因?yàn)椴环袭?dāng)前場(chǎng)景的用戶需求。
2.場(chǎng)景是否獨(dú)立我們?cè)谶x擇回收自己的手機(jī)時(shí)，在選擇型號(hào)頁(yè)面不會(huì)再讓用戶編輯估價(jià)信息。這個(gè)場(chǎng)景是獨(dú)立的，并且只有完成了前置操作步驟后才能進(jìn)行下一步。
3.任務(wù)是否需要階段性結(jié)束 為什么需要進(jìn)行新建界面，是因?yàn)楫?dāng)前界面在滿足1和2兩個(gè)約束后，要考慮第一個(gè)步驟是否階段性完結(jié)了，例如我如果把菜譜編輯基礎(chǔ)信息界面單獨(dú)做一個(gè)界面，而編輯步驟再單獨(dú)做一個(gè)界面，這里第一界面是否階段性完結(jié)呢？還沒(méi)有，因?yàn)槟憧梢?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">隨時(shí)要去修改標(biāo)題、封面、食材等等，而經(jīng)常返回上一頁(yè)并不是一件很簡(jiǎn)單的事，用戶也會(huì)擔(dān)心我編輯好的步驟會(huì)不會(huì)保存等一系列問(wèn)題。
這里再用一個(gè)蔚來(lái)app中選購(gòu)車(chē)輛配置的流程舉個(gè)例子。他這里也將選擇配置流程劃分成了幾個(gè)界面，但這個(gè)流程結(jié)構(gòu)就不是單純的線性結(jié)構(gòu)了，雖然他每個(gè)不同的配置單獨(dú)做成一個(gè)界面但是頂部利用tab來(lái)切換不同配置選項(xiàng)的界面。
所以當(dāng)任務(wù)需要階段性完成時(shí)候，例如只有先輸入手機(jī)號(hào)點(diǎn)擊發(fā)送驗(yàn)證碼之后才能收到驗(yàn)證碼，在這樣的流程中我們可以使用下一步來(lái)進(jìn)入下一個(gè)環(huán)節(jié)。如果要分不同的界面，而又沒(méi)有出現(xiàn)階段性完結(jié)的情況，那么前一頁(yè)的內(nèi)容編輯再下一頁(yè)也需要有，例如我們把標(biāo)題編輯單獨(dú)做一個(gè)界面，但是下一個(gè)編輯基本信息界面也依然要能夠編輯標(biāo)題。
通過(guò)對(duì)用戶場(chǎng)景和觸點(diǎn)的分類，以及對(duì)第四步的思考，我們可以發(fā)現(xiàn)其實(shí)編輯基本信息和編輯步驟是需要放在同一個(gè)頁(yè)面中去完成的，因?yàn)闆](méi)有階段性結(jié)束。但是放在同一個(gè)界面也有一些問(wèn)題比如單個(gè)界面需要編輯的信息太多，比較繁瑣，再次編輯需要上下滑動(dòng)瀏覽不方便等問(wèn)題。所以我們也可以看一下市面上的競(jìng)品都是怎么做的，有一些產(chǎn)品會(huì)將編輯標(biāo)題單獨(dú)劃分出一個(gè)界面，這其實(shí)沒(méi)改變前者的問(wèn)題，單獨(dú)作為一個(gè)頁(yè)面或許是基于這兩點(diǎn)考慮：
1.希望用戶通過(guò)認(rèn)真對(duì)待標(biāo)題來(lái)提高菜譜的點(diǎn)擊率和引起別人的興趣
2.業(yè)務(wù)需求，通過(guò)讓用戶了解優(yōu)質(zhì)內(nèi)容的協(xié)議來(lái)謹(jǐn)慎對(duì)待上傳菜譜的質(zhì)量
3.對(duì)于一個(gè)復(fù)雜操作前的一個(gè)準(zhǔn)備和引導(dǎo)，讓用戶更容易接受接下來(lái)的大量表單的填寫(xiě)。
接下來(lái)是填寫(xiě)的界面，那么我們就可以根據(jù)信息展示的優(yōu)先級(jí)和第三步設(shè)定好的控件進(jìn)行布局，這里涉及到的原理就不講了。我們主要來(lái)分析一下某些功能在布局的時(shí)候?yàn)槭裁催@么放。
首先封面和標(biāo)題還有簡(jiǎn)介從上至下應(yīng)該沒(méi)有什么問(wèn)題，因?yàn)橛袃蓚€(gè)輸入模塊咱就無(wú)法左右放，因?yàn)檫@3者是強(qiáng)關(guān)聯(lián)信息所以是一個(gè)整體。其次是難度和時(shí)間，這兩個(gè)字段包含的內(nèi)容和形式我們?cè)谥暗牟襟E中提到有兩種形式，一種是actionsheet還有一種是選項(xiàng)標(biāo)簽化平鋪，前者的好處是節(jié)省空間，易擴(kuò)展，后者則更加直觀和方便選擇，另外也要考慮類似控件在整個(gè)產(chǎn)品中的統(tǒng)一性。
接下來(lái)是食材添加和編輯，這里涉及到食材名稱和用量的文本輸入，這里可以直接用一行輸入模塊來(lái)放單個(gè)食材的編輯，因?yàn)檎麄€(gè)頁(yè)面表單很長(zhǎng)所以盡量簡(jiǎn)化上下空間。同時(shí)還有對(duì)食材的刪除、清空、調(diào)序和新增。那這三個(gè)按鈕怎么放比較合理呢？我們要看用戶使用的場(chǎng)景，可以考慮的維度有：操作頻率、操作優(yōu)先級(jí)以及任務(wù)的主方向。
所以在食材編輯這個(gè)模塊中，最高頻的是新增其次是刪除再次是調(diào)序最后是清空。而當(dāng)食材新增后內(nèi)容會(huì)向下延伸，所以新增的按鈕不適合放在上方，也不適合放在每個(gè)輸入模塊的右側(cè)。刪除和調(diào)序則是最某個(gè)食材信息的編輯所以是針對(duì)單個(gè)輸入模塊的，那必須跟在后面。最后的清空可以放在新增按鈕的左側(cè)。這樣就完成了添加食材的模塊。
再接下來(lái)是烹飪步驟。上傳圖片和編輯文本沒(méi)什么問(wèn)題，上下布局是因?yàn)樵谡綖g覽的時(shí)候需要大圖和文字搭配的形式，所以為了形式統(tǒng)一就只能這樣布局。
目前調(diào)整步驟在最底部，同時(shí)刪除操作也需要點(diǎn)擊調(diào)整步驟后才能出現(xiàn)，這里因?yàn)檎{(diào)整步驟和刪除不是高頻操作，弱化層級(jí)可以理解，但是如果放在底部那么如果我想要?jiǎng)h除第一步和調(diào)整前2步順序的時(shí)候，就要上下來(lái)回滑動(dòng)，不是很方便。
那其實(shí)我們可以這么做，把烹飪步驟作為一個(gè)bar，在頁(yè)面向上滑動(dòng)的時(shí)候置頂，添加食材也可以這樣操作。就是為了讓用戶在上下滑動(dòng)的時(shí)候可以隨時(shí)進(jìn)行一個(gè)編輯，步驟在任何位置都可以直接進(jìn)行換位和刪除。另外由于是大圖模式，在換位的時(shí)候進(jìn)行長(zhǎng)按拖動(dòng)其實(shí)對(duì)拇指的操作有一定的要求。既然這樣為什么不用上下切換的按鈕進(jìn)行調(diào)序。
我們來(lái)看一下拇指拖動(dòng)要激活兩個(gè)階段，首先要長(zhǎng)按激活拖動(dòng)，然后需要按住不放進(jìn)行拖拽，由于卡片面積較大拇指滑動(dòng)的距離就要長(zhǎng)，對(duì)于手小的用戶就不太方便了。那我們是否可以做成一個(gè)上下切換的按鈕，這樣只要通過(guò)單擊就可以完成順序的調(diào)換，并且通常調(diào)換順序并不需要跨越多個(gè)步驟進(jìn)行，一般也只是相鄰兩個(gè)步驟的順序換一下即可。所以這里首先我會(huì)把編輯按鈕和批量傳圖都放在烹飪步驟bar右側(cè)并置頂。
最后再補(bǔ)上剩余的選項(xiàng)模塊和發(fā)布、預(yù)覽、草稿的按鈕即可。預(yù)覽和草稿必須放在導(dǎo)航欄，因?yàn)檫@倆功能是隨時(shí)需要進(jìn)行操作的所以不能在頁(yè)面底部，而發(fā)布按鈕可以放在最底下。也有小伙伴想問(wèn)，為什么不在底部做一個(gè)固定的bar來(lái)放這些按鈕呢。因?yàn)轫?yè)面縱向信息很復(fù)雜，不僅底部占用了高度也容易誤操作，在沒(méi)有編輯完時(shí)，發(fā)布按鈕還是比較雞肋的，所以是不會(huì)出現(xiàn)一個(gè)底部固定的bar。
好啦，今天分享的交互流程案例大家學(xué)廢了嗎？我們下期再見(jiàn)，有更多想法和交流歡迎在留言區(qū)留言！
文章來(lái)源：站酷 作者：應(yīng)駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
在開(kāi)發(fā)一款高品質(zhì)的產(chǎn)品的過(guò)程中最重要的一個(gè)環(huán)節(jié)是了解誰(shuí)是你的用戶，他們的需求是什么。
設(shè)計(jì)著作《軟件創(chuàng)新之路——沖破高技術(shù)營(yíng)造的牢籠》里首度提出產(chǎn)品設(shè)計(jì)和開(kāi)發(fā)的用戶“人物角色”概念。正如設(shè)計(jì)師金·古德溫在2005年所述：“人物角色就是一個(gè)用戶原型，可以用來(lái)幫助指導(dǎo)產(chǎn)品功能、導(dǎo)航、交互、甚至視覺(jué)設(shè)計(jì)方面的決策?！边@種原型并不是真正的人，而是結(jié)合對(duì)真實(shí)用戶的事實(shí)和觀察而形成的一個(gè)令人記憶深刻的人物。
與市場(chǎng)細(xì)分不同，用戶畫(huà)像代表著目標(biāo)和行為模式，而不是人口屬性或工作職責(zé)。用戶畫(huà)像可以幫助設(shè)計(jì)成為共同參考點(diǎn)，有助于在設(shè)計(jì)討論時(shí)聚焦在特定用戶上，使用場(chǎng)景可幫助測(cè)試系統(tǒng)將用戶需要的功能點(diǎn)集成到產(chǎn)品上。
*注：用戶特征、人物畫(huà)像和使用場(chǎng)景對(duì)比表
用戶畫(huà)像常用于以下三個(gè)場(chǎng)景：
產(chǎn)品設(shè)計(jì)：開(kāi)發(fā)前期的產(chǎn)品定位設(shè)計(jì)，幫助確立產(chǎn)品定位、設(shè)計(jì)目標(biāo)、設(shè)計(jì)策略與準(zhǔn)則；
產(chǎn)品營(yíng)銷(xiāo)：促進(jìn)其他工作，如指導(dǎo)運(yùn)營(yíng)對(duì)特定用戶進(jìn)行推送活動(dòng)信息，推廣信息，個(gè)性化推薦等。
產(chǎn)品決策：分析用戶畫(huà)像，對(duì)產(chǎn)品的發(fā)展現(xiàn)狀和發(fā)展趨勢(shì)進(jìn)行預(yù)測(cè)，及時(shí)調(diào)整產(chǎn)品發(fā)展路線。
整體來(lái)說(shuō)，用戶畫(huà)像多采用定性的研究方法來(lái)進(jìn)行角色劃分，主要可采用的資料來(lái)源有：人種學(xué)研究、情境調(diào)查、觀察法、訪談法、桌面研究等，具體實(shí)行時(shí)會(huì)根據(jù)業(yè)務(wù)情況稍作調(diào)整。
用戶畫(huà)像的范圍可以很廣，也可以很窄。需要先確定這些用戶畫(huà)像是用來(lái)做什么的？只有回答了這個(gè)問(wèn)題，才能確定用戶畫(huà)像的適當(dāng)范圍。
范圍越廣，支持這些用戶畫(huà)像的數(shù)據(jù)就越淺。在廣泛的情況和場(chǎng)景中尋找具有相似動(dòng)機(jī)、目標(biāo)、信息需求、態(tài)度和行為的客戶群體是不現(xiàn)實(shí)的。
可以在大量的產(chǎn)品和服務(wù)中找到相似的部分，但是您需要使用更少、更通用的屬性來(lái)描述它們。
范圍越小，數(shù)據(jù)就越豐富。在范圍狹窄的情況下，用戶畫(huà)像屬性將直接與特定產(chǎn)品或場(chǎng)景相關(guān)。人們的行為和需求會(huì)受到相關(guān)產(chǎn)品或服務(wù)環(huán)境的極大影響。
有針對(duì)性的用戶畫(huà)像范圍將允許您在用戶的動(dòng)機(jī)、目標(biāo)、態(tài)度和行為中找到更多的主題。此類信息使團(tuán)隊(duì)能夠做出特定的設(shè)計(jì)決策。
首先了解公司對(duì)現(xiàn)有用戶和目標(biāo)用戶的理解程度，對(duì)他們有什么看法。
如果產(chǎn)品擁有確定的客戶基礎(chǔ)，就與直接接觸這些工作的人進(jìn)行交談，例如：銷(xiāo)售人員、客戶支持人員、市場(chǎng)調(diào)研員、技術(shù)銷(xiāo)售咨詢師、培訓(xùn)師等。
如果公司嘗試著為產(chǎn)品拓展用戶或者打入新市場(chǎng)，就與負(fù)責(zé)相關(guān)事宜的人交談。就這些人對(duì)用戶和客戶的個(gè)人經(jīng)驗(yàn)以及用戶不同的方面進(jìn)行訪問(wèn)。
圍繞用戶對(duì)產(chǎn)品的整體體驗(yàn)來(lái)組織訪談或?qū)嵉卦L問(wèn)，而不是圍繞特定任務(wù)。
銷(xiāo)售和市場(chǎng)營(yíng)銷(xiāo)人員通常擁有詳細(xì)的人口概況和市場(chǎng)研究，能夠提供完整的用戶分類。如果有市場(chǎng)細(xì)分，尤其是借助于使用數(shù)據(jù)或其他行為數(shù)據(jù)所得出的，就值得咨詢。
用戶常見(jiàn)的疑問(wèn)和遇到的一些問(wèn)題，應(yīng)該咨詢論壇或社區(qū)站點(diǎn)以及支持系統(tǒng)，它們能夠提供支持性數(shù)據(jù)，將這些信息變成人物角色的一部分。
從所收集的信息中提取共同主線。如：用戶擁有哪些共同點(diǎn)？頻繁出現(xiàn)的內(nèi)容有哪些？共同的期望？
然后列出用戶的重要不同點(diǎn)。例如影響產(chǎn)品用戶行為的不同屬性范圍：使用頻率、使用強(qiáng)度、業(yè)務(wù)規(guī)模等；
一旦決定要包含哪些屬性以及每個(gè)屬性在用戶群體中如何變化，就該借助于研究中觀察到的個(gè)人細(xì)節(jié)和軼事從屬性群組中合成現(xiàn)實(shí)的用戶了。
在一些情況中，需適當(dāng)增加細(xì)節(jié)、創(chuàng)造一個(gè)界定屬性范圍內(nèi)的具體事實(shí)。
例如：
可調(diào)整為：
使用從訪談中收集的資料，充實(shí)剩余的屬性，合并從相似用戶中提取出來(lái)的細(xì)節(jié)；
增加一些針對(duì)產(chǎn)品領(lǐng)域的具體信息；
然后與她具體的技術(shù)細(xì)節(jié)相結(jié)合；
情景描述的是一個(gè)人對(duì)一個(gè)活動(dòng)或一種情形如何表現(xiàn)或思考的故事。與故事一樣，情景傳達(dá)的是產(chǎn)品使用方面的細(xì)微差別，幫助利益相關(guān)者把產(chǎn)品放入真實(shí)生活情境中。
描述現(xiàn)狀的情景通常叫情境式情景（也稱問(wèn)題情景），因?yàn)樗鼈冊(cè)噲D展現(xiàn)如何改善現(xiàn)狀。對(duì)改進(jìn)方案進(jìn)行預(yù)想的情景叫設(shè)計(jì)情景。
情境式情景——主要用于設(shè)計(jì)早期階段。通過(guò)生動(dòng)地闡釋現(xiàn)有實(shí)踐中的問(wèn)題或空白，使團(tuán)隊(duì)開(kāi)始設(shè)想可能的解決方案。
設(shè)計(jì)情景——適用于整個(gè)設(shè)計(jì)和開(kāi)發(fā)過(guò)程。在早期的頭腦風(fēng)暴中，設(shè)計(jì)情景能夠激發(fā)對(duì)概念的討論和反饋。有了早期的概念，設(shè)計(jì)情景可以幫助團(tuán)隊(duì)完成可能的成果。早起的設(shè)計(jì)情景也可以作為訪談提示，探出潛在用戶的反饋。
情景是通過(guò)講故事來(lái)創(chuàng)造的，可以提取自研究中所聽(tīng)到的故事加以處理，把一堆故事減少到只剩最相關(guān)的。
情景基于以目標(biāo)和人們?yōu)閷?shí)現(xiàn)目標(biāo)而采取的行動(dòng)。如果有現(xiàn)成的人物角色，就說(shuō)明可能已經(jīng)確立了目標(biāo)和行動(dòng)，這些將形成情景的基礎(chǔ)。如果沒(méi)有可用的人物角色，就返回研究分析報(bào)告，列出每個(gè)目標(biāo)受眾最緊迫的目標(biāo)。
決定把哪些活動(dòng)包含在情景中時(shí)，針對(duì)研究人物角色的每個(gè)主要目標(biāo)：
為了實(shí)現(xiàn)這一目標(biāo)，這些活動(dòng)中的哪些最經(jīng)常采用？
為了實(shí)現(xiàn)這一目標(biāo)，這些活動(dòng)中的哪些是必需的？
哪些頻繁或必要的活動(dòng)會(huì)作為單一序列的一部分發(fā)生？
情景是以用戶視角為基礎(chǔ)的。用戶無(wú)法認(rèn)知的任何東西都不應(yīng)該納入情景的一部分，尤其是情境式情景。情景必須要概要描述最重要的用戶行為和系統(tǒng)反應(yīng)。
情境式情景通常給人一種“XX的一天”的感覺(jué)，描述幾個(gè)小時(shí)內(nèi)或一天當(dāng)中的一系列任務(wù)。
例如：
情景盡量概括一些，不要詳述界面元素或系統(tǒng)實(shí)現(xiàn)。詮釋故事的整體結(jié)構(gòu)比解釋所有細(xì)節(jié)更重要。
分享人物角色時(shí)最難的莫過(guò)于用一種簡(jiǎn)練且有益的方式來(lái)表達(dá)他們。
用一種方便使用的形式概括人物角色。例如可將其制成板狀使其更易于保存、更容易找到，并且不太可能被弄丟；也可以把用戶的圖片和關(guān)鍵屬性做成海報(bào)，并把它們訂到墻上，強(qiáng)化其存在感。
為避免完成畫(huà)像后將其束之高閣，需要鼓勵(lì)部門(mén)員工在開(kāi)會(huì)期間使用人物角色進(jìn)行討論，并且思考各個(gè)功能如何為各種各樣的人物角色服務(wù)。
項(xiàng)目需要多樣化的視角，用戶畫(huà)像自身尚不足以傳達(dá)一系列的設(shè)計(jì)見(jiàn)解。用戶畫(huà)像要與情景、體驗(yàn)?zāi)Ｐ?、任?wù)分析和傳統(tǒng)的書(shū)面報(bào)告結(jié)合使用，而不是替代他們。 最后，感謝大家的閱讀，希望本篇文章能夠?qū)Υ蠹矣兴鶐椭?
* 注：本篇文章有借鑒網(wǎng)站資料和書(shū)籍等多方面內(nèi)容。
文章來(lái)源：站酷 作者：禾x日
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
本文是參考國(guó)內(nèi)交互設(shè)計(jì)標(biāo)準(zhǔn)網(wǎng)站及用戶行為研究實(shí)現(xiàn)的用戶體驗(yàn)設(shè)計(jì)規(guī)范，用于后臺(tái)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)等。
涉及到的產(chǎn)品越多，產(chǎn)品統(tǒng)一性越強(qiáng)，實(shí)現(xiàn)信息同頻，開(kāi)發(fā)和設(shè)計(jì)快速了解信息
一個(gè)項(xiàng)目中會(huì)涉及到多種按鈕，甚至一個(gè)頁(yè)面中也會(huì)涉及到多種不同功能的按鈕，這個(gè)就需要把同一類型或同一功能的按鈕，它們的位置統(tǒng)一。減少用戶學(xué)習(xí)成本。
因?yàn)槿绻粯拥墓δ馨粹o在不同的變換位置的話會(huì)打亂用戶已經(jīng)形成的習(xí)慣，增加其學(xué)習(xí)成本。（盡量采取以下情況的一種）
幫助說(shuō)明的表現(xiàn)形式有很多種，但不管選那種整個(gè)項(xiàng)目要保持統(tǒng)一，一些特殊情況除外，固定一個(gè)位置，可以方便用戶在最短的時(shí)間內(nèi)，快速完成此項(xiàng)操作和獲取內(nèi)容。
權(quán)重是為了突出有效信息，也能在不同元素建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識(shí)別關(guān)鍵信息。
為了讓用戶能在操作上（類似表單、彈出框等場(chǎng)景）快速做出判斷，來(lái)突出其中一項(xiàng)相對(duì)更重要或者更高頻的操作。
突出的方法，不局限于強(qiáng)化重點(diǎn)項(xiàng)，也可以是弱化其他項(xiàng)。
但是在一些需要用戶慎重決策的場(chǎng)景中，系統(tǒng)應(yīng)該保持中立，不能替用戶或者誘導(dǎo)用戶做出判斷
表單在遵守操作流程的情況下，讓用戶涉及到的操作從易到難，讓用戶有填下去的動(dòng)力。
排序規(guī)則
（1）有“有默認(rèn)項(xiàng)”的選項(xiàng)；
（2）有“選項(xiàng)”的選項(xiàng)；
（3）只輸入“數(shù)字”的選項(xiàng)；
（4）“添加圖片”“修改”等涉及復(fù)雜操作的選項(xiàng)；
（5）“備注”“商品賣(mài)點(diǎn)”等選擇。
左右排版的時(shí)候?qū)ⅰ爸匾靥铐?xiàng)”先在從左邊（縱向排列）開(kāi)始排版（排版時(shí)仍按照我們的從簡(jiǎn)到難的規(guī)則）
注：當(dāng)“必填項(xiàng)”比“非必填項(xiàng)”多時(shí)，排版上要考慮，就按照次序，左邊排滿，再排右邊。
在使用Table 時(shí)，文字鏈的點(diǎn)擊范圍受到文字長(zhǎng)短影響，可以設(shè)置整個(gè)單元格為熱區(qū)，以便用戶觸發(fā)。
注：當(dāng)懸浮在“客戶”所在的文字鏈單元格時(shí)，鼠標(biāo)
【指針】隨即變?yōu)椤臼中汀?，單擊即可跳轉(zhuǎn)。
當(dāng)需要增強(qiáng)按鈕的響應(yīng)性時(shí)，可以通過(guò)增加用戶點(diǎn)擊熱區(qū)的范圍，而不是增大按鈕形狀，從而增強(qiáng)響應(yīng)性，又不缺失美感。
注：在移動(dòng)端尤其適用。
鼠標(biāo)移入按鈕附近，即可激活Hover 狀態(tài)
當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí)，可以使用『?jiǎn)螕艟庉嫛?
狀態(tài)一：普通的瀏覽模式，不區(qū)分可編輯行和不可編輯行；
狀態(tài)二：鼠標(biāo)懸停時(shí)，『指針』變?yōu)椤菏中汀?，編輯區(qū)域底色變黃，出現(xiàn)『Tooltips』提示單擊編輯；
狀態(tài)三：鼠標(biāo)點(diǎn)擊后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時(shí)光標(biāo)定位在『輸入框』中。
當(dāng)『易讀性』為主，同時(shí)又要突出操作性的『易編輯性』時(shí)，可使用『文字鏈/圖標(biāo)編輯』
狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標(biāo)；
狀態(tài)二：鼠標(biāo)點(diǎn)擊『編輯』后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時(shí)光標(biāo)定位在『輸入框』中。
當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí)，可以使用『?jiǎn)螕艟庉嫛?
注：編輯模式在不破壞整體性的前提下，可擴(kuò)大空間，以便放下『輸入框』等表單元素；其中，在Table 中進(jìn)行編輯模式切換時(shí)，需要保證每列的不跳動(dòng)。
減少負(fù)擔(dān)，增加輕量化的操作
注：刪除的操作是謹(jǐn)慎的，系統(tǒng)在不打斷當(dāng)前操作的時(shí)候給出二次提醒確認(rèn)。
填寫(xiě)表單的條件反饋。
注：不需要提交后才出現(xiàn)提示，輸入及時(shí)給用戶反饋
完成整個(gè)操作后的提示以及系統(tǒng)提示
注：重要的，文字多于15個(gè)字以上不適合放在toast里面提示。
提供下一步操作的入口
不僅要提示他發(fā)生了什么，還能引導(dǎo)他怎么做，甚至能讓他一步到位直接跳轉(zhuǎn)到要進(jìn)行下一步操作的頁(yè)面去操作
當(dāng)頁(yè)面沒(méi)有按鈕時(shí)，提供明確的入口。
最后，關(guān)于后臺(tái)的用戶體驗(yàn)設(shè)計(jì)規(guī)范就總結(jié)到這里啦。
文章來(lái)源：站酷 作者：chaih
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
用戶喜歡在網(wǎng)上收藏各種東西，把收藏到的東西占為己有，滿足自我的占有欲，每個(gè)用戶都為此而樂(lè)此不疲。
很多互聯(lián)網(wǎng)產(chǎn)品在用戶點(diǎn)擊收藏后，讓用戶去選擇收藏夾。其實(shí)用戶并不喜歡去選擇，他們只想簡(jiǎn)單的把自己喜歡的東西收藏下來(lái)。
選擇本身并不是一件很容易的事情，尤其是對(duì)于那些有選擇困難癥的人來(lái)說(shuō)。實(shí)際上，我每次都是選默認(rèn)那個(gè)。
這并不是一個(gè)好的用戶體驗(yàn)。
當(dāng)然也有一些做的很好的體驗(yàn)，比如微信的收藏，收藏后會(huì)出現(xiàn)一個(gè)“收藏成功”的非模態(tài)反饋。
同時(shí)可以添加標(biāo)簽，但這個(gè)并非強(qiáng)制，為了滿足那些有這種需求的用戶。添加標(biāo)簽的目的是為了方便用戶在日后的檢索。
在收藏列表，微信會(huì)根據(jù)收藏的內(nèi)容自動(dòng)分成鏈接、文件、圖片和視頻等，最近使用位于第一位。
也就是說(shuō)并不需要用戶去創(chuàng)建自定義分類。
你也可以搜索標(biāo)簽來(lái)找到之前收藏的內(nèi)容。通過(guò)這些方式基本上滿足了大部分用戶的需求。
網(wǎng)站會(huì)根據(jù)你采集的圖片在極短的時(shí)間內(nèi)，自動(dòng)識(shí)別出圖片對(duì)應(yīng)的收藏夾類型?？梢灾苯硬杉綄?duì)應(yīng)的文件夾。
然而經(jīng)過(guò)測(cè)試，經(jīng)常會(huì)出現(xiàn)誤差。因?yàn)閳D片的分類其實(shí)很復(fù)雜的，屬于高度自定義，很顯然，智能識(shí)別并不是一個(gè)好的解決方案。
花瓣是一個(gè)設(shè)計(jì)師收集靈感的網(wǎng)站，該網(wǎng)站常見(jiàn)的用戶使用場(chǎng)景是，設(shè)計(jì)師在瀏覽素材時(shí)，會(huì)大量采集自己感興趣的素材，但每次都要選擇文件夾，非常繁瑣且低效。
后來(lái)花瓣網(wǎng)加入了快速采集的功能，其邏輯是網(wǎng)站會(huì)默認(rèn)選擇上一次采集的收藏夾，這大大提高了用戶采集圖片的效率。
而如果你需要選擇其他文件夾則可點(diǎn)擊普通采集。這兩種采集方式滿足了設(shè)計(jì)師的不同需求。
社區(qū)類產(chǎn)品有各種點(diǎn)贊，收藏等互動(dòng)信息，但用戶又不想被別人知道這些信息。
因此，在規(guī)劃產(chǎn)品時(shí)需要考慮到用戶互動(dòng)隱私的保護(hù)，這是用戶側(cè)的剛性需求。
抖音個(gè)人主頁(yè)的點(diǎn)贊列表，我記得剛開(kāi)始是公開(kāi)的，且不能設(shè)置為私密。
用戶點(diǎn)贊的視頻會(huì)出現(xiàn)在這里，卻少有人希望這些信息被別人看到，總有些點(diǎn)贊視頻你并不想被別人看到。
如果點(diǎn)贊列表可見(jiàn)，那么用戶在點(diǎn)贊的時(shí)候就會(huì)有所顧慮，這不利于平臺(tái)的互動(dòng)率。
特別是隨著抖音上熟人也越來(lái)越多，強(qiáng)關(guān)系社交場(chǎng)景在漸漸加強(qiáng)。
抖音后來(lái)也發(fā)現(xiàn)了這個(gè)問(wèn)題，把它設(shè)計(jì)成了默認(rèn)隱藏。（當(dāng)然可以自己設(shè)置為公開(kāi)，但只有極少數(shù)用戶會(huì)這樣做。）
由于點(diǎn)贊是私密的，用戶可以隨心所欲的點(diǎn)贊自己喜歡的視頻，毫無(wú)社交壓力。
這是為何？
源于人性心理學(xué)：窺私欲。人人都喜歡窺視別人的隱私，而不喜歡自己的隱私被窺視。
不然為何如今的QQ空間基本上都設(shè)置了權(quán)限，畢竟，誰(shuí)想被別人窺視當(dāng)年那個(gè)煞筆的自己呢？
現(xiàn)在訂閱號(hào)打開(kāi)率越來(lái)越低，朋友圈分享曾是訂閱號(hào)流量來(lái)源的一大入口。
朋友圈早已淪為了一個(gè)人設(shè)打造的陣地，現(xiàn)在的人發(fā)圈越來(lái)越謹(jǐn)慎。
用戶似乎越來(lái)越不愿意在朋友圈分享文章了，除非是有利于自己人設(shè)打造的內(nèi)容。
為了減輕用戶的這種社交壓力，微信推出了“在看”的功能。
用戶點(diǎn)了“在看”后，此文章會(huì)出現(xiàn)在看一看這個(gè)模塊，且七天前的分享將不可見(jiàn)，這就相當(dāng)于一個(gè)弱化版的分享功能。
這將大大減輕用戶分享的社交壓力。對(duì)于公眾號(hào)主來(lái)說(shuō)，相當(dāng)于增加了一個(gè)流量入口，激發(fā)他們創(chuàng)作更多的內(nèi)容。
視頻號(hào)點(diǎn)贊也是同理，會(huì)被朋友看到，導(dǎo)致用戶在點(diǎn)贊的時(shí)候就會(huì)有所顧慮。
他會(huì)考慮，我點(diǎn)贊了這個(gè)視頻，我老師、上司、父母、親戚、朋友會(huì)不會(huì)看到？他們會(huì)怎么想？
但他在抖音上點(diǎn)贊是沒(méi)有這么多顧慮的，單純的喜歡就行。
第一，抖音是弱關(guān)系平臺(tái)；
第二，抖音上的點(diǎn)贊默認(rèn)是私密的。
因此，微信才推出了私密贊的功能，需要長(zhǎng)按才能觸發(fā)。
這并是一個(gè)優(yōu)雅的解決方案，一是操作成本有點(diǎn)高，二是用戶存在較高的學(xué)習(xí)成本。
微信作為一個(gè)強(qiáng)關(guān)系社交場(chǎng)景，這正是微信與抖音不一樣的地方。
以上兩者的目的都是一致的，那就是為了減輕用戶的社交壓力。
同時(shí)用過(guò)mac OS和windows系統(tǒng)的用戶不知是否發(fā)現(xiàn)，這兩個(gè)操作系統(tǒng)的彈窗按鈕“確定”和“取消”的位置是不一樣的？
mac的彈窗按鈕確定在右，取消在左；而windows的剛好反過(guò)來(lái)，確定在左，取消在右。
為什么會(huì)有這樣的差異？哪一種更加合理？
在交互設(shè)計(jì)中，這種彈窗叫做模態(tài)反饋，艾倫·庫(kù)珀在《About Face 4》中提到：模態(tài)模式一種臨時(shí)模式，它通過(guò)遮罩將用戶當(dāng)前看到的內(nèi)容和之前看到的內(nèi)容區(qū)分開(kāi)來(lái)，界面中只有 popup（彈出層）組件具有可交互行為，需要用戶操作才能退出該模式。模態(tài)的優(yōu)勢(shì)在于讓用戶專注于完成某個(gè)任務(wù)而不被干擾。
首先我們要明白這兩個(gè)按鈕哪個(gè)使用率更高，一般來(lái)說(shuō)，“確定”的點(diǎn)擊率要遠(yuǎn)遠(yuǎn)高于“取消”。這是因?yàn)榇蠖鄶?shù)用戶對(duì)于自己的操作行為是明確的。
所以這兩個(gè)按鈕在視覺(jué)上一定要做出差異化，“確定”的視覺(jué)層級(jí)要高于“取消”，這樣用戶才會(huì)一目了然，不會(huì)感到困惑。
回到剛才的問(wèn)題，逆向思考這兩者背后的邏輯差異。
windows彈窗的背后邏輯：
人的閱讀習(xí)慣是從左到右，所以把點(diǎn)擊率更高的按鈕放在左邊更加符合人的正常閱讀習(xí)慣。
mac彈窗的背后邏輯：
根據(jù)一般的任務(wù)的流程，“取消”在左代表返回上一步操作，而“確定”在右代表進(jìn)入下一步任務(wù)流程。
看上去似乎都有道理，這兩種交互方式本身沒(méi)有絕對(duì)的對(duì)與錯(cuò)。只要在整個(gè)系統(tǒng)中保持一致性，讓用戶形成操作習(xí)慣就沒(méi)有啥問(wèn)題。
從個(gè)人的使用習(xí)慣而言，個(gè)人更傾向于mac的這種方式。
手機(jī)上的實(shí)體按鍵電源鍵和音量鍵通常有兩種分布方式，放在左右兩側(cè)或都放在右側(cè)，前者以iPhone為代表，后者以安卓手機(jī)為代表。
這兩種方式有什么區(qū)別？哪種方式更加合理？電源鍵和音量鍵屬于完全不同類型的兩種按鍵，且都是高頻使用，它們的功能自然不用贅述。
我們先來(lái)看看都放在右側(cè)會(huì)有什么問(wèn)題，以下使用場(chǎng)景相信用戶不會(huì)陌生：
用戶a，在地鐵上玩王者，聲音有點(diǎn)大，想把聲音調(diào)小，結(jié)果不小心按到了電源鍵，導(dǎo)致手機(jī)息屏，而此刻你正在激烈的團(tuán)戰(zhàn)，內(nèi)心有一萬(wàn)只“草尼瑪”奔騰而過(guò)……
用戶b，每次按電源鍵（解鎖或鎖屏）都會(huì)不小心同時(shí)按到音量鍵，結(jié)果直接就截圖了！這種情況發(fā)生了不止一次，因?yàn)檫@兩個(gè)按鍵離的太近了……
用戶c，自家的小米11，電源鍵位于中間位置，右手拿時(shí)大拇指會(huì)觸碰到，左手拿時(shí)中指剛好會(huì)觸碰到，而電源鍵又有指紋鎖功能，導(dǎo)致手機(jī)在不斷的解鎖，而你毫無(wú)察覺(jué)……
通過(guò)上面的案例，可以得出結(jié)論：若按鍵都放在右側(cè)，會(huì)導(dǎo)致用戶經(jīng)常誤觸而造成不必要的麻煩。
放在兩側(cè)就不會(huì)有這樣的問(wèn)題?？梢杂行Х乐拐`觸，尤其是盲按，不用擔(dān)心按錯(cuò)，減少誤操作的幾率。
值得一提的是，iPhone手機(jī)的電源鍵一開(kāi)始是位于頂部位置，這是為何？
因?yàn)閯傞_(kāi)始時(shí)手機(jī)都是小屏幕（3.5～4寸左右），對(duì)于iPhone5S及以前的手機(jī)來(lái)說(shuō)，單手操控，拇指Home，食指電源，剛剛好。
所以電源鍵放在頂部既按得到又可以減少誤操作。
后來(lái)隨著手機(jī)大屏的趨勢(shì)（4.7寸以上），這個(gè)時(shí)候單手已經(jīng)不方便按到頂端了，從6代開(kāi)始就把電源鍵放在右側(cè)了。
但無(wú)論是哪種方式， 兩個(gè)按鍵都是分開(kāi)放。
還有一個(gè)小細(xì)節(jié)，iPhone的實(shí)體鍵不是在右側(cè)正中間，而是在靠上的位置。
iPhone設(shè)計(jì)理念是單手持握，并且大多數(shù)人右手握手機(jī)，大拇指經(jīng)常會(huì)碰到右側(cè)邊框，若果放中間，這樣會(huì)造成誤觸音量鍵和靜音鍵。
其實(shí)上面的案例3就已經(jīng)說(shuō)明了按鍵放在中間的弊端。
我想起了當(dāng)年的錘子T1，左右按鍵一樣大且位于兩側(cè)的中間，這是典型的為了追求完美的對(duì)稱而向用戶體驗(yàn)妥協(xié)。
iPhone從初代開(kāi)始就已經(jīng)建立了自己的設(shè)計(jì)理念，不管是工業(yè)設(shè)計(jì)還是界面設(shè)計(jì)，并沿用至今。
從初代開(kāi)始，iPhone機(jī)身左側(cè)音量鍵上方就有一個(gè)靜音鍵。
這些年來(lái)，iPhone一直在減少各種實(shí)體按鍵以及外部接口，比如3.5mm耳機(jī)孔、home鍵。
但直到如今這個(gè)靜音鍵卻一直保留下來(lái)，為何iPhone對(duì)于這個(gè)按鍵情有獨(dú)鐘？
靜音鍵開(kāi)啟后，任何來(lái)電或通知都是無(wú)聲的，震動(dòng)也會(huì)消失。
在無(wú)需點(diǎn)亮屏幕的情況下實(shí)現(xiàn)一鍵靜音，方便快捷，深受用戶的青睞。
根據(jù)自身的使用習(xí)慣以及用戶研究，無(wú)非以下幾種使用場(chǎng)景，比如看電影、開(kāi)會(huì)、上課等：
1.進(jìn)電影院看電影前，我一般都會(huì)撥一下，避免在看電影的過(guò)程中被來(lái)電鈴聲打擾，影響了自己和別人觀影。
2.開(kāi)會(huì)的時(shí)候也會(huì)撥一下，以防在開(kāi)會(huì)的時(shí)候突然被來(lái)電鈴聲所打擾，避免不必要的尷尬。
3.學(xué)生黨在上課前一般也會(huì)開(kāi)啟，這樣整節(jié)課都不怕打電話進(jìn)來(lái)了。
總之，就是不希望自己的手機(jī)鈴聲打擾到自己和別人，帶來(lái)不必要的麻煩。
如果是虛擬靜音鍵，需要先解鎖手機(jī)，對(duì)著手機(jī)屏幕一頓操作。
而實(shí)體鍵不需要這么麻煩，可以盲操作，放在褲兜里都不影響操作。
這個(gè)按鍵這么重要，卻很少看到安卓手機(jī)上有（除了一加基本上沒(méi)有）。
實(shí)體靜音鍵并非蘋(píng)果首創(chuàng)，之前的Palm、Blackberry（黑莓）早已有這樣的設(shè)計(jì)。
可能的原因是安卓控制中心很早有靜音按鈕，甚至有些定制系統(tǒng)還可以把靜音按鈕直接放在桌面上，設(shè)置靜音非常方便，也就沒(méi)必要再多加一個(gè)實(shí)體鍵了，顯得多余又徒增成本。
上面提到過(guò)的，作為安卓陣營(yíng)唯一的靜音鍵，一加手機(jī)引以為傲的三段式按鍵，該設(shè)計(jì)可以通過(guò)物理鍵直接實(shí)現(xiàn)在靜音、免打擾與正常模式當(dāng)中快速切換。
但個(gè)人認(rèn)為這個(gè)設(shè)定復(fù)雜了，三種模式遠(yuǎn)比兩種模式復(fù)雜。用戶并不一定能搞明白，有一定的學(xué)習(xí)成本。
在早期，iPhone的控制中心并沒(méi)有靜音按鈕，想要設(shè)置個(gè)靜音并不是一件容易的事情，而這個(gè)功能又是必須的，蘋(píng)果索性直接做了一個(gè)實(shí)體物理鍵。
這樣靜音的時(shí)候只需要把靜音鍵撥過(guò)來(lái)就可以了，一步到位，使用體驗(yàn)也很好，所以一直保留至今。
雖然現(xiàn)在iPhone的控制中心已經(jīng)加入了勿擾模式，但考慮到老用戶的使用習(xí)慣，以及品牌調(diào)性，蘋(píng)果對(duì)于這個(gè)實(shí)體按鍵的去掉還是顯得很謹(jǐn)慎。
考慮到之后iPhone在防水、機(jī)身內(nèi)部空間的改進(jìn)，不排除蘋(píng)果終有一天會(huì)取消iPhone上這個(gè)靜音鍵。
靜音鍵雖好，但也并非沒(méi)有缺點(diǎn)。用戶有時(shí)候會(huì)無(wú)意中觸發(fā)這個(gè)按鍵而不自知，或者開(kāi)啟后忘記關(guān)閉，導(dǎo)致錯(cuò)過(guò)了一些重要的電話。
雖然開(kāi)啟了靜音鍵，但并不是絕對(duì)的靜音。如果是鬧鐘，鈴聲還是會(huì)響起，因?yàn)轸[鐘的優(yōu)先級(jí)要遠(yuǎn)高于靜音模式。
蘋(píng)果這是考慮到了如果有用戶不小心觸發(fā)了靜音鍵，或者開(kāi)啟后忘記了關(guān)閉，害怕用戶耽誤了重要事情。
這就很好的解釋了為何明明開(kāi)啟了靜音模式，卻還可以調(diào)解音量大小的原因所在。細(xì)微之處方見(jiàn)真功夫。
在日常生活中，旋鈕是個(gè)很常見(jiàn)的東西，比如音箱，微波爐，收音機(jī)，老式電視，車(chē)載旋鈕……
在機(jī)械產(chǎn)品上，旋鈕凸起的把手和它下面的圓盤(pán)刻度，是最明顯不過(guò)的旋轉(zhuǎn)暗示，符合人的自然感知。
旋鈕式交互是個(gè)人非常偏愛(ài)的一種交互方式，我認(rèn)為這種交互跟iPhone的home鍵一樣經(jīng)典，主要原因有三：
旋鈕操作簡(jiǎn)單，看到這種按鈕，一歲小孩子都會(huì)忍不住用手去抓。對(duì)于用戶來(lái)說(shuō)，幾乎不需要學(xué)習(xí)成本。
在旋轉(zhuǎn)的過(guò)程中，可調(diào)大調(diào)小，一切盡在用戶的掌控之中，用戶感覺(jué)到有十分的安全感。
在調(diào)節(jié)的過(guò)程中，調(diào)大調(diào)小都能立刻收到即時(shí)的反饋，這是用戶最喜歡的交互方式。
我們?cè)谟|摸屏上很少看到這種旋鈕式交互，因?yàn)檫@種交互是要建立在抓住旋鈕實(shí)物的感受。
而觸控屏是個(gè)二維的世界，沒(méi)有真實(shí)抓握的手感，無(wú)法還原出三維世界的真實(shí)手感。
汽車(chē)上最常見(jiàn)的旋鈕就要數(shù)音量和空調(diào)了。然而自從特斯拉在車(chē)上推廣大屏幕后，越來(lái)越多的國(guó)內(nèi)廠家開(kāi)始盲目跟風(fēng)，把絕大部分的功能按鈕集成到屏幕中，比如空調(diào)，不僅不方便，行車(chē)中使用還容易造成危險(xiǎn)駕駛。
車(chē)上的觸控體驗(yàn)跟手機(jī)上是完全是兩碼事，使用場(chǎng)景也完全不同。最大的區(qū)別在于后者沒(méi)有安全問(wèn)題。
都知道開(kāi)車(chē)不玩手機(jī)，可是行車(chē)時(shí)操作中控屏跟玩手機(jī)有什么兩樣？
對(duì)于駕駛員來(lái)說(shuō)更加安全，通過(guò)旋鈕調(diào)節(jié)空調(diào)，熟悉后完全可以實(shí)現(xiàn)盲操，邊開(kāi)車(chē)邊操作毫無(wú)壓力。
如果是觸控屏，你必須看著屏幕，一頓操作猛如虎，而在開(kāi)車(chē)過(guò)程中眼睛哪怕離開(kāi)前方一秒鐘就意味著危險(xiǎn)。
而安全是汽車(chē)駕駛的重中之重。
用戶的操作有真實(shí)的物理反饋，旋鈕阻尼。
屏幕上虛擬按鍵反饋根本無(wú)法與實(shí)體旋鈕相提并論。
軟件系統(tǒng)用久了會(huì)變卡，可能會(huì)死機(jī)，難免會(huì)有bug。而這些不穩(wěn)定因素將成為汽車(chē)駕駛的潛在危險(xiǎn)因素。
一旦屏幕失靈，或者系統(tǒng)死機(jī)了，那所有按鍵都失效了。
雖然特斯拉為了提升其車(chē)載系統(tǒng)的穩(wěn)定性下了很大功夫，但是問(wèn)題從來(lái)都沒(méi)有停止過(guò)。
但是硬件基本上很少會(huì)出問(wèn)題，物理旋鈕才讓人100%放心。
無(wú)論廠家如何吹噓，虛擬屏幕按鍵在大多數(shù)情況下都不會(huì)比實(shí)體按鍵有更好的使用體驗(yàn)。
因此，有一些實(shí)體鍵出于安全駕駛的考慮還是應(yīng)該保留，將各種功能按鈕都集成在屏幕里并不見(jiàn)得是一個(gè)明智的選擇。盲目的把實(shí)體按鍵變?yōu)橛|摸按鍵存在安全隱患。
文章來(lái)源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
之前總結(jié)了B端表單頁(yè)設(shè)計(jì)的一些問(wèn)題，其中信息錄入是比較重要的部分，信息錄入中選擇錄入是最為常用及復(fù)雜的組件，平時(shí)工作中遇到的相關(guān)問(wèn)題也是最多的，此次針對(duì)選擇錄入常用組件的應(yīng)用場(chǎng)景和交互規(guī)則進(jìn)行總結(jié)
選擇錄入的類型比較多，可以簡(jiǎn)單的分為兩大類即
基礎(chǔ)選擇組件：?jiǎn)芜x/多選/開(kāi)關(guān)/下拉選擇
復(fù)雜選擇組件：時(shí)間/日期/穿梭框/級(jí)聯(lián)選擇/樹(shù)形選擇等
B端表單業(yè)務(wù)場(chǎng)景比較多，很多場(chǎng)景具有通用性，有的場(chǎng)景卻有一定的獨(dú)立性，需要了解場(chǎng)景及用戶的需求和組件的適用性才能提高用戶操作體驗(yàn)和效率
一.單選框
單選框(Radio)是表單中比較常用的控件，它通常被用來(lái)從一組互斥的相關(guān)選項(xiàng)中選擇一個(gè)單獨(dú)的選項(xiàng)。
當(dāng)點(diǎn)擊一個(gè)未選中的單選名時(shí)，它會(huì)被選中，其他按鈕為未選中狀態(tài)。英文命名Radio來(lái)源于舊收音機(jī)上的按鈕，用于舊收音機(jī)不同頻道的切換，當(dāng)一個(gè)按鈕被按下時(shí)，其他按鈕會(huì)彈起，使被按下的按鈕處于唯一被選擇狀態(tài)的按鈕。
使用場(chǎng)景
1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行單一選擇時(shí)使用單選框；如果要進(jìn)行多個(gè)選擇，推薦使用多選框。
2.當(dāng)選項(xiàng)數(shù)目在2-7個(gè)之間時(shí)使用單選框；如果選項(xiàng)超過(guò)7個(gè)，推薦使用下拉框。
3.如果有兩個(gè)含義相反的選項(xiàng)，如“同意”和“不同意”，“接受”和“拒絕”等，建議使用一個(gè)多選框或者開(kāi)關(guān)勾選為同意，不勾選為不同意。
4.如果每個(gè)選項(xiàng)都有同等的優(yōu)先級(jí)，沒(méi)有推薦選項(xiàng)時(shí)，使用單選框；如果需要向用戶推薦某個(gè)選項(xiàng)，可以使用下拉框。
5.如果提供給用戶的選項(xiàng)很熟悉，看了第一個(gè)選項(xiàng)就能預(yù)見(jiàn)到所有的內(nèi)容，如“周一”，那么后邊的選項(xiàng)是“周二到周日”等，這種情況下就不需要將所有的選項(xiàng)都展示出來(lái)，可以使用下拉框來(lái)簡(jiǎn)化界面。
交互邏輯
1.選項(xiàng)的設(shè)置，在設(shè)計(jì)單選框的選項(xiàng)時(shí)，要充分考慮用戶的實(shí)際情況，給出的選項(xiàng)要覆蓋到所有的情況。應(yīng)該滿足“互斥”的原則，因此選項(xiàng)之間要避免存在交集，同時(shí)也要注意選項(xiàng)覆蓋要全面，不能出現(xiàn)遺漏。
例如，要考慮到用戶不進(jìn)行選擇的情況，這時(shí)需要提供一個(gè)“無(wú)”的選項(xiàng)。給出的選項(xiàng)有可能都不符合用戶的情況，如果所有的選項(xiàng)用戶都可能不會(huì)選，就需要提供一個(gè)“其它”選項(xiàng)。
2.默認(rèn)選項(xiàng)，一般情況下為第一個(gè)選項(xiàng)，需要選擇最安全，最有可能的選項(xiàng)作為默認(rèn)選項(xiàng)，提前預(yù)判用戶的選擇，提升用戶選擇效率。
3.選項(xiàng)排序會(huì)影響用戶選擇效率，所以需要遵循一定的原則。按照邏輯順序，選擇概率由高到低；或者按照復(fù)雜程度排序，由簡(jiǎn)單到復(fù)雜；也可以按照操作后風(fēng)險(xiǎn)排序，將最安全的操作放在前邊，由風(fēng)險(xiǎn)最低到最高進(jìn)行排序
4.排列對(duì)齊方式，豎直排列相對(duì)于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項(xiàng)進(jìn)行左對(duì)齊，不用受制于選項(xiàng)的標(biāo)簽文字長(zhǎng)短，但豎直排列會(huì)占用較多的垂直空間；水平排列要注意每個(gè)選項(xiàng)之間的間距，間距盡量大一點(diǎn)，要不然用戶會(huì)分不清單選按鈕的文字到底是在前邊，pc端水平空間比較大，所以相對(duì)而言，水平排列的方式更加常用。
5.交互區(qū)域，單選框的面積較小，用戶在點(diǎn)擊的時(shí)候會(huì)比較困難?？梢酝ㄟ^(guò)擴(kuò)大點(diǎn)擊區(qū)的交互區(qū)域來(lái)提高易用性，將標(biāo)簽文字也設(shè)置為可點(diǎn)擊，增加操作區(qū)域的面積，方便用戶操作
6.文字標(biāo)簽，每個(gè)選項(xiàng)的文字都要簡(jiǎn)潔明了的表達(dá)該選項(xiàng)所代表的含義。一般使用短語(yǔ)而不是句子，因此不需要以句號(hào)來(lái)結(jié)尾。盡量保證每個(gè)文字標(biāo)簽用語(yǔ)的表達(dá)的一致性，不要出現(xiàn)有的用名詞，有的用動(dòng)詞的情況。如果需要解釋說(shuō)明，可以在選項(xiàng)下方使用單獨(dú)一行文字。如果標(biāo)簽文字無(wú)法進(jìn)行精簡(jiǎn)，必須使用多行文字，將單選按鈕與文字頂對(duì)齊
7.交互狀態(tài)，每個(gè)選項(xiàng)都有選中和未選中兩種情況，每種情況對(duì)應(yīng)了3種交互狀態(tài)，分別為默認(rèn)、懸浮和禁用。
二.多選框
多選框的交互定義是幫助用戶完成從若干個(gè)互斥的選項(xiàng)集合當(dāng)中選取一個(gè)或者多個(gè)選項(xiàng)的任務(wù)，多選框多用于表單中。傳統(tǒng)意義上，多選框是方形，單選框是圓的，用戶已經(jīng)形成這種習(xí)慣認(rèn)知，所以盡量避免使用特殊形狀
使用場(chǎng)景
1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行多個(gè)選擇，完成N選n的任務(wù)，使用多選框
2.當(dāng)選項(xiàng)數(shù)目在3-7個(gè)之間時(shí)使用多選框；如果選項(xiàng)超過(guò)7個(gè)，推薦使用下拉選擇
3.當(dāng)選項(xiàng)數(shù)量為一個(gè)，包含“是”和“否”的邏輯，也可叫單個(gè)多選框 比如常見(jiàn)的用戶協(xié)議頁(yè)面，通常采用單個(gè)多選框。
交互邏輯
選項(xiàng)排序/對(duì)齊方式/交互區(qū)域/文字標(biāo)簽等邏輯與單選框基本一致
1.選項(xiàng)的設(shè)置，因?yàn)樗羞x項(xiàng)處于外露狀態(tài)，所以超過(guò)7個(gè)時(shí)建議使用下拉選擇器，避免選項(xiàng)過(guò)多難以展示
2.默認(rèn)選項(xiàng)，相對(duì)單選框，默認(rèn)選擇在多選框中并不常見(jiàn)
3.提交操作，單個(gè)多選場(chǎng)景中，提交時(shí)必不可少的，可以是確認(rèn)按鈕或是其他方式；下拉選框中為了提高效率也可不用確認(rèn)，點(diǎn)擊空白處即確認(rèn)選擇。
4.排列對(duì)齊方式：縱向排布，適用于選項(xiàng)內(nèi)容較多或信息長(zhǎng)度差異較大的情況；橫向，適用于選項(xiàng)數(shù)量多且內(nèi)容簡(jiǎn)短的情況
5.特殊狀態(tài)：相對(duì)于其他控件，多選有了兩個(gè)較為特殊的狀態(tài)“半選中”“禁用(已選)”
1）半選中狀態(tài)是全選狀態(tài)的一種特殊狀態(tài)，依附于全選狀態(tài)，所以當(dāng)多選框中存在全選時(shí)才可能出現(xiàn)半選狀態(tài)，同時(shí)還需要有選中狀態(tài)的子項(xiàng)，全選半選狀態(tài)屬于【父級(jí)】狀態(tài)，交互的邏輯是狀態(tài)的變化是隨時(shí)體現(xiàn)的，所以【子級(jí)】狀態(tài)的變化，作為【父級(jí)】狀態(tài)也應(yīng)該隨之變化，這樣父子級(jí)聯(lián)動(dòng)才會(huì)有半選中狀態(tài)的出現(xiàn)。
2）禁用狀態(tài)有未選禁用和已選禁用，未選禁用一般是該條數(shù)據(jù)不滿足條件無(wú)法選中進(jìn)行操作。而已選禁用一般用戶的權(quán)限不足無(wú)法進(jìn)行操作，通常展示出來(lái)只是為了讓用戶了解到有此操作。
應(yīng)用場(chǎng)景
1.復(fù)雜選擇器
復(fù)雜選擇器中常常會(huì)用到多選框，可以明確展示選項(xiàng)的選擇狀態(tài)，需要注意的是多選框可以承載的半選，全選狀態(tài)所對(duì)應(yīng)的關(guān)系，是否符合業(yè)務(wù)場(chǎng)景。在實(shí)際工作中，我曾遇到過(guò)父級(jí)選擇影響子級(jí)但是子級(jí)無(wú)法影響父級(jí)的多選場(chǎng)景，不符合常規(guī)的多選習(xí)慣，但是在實(shí)際業(yè)務(wù)場(chǎng)景中真實(shí)存在。
2.權(quán)限設(shè)置
在很多權(quán)限設(shè)置/流程設(shè)置的頁(yè)面中，常常會(huì)用到多選框，需要注意的是各個(gè)場(chǎng)景中選中，取消，默認(rèn)，重置等不同狀態(tài)下，頁(yè)面的變化，狀態(tài)扭轉(zhuǎn)時(shí)交互邏輯的合理性和易用性。
3.表格多選
表格頁(yè)面情況多且復(fù)雜，對(duì)于勾選有兩種形式一種是勾選多選框，一種是點(diǎn)擊行數(shù)據(jù)選擇，需要明確哪一種更適合當(dāng)前的業(yè)務(wù)場(chǎng)景。另外表格的中最多的功能即是全選操作或是部分選擇操作，需明確操作后對(duì)整個(gè)表格的影響
三.開(kāi)關(guān)
開(kāi)關(guān)用于兩種相對(duì)對(duì)立的狀態(tài)的切換,多用于「開(kāi)/關(guān)」「啟用/停用」等，不同于單選和多選開(kāi)關(guān)是一個(gè)即時(shí)性的操作，這也導(dǎo)致開(kāi)關(guān)使用的特殊性。開(kāi)關(guān)能明確的展示當(dāng)前的功能狀態(tài)，讓用戶能高效的進(jìn)行跳轉(zhuǎn)操作。
使用場(chǎng)景
1.用于對(duì)流程的快速開(kāi)啟，如表格中開(kāi)啟或關(guān)閉某條數(shù)據(jù)/功能
2.權(quán)重較高的功能或設(shè)置，如配置表單的停用/啟用，用戶權(quán)限的啟用/停用
3.用于開(kāi)啟/關(guān)閉全局權(quán)限，后設(shè)置其他功能的操作，如業(yè)務(wù)規(guī)則的設(shè)置等
交互邏輯
1.開(kāi)關(guān) 配有對(duì)應(yīng)的文字說(shuō)明，開(kāi)啟/關(guān)閉某種功能或權(quán)限
2.開(kāi)關(guān)具有聯(lián)動(dòng)性，通過(guò)開(kāi)關(guān)去控制下層功能的操作
3.開(kāi)關(guān)的每一次變更狀態(tài)都要有相應(yīng)的反饋，輔助用戶進(jìn)行狀態(tài)判斷
四.下拉選擇
下拉選擇B端業(yè)務(wù)中最常用的組件，且下拉選擇的類型也比較廣，一般有下拉單選，下拉多選，下拉級(jí)聯(lián)，下拉樹(shù)等基本場(chǎng)景是可選項(xiàng)過(guò)多時(shí)，會(huì)使用下拉選擇器對(duì)所有選項(xiàng)進(jìn)行整合方便用戶高效錄入信息。選項(xiàng)層級(jí)建議不超過(guò) 三層且需要有一定的邏輯排序，通常包括觸發(fā)器和下拉面板兩個(gè)部分當(dāng)選項(xiàng)數(shù)量過(guò)多的時(shí)候，建議增加「搜索」功能。
下拉選擇結(jié)構(gòu)
1.標(biāo)簽文本：選擇器標(biāo)題，明確選擇內(nèi)容
2.選框：與文本框類似，需有一個(gè)外邊框，為可操作的熱區(qū)范圍，主要功能是與下拉菜單進(jìn)行聯(lián)動(dòng)
當(dāng)選項(xiàng)較多的時(shí)候，多選框會(huì)配上搜索功能，目的是為了讓用戶快速找到對(duì)應(yīng)的選項(xiàng)，而形式主要有以下兩種
3.右側(cè)標(biāo)識(shí)(可選)：每個(gè)選框右側(cè)的圖標(biāo)，都是選框類型的象征。常見(jiàn)的是下拉箭頭，默認(rèn)朝下；展示選項(xiàng)列表時(shí)，箭頭朝上。
4.占位符：保持暗提示的簡(jiǎn)潔，避免把暗提示作為選擇器的輔助說(shuō)明，默認(rèn)占位文字，格式為「請(qǐng)選擇xxx」
5.回顯值：回顯值通常包括兩種類型
1）當(dāng)下拉單選，一般采用純文本回顯即可
2）當(dāng)下拉多選，需要同時(shí)展示多個(gè)選中項(xiàng)，因此在錄入框中采取Tag形式，使單個(gè)選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)
6.選項(xiàng)：下拉選擇一般針對(duì)選項(xiàng)數(shù)超過(guò)5個(gè)
內(nèi)容：1）選框 + 文本 + 副文本； 2）選框 + 文本； 3）文本 + 副文本； 4）文本。除了選項(xiàng)內(nèi)容的不同，形式中也有較為復(fù)雜的，重點(diǎn)分析級(jí)聯(lián)選擇和樹(shù)：
1)樹(shù)展示，可選擇的數(shù)據(jù)是一個(gè)樹(shù)形結(jié)構(gòu)時(shí)，例如公司層級(jí)、學(xué)科系統(tǒng)、分類目錄等，樹(shù)結(jié)構(gòu)中可以自由選擇子節(jié)點(diǎn)和根結(jié)點(diǎn)。
2)級(jí)聯(lián)展示，針對(duì)的一般是有所屬關(guān)系的選項(xiàng)且所屬關(guān)系比較明確，層級(jí)一般3-5級(jí)，選擇到最末子級(jí)才能完成選擇一般是由大到小進(jìn)行選擇，選項(xiàng)數(shù)量上3>2>1，比如省市縣選擇
3)分組展示,選項(xiàng)過(guò)多時(shí)考慮使用的方式，使用分割線將同一類選項(xiàng)進(jìn)行劃分，用戶選擇時(shí)會(huì)思考從大的分類到具體的選項(xiàng)。但選項(xiàng)過(guò)多則還是建議用樹(shù)結(jié)構(gòu)
7.選項(xiàng)面板：承載所有可選擇的選項(xiàng)列表，在選項(xiàng)數(shù)量過(guò)多時(shí)會(huì)對(duì)下拉菜單的高度進(jìn)行限制，即設(shè)置下拉菜單的最大高度，當(dāng)超過(guò)最大高度時(shí)，出現(xiàn)滾動(dòng)條。面板相當(dāng)于一個(gè)容器可以根據(jù)業(yè)務(wù)需求承載復(fù)雜的形式 例如tab分類、錨點(diǎn)、字母定位等，
選擇器狀態(tài)
默認(rèn)（Default
懸停（Hover
1.未選擇，若選框有搜索功能則光標(biāo)變成文本輸入狀態(tài)，若沒(méi)有搜索功能則光標(biāo)變成小手（示例
2.已選擇，選擇后懸停狀態(tài)下全部清空的功能，不是所有場(chǎng)景下配置該功能， 要考慮實(shí)際業(yè)務(wù)中是否需要清空
激活（Active
1.未選擇，點(diǎn)擊框體激活下拉面板，單選一般是勾選后自動(dòng)關(guān)閉面板，多選則需要點(diǎn)擊面板以外確認(rèn)關(guān)閉面板
2.已選擇，若是已選擇再次激活，需要將已選擇的選項(xiàng)高亮，再次點(diǎn)擊已選選項(xiàng)則取消選擇；選項(xiàng)熱區(qū)，一般將整行作為熱區(qū)擴(kuò)大點(diǎn)擊范圍，方便用戶操作。
禁用（Disable
1.選框禁用，用戶無(wú)法激活，選框置灰，在設(shè)計(jì)工程中需要將禁用于正常狀態(tài)之間拉開(kāi)差距，這樣用戶能快速識(shí)別
2.選項(xiàng)禁用，表示該選項(xiàng)無(wú)法被選擇，不影響整個(gè)選擇器的功能，只用將該選項(xiàng)置灰即可，光標(biāo)置入時(shí)會(huì)變成Not allowed
回顯規(guī)則
單選，多數(shù)單選選擇后下拉面板自動(dòng)收起，回顯選擇的選項(xiàng)，選項(xiàng)回顯時(shí)有一些特殊情況如存在極端情況文案過(guò)長(zhǎng)則結(jié)尾用「…」展示， hover 顯示「文字提示氣泡」；或者選項(xiàng)中存在主文本副文本，考慮實(shí)際業(yè)務(wù)場(chǎng)景回顯時(shí)可只顯示主文本。
多選，以Tag形式展示已選擇項(xiàng)使單個(gè)選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)；存在的極端情況是當(dāng)選項(xiàng)過(guò)多時(shí)的展示效果，一般有兩種形式撐開(kāi)高度和選項(xiàng)融合
1）撐開(kāi)高度，一般用在需要完全展示選擇項(xiàng)同時(shí)可快速調(diào)整已選項(xiàng)的場(chǎng)景中，通過(guò)改變錄入框的整體高度來(lái)展示完整的選型，撐開(kāi)的高度能在表單中實(shí)現(xiàn)一些疏密變化，一般也不會(huì)無(wú)限撐開(kāi)，會(huì)有一定的限制，并且在右側(cè)增加滾動(dòng)條。
2）選項(xiàng)融合，對(duì)選項(xiàng)展示不作要求的場(chǎng)景中可根據(jù)文本框的寬度進(jìn)行選項(xiàng)融合，展示具體的選項(xiàng)數(shù)量即可，這樣能最大程度的保證表單的的整齊，讓選擇器的適配性更高。
3）省略展示選項(xiàng)，以文本形式展示，鼠標(biāo)hover氣泡展示全部選項(xiàng)信息
問(wèn)題思考
何時(shí)用下拉選框，何時(shí)用彈窗選擇？
大部分情況下，單選優(yōu)先用下拉選框，用戶比較高效的完成選擇，同時(shí)也可以明確自己的選擇。而多選場(chǎng)景中對(duì)于選項(xiàng)數(shù)量可控，選項(xiàng)復(fù)雜度較低的可以用下拉選框。但是對(duì)于選項(xiàng)結(jié)構(gòu)復(fù)雜，內(nèi)容過(guò)載，用戶頻繁的滾動(dòng)容易造成誤操作影響選擇的準(zhǔn)確性和高效性，此時(shí)會(huì)考慮使用彈窗，且多選彈窗一般需要配有搜索區(qū)，選項(xiàng)區(qū)，已選區(qū)。需要注意的是，已選項(xiàng)在彈窗內(nèi)的顯示以及回顯形式。多選彈窗一般可以比較直觀的展示已選項(xiàng)，所以可以采用省略展示選項(xiàng)的方式。
選擇搜索如何顯示？
如下彈窗選擇中，對(duì)于數(shù)量和層級(jí)比較復(fù)雜的選擇項(xiàng)，搜索是很有必要的，對(duì)于搜索結(jié)果的展現(xiàn)形式不同的場(chǎng)景可能會(huì)有不同，用戶使用搜索一般是對(duì)于選項(xiàng)比較明確，所以推薦搜索結(jié)果展示末級(jí)，用戶可以更高效的做出選擇，避免復(fù)雜的層級(jí)關(guān)系干擾。
五.時(shí)間與日期選擇器
兩種類型
1.時(shí)間點(diǎn)選擇，選定某一個(gè)時(shí)間/日期點(diǎn)，B端時(shí)間點(diǎn)選擇的業(yè)務(wù)場(chǎng)景較少
2.時(shí)間段選擇，選定某一個(gè)時(shí)間范圍，一般有開(kāi)始時(shí)間和結(jié)束時(shí)間，時(shí)間段的應(yīng)用一般是在數(shù)據(jù)篩選的場(chǎng)景中
確定時(shí)間類型后，要考慮時(shí)間粒度，時(shí)間粒度分為年、季、月、周、天、時(shí)、分、秒，B端圖表頁(yè)面中針對(duì)年度、季度、月度的篩選時(shí)很常見(jiàn)的，需要結(jié)合場(chǎng)景選擇時(shí)間粒度。
日期選擇器中一般是通過(guò)點(diǎn)擊讓用戶選擇時(shí)間，除了讓用戶點(diǎn)選外，時(shí)間選擇器還會(huì)提供一些快捷選項(xiàng)例如“今天、本周、本月，本季度“等。選擇后回顯的時(shí)間顯示格式有多種如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平臺(tái)需要確定統(tǒng)一的樣式，避免增加用戶的認(rèn)知成本。
時(shí)間段選擇，常見(jiàn)兩種形式分段式和連體式，在不同的平臺(tái)都有應(yīng)用，在交互上的區(qū)別分段式需要用戶點(diǎn)擊兩次分別選擇開(kāi)始時(shí)間和結(jié)束時(shí)間，連體式是用戶點(diǎn)擊一次調(diào)起時(shí)間選擇時(shí)間段，相對(duì)而言連體式操作更便捷，但是分段式理解更簡(jiǎn)單，連體式存在一定的認(rèn)知成本，總體上來(lái)說(shuō)其實(shí)區(qū)別并不大，平臺(tái)需要建立統(tǒng)一的標(biāo)準(zhǔn)，這樣能形成較為統(tǒng)一的體驗(yàn)和習(xí)慣。
選擇器在實(shí)際工作中應(yīng)用廣泛，B端業(yè)務(wù)復(fù)雜，總會(huì)遇到各種新的場(chǎng)景，總結(jié)會(huì)有不足不全之處，歡迎大家一起探討交流。
文章來(lái)源：站酷 作者：MuMu魚(yú)
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
用戶體驗(yàn)是用戶對(duì)產(chǎn)品價(jià)值的整體感受，其中包括用戶感受到的產(chǎn)品價(jià)值以及用戶感受到的操作體驗(yàn)。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。這篇文章舉了大量的例子，來(lái)跟大家一起進(jìn)行產(chǎn)品細(xì)節(jié)洞察分析。感興趣的朋友一起來(lái)看看吧。
對(duì)于B端，我想剛開(kāi)始很多同學(xué)就直接拿Ant Design套套界面，因?yàn)楣疽蟛⒉桓?，隨后字節(jié)Arco Design也推出了對(duì)應(yīng)的模版和規(guī)范，能讓我們快速作出一個(gè)不出錯(cuò)的方案。
但是隨著公司對(duì)B端越來(lái)越重視，這些模版顯然就太爛大街了。公司、市場(chǎng)的要求顯然不止于此，我們的設(shè)計(jì)追求也不止于此。
那么我們?nèi)绾尾拍軘[脫套模版，提高界面的精致度，提升界面的交互體驗(yàn)?zāi)兀?
其實(shí)很簡(jiǎn)單，王陽(yáng)明先生告訴我們知行合一，知是行之始行是知之成。我們?nèi)绾尾拍芴嵘鼴端界面端精致度，第一需要知道什么是好的設(shè)計(jì)；第二需要不斷的去實(shí)踐去練習(xí)，缺一不可。
本文先和大家談?wù)勚膶用?，提高我們的眼界，下面就和大家分享一些不錯(cuò)的B端產(chǎn)品，大家有時(shí)間可以去慢慢體驗(yàn)。
PS：作為B端設(shè)計(jì)師，一定要去多拆解競(jìng)品，多研究好的產(chǎn)品，別面試的時(shí)候，面試官問(wèn)你研究的B端產(chǎn)品是什么，你只知道阿里云、騰訊云、百度云哦！
做B端的同學(xué)，尤其是做CRM的同學(xué)應(yīng)該都知道Salesforce，他是全球最大的 CRM（客戶關(guān)系管理） 工具公司。
Hubspot同樣是提供客戶管理相關(guān)的應(yīng)用，雖然成立相對(duì)Salesforce晚，但是在市場(chǎng)上也占有一席之地。
從設(shè)計(jì)的角度來(lái)看，他的界面風(fēng)格更加簡(jiǎn)潔舒適，從體驗(yàn)上來(lái)看和國(guó)內(nèi)的CRM系統(tǒng)完全不同，其體驗(yàn)更加自然和舒適。
這種風(fēng)格大家看了有沒(méi)有覺(jué)得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是發(fā)現(xiàn)風(fēng)格有一點(diǎn)類似，大家可以對(duì)比國(guó)內(nèi)產(chǎn)品去拆解下他們的交互細(xì)節(jié)有什么不同，完成同樣的任務(wù)他們采用的方案有何不同，相信你會(huì)有很多的收獲。
國(guó)外的界面看著總讓人覺(jué)得很舒適，僅僅是因?yàn)榭酥频脑O(shè)計(jì)、中性灰使用得好嗎？當(dāng)然不是，是因?yàn)橛⑽谋旧砭褪菆D形化的文字。
如果翻譯成中文，你會(huì)發(fā)現(xiàn)好像不是特別理想。
這個(gè)樣子拿給領(lǐng)導(dǎo)過(guò)稿，怕是分分鐘被拍死，因此我們還是需要多看看國(guó)內(nèi)優(yōu)秀的產(chǎn)品。
神策的設(shè)計(jì)，我想B端的朋友不陌生吧，國(guó)內(nèi)產(chǎn)品中他的設(shè)計(jì)一直是我們的參考對(duì)象。
不同于其他產(chǎn)品，他的體驗(yàn)門(mén)檻比較低，注冊(cè)后就可以去體驗(yàn)他的demo，也沒(méi)有試用期限，參考對(duì)象從可視化報(bào)表，到界面交互均能找到參考。
不過(guò)當(dāng)你參考一次后發(fā)現(xiàn)，做出來(lái)的界面怎么還是少了一些靈魂，雖然界面風(fēng)格上了一個(gè)臺(tái)階，但為什么用戶還是覺(jué)得產(chǎn)品難用。
這里不得不和大家推薦項(xiàng)目管理類產(chǎn)品了，這類產(chǎn)品是專門(mén)給互聯(lián)網(wǎng)公司的開(kāi)發(fā)團(tuán)隊(duì)使用，他們都是專業(yè)用戶，同時(shí)這些都是提高他們工作效率的工具，因此這些產(chǎn)品投入的成本更高，優(yōu)化得更好，拆解他們的產(chǎn)品，就是直接觀看高手的成長(zhǎng)之路。
Jira是Atlassian公司出品的一款事務(wù)管理軟件，JIRA的界面效果交互都非常不錯(cuò)。大型互聯(lián)網(wǎng)公司如LinkedIn、Facebook、eBay等內(nèi)部都在使用Jira。
同時(shí)他也是國(guó)內(nèi)項(xiàng)目管理類產(chǎn)品的學(xué)習(xí)研究對(duì)象，因此大家可以通過(guò)文章、B站、界面截圖，自己申請(qǐng)?bào)w驗(yàn)等方式全面的進(jìn)行體驗(yàn)。
同時(shí)也可借助群的力量，調(diào)研下有使用Jira的小伙伴，看看他們?cè)谑褂弥杏惺裁磫?wèn)題，下面是我收集Jira網(wǎng)頁(yè)版和本地配置版的問(wèn)題截圖，這些都來(lái)自不同角色的真實(shí)體驗(yàn)，會(huì)更有分析的價(jià)值。（這部分截圖涉及到公司的數(shù)據(jù)，同時(shí)數(shù)量多不太方便打碼，就不分享給大家了。）
當(dāng)然國(guó)內(nèi)的項(xiàng)目管理類產(chǎn)品也得去看，我們要對(duì)比哪里做得好，哪里還需要改進(jìn)。國(guó)內(nèi)的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，這些產(chǎn)品不管從視覺(jué)還是體驗(yàn)都非常不錯(cuò)，大家一定要去體驗(yàn)。
通過(guò)不斷對(duì)競(jìng)品進(jìn)行拆解，你已經(jīng)不是當(dāng)初那個(gè)小白了，你的行業(yè)認(rèn)知，方案設(shè)計(jì)能力應(yīng)該趕超了一大波人。
成長(zhǎng)的同時(shí)，又發(fā)現(xiàn)你設(shè)計(jì)的界面，不太精致，少了些溫度，這時(shí)候推薦你看文檔管理類產(chǎn)品。
第一個(gè)和大家推薦的是WPS，界面簡(jiǎn)潔，配色舒適。
在管理類的軟件中，不得不提飛書(shū)的管理界面，從設(shè)計(jì)到使用體驗(yàn)，他給我的感覺(jué)終于不是那么千遍一律，用組件庫(kù)搭建起來(lái)的感覺(jué)。
他開(kāi)始有了溫度，開(kāi)始注重品牌感的打造，用戶的引導(dǎo)，符合品牌調(diào)性的插畫(huà)。
對(duì)一些體驗(yàn)的細(xì)節(jié)進(jìn)行優(yōu)化，比如傳統(tǒng)的編輯都是放在頁(yè)面頂部，它采用了離光標(biāo)更近的位置。
根據(jù)菲茲定律，光標(biāo)當(dāng)前的位置和目標(biāo)位置的距離D越短，所用的時(shí)間越短，具體好不好用，歡迎大家在評(píng)論區(qū)留言哦。
到這時(shí)候如果你覺(jué)得線上的產(chǎn)品太禁錮思維，那么推薦你看看dribbble、behance，搜索data、web、dashboard等關(guān)鍵詞，去看看有沒(méi)有新的靈感。
我的花瓣收集了一部分，如果不嫌棄，可以去看看，順藤摸瓜應(yīng)該可以找到很多不錯(cuò)的設(shè)計(jì)。
風(fēng)箏KK的花瓣：https://huaban.com/boards/76913106
如何提升B端界面的精致度？
第一，要知道什么是好的設(shè)計(jì)，多拆解國(guó)內(nèi)外優(yōu)化的B端產(chǎn)品。
第二，多在工作中時(shí)間，有時(shí)間多做ABC方案，鍛煉自己的方案設(shè)計(jì)能力，多踩一些坑，時(shí)刻保持學(xué)習(xí)能力，慢慢就成長(zhǎng)了。
文章來(lái)源：站酷 作者：風(fēng)箏KK
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
<small id="ykwga"></small>