對(duì)于很多設(shè)計(jì)師來(lái)講在設(shè)計(jì)界面過(guò)程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁(yè)面時(shí)往往是直接拿到競(jìng)品的頁(yè)面搬運(yùn)到自己產(chǎn)品上，這種做法理論上不會(huì)讓自己的頁(yè)面出錯(cuò)，但是很多人往往忽略了一點(diǎn)，就是別人這么設(shè)計(jì)的目標(biāo)是什么，是否會(huì)匹配自己的設(shè)計(jì)目標(biāo)，如果不了解這些貿(mào)然的去搬運(yùn)設(shè)計(jì)，那么時(shí)間久了會(huì)養(yǎng)成一個(gè)不好的習(xí)慣，需要設(shè)計(jì)師去進(jìn)行設(shè)計(jì)時(shí)可能就會(huì)遇到很多難點(diǎn)，作為初級(jí)設(shè)計(jì)師或者剛?cè)胄械脑O(shè)計(jì)師，前期可以去進(jìn)行搬運(yùn)設(shè)計(jì)，但是一定要了解別人為什么這么做。
接下來(lái)將分享12個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀(guān)提升用戶(hù)體驗(yàn)。
一、快捷交互
二、提升交互路徑
三、問(wèn)題前置
四、提升可讀性
五、點(diǎn)擊引導(dǎo)
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級(jí)
九、圖標(biāo)保持一致
十、利用對(duì)比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時(shí)可以時(shí)常利用交互手勢(shì)去幫助用戶(hù)提升操作效率，避免繁雜小操作步驟
左側(cè)為什么錯(cuò)？？
左圖中針對(duì)單條消息的操作匯聚到了icon內(nèi)，對(duì)于用戶(hù)理解成本比較高，當(dāng)用戶(hù)想要去刪除或者屏蔽消息時(shí)需要通過(guò)聚合入口才能完成操作，大大的提升了用戶(hù)操作成本。
建議正確做法～～
我們可以在類(lèi)似的消息場(chǎng)景或者其他列表形式的場(chǎng)景中，添加一些交互手勢(shì)，隨著手機(jī)系統(tǒng)的更新，用戶(hù)的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶(hù)無(wú)法操作的情況，增加手勢(shì)有弊端也有優(yōu)勢(shì)，右圖中手勢(shì)增加了用戶(hù)首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個(gè)理論上是可以接
受的。
實(shí)際產(chǎn)品中的運(yùn)用
利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶(hù)操作效率。
左側(cè)為什么錯(cuò)？？
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶(hù)進(jìn)行操作，當(dāng)然如果整個(gè)模塊的熱區(qū)都是同一個(gè)，這樣并沒(méi)有什么問(wèn)題，用戶(hù)點(diǎn)擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個(gè)模塊內(nèi)存在多個(gè)熱區(qū)入口，而用戶(hù)想要到達(dá)目標(biāo)必須通過(guò)按鈕點(diǎn)擊才能進(jìn)入，那么左圖中的排版位置就會(huì)提升用戶(hù)的操作時(shí)間。
建議正確做法～～
當(dāng)一個(gè)頁(yè)面內(nèi)出現(xiàn)多個(gè)相同模塊或者一個(gè)模塊出現(xiàn)多個(gè)熱區(qū)入口時(shí)，按鈕點(diǎn)擊區(qū)域有限，我們?cè)O(shè)計(jì)時(shí)就可以利用拇指定律進(jìn)行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶(hù)在右手操作時(shí)快速到達(dá)目標(biāo)，因?yàn)閲?guó)內(nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶(hù)，所以我們需要滿(mǎn)足大部分的體驗(yàn)，合理利用拇指定律。
相關(guān)定律：費(fèi)茲定律、拇指定律
實(shí)際產(chǎn)品中的運(yùn)用
對(duì)于我們來(lái)講很多東西是簡(jiǎn)單的，但是不乏會(huì)有一些用戶(hù)是陌生的，對(duì)于他們來(lái)講可能會(huì)有填寫(xiě)成本。
左側(cè)為什么錯(cuò)？？
左圖中理論上并不是錯(cuò)，我們經(jīng)常設(shè)計(jì)表單時(shí)都會(huì)用的提示話(huà)術(shù)，但是我們需要考慮更多維度的東西，對(duì)于我們來(lái)講填寫(xiě)這種表單非常簡(jiǎn)單，例如個(gè)別用戶(hù)，可能會(huì)臨時(shí)忘了郵箱格式，又或者輸入手機(jī)號(hào)時(shí)多填了一位數(shù)等等情況，用戶(hù)錯(cuò)誤一次操作步驟就會(huì)多一步，反之就是降低使用產(chǎn)品時(shí)的體驗(yàn)。
建議正確做法～～
如右圖中，我們?cè)O(shè)計(jì)時(shí)可以更改提示的話(huà)術(shù)，幫助用戶(hù)把問(wèn)題前置，當(dāng)用戶(hù)看到提示郵箱時(shí)就會(huì)按照格式去填寫(xiě)，通過(guò)把手機(jī)號(hào)的位數(shù)拆分，讓用戶(hù)更好的記憶數(shù)字，這樣無(wú)論對(duì)產(chǎn)品還是用戶(hù)都沒(méi)有任何損失，反而能降低錯(cuò)誤頻率。
實(shí)際產(chǎn)品中的運(yùn)用
無(wú)論是頁(yè)面還是模塊，用戶(hù)在閱讀時(shí)是已掃讀的方式進(jìn)行瀏覽，我們需要保證頁(yè)面的文字元素具備一定的規(guī)律，以此來(lái)提升閱讀效率。
左側(cè)為什么錯(cuò)？？
左圖中可以看到，文字與輸入框放在同一列進(jìn)行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫(xiě)的頁(yè)面，在頁(yè)面中都是具有很大的空間位置，這樣排布會(huì)造成視覺(jué)上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M(jìn)行使用。
建議正確做法～～
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長(zhǎng)短不一，但依據(jù)對(duì)齊原則在豎列情況看是具備對(duì)齊規(guī)律的，有效的提升信息篩選效率。
實(shí)際產(chǎn)品中的運(yùn)用
我們?cè)谧鱿到y(tǒng)功能模塊時(shí)需要注意添加功能點(diǎn)擊引導(dǎo)，用戶(hù)對(duì)此類(lèi)消息模塊認(rèn)知上會(huì)默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。
左側(cè)為什么錯(cuò)？？
我們常見(jiàn)的消息模塊內(nèi)容為兩種，一種是互動(dòng)類(lèi)消息即用戶(hù)與用戶(hù)，另一種時(shí)是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶(hù)習(xí)慣而言用戶(hù)已經(jīng)沒(méi)有使用成本默認(rèn)是可以進(jìn)行點(diǎn)擊交互，后者因?yàn)椴糠之a(chǎn)品會(huì)把系統(tǒng)消息作為展示的形式給用戶(hù)，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點(diǎn)擊交互，這就導(dǎo)致了用戶(hù)認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實(shí)從視覺(jué)上看，并不具備點(diǎn)擊欲望，因此可能會(huì)對(duì)用戶(hù)造成錯(cuò)誤的理解。
建議正確做法～～
當(dāng)我們?cè)谠O(shè)計(jì)時(shí)需要注意，若消息列表中存在系統(tǒng)類(lèi)消息并且可以進(jìn)行交互，在設(shè)計(jì)時(shí)可以添加向箭頭、紅點(diǎn)提示等方式告知用戶(hù)可以點(diǎn)擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。
實(shí)際產(chǎn)品中的案例
目前市場(chǎng)上產(chǎn)品幾乎都有深色版本，我們?cè)谠O(shè)計(jì)時(shí)深色版本的顏色時(shí)需要注意飽和度的高低，同樣的飽和度在黑色背景上會(huì)比白色背景上更加亮，這跟人的視覺(jué)感官有很大的關(guān)系，因此我們?cè)谧龊谏姹緯r(shí)需要注意是否調(diào)整飽和度。
左側(cè)為什么錯(cuò)？？
在黑色背景中使用過(guò)高的飽和度會(huì)刺激眼睛，很多深色版本都是從白色模式通過(guò)反向顏色直接調(diào)整，而彩色元素會(huì)直接運(yùn)用到深色中，那么就會(huì)造成一個(gè)問(wèn)題，因?yàn)槲覀兞?xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開(kāi)手電筒”，對(duì)眼睛的傷害很高。
建議正確做法～～
我們?cè)谠O(shè)計(jì)深色版本時(shí)可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來(lái)緩沖對(duì)用戶(hù)視覺(jué)感官的刺激，目前很多大廠(chǎng)的處理方式是直接在彩色元素上添加一層黑色透明遮罩進(jìn)行處理，這樣無(wú)需在添加更多的顏色規(guī)范。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)模塊或者頁(yè)面時(shí)不建議使用特殊字體來(lái)突出文字層級(jí)，這樣會(huì)導(dǎo)致視覺(jué)不統(tǒng)一，以及開(kāi)發(fā)成本增加。
左側(cè)為什么錯(cuò)？？
左圖中灰色字使用了特殊字體，看起來(lái)雖然好看，但在實(shí)際開(kāi)發(fā)中會(huì)導(dǎo)致開(kāi)發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開(kāi)發(fā)同學(xué)添加對(duì)應(yīng)字體包，這樣會(huì)導(dǎo)致我們的產(chǎn)品包的內(nèi)存過(guò)大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價(jià)值。
建議正確做法～～
一般系統(tǒng)字體就能夠滿(mǎn)足我們的設(shè)計(jì)需求，在UI設(shè)計(jì)中我們可以通過(guò)不同的字體粗細(xì)來(lái)調(diào)整文字層級(jí)，這樣能夠保證視覺(jué)更加統(tǒng)一，減少產(chǎn)品包大小。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)時(shí)需要注意多個(gè)入口在同一位置時(shí)，需要把它們進(jìn)行層級(jí)劃分，避免影響用戶(hù)決策
左側(cè)為什么錯(cuò)？？
圖中可以看到，兩個(gè)面性按鈕非常明顯的在模塊中，當(dāng)用戶(hù)在瀏覽頁(yè)面中很容易出現(xiàn)困惑，到底需要點(diǎn)擊哪個(gè)才能購(gòu)買(mǎi)預(yù)定，因?yàn)閮蓚€(gè)都是面性無(wú)法快速進(jìn)行定位入口，這樣不僅影響用戶(hù)決策效率，還會(huì)影響產(chǎn)品點(diǎn)擊率。
建議正確做法～～
建議設(shè)計(jì)類(lèi)似模塊中時(shí)，無(wú)論是pc還是移動(dòng)端都需要對(duì)入口進(jìn)行結(jié)構(gòu)劃分，這樣能夠使用戶(hù)在瀏覽頁(yè)面時(shí)快速定位到入口，提升決策效率，做體驗(yàn)是解決用戶(hù)的思考時(shí)間。
實(shí)際產(chǎn)品中的案例
在UI設(shè)計(jì)中使用圖標(biāo)時(shí)，要保持一致性，確保他們共有相同的視覺(jué)風(fēng)格，相同的重量，填充和描邊。不要混搭。
左側(cè)為什么錯(cuò)？？
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線(xiàn)性里面摻雜著面性點(diǎn)綴，這在UI設(shè)計(jì)中嚴(yán)重違背了一致性的原則，會(huì)導(dǎo)致我們的頁(yè)面不夠嚴(yán)謹(jǐn)專(zhuān)業(yè)。
建議正確做法～～
在設(shè)計(jì)圖標(biāo)時(shí)，首先要保證圖標(biāo)風(fēng)格一致，其次在這個(gè)基礎(chǔ)上保證圖標(biāo)的描邊粗細(xì)、視覺(jué)占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)頁(yè)面模塊時(shí)，可以多利對(duì)比度的方式來(lái)體現(xiàn)設(shè)計(jì)的表現(xiàn)力，鮮明直接的色值能夠直接表達(dá)事物的性質(zhì)以及特點(diǎn)，通過(guò)對(duì)比，也能夠更加清晰的強(qiáng)調(diào)設(shè)計(jì)中的重點(diǎn)，這樣給用戶(hù)的印象會(huì)更深刻，同樣會(huì)給產(chǎn)品帶來(lái)一定的趣味性。
左側(cè)為什么錯(cuò)？？
左圖中單看視覺(jué)也沒(méi)問(wèn)題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺(jué)表現(xiàn)力較差，在設(shè)計(jì)中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺(jué)效果但不夠強(qiáng)，對(duì)用戶(hù)的記憶點(diǎn)不夠深刻。
建議正確做法～～
設(shè)計(jì)到類(lèi)似的模塊時(shí)我們可以利用對(duì)比的關(guān)系，以此突出視覺(jué)元素，通過(guò)顏色焦點(diǎn)引導(dǎo)用戶(hù)關(guān)注，強(qiáng)化用戶(hù)印象同時(shí)還能增加頁(yè)面的視覺(jué)表現(xiàn)力和氛圍感。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)圖文疊加的卡片或者頁(yè)面時(shí)，我們需要注意不同明度的圖片上，文字識(shí)別是否有阻礙，一般情況會(huì)通過(guò)遮罩方式避免這個(gè)情況。
左側(cè)為什么錯(cuò)？？
左圖中在深色圖片下字體的可讀性是沒(méi)有問(wèn)題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對(duì)復(fù)雜時(shí)便會(huì)影響識(shí)別，第二種情況當(dāng)圖片明度過(guò)高時(shí)文字同樣無(wú)法識(shí)別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無(wú)法看清，嚴(yán)重影響閱讀體驗(yàn)。
建議正確做法～～
在界面設(shè)計(jì)時(shí)如果遇到類(lèi)似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識(shí)別度，或者添加純黑色透明遮罩進(jìn)行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗(yàn)。
實(shí)際產(chǎn)品中的案例
UI設(shè)計(jì)中經(jīng)常會(huì)遇到彈窗，彈窗是需要配合頁(yè)面遮罩來(lái)讓用戶(hù)進(jìn)行專(zhuān)注操作，不同的遮罩透明度所帶來(lái)的專(zhuān)注度也不同。
左側(cè)為什么錯(cuò)？？
左圖中我們看到，遮罩的透明度過(guò)低，我案例設(shè)置的是17%，此時(shí)彈窗內(nèi)容與頁(yè)面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來(lái)讓用戶(hù)跳脫頁(yè)面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶(hù)目標(biāo)，當(dāng)彈窗無(wú)法聚焦時(shí)便很難達(dá)到目標(biāo)，并且視覺(jué)上層級(jí)更加混亂。
建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時(shí)再看彈窗很容易就忽略頁(yè)面內(nèi)容，因?yàn)榛疑礁?，遮擋度越高，用?hù)跳脫感就越強(qiáng)，這樣我們可以讓用戶(hù)專(zhuān)注彈窗內(nèi)容，同時(shí)視覺(jué)結(jié)構(gòu)上也區(qū)分很明顯。
實(shí)際產(chǎn)品中的案例
蘭亭妙微(www.freegoal.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
由于面世時(shí)間許久，該設(shè)備的操作界面已經(jīng)落后于目前的主流界面顯示，同時(shí)舊版本的UI界面操作交互上有一定的優(yōu)化空間，于是有了本次的UI界面的重新優(yōu)化REDESIGN。
主色調(diào)選擇：深色界面通常以黑色、深灰色等為基底色調(diào)，如 #000000、#121212 這類(lèi)純黑或接近純黑的顏色能打造深邃背景。在此基礎(chǔ)上，可選取少量高飽和度色彩作為強(qiáng)調(diào)色，像亮藍(lán)色（#007AFF）、熒光綠（#39FF14）等，用于按鈕、圖標(biāo)、重要提示信息，形成鮮明對(duì)比，吸引用戶(hù)注意力，確保關(guān)鍵操作醒目。
大屏深色系 UI 設(shè)計(jì)作為科技與藝術(shù)融合的結(jié)晶，正以其獨(dú)特的魅力改變著我們與數(shù)字世界的交互方式。它不僅為我們帶來(lái)了更加高效、便捷的使用體驗(yàn)，也讓我們?cè)谌粘５目萍籍a(chǎn)品使用中感受到了藝術(shù)的溫度和力量。相信在未來(lái)，隨著技術(shù)的不斷進(jìn)步和設(shè)計(jì)理念的持續(xù)創(chuàng)新，大屏深色系 UI 設(shè)計(jì)將會(huì)綻放出更加璀璨的光芒，為我們的生活增添更多的精彩。
在藍(lán)藍(lán)設(shè)計(jì)（蘭亭妙微）十余年的專(zhuān)業(yè)積累中，形成了完善的設(shè)計(jì)服務(wù)流程和專(zhuān)業(yè)積累，關(guān)注國(guó)外行業(yè)領(lǐng)先者產(chǎn)品，不斷學(xué)習(xí)和提升，形成先進(jìn)的方法論，并在項(xiàng)目中已驗(yàn)證落地。針對(duì)不同行業(yè)，不同用戶(hù)和產(chǎn)品設(shè)計(jì)相應(yīng)的用戶(hù)訪(fǎng)談問(wèn)題、小組交談主題，深度挖掘行業(yè)特性和用戶(hù)本質(zhì)需求，以用戶(hù)需求為核心出發(fā)點(diǎn)，重新梳理產(chǎn)品架構(gòu)，調(diào)整優(yōu)化交互規(guī)則，構(gòu)建符合行業(yè)特性、滿(mǎn)足用戶(hù)需求的交互規(guī)范。可以整合系統(tǒng)架構(gòu)，畫(huà)出軟件整體全流程頁(yè)面交互原型，合并或展開(kāi)任務(wù)步驟頁(yè)面，優(yōu)化操作流程，提升用戶(hù)滿(mǎn)意度和工作效率
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.freegoal.net
