轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
做一全套的APP設(shè)計(jì)，流程是：
1、界面設(shè)計(jì)：設(shè)計(jì)IOS界面；設(shè)計(jì)Android界面。
2、切圖：切IOS的2倍圖和3倍圖；切Android的hdpi,xhdpi,xxhdpi這三個(gè)尺寸的圖。
3、標(biāo)注：以px為單位標(biāo)注IOS界面的尺寸；以dp為單位標(biāo)andriod的尺寸。
----------------------------------------------------------------------
IOS端_界面設(shè)計(jì)
————————
一、界面設(shè)計(jì)：
1、【界面分類】：IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。
2、【設(shè)計(jì)方法】： 以iphone8為標(biāo)準(zhǔn)進(jìn)行界面設(shè)計(jì)，讓開發(fā)進(jìn)行適配。即750px*1334px以基準(zhǔn)（72像素\英寸）。
3、【設(shè)計(jì)標(biāo)準(zhǔn)】：750*1334界面——狀態(tài)欄40px； 導(dǎo)航欄88px；標(biāo)簽欄98px；工具欄88px；文字最大34px; 最小18px；常用28px。
————————
二、切圖：（所有開發(fā)寫不出來的都得切，如icon, 默認(rèn)頭像，背景圖等）
1、【切圖尺寸】：IOS 只用切【二倍圖】和【三倍圖】。注意：有些button, 需要更改顏色，切一個(gè)“被點(diǎn)擊的狀態(tài)”（如btn-xxx-pressed@2x,btn-xxxx-pressed@3x）。
2、【切圖命名】：如btn-xxxx@2x,btn-xxx@3x(按紐); img-xxx@2x,img-xxxx@3x(圖像); bg-xxx@2x,bg-xxx@3x(背景圖)
3、【方法一】：【photoshop圖層-右鍵-導(dǎo)出為...】
設(shè)置大?。ˊ1x+@2x)；設(shè)置好icon的畫布尺寸（如導(dǎo)航欄上的幾個(gè)icon的畫布尺寸應(yīng)保持一致）
【方法二】：【sketch-選中icon-右下角-make exportable】
（如需切相同尺寸的icon，需建立相同尺寸的畫布，并選擇整個(gè)畫布整體導(dǎo)出）
————————
三、標(biāo)注：
1、【標(biāo)注內(nèi)容】：顏色＼長寬＼字號(hào)＼距離；
2、【標(biāo)注單位】：IOS的標(biāo)注以px為單位進(jìn)行標(biāo)注。（注意：數(shù)字最好為偶數(shù)）
3、【標(biāo)注軟件一】: 標(biāo)注神器－parker/markman，標(biāo)注前請(qǐng)?jiān)凇霸O(shè)置”里將單位改為px；
【標(biāo)注軟件二（強(qiáng)烈推薦）】：zeplin軟件——無需標(biāo)注，只需將界面導(dǎo)入zeplin，開發(fā)直接訪問zeplin，即可查看所有的尺寸、間距、色值、字體、字號(hào)等。
下載地址：https://zeplin.io/，軟件圖標(biāo)和界面如下：
Android設(shè)計(jì)：
————————
一、界面設(shè)計(jì)：
1、【界面分類】：Android的尺寸非常多，非常雜?？偟恼f來，就分為這幾種模式：idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。
2、【設(shè)計(jì)方法】：以xhdpi為基準(zhǔn)進(jìn)行界面設(shè)計(jì)，讓開發(fā)進(jìn)行適配。即以720px*1280px為標(biāo)準(zhǔn)(72像素\英寸)。
3、【設(shè)計(jì)標(biāo)準(zhǔn)】： 720px*1280px界面——狀態(tài)欄50px, 導(dǎo)航欄96px，標(biāo)簽欄96px，工具欄96px，實(shí)體鍵96px；文字最大36px;最小18px；常用28px。
————————
二、切圖：
1、【分類】：Android 的切圖需要切三個(gè)尺寸的：hdpi, xhdpi, xxhdpi。
2、【方法一】：切圖神器－cutterman，也可以一鍵切出hdpi, xhdpi, xxhdpi三個(gè)尺寸的圖, 而且還可以切出“點(diǎn)九圖”。
【方法二】：photoshop、sketch、illustrator皆可直接導(dǎo)出icon。
————————
三、標(biāo)注：
1、【單位】：Android的標(biāo)注以dp為單位。（parker里, 在“設(shè)置”里將單位改為dp）
2、【標(biāo)注軟件】：同上，推薦zeplin軟件（建立文件夾時(shí)需選擇安卓版本）
----------------------------------------------------------------------
補(bǔ)充 _ 2019/4/10:
目前流行的是以【一倍圖】的分辨率來進(jìn)行設(shè)計(jì)，也就是sketch、PS、AI上給的分辨率：
iPhone 8的分辨率是750*1334，而sketch、PS、AI上iPhone 8給的分辨率是375*667.
意思是設(shè)計(jì)平臺(tái)鼓勵(lì)設(shè)計(jì)師用一倍圖來設(shè)計(jì)，一方面是因?yàn)殚_發(fā)環(huán)境是以一倍圖的環(huán)境來開發(fā)的，因此一倍圖的設(shè)計(jì)稿無需開發(fā)再進(jìn)行換算。
另一方面是icon導(dǎo)出時(shí)：@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整數(shù)換算。
所以推薦大家用【一倍圖】的分辨率來設(shè)計(jì)。icon切圖分別導(dǎo)出2倍圖和3倍圖供開發(fā)使用。（而且sketch提供的IOS控件也是1倍圖的尺寸啊～～）
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
作者：鄭每每
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
作者：神之一招
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
寫在前面
B端產(chǎn)品和C端產(chǎn)品作為兩種很不一樣的產(chǎn)品形態(tài)一直服務(wù)著廣大的用戶。它們各有各的作用，有很多B端產(chǎn)品還是一個(gè)非常龐大的系統(tǒng)工程，甚至有很多的公司就是專注于開發(fā)B端產(chǎn)品，我從業(yè)以來曾經(jīng)參與過很多的（兩位數(shù)）B端產(chǎn)品項(xiàng)目，有的是從0到1的開發(fā)，也有的是在原基礎(chǔ)上更新優(yōu)化，下面就從我個(gè)人的設(shè)計(jì)經(jīng)驗(yàn)整理出一些觀點(diǎn)。
什么是B端和C端產(chǎn)品
概念：B端面向商家和公司，組織；C端面向普通的大眾用戶；
B端是指：business--泛指生意，商業(yè)，公司和組織； To B即是面向商家和公司，組織，是給專職專業(yè)的用戶使用的產(chǎn)品，例如微信公眾平臺(tái)給制定的公眾號(hào)持有人使用，某公司的指揮調(diào)度系統(tǒng)，某停車管理系統(tǒng)，以及相關(guān)的后臺(tái)管理系統(tǒng)等。C端是指：consumer--消費(fèi)者，顧客，用戶，是指被設(shè)計(jì)為能給普通大眾使用的產(chǎn)品；To C即是面向普通的老百姓用戶，例如微博，QQ，微信，新聞客戶端，淘寶等；
幾乎男女老少都會(huì)使用的微信
面向?qū)Ｂ殟徫蝗藛T使用的后臺(tái)管理系統(tǒng)
兩者的不同點(diǎn)
C端產(chǎn)品追求極致的體驗(yàn)，；B端產(chǎn)品追求簡約、高效的完成工作
C端產(chǎn)品是為了滿足用戶某一主要的、固定 的核心需求，因此設(shè)計(jì)的目標(biāo)是圍繞著這個(gè)核心需求，簡單直接解決用戶的需求，追求的是極致的用戶體驗(yàn)，因?yàn)閷?duì)C端產(chǎn)品而言，產(chǎn)品不好用，體驗(yàn)不好，用戶就流失了，也就沒有盈利的可能了。
B端產(chǎn)品的目標(biāo)是幫助用戶把大量的復(fù)雜的工作，整理歸納，使得他們能高效便捷的完成工作，追求的是產(chǎn)品的簡約實(shí)用，提高效率，能很好的處理工作，有時(shí)候?yàn)榱诉_(dá)成業(yè)務(wù)目標(biāo)，甚至不惜犧牲部分用戶體驗(yàn)。
To B端界面的設(shè)計(jì)應(yīng)該要重點(diǎn)注意什么
很多新手設(shè)計(jì)師在接到新的需求的時(shí)候會(huì)沒有頭緒，不知道如何開展工作，在不了解業(yè)務(wù)的前提下很多時(shí)候被產(chǎn)品牽著鼻子走。那么問題來了，是拿到產(chǎn)品給過來的原型之后就開始設(shè)計(jì)了嗎？又或者沒有原型只有一些簡單的描述，又該如何開展呢。以下是我的幾個(gè)建議
1，要了解業(yè)務(wù)
因?yàn)锽類產(chǎn)品不同于C類產(chǎn)品，并不是大多數(shù)人日常都會(huì)很普及用到的，所以就需要設(shè)計(jì)師主動(dòng)的去了解行業(yè)，了解業(yè)務(wù)需求，不同的行業(yè)有不同流程和規(guī)則，甚至是一些特殊的需求；啟動(dòng)用戶群體調(diào)研和用戶使用場景調(diào)研，有條件的可以開展用戶問卷調(diào)研甚至面對(duì)面訪談，整理出用戶的使用流程，調(diào)研后要求設(shè)計(jì)師自己能非常清楚這個(gè)產(chǎn)品的作用、用戶人群、和在特定的使用場景下的使用目標(biāo)、和不同情境下的操作流程等。
2，交互流程設(shè)計(jì)
B端產(chǎn)品往往包含了比較復(fù)雜的業(yè)務(wù)，那在復(fù)雜的業(yè)務(wù)背景下如何通過設(shè)計(jì)來提高用戶的工作效率，這就對(duì)設(shè)計(jì)師有比較高的要求。在交互流程上要整理出一些操作路徑，要考慮它們的層級(jí)關(guān)系，先后順序，行業(yè)習(xí)慣等。通過操作體驗(yàn)給用戶留下明確的印象，可以降低用戶的學(xué)習(xí)成本，提高產(chǎn)品的易用性。
To B端界面的視覺設(shè)計(jì)
①、界面布局，分固定的和自適應(yīng)的分辨率兩種，一般來說自適應(yīng)的布局比較適合操作和展示內(nèi)容比較多的系統(tǒng)，固定的寬度的分辨率的布局一般多用1200px以適應(yīng)適配更多低分辨率的顯示器，現(xiàn)在的大屏幕設(shè)備非常普及了，很多系統(tǒng)轉(zhuǎn)為以1400px的寬度來設(shè)計(jì)，至于用哪一種的布局要取決于產(chǎn)品的功能了。
界面布局視覺上的區(qū)分；當(dāng)我們?cè)O(shè)計(jì)一個(gè)系統(tǒng)的主頁到時(shí)候，B端產(chǎn)品通常會(huì)分為很多功能模塊，即便產(chǎn)品經(jīng)理會(huì)提供原型給UI設(shè)計(jì)師，他們有時(shí)候往往會(huì)在原型按照他們的想法來布局，這時(shí)候設(shè)計(jì)師需要主動(dòng)地去了解業(yè)務(wù)去弄清楚各個(gè)模塊的主次之分。通過調(diào)研后，整理歸類任務(wù)模塊，按照業(yè)務(wù)流程和規(guī)則來區(qū)分模塊優(yōu)先級(jí)。（圖例）
②、顏色，B端系統(tǒng)的界面顏色也非?？季?，按照系統(tǒng)的功能特性來定，一般常規(guī)的系統(tǒng)界面都是以白色底色配以一種主色調(diào)的顏色來搭配的；第二深色的底色界面，深色界面能起到一種很好的襯托界面內(nèi)容（如大量文字，數(shù)據(jù)，圖形，視頻等）的作用，深色界面再附以一些點(diǎn)線面和光的元素就能營造出一種炫酷的科技感。三是現(xiàn)在流行漸變色，漸變色和純色會(huì)給人一種繽紛，輕松愉悅，有活力的年輕的感覺，所以大家在設(shè)計(jì)不同的B端系統(tǒng)界面的時(shí)候要考慮產(chǎn)品的功能性質(zhì)來選擇用顏色。
③、導(dǎo)航，導(dǎo)航可以解決用戶在訪問頁面時(shí)：在哪里，去哪里，怎樣去的問題。一般導(dǎo)航會(huì)有「側(cè)欄導(dǎo)航」和「頂部導(dǎo)航」2 種類型。一：側(cè)欄導(dǎo)航：可將導(dǎo)航欄固定在左側(cè)，提高導(dǎo)航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于復(fù)雜的、功能多的中后臺(tái)的管理型、工具型網(wǎng)站。二：頂部導(dǎo)航，順應(yīng)了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導(dǎo)航的數(shù)量和文本長度
④、按鈕，通常B端產(chǎn)品分為較多的功能模塊，也對(duì)應(yīng)有很多不同的按鈕，在設(shè)計(jì)按鈕的時(shí)候，我們第一要分清楚哪些按鈕對(duì)應(yīng)哪些功能，在設(shè)計(jì)上要做出區(qū)分。
⑤、表格，表格的設(shè)計(jì)遵循簡潔和易讀性為主，表里面的文字內(nèi)容是主要的設(shè)計(jì)重點(diǎn)，例如信息層次的明確、對(duì)齊的原則等。
⑥、彈窗，不僅有操作反饋的作用，同時(shí)又是一個(gè)承載更多的操作功能的容器，彈窗的設(shè)計(jì)要有規(guī)范性，組件化。
視覺設(shè)計(jì)方面除了常規(guī)的設(shè)計(jì)流程，我想說的是綜合考慮和相關(guān)的系統(tǒng)銜接，體驗(yàn)的一致，視覺風(fēng)格的統(tǒng)一和品牌的建設(shè)。
設(shè)計(jì)師還能做些什么
雖然設(shè)計(jì)師和產(chǎn)品經(jīng)理以及開發(fā)已經(jīng)溝通過相關(guān)的業(yè)務(wù)需求，但設(shè)計(jì)師一定要懂得切換角度來看待問題，一方面設(shè)計(jì)師的視角相對(duì)注重視覺上和交互上的設(shè)計(jì)細(xì)節(jié)；第二我們也要懂得站在開發(fā)和產(chǎn)品的角度考慮，哪些效果能不能實(shí)現(xiàn)，也是需要我們和開發(fā)同事密切配合的；另一方面要更加注重代入用戶的角度來思考，這樣才能做出合理適用的設(shè)計(jì)，甚至能挖掘新的需求，提出一些很好的建議，給產(chǎn)品和項(xiàng)目帶來加分和利好。
總結(jié)
因?yàn)锽端產(chǎn)品業(yè)務(wù)需求，用戶目標(biāo)，使用場景和用戶群體都不相同，所以設(shè)計(jì)師接到B端產(chǎn)品的設(shè)計(jì)需求時(shí)一定要先了解清楚業(yè)務(wù)，做好前期調(diào)研，其次要多站在用戶的角度來看待和設(shè)計(jì)產(chǎn)品。其實(shí)C端和B端產(chǎn)品，它們都要求要簡單實(shí)用和有效準(zhǔn)確，都是為了更好的滿足用戶的需求，解決用戶的痛點(diǎn)。做好了以上這些關(guān)鍵點(diǎn)，無論遇到多么復(fù)雜的B端產(chǎn)品，我相信所有問題都會(huì)迎刃而解。
作者： chrisHCZ
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
如果你是一位經(jīng)驗(yàn)豐富的設(shè)計(jì)師，你應(yīng)該會(huì)同意這個(gè)觀點(diǎn)：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對(duì)設(shè)計(jì)進(jìn)行深入研究呀，這也屬于一種設(shè)計(jì)模式呀，而且還遵守設(shè)計(jì)規(guī)范呢。所以，當(dāng)然要以用戶們所熟悉的那些模式來創(chuàng)造出可用性界面。
不過，有的設(shè)計(jì)師則會(huì)認(rèn)為，過于遵守設(shè)計(jì)規(guī)范，而且，經(jīng)常性的從他人的作品中獲取靈感的話，自己本身的創(chuàng)造能力就會(huì)下降，這就導(dǎo)致了這樣一個(gè)結(jié)果——一天下來，你的所有APP都長一個(gè)樣。
從交互設(shè)計(jì)的角度看，我們會(huì)發(fā)現(xiàn)一個(gè)問題。什么問題呢？
習(xí)慣性的去應(yīng)用一些所謂的最好的設(shè)計(jì)模式，可能會(huì)讓你覺得Google，F(xiàn)acebook，Instagram或者說其他的一些你最喜歡的APP總是做的非常棒，你會(huì)覺得，他們的設(shè)計(jì)目標(biāo)和你自己的設(shè)計(jì)目標(biāo)并沒啥差別，但是，人家成功了，而你的作品卻失敗了。所以，這里推薦一些被公認(rèn)為是(至少曾經(jīng)被公認(rèn)為)最好的設(shè)計(jì)模式，可能在你第一次看來，這些設(shè)計(jì)模式也就那樣。
1、隱藏導(dǎo)航
關(guān)于漢堡圖標(biāo)，已經(jīng)有不下于50萬的文章來爭論它了。如果你一篇都未曾讀過，試著去讀一兩篇吧。其實(shí)，簡單說來，這些文章討論的主題更主要的是這個(gè)圖標(biāo)里所隱含的那些導(dǎo)航，而不是這個(gè)圖標(biāo)自身。
上面圖片這樣的設(shè)計(jì)對(duì)于設(shè)計(jì)師來說其實(shí)是很有吸引力的，而且簡直太方便了。根本不用擔(dān)心屏幕大小的限制，只需要這樣一個(gè)圖標(biāo)，然后，把所有的導(dǎo)航全部塞進(jìn)這個(gè)可以上下滾動(dòng)的東西里，然后，讓他默認(rèn)隱藏。就這樣，就這么簡單。
但是，實(shí)驗(yàn)證明，與完全隱藏導(dǎo)航相比，適當(dāng)?shù)恼故境鲆恍?dǎo)航能夠更多的增加用戶的依賴度和滿意程度，甚至為你帶來更多的收入。所以說，現(xiàn)在的好多大公司的播放器都拋棄了以前的漢堡圖標(biāo)，將最常用的一些導(dǎo)航一直顯示給了用戶。
如果說你的導(dǎo)航比較復(fù)雜，那么，請(qǐng)?jiān)诳紤]優(yōu)先級(jí)的基礎(chǔ)上適當(dāng)?shù)仉[藏導(dǎo)航。
2、圖標(biāo)，隨處可見的圖標(biāo)
由于移動(dòng)端的屏幕大小限制，許多無腦的設(shè)計(jì)師為了節(jié)省空間，在任何只要能夠使用圖標(biāo)替換的文本域，都使用了圖標(biāo)。大家都這樣想，象形文字或者圖標(biāo)占的空間又少，不需要額外的轉(zhuǎn)換，而且，人們都很熟悉這些圖標(biāo)，難道不是這樣嗎？所以，每一個(gè)APP都這樣做了。
設(shè)計(jì)師們將上面的那種假設(shè)放在腦海里，于是，有的時(shí)候，他們將實(shí)用性的功能蘊(yùn)含在了圖標(biāo)里面，但事實(shí)上，那個(gè)圖標(biāo)是難以識(shí)別的。比如，你能猜到在下圖的Instagram里的這個(gè)圖標(biāo)點(diǎn)擊之后能夠發(fā)送什么信息嗎？
或者說，假如你從來沒用過谷歌翻譯，那么，你會(huì)期待下圖的這個(gè)圖標(biāo)實(shí)現(xiàn)什么樣的功能呢？
你總是假設(shè)你的用戶們非常熟悉那些抽象的圖標(biāo)，或者說，你總以為用戶們會(huì)花大量的時(shí)間去研究和學(xué)習(xí)你的這個(gè)圖標(biāo)的含義。這是一個(gè)很普遍性的錯(cuò)誤，很多設(shè)計(jì)師都會(huì)犯這個(gè)錯(cuò)誤。
Bloom.fm上讓人覺得迷糊的標(biāo)簽欄
如果說你曾經(jīng)設(shè)計(jì)過一個(gè)需要一個(gè)彈出框來解釋從而提高可用性的圖標(biāo)，那么，即使你的用戶們會(huì)不管怎么樣都能了解它，你的這個(gè)做法也是錯(cuò)誤的。
當(dāng)然，并不是說你在設(shè)計(jì)中就一點(diǎn)都不使用圖標(biāo)。你的用戶們熟悉大量的圖標(biāo)，這些圖標(biāo)中，有很大一部分都是能夠代表普通的功能的，比如搜索，播放視頻，郵件，設(shè)置等等。(但是，用戶們可能不會(huì)很確定當(dāng)他們點(diǎn)擊一個(gè)心形圖標(biāo)的時(shí)候，會(huì)發(fā)生什么。)
一些能夠被大多數(shù)用戶所識(shí)別的圖標(biāo)并且被認(rèn)為是通用的
對(duì)于復(fù)雜的和抽象的圖標(biāo)，在顯示的時(shí)候，應(yīng)該總是在旁邊加上一個(gè)文本來進(jìn)行說明。這樣，你的圖標(biāo)才是真正有用的。同時(shí)，還能夠提高菜單的可發(fā)現(xiàn)性，也能夠?yàn)槟愕腁PP添加漂亮的觸感和個(gè)性。
Pixelmator的導(dǎo)航
對(duì)于基本的功能，可以使用圖標(biāo)來展現(xiàn)；但是，對(duì)于復(fù)雜的功能，就需要使用文本來說明了。(如果你要使用圖標(biāo)的話，要時(shí)常性的做可用性測試)
3、基于手勢的導(dǎo)航操作
當(dāng)蘋果公司在2007年發(fā)布了iPhone的時(shí)候，多指觸控技術(shù)就成為了人們關(guān)注的主流技術(shù)，用戶們發(fā)現(xiàn)他們不僅可以在屏幕上進(jìn)行點(diǎn)擊，還可以進(jìn)行放大，縮小和左右輕掃。
手勢在設(shè)計(jì)們的圈子中流行了起來，許多的APP都圍繞著手勢操作來進(jìn)行設(shè)計(jì)。
Clear里的手勢操作
就像隱藏的導(dǎo)航欄和使用圖標(biāo)代替文本一樣，手勢看起來似乎能夠?yàn)樵O(shè)計(jì)師節(jié)約一些屏幕空間。(“屏幕上不應(yīng)該有刪除按鈕的存在，人們只需要向左或者向右輕掃就可以進(jìn)行刪除了。我們會(huì)決定怎么操作的?！?
關(guān)于手勢，你首先需要知道的是，手勢是不可見的。人們需要記住它們，就像漢堡菜單的例子一樣。如果你隱藏了一個(gè)選項(xiàng)，那么，用到那個(gè)選項(xiàng)的人就會(huì)越少。
另外，手勢存在著與圖標(biāo)相同的問題：眾所周知的手勢有點(diǎn)擊，放大，上下滾動(dòng)，同時(shí)，每個(gè)APP也有那些需要慢慢發(fā)現(xiàn)和學(xué)習(xí)的手勢。
不幸的是，觸屏界面的設(shè)計(jì)仍然是一個(gè)新的領(lǐng)域，在各個(gè)APP中，大多數(shù)手勢還不標(biāo)準(zhǔn)和統(tǒng)一。一個(gè)很簡單的手勢，比如左右輕掃，在各種各樣的郵件APP中可能都會(huì)大相徑庭。
在Apple的Mail APP中，向右輕掃，顯示出了“標(biāo)記為未讀”的選項(xiàng)
同樣的手勢，在Mail Box中，就表示將郵件存檔
或者說，想一想，搖晃你的手機(jī)，在兩個(gè)APP中，也會(huì)有兩種不同的含義。在iOS中表示撤銷，在Google Maps中表示發(fā)送反饋信息。
永遠(yuǎn)都要記住，手勢是隱藏的操作，人們不得不去記住它們。對(duì)于你的用戶，這需要大量的努力。如果你是一個(gè)發(fā)起人，也許你可以讓全世界的向右輕掃的含義都一樣——但是，只有當(dāng)它是你APP的概念設(shè)計(jì)里必不可少的一個(gè)部分的時(shí)候。
4、新手引導(dǎo)
新手引導(dǎo)，最近很火的一個(gè)話題，適用于用戶第一次與APP打交道的時(shí)候。在很多情況下，這個(gè)簡單的方式能夠在一個(gè)透明的覆蓋層上為用戶展示一些標(biāo)記來解釋界面元素。
dcovery APP里的新手引導(dǎo)
為什么說這是一個(gè)很爛的解決方案呢？因?yàn)樵S多用戶都會(huì)跳過你的介紹，他們想做的就是趕緊使用這個(gè)APP。即使他們注意到了你的這些標(biāo)記，當(dāng)他們把這個(gè)關(guān)掉的時(shí)候，這些所謂的教程也被他們忘得一干二凈了(尤其是當(dāng)屏幕上擠滿了信息的時(shí)候)。最后說一句重要的，在你的屏幕上添加這些引導(dǎo)的標(biāo)記，并不會(huì)提高APP的易用性，記住下面這句話：
原圖翻譯：用戶界面就和講笑話一樣，如果這個(gè)笑話還需要解釋才能明白的話，那么，這也不是一個(gè)好笑話。
對(duì)于你的用戶來說，新手引導(dǎo)也許可以使用其他的方式來設(shè)計(jì)的更加有用。比如Slack這個(gè)APP，使用第一屏來創(chuàng)建一個(gè)用戶場景。簡單的介紹一下他們自己，著重于利益而不是屏幕上的功能。
留住你的第一批用戶的一個(gè)更有效的方法就是逐步的引導(dǎo)。比如Duolingo，他沒有向用戶們解釋這個(gè)APP是如何工作的，而是促使人們做一個(gè)指定語言的快速測試(甚至不需要登錄)，因?yàn)橛脩魝兛梢栽谧鰷y試的過程中了解到這個(gè)APP是如何使用的。同時(shí)，這也是展示這個(gè)APP的價(jià)值的一個(gè)更有影響力的方法。
記得住左右輕掃的手勢在Apple的Mail APP里和在MailBox里的不同嗎？看看他們的逐步引導(dǎo)是如何做的：用戶們?cè)陂_始使用APP之前，必須在APP所提供的一個(gè)練習(xí)場景里嘗試使用這個(gè)APP里的每一個(gè)手勢。
在你準(zhǔn)備在一個(gè)半透明的覆蓋層上設(shè)計(jì)你的引導(dǎo)標(biāo)記的時(shí)候，停下來好好想想第一次使用你的APP的用戶會(huì)有寫什么樣的經(jīng)歷。關(guān)注一下使用環(huán)境，通常情況下，有更好的方法來歡迎你的用戶們。
5、充滿了創(chuàng)造力，但是并不直觀的空白狀態(tài)
很多沒有經(jīng)驗(yàn)的設(shè)計(jì)師很容易忽略APP的空白狀態(tài)。但是，從一個(gè)APP的整體用戶體驗(yàn)上來說，這是一個(gè)很重要的方面。
有的時(shí)候，設(shè)計(jì)師們把錯(cuò)誤信息和空白狀態(tài)的界面當(dāng)作一塊展示他們創(chuàng)造力的畫布。
比如下面這張Google Photo的空白狀態(tài)界面：
第一眼看去，簡直太棒了不是嗎？一個(gè)漂亮的矢量圖加上完全符合設(shè)計(jì)規(guī)范的布局。
但是，再看一下，就會(huì)覺得有寫奇怪的東西了：
?這塊屏幕里什么收藏也沒有，但為什么這里會(huì)有一個(gè)那么顯眼的搜索按鈕呢？難道是想讓用戶在什么都沒有的界面里搜索什么？
?第二個(gè)很顯眼的元素就是這個(gè)矢量圖，很明顯不可以點(diǎn)擊(雖說會(huì)有很多人去嘗試點(diǎn)擊)。
?屏幕上的提示說，我應(yīng)該找到在頂部的那個(gè)超級(jí)不起眼的“＋”標(biāo)志。為什么這個(gè)提示自己不包含一個(gè)添加按鈕呢？就像是在說“點(diǎn)擊繼續(xù)按鈕來繼續(xù)”
總而言之，上面這個(gè)空白屏幕沒有能夠幫助用戶理解用戶所在的這個(gè)環(huán)境：
?什么是收藏？他們?yōu)槭裁从杏媚兀?
?為什么我什么都沒有呢？
?我可以做些什么嗎？(我應(yīng)該做什么？)
當(dāng)需要?jiǎng)?chuàng)造力時(shí)，越少有時(shí)會(huì)越有用。下面這個(gè)空白狀態(tài)屏在可用性上就做的十分完美。(先讓我們忽略那個(gè)“現(xiàn)在就點(diǎn)擊下面這歌按鈕吧”的引導(dǎo)提示)
在Lootsy里的空白狀態(tài)屏
記住，空白狀態(tài)(類似于網(wǎng)頁里的404頁面)并不只是美感和品牌特色。在可用性上，他們更為重要。要讓空白狀態(tài)更為直觀。
多問多想
不要說我是錯(cuò)的：設(shè)計(jì)模式和最佳的實(shí)踐仍然是你的好伙伴。但是要知道，APP和用戶是不一樣的：在一個(gè)APP里能夠適用的方案，在你自己的APP里，也許就一點(diǎn)不適用。這不是一個(gè)通用方案就能解決的事情。另外，你永遠(yuǎn)不可能知道為什么一個(gè)APP會(huì)以某種方式來設(shè)計(jì)。
自己要多想想，多設(shè)計(jì)，多研究。
衡量，測試，驗(yàn)證——如果能夠做得更好，就不要害怕打破設(shè)計(jì)規(guī)范。
作者： 鄭小小莊
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
交互輸出文檔的作用
文檔這個(gè)東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協(xié)調(diào)合作，恨的就是很多人對(duì)文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應(yīng)有的作用，反而成為了一個(gè)不負(fù)責(zé)任的借口。所以一份合格或者優(yōu)秀的交互輸出文檔對(duì)于一個(gè)項(xiàng)目的流轉(zhuǎn)以及團(tuán)隊(duì)的配合來說是至關(guān)重要的。交互文檔的主要利益相關(guān)者通常是以下幾個(gè)角色：交互、產(chǎn)品、開發(fā)、UI
交互
首先優(yōu)秀的交互文檔必須在交互組內(nèi)部進(jìn)行過審核，包括一致的撰寫標(biāo)準(zhǔn)和模式的使用，一個(gè)比較規(guī)范的交互設(shè)計(jì)組對(duì)于交互的撰寫標(biāo)準(zhǔn)也是有嚴(yán)格的規(guī)范的，以及在什么情況使用什么交互模式還有組件庫的調(diào)用都會(huì)有詳細(xì)的說明，那么你的交互輸出文檔就必須滿足團(tuán)隊(duì)設(shè)定的規(guī)范。
其次對(duì)于其他交互設(shè)計(jì)師來說，你的設(shè)計(jì)方案中是否會(huì)出現(xiàn)其他人負(fù)責(zé)的模塊，那么在評(píng)審的時(shí)候需要同步，雖然交互輸出文檔對(duì)于其他交互來說不是直接受益人，但是在團(tuán)隊(duì)同步過程中也是非常重要的。
產(chǎn)品
每個(gè)公司對(duì)于文檔的要求和規(guī)則不一樣。小公司可能沒有交互設(shè)計(jì)這個(gè)崗位，那么可能產(chǎn)品連prd文檔也沒有，僅僅只是一個(gè)簡易的需求說明文檔，就更不用說針對(duì)交互規(guī)則的說明文檔了。
很多有完善規(guī)模和流程的團(tuán)隊(duì)不僅會(huì)有詳細(xì)的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點(diǎn)是那么多文檔最后是給誰看的，一共在項(xiàng)目中會(huì)有多少文檔產(chǎn)生。
通常產(chǎn)品經(jīng)理會(huì)在項(xiàng)目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個(gè)prd文檔主要是給業(yè)務(wù)方、交互和開發(fā)看的，在這個(gè)文檔中需要包含一些業(yè)務(wù)規(guī)則以及交互規(guī)則，所以交互的輸出文檔是需要和產(chǎn)品的prd文檔合并的。
當(dāng)然如果你是一位很有自驅(qū)力的人，那么你可以自己推進(jìn)需求并落地，一個(gè)人就可以完成prd文檔的撰寫和需求的落地了。
開發(fā)
特別想給各位提個(gè)醒，在開發(fā)需求評(píng)審的過程中，請(qǐng)一定記住你們?cè)u(píng)審的目的，開發(fā)同學(xué)也要注意，請(qǐng)把重點(diǎn)放在需求是否能實(shí)現(xiàn)以及開發(fā)相關(guān)的地方即可，請(qǐng)不要考慮為什么要這樣做，或者你覺得應(yīng)該怎么設(shè)計(jì)，一旦進(jìn)入了開發(fā)對(duì)需求和設(shè)計(jì)的評(píng)頭論足那么這個(gè)會(huì)議效率就相當(dāng)?shù)拖隆?/strong>專業(yè)的事情就交給專業(yè)的人去做吧，可以私下討論但不要在評(píng)審會(huì)上各抒己見。
交互輸出文檔對(duì)于開發(fā)的作用就是，開發(fā)可以更好的還原該功能中交互的跳轉(zhuǎn)以及邏輯，所以我們盡量把交互規(guī)則寫明白寫詳細(xì)，比如按鈕在press和default時(shí)候是否樣式會(huì)有變化，或者頁面轉(zhuǎn)場的方向，這都是一些細(xì)節(jié)，減少不必要的低效溝通。你會(huì)發(fā)現(xiàn)有些時(shí)候?yàn)槭裁撮_發(fā)總是來問一些規(guī)則，就是因?yàn)槲臋n中沒有描述準(zhǔn)確，所以開發(fā)和交互都需要花時(shí)間去同步這個(gè)細(xì)節(jié)。
所以這個(gè)也非常考驗(yàn)交互設(shè)計(jì)師對(duì)需求文檔撰寫的功底，并不是圖片文字隨意擺放就可以的。和開發(fā)合作時(shí)也是一項(xiàng)內(nèi)部的體驗(yàn)設(shè)計(jì)，你把文檔寫好了，開發(fā)看起來也舒服，滿意度也高。如果是一堆文案，連基本的對(duì)齊都沒做到的話，誰來看都會(huì)看不下去。
UI
交互輸出文檔對(duì)于UI來說，作用就非常簡單了，但是這里也會(huì)碰到問題，那就是交互同學(xué)只需要把信息的層次表示出來即可，千萬不要畫到連視覺同學(xué)都沒有發(fā)揮余地的程度。所以為什么現(xiàn)在UXD體驗(yàn)設(shè)計(jì)那么火，就是因?yàn)榻换ズ蚒I其實(shí)重合度是很高的，只要有智能化組件庫和工具做支撐，那么在交互和UI的設(shè)計(jì)流程中，時(shí)間就會(huì)大大降低。
交互輸出文檔的內(nèi)容
在這里，我們就將整個(gè)prd文檔的內(nèi)容給大家分享一下，不僅僅是交互需要輸出的部分。因?yàn)橐粋€(gè)高階的交互是需要能夠獨(dú)自產(chǎn)出prd文檔的。然后不同的公司對(duì)與文檔的要求也是不同，大家做參考即可。
一份基礎(chǔ)的prd文檔主要由這幾部分組成（其實(shí)就是這個(gè)需求的來源以及推導(dǎo)過程和如何落地的說明）：
1.項(xiàng)目概要
a.需求背景
這個(gè)是一個(gè)項(xiàng)目最重要的部分，可以說背景沒有搞清楚，后面都可以不用做。這個(gè)指的就是我們做這個(gè)需求的價(jià)值和原因。比如我們app中業(yè)務(wù)方（運(yùn)營）需要做一個(gè)掃一掃功能，那么這個(gè)功能首先我們就從業(yè)務(wù)價(jià)值和用戶價(jià)值兩個(gè)方面去評(píng)估，根據(jù)對(duì)業(yè)務(wù)方的溝通之后我們發(fā)現(xiàn)掃一掃功能將會(huì)在周年慶的時(shí)候通過物流包裹上的二維碼，讓用戶進(jìn)行掃碼參與活動(dòng)這樣的玩法。
所以這個(gè)需求對(duì)于業(yè)務(wù)方來說是一個(gè)轉(zhuǎn)化手段，通過掃碼參與活動(dòng)-領(lǐng)券-消費(fèi)，確實(shí)是一個(gè)不錯(cuò)的玩法，但是大家如果只盯著眼前的問題或許就不夠了，比如當(dāng)周年慶結(jié)束之后這個(gè)功能還有什么用，他在以后的規(guī)劃中的存在是怎樣的。在所有的包裹中印上活動(dòng)的二維碼這個(gè)時(shí)間周期和成本有多大。
其次，對(duì)于用戶來說，掃一掃并不是幫助他們解決了某個(gè)問題，而是我做了一個(gè)東西，同時(shí)搭配著這個(gè)功能讓你們?nèi)ナ褂?，?duì)用戶來說是一個(gè)很可有可無的功能，如果線下包裹上的二維碼破損了也是非常影響體驗(yàn)并且是不可控的。那么綜上所述，既然要做一個(gè)臨時(shí)的活動(dòng)用其他的方式會(huì)不會(huì)更好？
所以在這個(gè)文檔中的第一步，首先就是要確定需求的背景、價(jià)值，也就是說，你這個(gè)需求是怎么來的，比如再來講我們一個(gè)店鋪的優(yōu)化項(xiàng)目，在這個(gè)項(xiàng)目中，首先我們必須在評(píng)審的時(shí)候說清楚我們?yōu)槭裁匆獙?duì)其進(jìn)行優(yōu)化和改版，一定是出現(xiàn)了或者我們定義到了某個(gè)比較嚴(yán)重的問題，這邊大家對(duì)我們app業(yè)務(wù)可能不是很了解我就簡單說了，就是個(gè)人中心和店鋪營銷場景重合過多，并且賣家的同時(shí)可以買和賣兩個(gè)場景存在，所以店鋪頁通過我們的數(shù)據(jù)分析和用戶的訪談我們發(fā)現(xiàn)了一些機(jī)會(huì)點(diǎn)，以及我們必須突出一個(gè)核心場景讓用戶有明確的分辨。
另外就是背景的描述也可以帶上你的調(diào)研結(jié)果和分析，比如之前我們做首頁優(yōu)化，我們觀察了近5個(gè)月的數(shù)據(jù)，都呈現(xiàn)下降的趨勢，所以之后有進(jìn)行了一系列的訪談和用戶體驗(yàn)地圖分析才有了這個(gè)需求的背景產(chǎn)生。
b.需求目標(biāo)
目標(biāo)很好理解，就是我們希望通過這次需求迭代達(dá)到一個(gè)什么成果，比如我們之前做過一次整體的體驗(yàn)優(yōu)化改版，那么我們的目標(biāo)就是減少用戶的流程跳失、提升整體體驗(yàn)滿意度、提高用戶的任務(wù)轉(zhuǎn)化率，其中我們做了一個(gè)商品關(guān)注的功能，由于是限時(shí)特價(jià)商品所以是限量的，在規(guī)定時(shí)間進(jìn)行搶購，為了讓用戶的使用場景統(tǒng)一我們打算在應(yīng)用內(nèi)做一個(gè)商品關(guān)注功能，所以在這個(gè)需求的初期，我們對(duì)這個(gè)功能的目標(biāo)和預(yù)期是提升xx百分比的轉(zhuǎn)化，提高x%比的gmv，提高用戶對(duì)關(guān)注商品下單的效率和滿意度，之前很多用戶想要購買商品需要自己在手機(jī)端設(shè)置鬧鐘，不方便。所以這個(gè)功能的一個(gè)目標(biāo)就是解決用戶場景遷移的問題。設(shè)定目標(biāo)之后，就是為了在上線后對(duì)其進(jìn)行復(fù)盤和數(shù)據(jù)跟蹤還有用戶跟蹤。
可以用一句話來描述：針對(duì)什么用戶在什么場景下解決用戶的什么問題，達(dá)到什么目的？
c.需求范圍
需求范圍也相當(dāng)于范圍層，指的就是在該需求中我們需要做哪些相關(guān)功能以及功能涉及面。舉個(gè)例子，之前說的掃一掃功能，不同的產(chǎn)品定位對(duì)于掃一掃功能的要求也是不同的，比如說微信在掃一掃功能中承載了：掃一掃、相冊(cè)、封面、街景、翻譯、手電筒等諸多功能，再比如淘寶，有掃一掃（ar、拍立淘）、相冊(cè)、歷史、幫助、手電，這說明了不同產(chǎn)品對(duì)掃一掃功能有不一樣的要求，所以在需求范圍內(nèi)我們需要把本次需要做的功能進(jìn)行描述，并且該功能是否影響其他功能的使用和對(duì)整個(gè)產(chǎn)品的影響范圍。并且我們也會(huì)講所需要的功能進(jìn)行拆解和優(yōu)先級(jí)拆分，在表格中編輯。
d.調(diào)研分析
調(diào)研分析其實(shí)就是為我們第一步背景和價(jià)值做準(zhǔn)備，由于匯報(bào)方案和評(píng)審，或者在項(xiàng)目推進(jìn)時(shí)，我們需要有相應(yīng)的論據(jù)來支撐我們方案的客觀性，所以在這一板塊中輸出的結(jié)論就非常重要，比如之前的首頁改版，經(jīng)過用戶研究小組的訪談和數(shù)據(jù)分析得出相關(guān)的結(jié)論，通過埋點(diǎn)找到相應(yīng)板塊的點(diǎn)擊數(shù)據(jù)和異常點(diǎn)，然后再進(jìn)行一系列的問卷和訪談研究，找到結(jié)果，都是為了輔助項(xiàng)目的背景以及在評(píng)審中大家對(duì)需求價(jià)值的靈魂拷問。由于數(shù)據(jù)和調(diào)研結(jié)果比較敏感就不過多放了。
e.版本日志
日志是一個(gè)非常重要的組成部分，做過開發(fā)的同學(xué)都知道log 的重要性，當(dāng)我們跑不通的時(shí)候我們都會(huì)去檢查log，然后多測試幾遍可能就找到問題所在了，其實(shí)我們的版本日志的作用也是這樣，但是一個(gè)是對(duì)自己來說可以記錄自己的工作過程，還有思路的變化，第二就是對(duì)外，包括和需求方的討論，會(huì)議的紀(jì)要等。
要注意的是會(huì)議紀(jì)要在備注中需要詳細(xì)說明，以做證據(jù)。同時(shí)也要郵件通知相關(guān)人員和負(fù)責(zé)人。可能有些公司還會(huì)放一些評(píng)審記錄，比如各部門負(fù)責(zé)人對(duì)方案和需求的建議，業(yè)務(wù)方和技術(shù)負(fù)責(zé)人的一些建議也會(huì)放在項(xiàng)目概要中，而這個(gè)prd文檔也可通過內(nèi)部服務(wù)器進(jìn)行實(shí)時(shí)更新和保存，如svn。方便大家對(duì)需求的進(jìn)度和迭代有一個(gè)直觀的追蹤。
f.項(xiàng)目成員
這個(gè)就不用多說了，產(chǎn)品、運(yùn)營、交互、視覺、開發(fā)各司其職，照相館人員即可，就不至于當(dāng)項(xiàng)目開始進(jìn)行了人員分配還沒到位就尷尬了。
2.需求方案設(shè)計(jì)
a.業(yè)務(wù)、任務(wù)、界面流程圖
有些同學(xué)不是特別明白業(yè)務(wù)流程圖和任務(wù)流程圖的區(qū)別，這邊給大家簡單介紹一下
業(yè)務(wù)流程圖：
意思就是在這個(gè)需求系統(tǒng)中，相關(guān)利益者的業(yè)務(wù)關(guān)系，任務(wù)信息的流向的一個(gè)圖標(biāo)。比如這個(gè)簡單的例子，用戶在點(diǎn)外賣這個(gè)場景中，相關(guān)的利益者有用戶、店家、外賣員三者，那么當(dāng)用戶開始觸發(fā)流程后，這3者在這個(gè)流程中就會(huì)各司其職，而業(yè)務(wù)流程圖也很明顯的告訴大家所有聯(lián)動(dòng)者的指責(zé)和流程走向。
任務(wù)流程圖：
用戶在具體執(zhí)行某一個(gè)任務(wù)時(shí)候的工作流程，以及其核心任務(wù)的操作步驟，比如在登錄注冊(cè)這個(gè)任務(wù)中，用戶需要進(jìn)行一系列的操作，在這個(gè)流程中用戶的操作引發(fā)的系統(tǒng)判斷需要詳細(xì)說明。
界面流程圖：
界面之間的跳轉(zhuǎn)關(guān)系和路徑，在這個(gè)流程圖中，我們不需要吧詳細(xì)的說明寫上，只需要將需求中涉及到的頁面跳轉(zhuǎn)進(jìn)行敘述即可。
b.相關(guān)說明和規(guī)則
接下來就要開始我們交互文檔最為關(guān)鍵的部分了，如何書寫交互說明，以及交互說明應(yīng)該包含的內(nèi)容。
1.全局思考
在做交互方案也就是我們畫原型的時(shí)候會(huì)思考一些問題：
a.整體思考
1.信息架構(gòu)是否容易理解，信息分類是否合理，比如我們的信息架構(gòu)是否采用了用戶容易理解的，市面上常用的信息架構(gòu)。
2.信息層級(jí)和路徑是否合理，不一定要最簡，但是要高效，信息的優(yōu)先級(jí)是否放置準(zhǔn)確，信息組織是否具有相關(guān)性、邏輯性。
3.主題是否清晰，3秒內(nèi)告訴“我”在哪里，并且可以做什么
4.方案的延展和后續(xù)功能規(guī)劃的可擴(kuò)展性
b.用戶權(quán)限
根據(jù)不同用戶的權(quán)限對(duì)該需求進(jìn)行檢查，比如普通用戶、vip用戶、內(nèi)外網(wǎng)用戶、游客用戶，在登錄未登錄時(shí)候?qū)π枨髢?nèi)功能的使用是否有影響
c.登錄方式
用戶登錄和注冊(cè)、終端的兼容，不同方式注冊(cè)的用戶是否需要補(bǔ)填相關(guān)信息等等
d.流程
1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性；
2.逆向流程和非正常流程的思考有沒有完全；
3.流程的閉環(huán)有沒有做好；頁面跳轉(zhuǎn)的方式是否合理；
4.中斷后的恢復(fù)狀態(tài)如何呈現(xiàn)；
5是否保留原信息等等
2.內(nèi)容、狀態(tài)和顯示
a.內(nèi)容的獲取來源
例如下方的圖片為例，banner的圖片來源和發(fā)現(xiàn)feed流的圖片來源肯定是不同的，那么就要寫清楚，圖片或者數(shù)據(jù)的來源是來自于用戶的上傳還是系統(tǒng)后臺(tái)的配置獲取；并且獲取的方式是如何的，是需要手動(dòng)下啦刷新還是切換頁面自動(dòng)刷新，還是設(shè)定時(shí)間自動(dòng)刷新。
字段、圖標(biāo)是從接口獲取還是前端寫死，以及氣泡展示的規(guī)則等等。另外一張圖片可能用在多個(gè)地方，而可能呈現(xiàn)的尺寸不同，所以在涉及到相關(guān)圖片使用時(shí)要注意剪裁規(guī)則和圖片的來源。
b.緩存機(jī)制
圖片以及一些資源通常我們需要對(duì)其進(jìn)行緩存，有些同學(xué)不清楚什么是緩存，緩存是在計(jì)算機(jī)上的一個(gè)原始數(shù)據(jù)的復(fù)制集，一般來說需要緩存的內(nèi)容是通過瀏覽產(chǎn)生的，包括圖片以及cookie等，瀏覽過的視頻和廣告也會(huì)被緩存。同時(shí)在不同的網(wǎng)絡(luò)環(huán)境下緩存的時(shí)間標(biāo)準(zhǔn)也不同，無網(wǎng)絡(luò)那肯定只能讀取緩存文件，wifi環(huán)境下緩存時(shí)間可設(shè)置的短一些，而流量環(huán)境下時(shí)間就可以設(shè)置的偏長。
c.狀態(tài)
狀態(tài)大家都應(yīng)該都會(huì)寫，主要包含的就是初始狀態(tài)（冷啟動(dòng)無緩存第一次進(jìn)入）、空狀態(tài)（無任何內(nèi)容比如空的購物車）、常規(guī)狀態(tài)、異常狀態(tài)（網(wǎng)絡(luò)中斷、接口報(bào)錯(cuò)）還有過期狀態(tài)等
d.顯示
數(shù)據(jù)和內(nèi)容的極限值，最大和最小，比如粉絲和關(guān)注的數(shù)量，小于1萬人則顯示完整的數(shù)量，大于等于1萬小于11000則顯示1萬，大于11000小于12000則顯示1.1萬，這樣的方式。另外包括標(biāo)題極限為一行顯示，超過部分的顯示規(guī)則。敏感信息、錯(cuò)誤提示以及超時(shí)的信息提示。金額的格式使用￥xxx還是xxx元，小數(shù)點(diǎn)保留的規(guī)則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等
3.反饋、提示、手勢
反饋和提示的樣式有很多種，一般反饋指的是用戶對(duì)某一個(gè)控件進(jìn)行觸發(fā)后獲得的反饋，比如按鈕按下的反饋，以及之后收到的反饋，是進(jìn)行跳轉(zhuǎn)還是給用戶提示，采用的是模態(tài)還是非模態(tài)的提示。比如點(diǎn)擊關(guān)注某個(gè)人的按鈕后會(huì)提示關(guān)注成功，比如退出某個(gè)圖文編輯會(huì)二次確認(rèn)是否退出，再比如抖音長按后出現(xiàn)的3個(gè)操作反饋，還有支付成功后的動(dòng)效提示、惡意多次操作后的提示等等
如果有手勢交互也需要說明，比如滑動(dòng)后內(nèi)容置頂、拖拽、左右輕掃的tab滑動(dòng)、重按的3dtouch等等
4.加載
使用模態(tài)還是非模態(tài)，如果是模態(tài)加載請(qǐng)盡量使用情感化設(shè)計(jì)來減少用戶焦慮。如果是非模態(tài)，根據(jù)信息呈現(xiàn)和體驗(yàn)采用分步加載還是預(yù)加載還是智能加載。如果是分布加載就選擇先加載資源較小的內(nèi)容，再加載圖片，可以先將圖片模糊化粗渲染給用戶呈現(xiàn)，包括在瀏覽信息流的時(shí)候的分頁加載也是可以的。如果更智能化一些也可以預(yù)判用戶的行為進(jìn)行內(nèi)容加載，例如當(dāng)用戶在某個(gè)圖文前停留時(shí)間達(dá)到某個(gè)值后就預(yù)先給用戶加載里面的內(nèi)容。
加載的全局方式在方案中需要考慮，頁面加載、下啦刷新等等，需要統(tǒng)一。
5.環(huán)境、設(shè)備與場景
a.不同設(shè)備、廠商的不同版本
都會(huì)影響到方案的落地和用戶體驗(yàn)這個(gè)要非常注意。比如一些交互控件我們?cè)?、iphonex和大屏幕尺寸上使用起來效果很好，但是小屏幕的時(shí)候這個(gè)交互控件顯得就很難受，所以需要仔細(xì)斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進(jìn)行兼容。
b.白天和晚上是否需要做不同的風(fēng)格設(shè)計(jì)，以及在是否需要給用戶遮擋隱私的功能。
6.文案
文案這點(diǎn)很多設(shè)計(jì)師都忽略了，你們有沒有聽說過一個(gè)叫文案設(shè)計(jì)師的崗位。其實(shí)文案在我們產(chǎn)品設(shè)計(jì)中是非常重要的。首先一個(gè)產(chǎn)品的文案對(duì)應(yīng)的語氣和產(chǎn)品調(diào)性也是相關(guān)的，就好比我們說產(chǎn)品有它自己的性格一樣，另外文案的使用直接就影響用戶對(duì)該信息的理解，比如一個(gè)對(duì)話框的文案是：確定退出嗎？下面會(huì)有兩種不同的選擇，一個(gè)確定，一個(gè)是退出，大家覺得哪個(gè)比較好？還有就是不加“嗎”，就變成了：確定退出？這樣描述出來的語言給人感覺很冰冷，甚至有一些威脅。
所以首先我們的文案是否有溫度，和產(chǎn)品的個(gè)性是否相匹配。其次文案的表述是否準(zhǔn)確和通俗易懂，比如你告訴程序員一句話，幫我去菜市場買西瓜，如果有西紅柿，幫我買兩個(gè)，你會(huì)帶什么東西回家？程序員版：if（看到西紅柿）西瓜等于2；else 西瓜=1。buy 西瓜。條件：看見西紅柿 執(zhí)行命令：買兩個(gè)西瓜一語道破版：其實(shí)吧，看到西紅柿呢是賣兩個(gè)西瓜的觸發(fā)條件…沒看到就買一個(gè)西瓜，看到就買兩個(gè)西瓜。所以這里出現(xiàn)的不僅僅是程序員的思維和我們的差異化，也說明了一句話沒有表述清楚所帶來的問題是很大的。
另外就是文案用語的一致性，在整個(gè)產(chǎn)品同樣的場景中，我們需要統(tǒng)一文案用語。
7.常見控件
具體見下方列表
8.撰寫方式
作為一個(gè)設(shè)計(jì)師，不管是否在做視覺，我們都需要對(duì)文檔有一個(gè)美化意識(shí)，如果你的文檔非常凌亂，那么在別人眼里就會(huì)覺得你是一個(gè)比較粗心大意，不夠負(fù)責(zé)任的人，所以我們盡量在做交互輸出文檔的時(shí)候也畫的美觀一些。
目錄
首先在目錄的撰寫時(shí)候要進(jìn)行分類，通常我做的時(shí)候會(huì)對(duì)該需求以頁面父子集關(guān)系進(jìn)行創(chuàng)建，父集為核心頁面，子集為其下的相關(guān)子頁面，這樣頁面的流轉(zhuǎn)和歸屬關(guān)系就不會(huì)搞錯(cuò)。
說明
在撰寫規(guī)則與說明時(shí)可以通過標(biāo)簽法進(jìn)行標(biāo)簽說明的撰寫方式，同樣在視覺上保持美觀，對(duì)比與對(duì)齊的運(yùn)用，具體該寫什么東西上面已經(jīng)說明就不贅述了。除了交互規(guī)則以外，高階的交互設(shè)計(jì)或者產(chǎn)品經(jīng)理還需要補(bǔ)充業(yè)務(wù)規(guī)則，比如排序、商品抓去規(guī)則、權(quán)重、算法、活動(dòng)規(guī)則等等這里就不展開說了。
總結(jié)
文檔的形式有非常多種，針對(duì)不同的公司和產(chǎn)品也需要作出相應(yīng)的調(diào)整，能夠滿足需求和方便協(xié)作，目的就達(dá)到了，我們并不希望過多的時(shí)間花在文檔的撰寫上，而是希望大家在做設(shè)計(jì)時(shí)多思考業(yè)務(wù)，本次分享就到這里啦～
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前段時(shí)間一直在做運(yùn)營類設(shè)計(jì)，banner在其中占了較大比重，為此就想寫一篇階段性總結(jié)。其中部分觀點(diǎn)參考了相關(guān)視頻教程和文章，設(shè)計(jì)新手一枚，如有不足還請(qǐng)大家海涵。
banner由以下五部分組成：版式，字體，顏色，背景，點(diǎn)綴。我就針對(duì)這幾點(diǎn)做些具體分析。
關(guān)于版式
大家發(fā)現(xiàn)沒有，大體上banner版式可分為兩種：1、圖文左右排版 2、文字居中
在工作中我接觸圖文左右排版的機(jī)會(huì)較多，因此今天著重分析下。
圖文左右排版
當(dāng)banner中需要包含具體的素材，如某位大咖，某件產(chǎn)品時(shí)，一般會(huì)選擇左右排版。并且圖文比例約為6：4（接近0.618的黃金比例）。
關(guān)于為何文字部分要大于圖片部分，我做了如下分析：如果banner中只有某位大咖、某件產(chǎn)品，而沒有文字襯托，用戶就不會(huì)知道banner想表達(dá)的什么。
如下圖，banner中只有一位拉大提琴的中年外國男子，人們會(huì)猜測這男子的個(gè)人專輯發(fā)布了？他是誰？所以，通過圖片用戶只能對(duì)信息有個(gè)大致了解。
相反，如果把banner中圖片部分遮去，而只保留文字部分。人們能夠獲取的關(guān)鍵詞有：5首電影歌曲、回憶過往的。因此即使沒有配圖，文字也能將信息精準(zhǔn)地帶給用戶，文字所占比例應(yīng)當(dāng)比圖片多些。這也就解釋了為何大部分左右排版的banner都是文字占比大于圖片。
banner中有些文字放左邊，有些放右邊，這有什么區(qū)別呢？
下圖中第一個(gè)banner是關(guān)于歐美電影歌曲的，右側(cè)可布局拉琴的男子，也可配電影片段，還可放正在播音的留聲機(jī)。第二張banner同樣如此。
下面兩圖均是圖左字右的banner，第一張《首席醫(yī)官》，特指這本書。
第二章奧運(yùn)冠軍陳一冰求婚——除了他沒別人了。
說了這么多，總結(jié)出圖右字左和圖左字右的區(qū)別了嗎？圖片在右，配圖內(nèi)容比較模糊；圖片在左，配圖內(nèi)容比較清晰。由于人們習(xí)慣的閱讀順序是從左到右，左邊放什么意味著用戶會(huì)先看到什么。當(dāng)圖片信息清晰時(shí)圖片放左，先用特定配圖吸引用戶目光，再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放左左邊，用戶得看到右邊的文字部分才能獲得banner想傳遞的內(nèi)容，這會(huì)導(dǎo)致用戶接收信息時(shí)間增加。
2、文字居中
在工作中我沒怎么接觸過文字居中的排版方式，因此很抱歉沒法做太多的剖析。印象中電商比較喜歡此類排版，也許是文字放在正中的位子，底下可以放許多產(chǎn)品？
版式中大小標(biāo)題的比例
發(fā)現(xiàn)沒？大小標(biāo)題比例約為2：1。其實(shí)這和一級(jí)標(biāo)題，二級(jí)標(biāo)題是同個(gè)道理，我們?cè)谠O(shè)計(jì)banner時(shí)總希望用戶能把banner上的文字看全，但又不希望大小標(biāo)題混在一起主次不清，因此在排版合理，用戶能看清字的綜合考慮下，大小標(biāo)題比例約為2：1。（其實(shí)小標(biāo)題太小運(yùn)營們也會(huì)懟的）
關(guān)于字體
banner中常用的字體有三種：襯線體（serif）、非襯線體（sans-serif）、書法體（cursive）
都說字體有各自的性格，襯線體筆畫有粗細(xì)之分，它模仿的是中國古代字體和古代碑文上的字體，因此襯線體能給人古典，文藝的感覺，適合用于文藝氣息或與女子的相關(guān)設(shè)計(jì)。
非襯線體筆畫簡潔，筆畫較粗，體現(xiàn)現(xiàn)代，簡約的特性，適合用于蒼勁有力，與男子相關(guān)的設(shè)計(jì)。
書法體源自中國古代，能體現(xiàn)中國文化和揮灑墨水的豪氣，適用于文藝主題和金戈鐵馬般的豪邁主題。
ps：商用字體需要注意版權(quán)！！！這點(diǎn)很重要
關(guān)于顏色
在生活中，色彩心理學(xué)對(duì)人們對(duì)顏色的認(rèn)知有很大的影響。
黑色：黑色是一種代表品質(zhì)、權(quán)威、穩(wěn)重、時(shí)尚的色彩，同時(shí)也含有冷漠、悲傷、防御的消極情感。
白色：傳遞一種簡單、純真、高雅、精致、信任、開放、干凈、暢快、樸素的情感。
灰色：代表睿智、老實(shí)、執(zhí)著、嚴(yán)肅、壓抑的色彩。
紅色：傳遞喜慶、自信、斗志、權(quán)威、性感的情感。
綠色：是自然界中最常見的顏色，代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。
藍(lán)色：是三原色中的一種，代表永恒、靈性、清新、自由、放松、舒適、寧靜、商務(wù)。
紫色：是一種代表優(yōu)雅、浪漫、高貴、時(shí)尚、神秘、夢(mèng)幻、靈性、創(chuàng)造性的顏色。
黃色：代表陽光、青春、活力、時(shí)尚、尊貴、年輕輕快、輝煌、希望的顏色。
因此在設(shè)計(jì)中選擇主色調(diào)也要遵從如上:point_up_2:。
例如活潑年輕的內(nèi)容可選擇純度較高的藍(lán)綠色、綠色等作為主色調(diào)。
文藝類內(nèi)容則適合飽和度不高，偏向白色這類能讓人平靜的色彩。
關(guān)于顏色的搭配，我一般會(huì)在花瓣上找些主題相近的banner作參考。
此外推薦幾個(gè)配色網(wǎng)站：
https://coolors.co/browser/latest/1
https://color.adobe.com
https://uigradients.com
關(guān)于點(diǎn)綴
大約有3種。橢圓點(diǎn)綴，圓角矩形點(diǎn)綴，實(shí)物點(diǎn)綴。圓形圓角矩形點(diǎn)綴可適當(dāng)加些漸變和陰影。
為了不讓實(shí)物點(diǎn)綴太過搶眼，可以適當(dāng)做些弱化，比如降低透明度或是做些模糊處理。
關(guān)于背景
大約有3種。
純色背景，實(shí)物背景，材質(zhì)背景。根據(jù)畫面的需要可以選擇合適的底圖。
作者： 夜夜yue
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
總結(jié)：看了這么多手癢癢了嗎？此時(shí)此刻，打開ps做個(gè)banner練練手唄~~~~
如果你想設(shè)計(jì)出卓越，高效和流暢的用戶界面，就請(qǐng)參考Ben Shneiderman的“界面設(shè)計(jì)的八大黃金法則” 。蘋果，谷歌和微軟設(shè)計(jì)的產(chǎn)品都反映了Shneiderman的法則，這些行業(yè)巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征，而這些公司的熱門界面設(shè)計(jì)則是法則的視覺體現(xiàn)。本文將告訴你如何整合8大黃金法則來改進(jìn)你的工作。
界面設(shè)計(jì)的八大黃金法則
Ben Shneiderman（生于1947年8月21日）是美國馬里蘭大學(xué)人機(jī)交互實(shí)驗(yàn)室的計(jì)算機(jī)科學(xué)家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設(shè)計(jì)用戶界面：有效的人機(jī)交互策略（Designing the User Interface: Strategies for Effective Human-Computer Interaction）”中介紹了界面設(shè)計(jì)的八個(gè)黃金法則：
一致性
當(dāng)你在設(shè)計(jì)類似的功能和操作時(shí)，可以利用熟悉的圖標(biāo)，顏色，菜單的層次結(jié)構(gòu)，行為召喚，用戶流程圖來實(shí)現(xiàn)一致性。規(guī)范信息表現(xiàn)的方式可以減少用戶認(rèn)知負(fù)擔(dān)，用戶體驗(yàn)易懂流暢。一致性通過幫助用戶快速熟悉產(chǎn)品的數(shù)字化環(huán)境從而更輕松地實(shí)現(xiàn)其目標(biāo)。
常用用戶使用快捷操作
隨著使用次數(shù)的增加，用戶需要有更快的完成任務(wù)的方法。例如，Windows和Mac為用戶提供了用于復(fù)制和粘貼的鍵盤快捷方式，隨著用戶更有經(jīng)驗(yàn)，他們可以更快速，輕松地瀏覽和操作用戶界面。
提供有用信息的反饋
用戶每完成一個(gè)操作，需要系統(tǒng)給出反饋，然后用戶才能感知并進(jìn)入下一步操作。反饋有很多類型，例如聲音提示，觸摸感，語言提示，以及各種類型的組合。對(duì)于用戶的每一個(gè)動(dòng)作，應(yīng)該在合理的時(shí)間內(nèi)提供適當(dāng)?shù)?，人性化的反饋。如設(shè)計(jì)多頁問卷時(shí)應(yīng)該告訴用戶進(jìn)行到哪個(gè)步驟，要保證讓用戶在盡量少受干擾的情況下得到最有價(jià)值的信息。
作者/版權(quán)持有人：Google，Inc. 版權(quán)條款和許可：合理使用
Windows Media Player設(shè)計(jì)師應(yīng)該牢記Ben Shneiderman的第三個(gè)黃金法則：提供有用信息的反饋。體驗(yàn)不佳的錯(cuò)誤消息通常會(huì)只顯示錯(cuò)誤代碼，對(duì)用戶來說這毫無意義。作為一名好的設(shè)計(jì)師，你應(yīng)該始終給用戶以可讀和有意義的反饋。
設(shè)計(jì)流程需要設(shè)計(jì)一個(gè)完結(jié)
不要讓你的用戶猜來猜去，告訴他們其操作會(huì)引導(dǎo)他們到哪個(gè)步驟。例如，用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會(huì)感到滿足和安心。
提供簡潔的錯(cuò)誤操作的解決方案
用戶不喜歡被告知其操作錯(cuò)誤。設(shè)計(jì)時(shí)應(yīng)該盡量考慮如何減少用戶犯錯(cuò)誤的機(jī)會(huì)，但如果用戶操作時(shí)發(fā)生不可避免的錯(cuò)誤，不能只報(bào)錯(cuò)而不提供解決方案，請(qǐng)確保為用戶提供簡單，直觀的分步說明，以引導(dǎo)他們輕松快速地解決問題。例如，用戶在填寫在線表單時(shí)忘記填寫某個(gè)輸入框時(shí)，可以標(biāo)記這個(gè)輸入框以提醒用戶。
允許撤銷操作
設(shè)計(jì)人員應(yīng)為用戶提供明顯的方式來讓用戶恢復(fù)之前的操作，無論是單次動(dòng)作，數(shù)據(jù)輸入還是整個(gè)動(dòng)作序列后都應(yīng)允許進(jìn)行返回操作，正如Shneiderman在他的書中所說：
“這個(gè)功能減輕了焦慮，因?yàn)橛脩糁兰幢悴僮魇д`，之前的操作也可以被撤銷，鼓勵(lì)用戶去大膽放手探索?！?
給用戶掌控感
設(shè)計(jì)時(shí)應(yīng)考慮如何讓用戶主動(dòng)去使用，而不是被動(dòng)接受，要讓用戶感覺他們對(duì)數(shù)字空間中一系列操作了如指掌，在設(shè)計(jì)時(shí)按照他們預(yù)期的方式來獲得他們的信任。
減少短時(shí)記憶負(fù)擔(dān)
人的記憶力是有限的，我們的短時(shí)記憶每次最多只能記住五個(gè)東西。因此，界面設(shè)計(jì)應(yīng)當(dāng)盡可能簡潔，保持適當(dāng)?shù)男畔哟谓Y(jié)構(gòu)，讓用戶去再認(rèn)信息而不是去回憶。再認(rèn)信息總是比回憶更容易，因?yàn)樵僬J(rèn)通過感知線索讓相關(guān)信息重現(xiàn)。例如，我們經(jīng)常發(fā)現(xiàn)選擇題比簡答題更容易，因?yàn)檫x擇題只需要我們對(duì)正確答案再認(rèn)，而不是從我們的記憶中提取。被彭博商業(yè)周刊稱為“世界上最具影響力的設(shè)計(jì)師之一”的Jakob Nielsen發(fā)明了幾種可用性研究方法，包括啟發(fā)式評(píng)估。信息再認(rèn)而非回憶就是Nielsen界面設(shè)計(jì)10種可用性啟發(fā)式原則之一。
了解蘋果的設(shè)計(jì)如何整合Shneiderman的8大黃金法則
蘋果整合Shneiderman的八項(xiàng)黃金法設(shè)計(jì)出成功的產(chǎn)品，他們從Mac到移動(dòng)設(shè)備設(shè)計(jì)都取得了巨大的成功，他們以產(chǎn)品設(shè)計(jì)的一致性，直觀而美麗為榮。蘋果的iOS人機(jī)界面指南也告訴我們他們的設(shè)計(jì)團(tuán)隊(duì)如何應(yīng)用Shneiderman的設(shè)計(jì)原則。
1. 一致性
“一致性”和“感知的穩(wěn)定性”在Mac OS的設(shè)計(jì)中體現(xiàn)得淋漓盡致。不管是80年代的版本，還是現(xiàn)在的版本，Mac OS菜單欄設(shè)計(jì)都包含一致的圖形元素。
作者/版權(quán)持有人：StockSnap.io 版權(quán)條款和許可：CC0
作者/版權(quán)持有人：StockSnap.io 版權(quán)條款和許可證：CC0
隨著時(shí)間的推移，Mac OS的外觀有很大變化，Mac OS菜單欄設(shè)計(jì)都保持一致。
2. 快捷操作
如前所述，Mac允許用戶使用各種鍵盤快捷鍵，使用頻率高的包括復(fù)制和粘貼（Command-X和Command-V）以及截圖（Command-Shift-3）。
作者/版權(quán)持有人：StockSnap.io 版權(quán)條款和許可證：CC0
Mac允許用戶鍵盤快捷方式操作實(shí)現(xiàn)通常需要鼠標(biāo)、觸控板或其他輸入設(shè)備才能完成的操作。
3. 有用信息反饋
當(dāng)用戶點(diǎn)擊Mac桌面上的文件時(shí)，該文件會(huì)“突出顯示”，這是視覺反饋的一個(gè)很好的示例。另外，當(dāng)用戶拖動(dòng)桌面上的文件夾時(shí)，他們可以看到在按住鼠標(biāo)時(shí)，文件夾顯示被移動(dòng)的狀態(tài)。
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
4. 操作流程的設(shè)計(jì)
當(dāng)用戶將軟件安裝到Mac OS時(shí)，提示信息的屏幕顯示用戶當(dāng)前的安裝步驟。
作者/版權(quán)持有人：Google，Inc. 版權(quán)條款和許可：合理使用
5. 錯(cuò)誤操作的解決方案
在軟件安裝過程中，如果發(fā)生錯(cuò)誤，用戶將收到友好的提示信息。提供復(fù)雜的解決方案，或用戶難以理解的解決方案，或只報(bào)錯(cuò)不提供解決方案，都是極大影響用戶體驗(yàn)，使用戶沮喪的關(guān)鍵原因。根據(jù)錯(cuò)誤操作的嚴(yán)重程度，區(qū)分何時(shí)使用小的，不會(huì)影響用戶操作的提醒，以及何時(shí)使用大的，侵入式提醒。但當(dāng)錯(cuò)誤操作發(fā)生時(shí)，請(qǐng)謹(jǐn)慎選擇正確的語氣和正確的語言提醒用戶操作錯(cuò)誤。
作者/版權(quán)持有人：Google，Inc. 版權(quán)條款和許可：合理使用
Mac OS通過顯示一個(gè)溫和的提示消息向用戶解釋出現(xiàn)了什么錯(cuò)誤操作及其原因。另外，解釋這是由于自己的安全偏好選擇，進(jìn)一步向用戶保證，告訴他們一切在掌控范圍內(nèi)。
作者/版權(quán)持有人：Manutencaonet Blogspot 版權(quán)條款和許可：CC BY 3.0
Windows系統(tǒng)中這個(gè)非常不友好的提示信息使用“fatal（后果嚴(yán)重的）”和“terminated（被終止）”字樣。這樣的負(fù)面的，不友好的言語肯定會(huì)嚇倒大多數(shù)用戶！
6. 允許撤銷操作
當(dāng)用戶在安裝過程中提供信息時(shí)發(fā)生錯(cuò)誤，允許他們重新回到上一步，而不必重新開始。
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
7. 給用戶掌控感
讓用戶有權(quán)選擇是繼續(xù)運(yùn)行程序還是退出程序，Mac的活動(dòng)監(jiān)視器允許用戶在程序意外崩潰時(shí)“強(qiáng)制退出”。
作者/版權(quán)持有人：Euphemia Wong 版權(quán)條款和許可：合理使用
8. 減少短時(shí)記憶負(fù)荷
由于人類短時(shí)記憶每次只能記住5個(gè)東西，所以蘋果iPhone屏幕底部的主菜單區(qū)域中只能放置4個(gè)及以下的應(yīng)用程序圖標(biāo)，這個(gè)設(shè)計(jì)不僅涉及對(duì)記憶負(fù)荷的考慮，還考慮了不同版本一致性問題。
作者/版權(quán)持有人：Brian Voo 版權(quán)條款和許可：合理使用
作者/版權(quán)持有人：Pixabay 版權(quán)條款和許可證：CC0
工作表：如何將Shneiderman的8項(xiàng)黃金法則應(yīng)用于你的界面設(shè)計(jì)
作為設(shè)計(jì)師，你的工作是創(chuàng)建直觀，精美和流暢的用戶界面設(shè)計(jì)，讓用戶感到輕松和滿意。下面這個(gè)工作表可以幫你把上述這些規(guī)則應(yīng)用于你的設(shè)計(jì)中。
工作表的PDF格式下載鏈接: https://pan.baidu.com/s/1nvp1EKp 密碼: mjq7
從Mac和PC到移動(dòng)設(shè)備甚至是虛擬現(xiàn)實(shí)，以及將來可能出現(xiàn)的任何互動(dòng)科技，只要你的設(shè)計(jì)涉及到人與界面之間的交互，這八大規(guī)則在設(shè)計(jì)過程中至關(guān)重要，不容忽視，現(xiàn)在就用這個(gè)工作表學(xué)習(xí)如何將它應(yīng)用到你的設(shè)計(jì)中吧。
作者： oftodesign
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
以下內(nèi)容主要分成兩大部分，第一是聊聊響應(yīng)式和自適應(yīng)的區(qū)別和原理，以及我們應(yīng)該如何去設(shè)計(jì)響應(yīng)式界面；第二部分也是比較關(guān)鍵的B端系統(tǒng)設(shè)計(jì)的核心，B端設(shè)計(jì)中臺(tái)完整構(gòu)建過程的具體步驟，以及應(yīng)用到的格式塔原則，和命名的一些注意事項(xiàng)，內(nèi)容較多，大家可以根據(jù)上述目錄來選擇性閱讀。
簡單概括多端兼容設(shè)計(jì)的發(fā)展史，最早是桌面端，比如桌面的一些應(yīng)用；后來出現(xiàn)了移動(dòng)端，針對(duì)移動(dòng)端大家用的都是WAP，指一種無線應(yīng)用協(xié)議，大家在用手機(jī)瀏覽一些網(wǎng)站，會(huì)把網(wǎng)站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因?yàn)楫?dāng)時(shí)網(wǎng)絡(luò)不好，早在3G和2G時(shí)代移動(dòng)端用的都是WAP；在2008年之后出現(xiàn)了響應(yīng)式，也就是做一套代碼可以兼容三端（網(wǎng)頁、移動(dòng)端、iPad）設(shè)備，在發(fā)展的同時(shí)也遇到很多問題，但響應(yīng)式同時(shí)也遇到了很多問題；于是又出現(xiàn)了自適應(yīng)，指不同的設(shè)備打開不同的頁面進(jìn)行自適應(yīng)，自適應(yīng)能增加效率，但需要增加工作量；2017年以后直到現(xiàn)在看到最常用的就是漸進(jìn)式，類似完整的像在使用一個(gè)APP。這是多端兼容設(shè)計(jì)的整體的發(fā)展。
可以理解成用戶在手機(jī)、電腦、ipad打開同一個(gè)界面，所呈現(xiàn)的界面是一樣的。需要考慮移動(dòng)端設(shè)計(jì)和網(wǎng)頁端怎么通過一套代碼進(jìn)行兼容。
自動(dòng)布局算是響應(yīng)式的一種，但平時(shí)看到很多響應(yīng)式其實(shí)并不是真正的響應(yīng)式，而是自動(dòng)布局，因?yàn)榻缑嬖诓煌脑O(shè)備用的是不同的模板，當(dāng)我們用電腦打開呈現(xiàn)的是一套模板，而用手機(jī)打開則是另外一套模板，這種看起來是響應(yīng)式，其實(shí)不是。因?yàn)楫?dāng)我在開發(fā)者模式下調(diào)節(jié)不同設(shè)備展示時(shí)，就會(huì)發(fā)現(xiàn)，其實(shí)是換了一個(gè)網(wǎng)址來根據(jù)不同的設(shè)備進(jìn)行自適應(yīng)的，而真正的響應(yīng)式是不需要刷新的，在拖小窗口的時(shí)候就會(huì)變成手機(jī)端的那個(gè)樣子。
漸進(jìn)式布局是近幾年比較新起的，這種布局設(shè)計(jì)，很像一個(gè)網(wǎng)站或者本身它就是一個(gè)網(wǎng)站，但用起來就像一個(gè)APP一樣，看到這里大家很容易相到，小程序就是漸進(jìn)式布局得一種，小程序明顯是一個(gè)網(wǎng)頁，但通過技術(shù)的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時(shí)候感覺小程序就是一個(gè)APP，但核心技術(shù)還是web網(wǎng)頁。
響應(yīng)式的原理是通過定位的方式來做響應(yīng)式的各種開發(fā)，需要在頁面中至少標(biāo)出這十個(gè)點(diǎn)：中心點(diǎn)，上下左右點(diǎn)，上左上右點(diǎn)和下左下右點(diǎn)，這幾個(gè)點(diǎn)其實(shí)就代表了做響應(yīng)式和做布局相應(yīng)的位置。這樣可能大家不容易理解，其實(shí)結(jié)合figma來看，這些點(diǎn)對(duì)應(yīng)的就是這樣（如下圖），在figma中的布局點(diǎn)。設(shè)計(jì)師通過調(diào)節(jié)圖形的布局點(diǎn)，可以做到在頁面拉伸時(shí)，讓想動(dòng)的元素跟隨變化，不動(dòng)的元素靜止不動(dòng)，這就是響應(yīng)式的原理。換言之，我們做響應(yīng)式布局的原理也就是通過figma或者sketch中的布局約束這個(gè)功能來實(shí)現(xiàn)的。
01、響應(yīng)式
如下圖是響應(yīng)式的優(yōu)點(diǎn)和缺點(diǎn)。響應(yīng)式其實(shí)就是只開發(fā)一套頁面，這個(gè)頁面兼容三端。雖然做了響應(yīng)式，但如何響應(yīng)是需要設(shè)計(jì)師去設(shè)計(jì)的。比如我們?cè)O(shè)計(jì)了一個(gè)移動(dòng)端界面，然后全部做好對(duì)應(yīng)的自動(dòng)布局，再進(jìn)行頁面拉伸，內(nèi)容隨之會(huì)發(fā)生變化，比如當(dāng)拉伸到1024*768的時(shí)候，也就是iPad的尺寸，就會(huì)發(fā)現(xiàn)局部在設(shè)計(jì)上有些不合實(shí)際情況，這時(shí)就需要設(shè)計(jì)師在對(duì)應(yīng)尺寸的設(shè)計(jì)稿上進(jìn)行內(nèi)容上的微調(diào)，比如按鈕不可能那么長，就把按鈕設(shè)計(jì)的短一點(diǎn)。當(dāng)繼續(xù)進(jìn)行拉伸到1440網(wǎng)頁的寬度時(shí)，然后再酌情針對(duì)網(wǎng)頁尺寸的呈現(xiàn)樣式，局部進(jìn)行尺寸的調(diào)整，比如文字和按鈕被拉伸到網(wǎng)頁版都需要居中對(duì)齊，電腦端的樣式就需要設(shè)計(jì)師重新排版了。
通常在B端系統(tǒng)，設(shè)計(jì)師需要做響應(yīng)式設(shè)計(jì)時(shí)，往往是從大往小做設(shè)計(jì)，這也取決于這個(gè)B端產(chǎn)品是否需要進(jìn)行移動(dòng)端的設(shè)計(jì)，《B端設(shè)計(jì)總概二》中提到過什么情況下進(jìn)行設(shè)計(jì)B端移動(dòng)端。如果需要設(shè)計(jì)B端移動(dòng)端，就需要我們將網(wǎng)頁改成移動(dòng)端設(shè)計(jì)，比如B端的側(cè)邊欄導(dǎo)航在拉伸到移動(dòng)端時(shí)，就會(huì)變成用一個(gè)折疊懸浮的iocn來替代等等這樣設(shè)計(jì)上的改變。在figma中，做三端拉伸時(shí)候，可以用斷點(diǎn)插件來進(jìn)行演示，通過對(duì)斷點(diǎn)插件的設(shè)置，就可以完美的看到頁面在三端不同情況的適配呈現(xiàn)，斷點(diǎn)插件用來做演示非常方便。
02、自適應(yīng)
如下圖是自適應(yīng)的優(yōu)點(diǎn)和缺點(diǎn)，其實(shí)就是一個(gè)項(xiàng)目開發(fā)三個(gè)頁面，分別做定制設(shè)計(jì)，網(wǎng)頁端、移動(dòng)端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規(guī)劃2035遠(yuǎn)景目標(biāo)里提到重點(diǎn)發(fā)展傳統(tǒng)企業(yè)數(shù)字化轉(zhuǎn)型，尤其是今年我們?cè)O(shè)計(jì)師更能深刻體會(huì)，C端和B端已經(jīng)是完全兩個(gè)不同的行業(yè)，C端發(fā)展近十年，已經(jīng)很難再做到創(chuàng)新上的突破，該做的功能和創(chuàng)新都已經(jīng)做了，而B端這片藍(lán)海才剛剛開始發(fā)力，很多企業(yè)也都在考慮B端系統(tǒng)的搭建，降本提效率成了很多公司新的指標(biāo)，因此數(shù)字化轉(zhuǎn)型重點(diǎn)在于B端系統(tǒng)探索，B端重點(diǎn)在于中臺(tái)的搭建！設(shè)計(jì)師通過設(shè)計(jì)中臺(tái)，構(gòu)建出基本的業(yè)務(wù)類型，再分類到業(yè)務(wù)中，構(gòu)建出不同的業(yè)務(wù)界面，所以設(shè)計(jì)中臺(tái)非常關(guān)鍵，很多公司經(jīng)常會(huì)用這兩個(gè)系統(tǒng)去構(gòu)建，Antdesign和Elemnet就是設(shè)計(jì)中臺(tái)，我們會(huì)發(fā)現(xiàn)用Antdesign可以做出很多的系統(tǒng)，那怎么進(jìn)行設(shè)計(jì)中臺(tái)的設(shè)計(jì)呢？和我們?cè)O(shè)計(jì)師有什么樣的關(guān)聯(lián)度呢？帶著這個(gè)問題，我們深度探索B端設(shè)計(jì)中臺(tái)的落地！
概念：中臺(tái)是互聯(lián)網(wǎng)的術(shù)語，一般應(yīng)用于大型企業(yè)，中國互聯(lián)網(wǎng)的變革永遠(yuǎn)是從大型互聯(lián)網(wǎng)開始，大型互聯(lián)網(wǎng)公司引發(fā)了技術(shù)的變革，這也是中臺(tái)的興起，一般指搭建一個(gè)靈活快速應(yīng)對(duì)變化的架構(gòu)，快速實(shí)現(xiàn)前端提的需求，避免重復(fù)建設(shè)，達(dá)到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設(shè)計(jì)師一天最多做十個(gè)頁面，再多就不太可能了，如果有組件化得產(chǎn)生，一天可以做一百個(gè)左右的界面。在面對(duì)B端系統(tǒng)這樣幾千個(gè)頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因?yàn)樵O(shè)計(jì)師設(shè)計(jì)的組件只是一個(gè)樣式，而前端需要把組件進(jìn)行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復(fù)用，和前端代碼的復(fù)用，可以大大提高設(shè)計(jì)師的工作效率。
基本庫指的是一些色彩系統(tǒng)、字體系統(tǒng)、圖標(biāo)系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)等等，之所以強(qiáng)調(diào)系統(tǒng)兩個(gè)字，有系統(tǒng)就要統(tǒng)一規(guī)則和統(tǒng)一規(guī)范，然后進(jìn)行調(diào)用應(yīng)用在系統(tǒng)中的各個(gè)地方，比如我們想調(diào)用一個(gè)顏色，不是去隨選用一個(gè)顏色，應(yīng)該嚴(yán)格的從色彩系統(tǒng)中去調(diào)用，如果系統(tǒng)組件庫里沒有這個(gè)顏色，我們也絕對(duì)不可以使用，可以先用替代色做或者根據(jù)業(yè)務(wù)再進(jìn)行補(bǔ)充顏色進(jìn)組件庫為了后續(xù)的調(diào)用，這是一種比較嚴(yán)謹(jǐn)?shù)氖褂梅绞?。所以在建立組件庫的時(shí)候我們要考慮全面，組件庫中如果沒有相應(yīng)的組件，我們應(yīng)該試著反推一下，是否要加進(jìn)組件庫中去，來進(jìn)行系統(tǒng)的調(diào)用。在做中臺(tái)的過程中，我們一直使用Antdesign，我們對(duì)組件的名稱，組件的分類其實(shí)一點(diǎn)都不陌生，其實(shí)Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進(jìn)行查看），所以并不是Antdesign組件庫形成了一定的規(guī)則，它也是在沿用別人的規(guī)則，而這些規(guī)則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現(xiàn)在這樣的組件庫，那中臺(tái)設(shè)計(jì)，首先要搭建基本庫，把基本庫里的基礎(chǔ)一些系統(tǒng)搭建好后，我們繼續(xù)去做擴(kuò)展庫。
如下圖，擴(kuò)展庫中包含了很多內(nèi)容，比如分了四類，導(dǎo)航系統(tǒng)，數(shù)據(jù)錄入，數(shù)據(jù)展示和反饋系統(tǒng)。其中導(dǎo)航系統(tǒng)又包含了，面包屑導(dǎo)航、下拉菜單、導(dǎo)航菜單、頂部導(dǎo)航等等，包括后面的數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋系統(tǒng)也包含了很多內(nèi)容。我們做這樣的擴(kuò)展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節(jié)Arco組件庫，因?yàn)樗鼈兠嫦虻氖窍到y(tǒng)級(jí)的解決方案，各行各業(yè)都可以用它，它面向的是一個(gè)大系統(tǒng)，也許我們只涉及到了其中的20%，因?yàn)橐矝]有一個(gè)系統(tǒng)能用到它所有的組件，所以我們自己在設(shè)計(jì)組件庫的時(shí)候，一定是按照我們自己項(xiàng)目的范圍去做組件庫，而不是做一個(gè)大而全的，大而全的組件庫對(duì)我們也沒有意義。它們做的是公共平臺(tái)，而我們要做的是一個(gè)專屬平臺(tái)。
形成完基本庫和擴(kuò)展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時(shí)候用，比如我做了一個(gè)多選框，這個(gè)多選框應(yīng)該什么時(shí)候用，是不是只要遇見一個(gè)選擇就去用多選框，肯定不是，應(yīng)該加以說明什么時(shí)候用這個(gè)多選框。類似于是組件的設(shè)計(jì)說明。
最后再做一個(gè)案例庫，最佳實(shí)踐庫，具體組件什么時(shí)候用我們知道了，接著案例庫就是在告訴我們應(yīng)該如何正確的使用，或者說的方法是什么。比如標(biāo)簽的左對(duì)齊和右對(duì)齊，這種情況都對(duì)，什么時(shí)候用頂對(duì)齊，什么時(shí)候用左對(duì)齊，什么時(shí)候用右對(duì)齊呢？那么根據(jù)眼動(dòng)儀實(shí)驗(yàn)數(shù)據(jù)數(shù)據(jù)來看，并且結(jié)合給出一些工作中業(yè)務(wù)中的最佳實(shí)踐得案例放進(jìn)去，給使用的人去做指引。
所以設(shè)計(jì)師做的事情，不僅僅是應(yīng)用組件庫和創(chuàng)造組價(jià)庫，還應(yīng)該指導(dǎo)其他設(shè)計(jì)師，指導(dǎo)開發(fā)人員在去復(fù)用每個(gè)頁面組件的的時(shí)候，應(yīng)該怎么正確的使用，這也是在B端設(shè)計(jì)中一個(gè)關(guān)鍵的環(huán)節(jié)，同時(shí)我們的視覺系統(tǒng)一定也是和業(yè)務(wù)有關(guān)聯(lián)度的，所以在B端中做設(shè)計(jì)一定也不會(huì)脫離業(yè)務(wù)去做，我們一定要聯(lián)系到實(shí)際的業(yè)務(wù)場景中，這個(gè)業(yè)務(wù)場景指的就是業(yè)務(wù)和視覺的結(jié)合，在做C端的時(shí)候，業(yè)務(wù)場景一定不會(huì)比B端多，C端的業(yè)務(wù)場景大多是定制化的業(yè)務(wù)場景，它要求的是個(gè)性化，不要求通用，盡量得個(gè)性化，比如圖標(biāo)、按鈕、頁面，而B端需要統(tǒng)一化，中臺(tái)組件庫的落地，可以大大提高設(shè)計(jì)師的工作效率和開發(fā)人員的協(xié)同效率，嚴(yán)謹(jǐn)?shù)恼{(diào)用組件使用組件，可以使得系統(tǒng)頁面保持高度的一致。
如圖1：可以看出縱列的關(guān)系更緊密，因?yàn)榭v間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關(guān)系更加緊密。通過圖中這樣的視覺設(shè)計(jì)為什么會(huì)感覺間距更加緊密呢？這屬于用戶心理學(xué)的應(yīng)用，如果元素相鄰的更近，元素之間的關(guān)系就會(huì)更加的緊密。
如圖3：如果元素相鄰的關(guān)系都是保持一樣的，那么它們的關(guān)系是相對(duì)對(duì)等的。
由此可以得出結(jié)論，如果相鄰的關(guān)系越近，它們的關(guān)聯(lián)度就越近，如果相鄰的越遠(yuǎn)，它們的關(guān)聯(lián)度就越遠(yuǎn)。
應(yīng)用案例：如圖4卡片中得標(biāo)題和內(nèi)容，設(shè)計(jì)中把標(biāo)題和內(nèi)容進(jìn)行區(qū)分，所以我們會(huì)做大量的留白，這樣的留白就會(huì)讓信息結(jié)構(gòu)具有層次感，層次感就是指它們信息結(jié)構(gòu)的關(guān)聯(lián)度，如果想讓它們有關(guān)聯(lián)度，就讓它們距離近一點(diǎn)不要做區(qū)分，如果不想讓它們有關(guān)聯(lián)度，或者關(guān)聯(lián)度出現(xiàn)一個(gè)等級(jí)的區(qū)分，那么就可以加一條線，讓它們之間的關(guān)聯(lián)度分隔開。這就是格式塔接近性的應(yīng)用。
如圖5：如果去區(qū)分右邊的形狀，通常我們會(huì)根據(jù)形狀進(jìn)行區(qū)分，因?yàn)槿说臐撘庾R(shí)會(huì)認(rèn)為相似的形狀會(huì)更有相關(guān)的分類性。這就是格式塔中的相似性原則。
應(yīng)用案例：如果文字的標(biāo)題大小是保持一致的，包括它有統(tǒng)一的大小，統(tǒng)一的色彩，統(tǒng)一的字號(hào)，那系統(tǒng)中的其他同樣功能的地方，都應(yīng)該用統(tǒng)一的文字，這就是格式塔相似性的應(yīng)用，比如圖標(biāo)也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標(biāo)進(jìn)行表達(dá)，圖標(biāo)之間的設(shè)計(jì)才具有相似性。
如圖6：可以看到有一個(gè)L，是主體與背景進(jìn)行了區(qū)分，如果在設(shè)計(jì)的時(shí)候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨(dú)特，或者將背景的顏色變得更加分明，這樣就可以做到那個(gè)L看的更加明顯。這就是主題與背景區(qū)分原則。
應(yīng)用案例：比如警告彈出，可以用色彩去區(qū)分，目標(biāo)就是讓用戶看的更加得清晰，當(dāng)警告的時(shí)候給用戶一個(gè)警告的信息，當(dāng)成功的時(shí)候給用戶一個(gè)成功的信息。還有類似對(duì)話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關(guān)系的原理。因此應(yīng)用在我們?cè)O(shè)計(jì)系統(tǒng)中，前景和背景進(jìn)行區(qū)分的時(shí)候，我們就可以通過色彩進(jìn)行區(qū)分，色彩的區(qū)分要保持統(tǒng)一，比如背景色彩透明度50%同時(shí)加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個(gè)平面上，距離平面越近，它得陰影越短，距離平面越遠(yuǎn)，它得陰影越長，這也是陰影的層級(jí)關(guān)系。
如圖7：可以看出這是一個(gè)四分之一的圓形。
如圖8：這個(gè)圖可以看出是一個(gè)五角星。
封閉性應(yīng)用案例：當(dāng)一個(gè)形狀被另外一個(gè)形狀或者被另外一個(gè)色彩阻斷的時(shí)候，并不影響人們對(duì)這個(gè)形狀額外得認(rèn)知，一定會(huì)腦補(bǔ)出另外一個(gè)形狀，這個(gè)原則和我們UI的關(guān)系是什么呢？比如一個(gè)loading，半圓一直在旋轉(zhuǎn)，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當(dāng)前的進(jìn)程和位置，封閉性原則通常應(yīng)用在圖標(biāo)的設(shè)計(jì)，圖表的設(shè)計(jì)和步驟條的設(shè)計(jì)中。
如圖9：可以看出用一些簡單得形狀來體現(xiàn)，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個(gè)是一組，可以看出它們具有連續(xù)性；另外一組三角形箭頭指向右下角，可以看出它們是連續(xù)的一組。不同的形狀會(huì)有連續(xù)性，箭頭也特別有指向性，這就是為什么返回和前要進(jìn)放在不同的位置，當(dāng)我們的數(shù)據(jù)需要有連續(xù)的時(shí)候，我們也要使用相似的形狀來表達(dá)，這就是連續(xù)性原則的應(yīng)用。
同理如圖10：連續(xù)性一定是要有連續(xù)等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續(xù)等階變化，通過色彩的透明度也可以做到連續(xù)性。
很多公司或者不同公司有不同的命名方式，這個(gè)需要和團(tuán)隊(duì)開發(fā)提前做溝通，主要以方便開發(fā)習(xí)慣操作為主，如果不命名也不能非得說成是錯(cuò)誤的，命名可以理解成是一件錦上添花的事情，因?yàn)橐磺卸家孕蕛?yōu)先，命名自然會(huì)影響工作效率，通常情況，組件的命名可以分成組件的名稱、級(jí)別、尺寸、狀態(tài)，這樣的命名順序來進(jìn)行，這樣命名開發(fā)使用也比較方便，因?yàn)槭前凑樟碎_發(fā)的統(tǒng)一規(guī)則來進(jìn)行命名的。如圖所示：
當(dāng)英文不好的時(shí)候，推薦大家記常用組件英文名，以及常用狀態(tài)名、級(jí)別名、內(nèi)部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
至此B端系統(tǒng)設(shè)計(jì)總概系列為終結(jié)篇，回顧第一篇主要內(nèi)容是如何正確設(shè)計(jì)組件庫，B端業(yè)務(wù)調(diào)研的具體過程步驟，以及視覺規(guī)范的建立，可以看出第一篇屬于B端設(shè)計(jì)的方法論或者設(shè)計(jì)指導(dǎo)，也是為開展B端設(shè)計(jì)前的一些準(zhǔn)備工作；回顧第二篇總概主要內(nèi)容是如何設(shè)計(jì)表單、表格、圖標(biāo)、儀表盤這些經(jīng)常用到的設(shè)計(jì)難點(diǎn)，第二篇更加講究設(shè)計(jì)落地過程中遇到的疑難雜癥，專業(yè)技法；回顧當(dāng)前總概三，主要內(nèi)容就是中臺(tái)規(guī)范的建立和自適應(yīng)、響應(yīng)式適配的難點(diǎn)，主要是成系統(tǒng)的B端設(shè)計(jì)步驟。我們都知道B端市場剛剛打開，而且當(dāng)下對(duì)B端設(shè)計(jì)師的需求還遠(yuǎn)遠(yuǎn)不能滿足我國現(xiàn)代化建設(shè)，數(shù)字化推進(jìn)這么的大市場，作為UIUX，更早的拓寬一條路是我們當(dāng)下必要的選擇，謝謝閱讀，祝愿各位2022乘風(fēng)破浪，B端設(shè)計(jì)學(xué)有所成，如虎生翼！
轉(zhuǎn)載請(qǐng)注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
