編者按：酒店預(yù)訂網(wǎng)站大多功能繁多，在視覺美觀上有天生劣勢，想平衡兩者非?？简炘O(shè)計師的功力，借鑒相關(guān)的優(yōu)秀網(wǎng)站是捷徑，今天@AnyForWeb_UED 從眾多在線預(yù)訂網(wǎng)站中提煉了10條設(shè)計的技巧 >>>
進(jìn)入酒店預(yù)訂網(wǎng)站或是板塊的用戶一般來說目的性很強，他們心里其實已經(jīng)有了很完整的設(shè)想，而來到網(wǎng)站只是為了完成計劃。因此，讓用戶在首頁就直觀的看到他們需要的內(nèi)容，并且盡可能的減少其他不重要內(nèi)容的出現(xiàn)，這是一個提升用戶體驗的好方法。
正如Agoda的設(shè)計，網(wǎng)站首屏以令人浮想聯(lián)翩的風(fēng)景圖作為背景，酒店預(yù)訂的快捷入口最為搶眼，就連公司口號標(biāo)語也只是簡短的出現(xiàn)在頁面上方。首頁設(shè)計以熱門內(nèi)容為主，根據(jù)大多數(shù)用戶的喜好和點擊查詢量列出推薦，這樣的想法確實很好，但是底部顯示的“熱門國家地區(qū)”和“熱門城市”是不是有點太多了…
用美觀的高清大圖作為網(wǎng)站背景似乎已經(jīng)成了一種萬能的設(shè)計方法，一張大圖搭配簡單的文字，就能輕輕松松讓網(wǎng)站變得莫名的高大上。在圖片的選擇上，“是否足夠美觀？”可能是我們一味的關(guān)注點，而“是否合適”也許對我們的整體設(shè)計更重要。這里所說的“合適”包括很多方面，色彩、布局、大小，甚至圖片中表達(dá)的含義。
如何選好圖片：《設(shè)計師找圖技巧！如何快速準(zhǔn)確找到合適的網(wǎng)頁背景大圖？》
Airbnb的網(wǎng)站的圖片使用方面很值得借鑒。首屏主要以大圖片為主，在熙熙攘攘的人群中有一男一女快樂的行走，有一種回家的感覺。下半部分分別使用了具有各地特色的照片作為背景，讓用戶能更直觀了對當(dāng)?shù)仫L(fēng)俗有初步了解。
在酒店詳情頁中最受關(guān)注且最先出現(xiàn)的是關(guān)于酒店的一些圖片，而這些圖片內(nèi)容對用戶來說可能又愛又恨。當(dāng)用戶正在瀏覽的時候會覺得圖片表現(xiàn)完整但有些雜亂，而當(dāng)用戶沒需求的時候又會因為一些正常的操作造成誤點。如果網(wǎng)站能先展示一部分圖片，讓需要查看更多圖片的用戶點擊進(jìn)入一個專門的圖片板塊，并且對這些圖片進(jìn)行分類，便于用戶有針對性的快速找到自己需要的內(nèi)容，這樣的設(shè)計才更符合用戶體驗。
游多多的詳情頁圖片使用了鼠標(biāo)懸停后放大圖片的效果，另外設(shè)有“全部圖片”按鈕。
點擊“全部圖片”出現(xiàn)彈窗，左側(cè)顯示關(guān)于圖片內(nèi)容類型的分類，供用戶自行選擇；右側(cè)顯示圖片和縮略圖。這種形式讓圖片部分的條理十分清晰。
酒店信息詳情頁中的信息內(nèi)容都大同小異，但一些細(xì)微的差別卻能令網(wǎng)站的用戶體驗大相徑庭。大多數(shù)網(wǎng)站的介紹以“酒店簡介”之類的官方信息作為首要內(nèi)容，其實，用戶實際需要的并不是這些官方資料，與其息息相關(guān)的實用型內(nèi)容才是他們最關(guān)注的。
住哪兒網(wǎng)酒店詳情頁的內(nèi)容排序與大多數(shù)網(wǎng)站不同，文字介紹部分以“酒店設(shè)施”、“酒店政策”、“酒店介紹”…的順序排列，真正按照用戶的實際需求來做設(shè)計。
這里所說的特別信息并不全部特指重要信息，也可以是一些網(wǎng)站方認(rèn)為需要引起用戶注意的優(yōu)惠信息、贈送項目，或者數(shù)量提醒等。
Booking是一個專業(yè)的全球酒店預(yù)訂網(wǎng)站，網(wǎng)站中的設(shè)計都比較人性化。正如案例中顯示的酒店預(yù)訂環(huán)節(jié)，使用的文字及其色彩都以使用者角度出發(fā)，對用戶可能會感興趣的內(nèi)容作了不同顏色的顯示，這種做法很利于促成銷售。
其他用戶的點評是很多正在選擇的用戶都會關(guān)注的板塊之一，這些點評意見可能會對他們的最終選擇起到很大的引導(dǎo)作用，因此這部分的設(shè)計更應(yīng)該被重視。常規(guī)化的劃分會讓用戶覺得沉悶單調(diào)，嘗試著設(shè)計一個活潑生動的點評板塊，讓用戶更容易接受和認(rèn)可。
到到網(wǎng)的點評部分設(shè)計成了對話框的形式，并且支持圖文并茂，增加用戶的信任感，也讓用戶在瀏覽的時候更有參與感。
預(yù)訂日歷雖然只是一個很細(xì)小的環(huán)節(jié)，但是用戶很容易在這里產(chǎn)生混亂，所以給予用戶及時的交互反應(yīng)變得格外重要，色差顯示或小批注都不會顯得多余。但在這部分的設(shè)計中也要注意，區(qū)域始終應(yīng)該保持整潔，不能因為內(nèi)容多而疏忽視覺感受。
去哪兒網(wǎng)的預(yù)訂日歷設(shè)計表現(xiàn)的十分體貼。在選擇日期的時候顯示淺藍(lán)色底紋，并且用小標(biāo)識告訴用戶總計天數(shù)，很大程度的減少了用戶的思考時間。
用戶在瀏覽任何網(wǎng)站時都喜歡有一種“我不是一個人在瀏覽”的感覺，所以每次鼠標(biāo)懸停產(chǎn)生的一個小動作都會讓用戶覺得很溫暖。
藝龍的首頁交互效果做的很充分，幾乎每一處懸停都會有反饋。但雖然案例網(wǎng)站的交互反應(yīng)比較多，卻也不會令人感到多余和復(fù)雜。這也給了我們一些啟發(fā)：當(dāng)一個頁面中交互動作多的時候，需要注意產(chǎn)生的反應(yīng)最好在一個指定的范圍內(nèi)，一旦超出范圍影響到其他版塊，就會令人覺得過于繁瑣。
酒店預(yù)訂的流程大多不會很復(fù)雜，和一般網(wǎng)上購物的流程大致類似，但首次預(yù)訂的用戶可能會少了一些安全感，而拆分并且顯示整個過程就是消除用戶不安的最好方法。
同程網(wǎng)站很仔細(xì)的對整個過程做了拆分。將每個比較重要的環(huán)節(jié)用口語化的文字表現(xiàn)出來，讓用戶不僅能夠?qū)χ笠鍪裁从辛饲宄牧私猓瑫r增加了網(wǎng)站的親和力。
滿屏的輸入框和標(biāo)記著紅色星號的必填項與生俱來著一種令人反感的視覺體驗，而很多網(wǎng)站恰巧就是這么做的！為什么一定要讓用戶必須先注冊才能預(yù)訂或者購買？這種強制性的行為要求會讓用戶覺得自己處于很被動的位置。如果網(wǎng)站能以柔和的態(tài)度解決登錄注冊問題會不會更好？
比如途牛網(wǎng)的做法，“登錄或注冊可以獲得更多優(yōu)惠”，這樣的引導(dǎo)也許更容易讓用戶心甘情愿的接受。
轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
網(wǎng)站設(shè)計之一：怒馬！超實用的單頁網(wǎng)站設(shè)計指南（附大量資源）
網(wǎng)站設(shè)計之二：旅游網(wǎng)站設(shè)計分析！教你10個小技巧
網(wǎng)站設(shè)計之三：實例教學(xué)！如何將極簡風(fēng)格的原則運用到網(wǎng)站設(shè)計中？
網(wǎng)站設(shè)計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計形式的幾種方法
網(wǎng)站設(shè)計之五：經(jīng)驗分享：移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史！
網(wǎng)站設(shè)計之七：騰訊出品！2021-2022設(shè)計趨勢報告：動態(tài)篇
網(wǎng)站設(shè)計之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計？
網(wǎng)站設(shè)計之九：高手出品！2020~2021年UI界面設(shè)計趨勢
網(wǎng)站設(shè)計之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計？來看 58 設(shè)計師的總結(jié)！
@喪心病狂十六夜貓 ：極簡風(fēng)格能幫助用戶簡化操作，兼容性好，載入頁面快等等優(yōu)點，不過雖然看起來簡單，我們需要考慮的東西可一點都不少。這一次，就讓我們一邊學(xué)習(xí)簡約風(fēng)格的原則，一邊將它應(yīng)用到實際網(wǎng)站制作中去吧。
詳細(xì)從以下開始。
扁平設(shè)計、英雄形象和漢堡包菜單等等許多這些現(xiàn)在流行的設(shè)計趨勢，都是于2000年開始逐漸受到極簡風(fēng)格的影響才誕生的。
「這里的英雄形象指的是：在網(wǎng)站首頁上使用的大尺寸圖片。在日本，作為視覺的關(guān)鍵，也被稱為主視覺。在Bootstrap中也有命名為「Hero unit」的組件而被大家廣泛使用著?！?
現(xiàn)在為我們提供了許多服務(wù)的google，它的主頁也已經(jīng)有15年以上沒有變動過了。
谷歌一直被評為采用簡約風(fēng)格的Web界面的先驅(qū)，自20世紀(jì)90年代所提供的測試版以來，一直都很重視界面的簡潔性。
關(guān)于簡約風(fēng)格的討論還在繼續(xù)，但也有一些很多設(shè)計師都認(rèn)同的共同點。那么，就讓我們一起來詳細(xì)的看一看簡約風(fēng)格究竟有著哪些特征吧。
簡約風(fēng)格的哲學(xué)非常簡單，即“少即是多（英文：Less is More）”。在網(wǎng)頁設(shè)計中，只使用真正有必要的要素，就可以實現(xiàn)更多的事情。簡約風(fēng)格的網(wǎng)頁設(shè)計策略，就是刪除用戶操作時不必要的內(nèi)容，以實現(xiàn)接口界面的單純化。
屏幕上的要素越少，所留下的要素就會變得更強。如果在屏幕上的設(shè)計要素只有一個，信息就能很準(zhǔn)確的傳遞給用戶。
極簡風(fēng)格是刪除所有讓用戶無法專注于內(nèi)容的元素。但與此同時，為了防止刪除或者隱藏了對用戶來說真正必要的內(nèi)容，而讓用戶的操作感到困難，你需要仔細(xì)地檢查。對內(nèi)容的周圍加以設(shè)計，使用戶不會感到混亂，讓我們留下一些輔助元素（如導(dǎo)航菜單）吧。
簡約風(fēng)格的最常見的元素，就是什么設(shè)計元素都沒有。簡約風(fēng)格最重要的一點就是負(fù)空間或留白空間，這些將有助于引導(dǎo)用戶的視線。在設(shè)計要素的周圍留有許多留白空間，就可以很好的將用戶的視線集中起來。
留白空間對簡約風(fēng)格來說是最重要的元素。
在簡約風(fēng)格中，每一個設(shè)計的細(xì)節(jié)都是非常重要的。接下來介紹一些在設(shè)計中可以靈活使用的要點。
平整紋理（英：flat textures）
在簡約風(fēng)格的界面中，簡單的紋理和圖標(biāo)是經(jīng)常被使用的圖形元素。在界面中，不管是清晰高亮的效果、模糊陰暗的效果還是給UI 元素添加上光澤表現(xiàn)3D的效果都是沒有必要的。
色彩鮮艷的圖片
圖片是簡約設(shè)計中最醒目的要素，可以渲染出作品的氛圍。然而，我們也需要謹(jǐn)記，必須要使用抓住了簡約風(fēng)格特點的圖片。選擇了錯誤的圖像（如亂七八糟不能集中的圖像），它會抵消采用了簡約風(fēng)格界面的好處。
△ 簡約風(fēng)格中最搶眼的英雄圖像
用最少的顏色
在簡約風(fēng)格中，無需添加設(shè)計元素和圖形，只使用顏色便能引起視覺上的關(guān)注，將視線集中到元素之上。因為使用的顏色數(shù)量必須很少，所以必須做出具有創(chuàng)意的視覺性層次感效果。
△ 用戶所能利用的有效情報很少，配色就會變得顯眼，對網(wǎng)站也會有著顯著的影響。
印刷字體
大膽的印刷體，側(cè)重于將瞬間描述所記載的詞匯和內(nèi)容作為焦點，以達(dá)到更有趣味的視覺效果。當(dāng)你使用引人注目的具有魅力的印刷體時，使用文字來傳遞情報是非常有效的。
想傳遞信息時，請使用具有魅力的印刷字體吧。
對比度
由于使用了比平時較少的設(shè)計元素，當(dāng)你想創(chuàng)建一個具有視覺性層次感的畫面時是非常有創(chuàng)意的想法。在下面的案例中，白色的背景與黑色的寶石作為視覺性的要素被使用，實現(xiàn)了經(jīng)典的簡約風(fēng)格。
簡約設(shè)計中，多數(shù)情況下只使用一種顏色作為重點，那個顏色可以強調(diào)重要元素。
對于簡約風(fēng)格，請不要以為看起來簡單，做起來就會很容易。使用的設(shè)計元素很少，界面也變得簡單，所以有必要給用戶提供在同一平面內(nèi)舒適的體驗。
一個屏幕，一個焦點
遵從“一個頁面一個概念”的原則，以單一的視覺要素為中心傳達(dá)一個概念為吸引點，在各個頁面都用心設(shè)計吧。
將魅力展現(xiàn)在首屏
充分配合留白空間的重要內(nèi)容，然后隨著滾動不斷提高內(nèi)容的密度吧。
簡單易懂的宣傳詞
《The ELements of Style》作者Strunk先生與White先生，提倡“省略不必要的單詞（英: Omit needless words）”。將完成的內(nèi)容再編輯，選擇傳遞信息所需的最低限度的單詞吧。
讓導(dǎo)航菜單變得簡單（但不是隱藏）
簡單易懂的導(dǎo)航菜單一直是網(wǎng)頁設(shè)計中非常重要的要素。然而，這并不意味著將它隱藏起來。
在使用漢堡菜單簡化界面之前，讓我們先確認(rèn)為什么要使用它。漢堡菜單會讓菜單的各個項目變得很難找到，這是你所必須注意到的。在多數(shù)情況下總是顯示的導(dǎo)航菜單是有效的。讓我們比較一下下面的案例。
△ 上面的案例是點擊才會顯示導(dǎo)航菜單，而下面的則是總是顯示導(dǎo)航菜單。
嘗試使用動畫
由于使用動畫效果的機會越來越多，尚未使用動畫效果的簡約風(fēng)格的網(wǎng)站人氣恐怕會下降。但是，這些新的效果也需要遵守簡約風(fēng)格的原則，謹(jǐn)慎小心的使用。
「這里的著陸頁指的是：在互聯(lián)網(wǎng)營銷中，引導(dǎo)頁就是當(dāng)潛在用戶點擊廣告或者利用搜索引擎搜索后顯示給用戶的網(wǎng)頁。一般這個頁面會顯示和所點擊廣告或搜索結(jié)果鏈接相關(guān)的擴展內(nèi)容，而且這個頁面應(yīng)該是針對某個關(guān)鍵字（或短語）做過搜索引擎優(yōu)化的。」
重視內(nèi)容，所有的網(wǎng)站都可以使用，但不一定都是合適。簡約風(fēng)格的目的非常簡單，正如下面的例子，他適合著陸頁（英：Landing Page）和投資網(wǎng)站（英：portfolio sites）這類內(nèi)容相對較少的網(wǎng)站。
△ 設(shè)計師Brian Danaher的投資網(wǎng)站，對大多數(shù)設(shè)計師來說是一個典型的簡約風(fēng)格的例子。
越是復(fù)雜的網(wǎng)站想使用簡約風(fēng)格的效果，就越是困難。內(nèi)容豐富的網(wǎng)站，由于缺少設(shè)計要素恐怕將會給用戶帶來混亂。在這種情況下，創(chuàng)建具有簡約風(fēng)格的著陸頁，可以幫助你的用戶瀏覽到他需要瀏覽的詳細(xì)內(nèi)容。
Minimalist Color Palettes：一些簡約風(fēng)格的配色方案，將幫助你脫離標(biāo)準(zhǔn)的黑白設(shè)計創(chuàng)造更多的組合。
Color Contrast Checker：輸入前景色和背景色，計算機自動幫助你計算百分比，輕松的就能創(chuàng)建很棒的顏色組合。
簡約風(fēng)格的網(wǎng)站，通過刪除不必要的設(shè)計元素和與用戶目的無關(guān)的內(nèi)容，將網(wǎng)頁的接口變得簡單。為了使這一類型的網(wǎng)站變得具有非凡的吸引力，精煉的設(shè)計與簡易的操作相組合是非常重要的。能更簡單地誘導(dǎo)用戶的網(wǎng)站，會成為非常強有力的交互工具。
轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
網(wǎng)站設(shè)計之一：怒馬！超實用的單頁網(wǎng)站設(shè)計指南（附大量資源）
網(wǎng)站設(shè)計之二：旅游網(wǎng)站設(shè)計分析！教你10個小技巧
網(wǎng)站設(shè)計之三：實例教學(xué)！如何將極簡風(fēng)格的原則運用到網(wǎng)站設(shè)計中？
網(wǎng)站設(shè)計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計形式的幾種方法
網(wǎng)站設(shè)計之五：經(jīng)驗分享：移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史！
網(wǎng)站設(shè)計之七：騰訊出品！2021-2022設(shè)計趨勢報告：動態(tài)篇
網(wǎng)站設(shè)計之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計？
網(wǎng)站設(shè)計之九：高手出品！2020~2021年UI界面設(shè)計趨勢
網(wǎng)站設(shè)計之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計？來看 58 設(shè)計師的總結(jié)！
以下內(nèi)容主要分成兩大部分，第一是聊聊響應(yīng)式和自適應(yīng)的區(qū)別和原理，以及我們應(yīng)該如何去設(shè)計響應(yīng)式界面；第二部分也是比較關(guān)鍵的B端系統(tǒng)設(shè)計的核心，B端設(shè)計中臺完整構(gòu)建過程的具體步驟，以及應(yīng)用到的格式塔原則，和命名的一些注意事項，內(nèi)容較多，大家可以根據(jù)上述目錄來選擇性閱讀。
簡單概括多端兼容設(shè)計的發(fā)展史，最早是桌面端，比如桌面的一些應(yīng)用；后來出現(xiàn)了移動端，針對移動端大家用的都是WAP，指一種無線應(yīng)用協(xié)議，大家在用手機瀏覽一些網(wǎng)站，會把網(wǎng)站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當(dāng)時網(wǎng)絡(luò)不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現(xiàn)了響應(yīng)式，也就是做一套代碼可以兼容三端（網(wǎng)頁、移動端、iPad）設(shè)備，在發(fā)展的同時也遇到很多問題，但響應(yīng)式同時也遇到了很多問題；于是又出現(xiàn)了自適應(yīng)，指不同的設(shè)備打開不同的頁面進(jìn)行自適應(yīng)，自適應(yīng)能增加效率，但需要增加工作量；2017年以后直到現(xiàn)在看到最常用的就是漸進(jìn)式，類似完整的像在使用一個APP。這是多端兼容設(shè)計的整體的發(fā)展。
可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現(xiàn)的界面是一樣的。需要考慮移動端設(shè)計和網(wǎng)頁端怎么通過一套代碼進(jìn)行兼容。
自動布局算是響應(yīng)式的一種，但平時看到很多響應(yīng)式其實并不是真正的響應(yīng)式，而是自動布局，因為界面在不同的設(shè)備用的是不同的模板，當(dāng)我們用電腦打開呈現(xiàn)的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應(yīng)式，其實不是。因為當(dāng)我在開發(fā)者模式下調(diào)節(jié)不同設(shè)備展示時，就會發(fā)現(xiàn)，其實是換了一個網(wǎng)址來根據(jù)不同的設(shè)備進(jìn)行自適應(yīng)的，而真正的響應(yīng)式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。
漸進(jìn)式布局是近幾年比較新起的，這種布局設(shè)計，很像一個網(wǎng)站或者本身它就是一個網(wǎng)站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進(jìn)式布局得一種，小程序明顯是一個網(wǎng)頁，但通過技術(shù)的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術(shù)還是web網(wǎng)頁。
響應(yīng)式的原理是通過定位的方式來做響應(yīng)式的各種開發(fā)，需要在頁面中至少標(biāo)出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應(yīng)式和做布局相應(yīng)的位置。這樣可能大家不容易理解，其實結(jié)合figma來看，這些點對應(yīng)的就是這樣（如下圖），在figma中的布局點。設(shè)計師通過調(diào)節(jié)圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應(yīng)式的原理。換言之，我們做響應(yīng)式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現(xiàn)的。
01、響應(yīng)式
如下圖是響應(yīng)式的優(yōu)點和缺點。響應(yīng)式其實就是只開發(fā)一套頁面，這個頁面兼容三端。雖然做了響應(yīng)式，但如何響應(yīng)是需要設(shè)計師去設(shè)計的。比如我們設(shè)計了一個移動端界面，然后全部做好對應(yīng)的自動布局，再進(jìn)行頁面拉伸，內(nèi)容隨之會發(fā)生變化，比如當(dāng)拉伸到1024*768的時候，也就是iPad的尺寸，就會發(fā)現(xiàn)局部在設(shè)計上有些不合實際情況，這時就需要設(shè)計師在對應(yīng)尺寸的設(shè)計稿上進(jìn)行內(nèi)容上的微調(diào)，比如按鈕不可能那么長，就把按鈕設(shè)計的短一點。當(dāng)繼續(xù)進(jìn)行拉伸到1440網(wǎng)頁的寬度時，然后再酌情針對網(wǎng)頁尺寸的呈現(xiàn)樣式，局部進(jìn)行尺寸的調(diào)整，比如文字和按鈕被拉伸到網(wǎng)頁版都需要居中對齊，電腦端的樣式就需要設(shè)計師重新排版了。
通常在B端系統(tǒng)，設(shè)計師需要做響應(yīng)式設(shè)計時，往往是從大往小做設(shè)計，這也取決于這個B端產(chǎn)品是否需要進(jìn)行移動端的設(shè)計，《B端設(shè)計總概二》中提到過什么情況下進(jìn)行設(shè)計B端移動端。如果需要設(shè)計B端移動端，就需要我們將網(wǎng)頁改成移動端設(shè)計，比如B端的側(cè)邊欄導(dǎo)航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設(shè)計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進(jìn)行演示，通過對斷點插件的設(shè)置，就可以完美的看到頁面在三端不同情況的適配呈現(xiàn)，斷點插件用來做演示非常方便。
02、自適應(yīng)
如下圖是自適應(yīng)的優(yōu)點和缺點，其實就是一個項目開發(fā)三個頁面，分別做定制設(shè)計，網(wǎng)頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規(guī)劃2035遠(yuǎn)景目標(biāo)里提到重點發(fā)展傳統(tǒng)企業(yè)數(shù)字化轉(zhuǎn)型，尤其是今年我們設(shè)計師更能深刻體會，C端和B端已經(jīng)是完全兩個不同的行業(yè)，C端發(fā)展近十年，已經(jīng)很難再做到創(chuàng)新上的突破，該做的功能和創(chuàng)新都已經(jīng)做了，而B端這片藍(lán)海才剛剛開始發(fā)力，很多企業(yè)也都在考慮B端系統(tǒng)的搭建，降本提效率成了很多公司新的指標(biāo)，因此數(shù)字化轉(zhuǎn)型重點在于B端系統(tǒng)探索，B端重點在于中臺的搭建！設(shè)計師通過設(shè)計中臺，構(gòu)建出基本的業(yè)務(wù)類型，再分類到業(yè)務(wù)中，構(gòu)建出不同的業(yè)務(wù)界面，所以設(shè)計中臺非常關(guān)鍵，很多公司經(jīng)常會用這兩個系統(tǒng)去構(gòu)建，Antdesign和Elemnet就是設(shè)計中臺，我們會發(fā)現(xiàn)用Antdesign可以做出很多的系統(tǒng)，那怎么進(jìn)行設(shè)計中臺的設(shè)計呢？和我們設(shè)計師有什么樣的關(guān)聯(lián)度呢？帶著這個問題，我們深度探索B端設(shè)計中臺的落地！
概念：中臺是互聯(lián)網(wǎng)的術(shù)語，一般應(yīng)用于大型企業(yè)，中國互聯(lián)網(wǎng)的變革永遠(yuǎn)是從大型互聯(lián)網(wǎng)開始，大型互聯(lián)網(wǎng)公司引發(fā)了技術(shù)的變革，這也是中臺的興起，一般指搭建一個靈活快速應(yīng)對變化的架構(gòu)，快速實現(xiàn)前端提的需求，避免重復(fù)建設(shè)，達(dá)到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設(shè)計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產(chǎn)生，一天可以做一百個左右的界面。在面對B端系統(tǒng)這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設(shè)計師設(shè)計的組件只是一個樣式，而前端需要把組件進(jìn)行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復(fù)用，和前端代碼的復(fù)用，可以大大提高設(shè)計師的工作效率。
基本庫指的是一些色彩系統(tǒng)、字體系統(tǒng)、圖標(biāo)系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)等等，之所以強調(diào)系統(tǒng)兩個字，有系統(tǒng)就要統(tǒng)一規(guī)則和統(tǒng)一規(guī)范，然后進(jìn)行調(diào)用應(yīng)用在系統(tǒng)中的各個地方，比如我們想調(diào)用一個顏色，不是去隨選用一個顏色，應(yīng)該嚴(yán)格的從色彩系統(tǒng)中去調(diào)用，如果系統(tǒng)組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據(jù)業(yè)務(wù)再進(jìn)行補充顏色進(jìn)組件庫為了后續(xù)的調(diào)用，這是一種比較嚴(yán)謹(jǐn)?shù)氖褂梅绞?。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應(yīng)的組件，我們應(yīng)該試著反推一下，是否要加進(jìn)組件庫中去，來進(jìn)行系統(tǒng)的調(diào)用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進(jìn)行查看），所以并不是Antdesign組件庫形成了一定的規(guī)則，它也是在沿用別人的規(guī)則，而這些規(guī)則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現(xiàn)在這樣的組件庫，那中臺設(shè)計，首先要搭建基本庫，把基本庫里的基礎(chǔ)一些系統(tǒng)搭建好后，我們繼續(xù)去做擴展庫。
如下圖，擴展庫中包含了很多內(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)容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節(jié)Arco組件庫，因為它們面向的是系統(tǒng)級的解決方案，各行各業(yè)都可以用它，它面向的是一個大系統(tǒng)，也許我們只涉及到了其中的20%，因為也沒有一個系統(tǒng)能用到它所有的組件，所以我們自己在設(shè)計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應(yīng)該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應(yīng)該加以說明什么時候用這個多選框。類似于是組件的設(shè)計說明。
最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應(yīng)該如何正確的使用，或者說的方法是什么。比如標(biāo)簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據(jù)眼動儀實驗數(shù)據(jù)數(shù)據(jù)來看，并且結(jié)合給出一些工作中業(yè)務(wù)中的最佳實踐得案例放進(jìn)去，給使用的人去做指引。
所以設(shè)計師做的事情，不僅僅是應(yīng)用組件庫和創(chuàng)造組價庫，還應(yīng)該指導(dǎo)其他設(shè)計師，指導(dǎo)開發(fā)人員在去復(fù)用每個頁面組件的的時候，應(yīng)該怎么正確的使用，這也是在B端設(shè)計中一個關(guān)鍵的環(huán)節(jié)，同時我們的視覺系統(tǒng)一定也是和業(yè)務(wù)有關(guān)聯(lián)度的，所以在B端中做設(shè)計一定也不會脫離業(yè)務(wù)去做，我們一定要聯(lián)系到實際的業(yè)務(wù)場景中，這個業(yè)務(wù)場景指的就是業(yè)務(wù)和視覺的結(jié)合，在做C端的時候，業(yè)務(wù)場景一定不會比B端多，C端的業(yè)務(wù)場景大多是定制化的業(yè)務(wù)場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標(biāo)、按鈕、頁面，而B端需要統(tǒng)一化，中臺組件庫的落地，可以大大提高設(shè)計師的工作效率和開發(fā)人員的協(xié)同效率，嚴(yán)謹(jǐn)?shù)恼{(diào)用組件使用組件，可以使得系統(tǒng)頁面保持高度的一致。
如圖1：可以看出縱列的關(guān)系更緊密，因為縱間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關(guān)系更加緊密。通過圖中這樣的視覺設(shè)計為什么會感覺間距更加緊密呢？這屬于用戶心理學(xué)的應(yīng)用，如果元素相鄰的更近，元素之間的關(guān)系就會更加的緊密。
如圖3：如果元素相鄰的關(guān)系都是保持一樣的，那么它們的關(guān)系是相對對等的。
由此可以得出結(jié)論，如果相鄰的關(guān)系越近，它們的關(guān)聯(lián)度就越近，如果相鄰的越遠(yuǎn)，它們的關(guān)聯(lián)度就越遠(yuǎn)。
應(yīng)用案例：如圖4卡片中得標(biāo)題和內(nèi)容，設(shè)計中把標(biāo)題和內(nèi)容進(jìn)行區(qū)分，所以我們會做大量的留白，這樣的留白就會讓信息結(jié)構(gòu)具有層次感，層次感就是指它們信息結(jié)構(gòu)的關(guān)聯(lián)度，如果想讓它們有關(guān)聯(lián)度，就讓它們距離近一點不要做區(qū)分，如果不想讓它們有關(guān)聯(lián)度，或者關(guān)聯(lián)度出現(xiàn)一個等級的區(qū)分，那么就可以加一條線，讓它們之間的關(guān)聯(lián)度分隔開。這就是格式塔接近性的應(yīng)用。
如圖5：如果去區(qū)分右邊的形狀，通常我們會根據(jù)形狀進(jìn)行區(qū)分，因為人的潛意識會認(rèn)為相似的形狀會更有相關(guān)的分類性。這就是格式塔中的相似性原則。
應(yīng)用案例：如果文字的標(biāo)題大小是保持一致的，包括它有統(tǒng)一的大小，統(tǒng)一的色彩，統(tǒng)一的字號，那系統(tǒng)中的其他同樣功能的地方，都應(yīng)該用統(tǒng)一的文字，這就是格式塔相似性的應(yīng)用，比如圖標(biāo)也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標(biāo)進(jìn)行表達(dá)，圖標(biāo)之間的設(shè)計才具有相似性。
如圖6：可以看到有一個L，是主體與背景進(jìn)行了區(qū)分，如果在設(shè)計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區(qū)分原則。
應(yīng)用案例：比如警告彈出，可以用色彩去區(qū)分，目標(biāo)就是讓用戶看的更加得清晰，當(dāng)警告的時候給用戶一個警告的信息，當(dāng)成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關(guān)系的原理。因此應(yīng)用在我們設(shè)計系統(tǒng)中，前景和背景進(jìn)行區(qū)分的時候，我們就可以通過色彩進(jìn)行區(qū)分，色彩的區(qū)分要保持統(tǒng)一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠(yuǎn)，它得陰影越長，這也是陰影的層級關(guān)系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應(yīng)用案例：當(dāng)一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認(rèn)知，一定會腦補出另外一個形狀，這個原則和我們UI的關(guān)系是什么呢？比如一個loading，半圓一直在旋轉(zhuǎn)，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當(dāng)前的進(jìn)程和位置，封閉性原則通常應(yīng)用在圖標(biāo)的設(shè)計，圖表的設(shè)計和步驟條的設(shè)計中。
如圖9：可以看出用一些簡單得形狀來體現(xiàn)，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續(xù)性；另外一組三角形箭頭指向右下角，可以看出它們是連續(xù)的一組。不同的形狀會有連續(xù)性，箭頭也特別有指向性，這就是為什么返回和前要進(jìn)放在不同的位置，當(dāng)我們的數(shù)據(jù)需要有連續(xù)的時候，我們也要使用相似的形狀來表達(dá)，這就是連續(xù)性原則的應(yīng)用。
同理如圖10：連續(xù)性一定是要有連續(xù)等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續(xù)等階變化，通過色彩的透明度也可以做到連續(xù)性。
很多公司或者不同公司有不同的命名方式，這個需要和團(tuán)隊開發(fā)提前做溝通，主要以方便開發(fā)習(xí)慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優(yōu)先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態(tài)，這樣的命名順序來進(jìn)行，這樣命名開發(fā)使用也比較方便，因為是按照了開發(fā)的統(tǒng)一規(guī)則來進(jìn)行命名的。如圖所示：
當(dāng)英文不好的時候，推薦大家記常用組件英文名，以及常用狀態(tài)名、級別名、內(nèi)部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
文章來源：站酷 作者：飛魚十七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
“復(fù)雜是世界的一部分，但它不應(yīng)該令人困惑，好的設(shè)計幫我們馴服復(fù)雜，不是讓事物變簡單（如果復(fù)雜是符合需求的），而是去管理復(fù)雜”--唐納德·A·諾曼
與復(fù)雜共處，這是一個有趣的話題。在這個奉行“少即是多”的時代，設(shè)計師對于復(fù)雜噤若寒蟬，認(rèn)為優(yōu)秀的設(shè)計應(yīng)該簡潔明了，若無必要，勿增實體，而復(fù)雜則常備被視作失敗設(shè)計的標(biāo)簽。設(shè)計師為了保持設(shè)計上的簡約挖空心思，甚至試圖通過削弱功能的方式來降低產(chǎn)品的復(fù)雜度，得到自己想象中的完美設(shè)計。然而一味追求“簡單”的設(shè)計真的符合用戶的實際需求嗎？從心理學(xué)的角度來看，復(fù)雜的事物往往功能強大，而功能強大意味著更好的服務(wù)與更高的價值，用戶也更愿意為之付費。當(dāng)我們購買商品時，我們會仔細(xì)斟酌，拿著產(chǎn)品的功能列表反復(fù)比對，這個時候我們忘記了產(chǎn)品復(fù)雜與否，更多考慮的是功能是否滿足自身需求。
對于大部分B端產(chǎn)品而言，復(fù)雜或許難以避免，復(fù)雜是出于實實在在的業(yè)務(wù)的需要，而非某位設(shè)計師的錯誤喜好。B端產(chǎn)品之所以給人感覺會相對復(fù)雜，是因為產(chǎn)品需要完成復(fù)雜的工作任務(wù)，界面內(nèi)承載的信息內(nèi)容較多，在視覺上會帶給用戶壓力，直觀感受上覺得產(chǎn)品很復(fù)雜。但是這些信息又都是必需的，如果缺少這些必要的信息，會對用戶理解和使用產(chǎn)品造成阻礙。就如同飛機的駕駛艙，密密麻麻的按鈕如此復(fù)雜，但是每一個按鈕都有著相應(yīng)的功能，不可或缺。既然復(fù)雜難以避免，那么作為設(shè)計師我們不應(yīng)該被動接受或盲目拒絕復(fù)雜，我們應(yīng)該學(xué)會如何與復(fù)雜共處，去嘗試馴服復(fù)雜、管理復(fù)雜。
相信很多設(shè)計師和我一樣，經(jīng)歷過現(xiàn)代主義浪潮的洗禮，對于簡約的設(shè)計有著或多或少的偏好。因為這種偏好，在自己進(jìn)行設(shè)計時也希望能夠選用這種風(fēng)格，在設(shè)計時刻意的去追求界面簡約，卻忽略了界面上的簡約不等同于產(chǎn)品易于理解和使用。從心理學(xué)的角度上看，復(fù)雜的事物更容易理解，簡單的事物反倒令人困惑，一味的追求簡單反而會讓事物變得復(fù)雜。
B端產(chǎn)品的目標(biāo)是降本提效，追求簡約的設(shè)計思想在B端產(chǎn)品的設(shè)計中并沒有那么適用，為了提升用戶的操作效率，我們需要將一些能夠幫助用戶理解的信息與常用的操作直觀的展示給用戶。這會在一定程度上增加界面的復(fù)雜度，但是相較于產(chǎn)品視覺界面會因此變得復(fù)雜，產(chǎn)品的易用性和操作效率對于B端產(chǎn)品而言會更為重要。
與復(fù)雜共處的前提是能夠理性地看待復(fù)雜，復(fù)雜本身的含義即非褒義也非貶義。復(fù)雜描述的是事物的狀態(tài)，它在詞典上的解釋是擁有很多即錯綜復(fù)雜又相互關(guān)聯(lián)的組成部分的事物。產(chǎn)品復(fù)雜與否是由產(chǎn)品本身所從事的業(yè)務(wù)和需要完成的任務(wù)來決定，就像我們不能要求一個做機械結(jié)構(gòu)設(shè)計的工程軟件做得像一個圖畫板一樣簡單，因為兩者的功能需求不是一個層面的，所以我們也不能單純的將產(chǎn)品簡潔還復(fù)雜作為評判一款產(chǎn)品優(yōu)秀與否的標(biāo)準(zhǔn)。
我們之所以對復(fù)雜懷有畏懼，其實更多的是畏懼令人困惑的復(fù)雜，復(fù)雜與困惑有著本質(zhì)的區(qū)別，理解他們之間的區(qū)別很有必要，復(fù)雜描述的是事物的狀態(tài)，而困惑表述的是用戶使用產(chǎn)品時的心理。復(fù)雜的背后可以擁有規(guī)則與邏輯，理解這些規(guī)則和邏輯，能夠幫助我們理解和使用產(chǎn)品。而令人困惑的產(chǎn)品往往缺少這樣的內(nèi)在規(guī)則與邏輯，用戶難以理解產(chǎn)品的運轉(zhuǎn)機制，需要花費很大力氣才能完成有效操作，容易讓用戶產(chǎn)生挫敗感。產(chǎn)品可以是復(fù)雜的，但是不應(yīng)該讓用戶困惑。
在很多復(fù)雜的傳統(tǒng)線下業(yè)務(wù)數(shù)字化轉(zhuǎn)型的過程中，為了讓產(chǎn)品易于使用，設(shè)計師需要深入到一線，去了解真實用戶在線下業(yè)務(wù)場景中是如何處理日常任務(wù)的，在流程線上化過程中也需要遵循這樣的業(yè)務(wù)流程，這樣能夠讓用戶更快上手，而如果我們在設(shè)計過程中不去參考用戶在線下的操作場景，按照自己的想法去意測用戶的行為，這樣設(shè)計出的產(chǎn)品背離了用戶的心理模型，缺乏內(nèi)在邏輯，會讓用戶感到混亂困惑，陷入深深的麻煩。
基于產(chǎn)品本身功能需要，我們可能無法很主觀的去降低產(chǎn)品的復(fù)雜度，這就需要我們在進(jìn)行產(chǎn)品設(shè)計時花費更多的心思，通過對業(yè)務(wù)流程、頁面布局、信息呈現(xiàn)上的調(diào)整與設(shè)計讓產(chǎn)品變得清晰，不讓用戶陷入困惑。如下圖的關(guān)于表單編輯器的A\B兩種設(shè)計，用戶在編輯器內(nèi)完成一系列針對表單的編輯、配置操作，然后發(fā)布表單。方案A中將這些表單編輯配置項通過tab進(jìn)行排列，這種方式結(jié)構(gòu)簡單，但是擴展性較差，過多的欄目也容易讓用戶陷入困惑，不清楚需要完成哪些配置項才能進(jìn)行發(fā)布。方案B中采用了步驟導(dǎo)航加側(cè)欄導(dǎo)航的雙層導(dǎo)航結(jié)構(gòu)，在步驟導(dǎo)航上給出完成表單編輯配置的主要步驟，在大的步驟下用側(cè)欄導(dǎo)航承載小的編輯項，結(jié)構(gòu)清晰，且能夠?qū)τ脩艟庉嫳韱翁峁┮欢ǖ膸椭敢?。雖然兩種方案信息內(nèi)容上都一致，視覺觀感上甚至方案B更為復(fù)雜，但是方案B在這里可能是更合適的方案，因為方案B在配置流程的指引上更為清晰，也更貼近用戶心理模型，即使沒有使用過在線表單的用戶也能理解產(chǎn)品流程，因而用戶能夠更容易的完成表單配置并發(fā)布表單。
我們在使用產(chǎn)品時，都會有一個大概的心理預(yù)期，會認(rèn)為某一類型的產(chǎn)品會較為復(fù)雜，某一類型的產(chǎn)品會相對簡單。為什么我們會有這樣的認(rèn)知呢？是因為我們知道這些產(chǎn)品大概有哪些功能，而這些功能就決定了產(chǎn)品的復(fù)雜層度。產(chǎn)品的復(fù)雜程度由產(chǎn)品的業(yè)務(wù)與功能決定，而不是依照設(shè)計師的自我喜好，像如淘寶、京東這類的購物網(wǎng)站、擁有著很多的欄目，所以淘寶、京東的界面相對來說較為復(fù)雜；而像百度這樣的搜索引擎功能相對來說比較簡單，所以界面設(shè)計相對簡單干凈。
我們可以容許一個功能強大的產(chǎn)品設(shè)計得相對復(fù)雜，但是一個功能簡單的產(chǎn)品設(shè)計得復(fù)雜難用就是一個災(zāi)難。作為設(shè)計師我們需要根據(jù)產(chǎn)品的實際需要來進(jìn)行設(shè)計，即不過度設(shè)計，也不執(zhí)著于追求簡約，而是基于需求恰到好處的進(jìn)行設(shè)計。
復(fù)雜的產(chǎn)品會有好的用戶體驗嗎？答案是肯定的，用戶體驗的好壞與產(chǎn)品是復(fù)雜還是簡單并沒有直接的關(guān)系，很多時候復(fù)雜的產(chǎn)品也能帶給我們良好的用戶體驗，在互聯(lián)網(wǎng)產(chǎn)品中，我們可以看到很多復(fù)雜的產(chǎn)品，這些復(fù)雜的軟件產(chǎn)品，一點點的改變著我們的生活與工作方式，讓我們生活與工作變得便捷與高效。
首先可以看看我們的國民級電商應(yīng)用淘寶，乍看淘寶的界面，可能會覺得十分復(fù)雜，甚至?xí)o人一種眼花繚亂的感覺，但是包括我在內(nèi)的許多人仍然十分喜歡逛淘寶。淘寶內(nèi)除了有本身的淘寶、天貓店鋪外還有專做海淘的天貓國際，做社區(qū)團(tuán)購的淘鮮達(dá)，專做拍賣的阿里拍賣等數(shù)十個板塊，業(yè)務(wù)繁多，功能復(fù)雜，但這幾乎很難改變，因為之所以做這些業(yè)務(wù)和功能背后都有著商業(yè)上的考量。從交互設(shè)計的角度看，雖然淘寶的業(yè)務(wù)和功能繁多，卻有著清晰的布局、信息對齊、內(nèi)容組織，產(chǎn)品盡管復(fù)雜，但并不令人感到費解和困惑。購物流程也與用戶在線下購物流程相仿，貼近用戶的心理模型，用戶容易了解產(chǎn)品功能、容易與之交互，整體上有著良好的用戶體驗。
又如我一直在使用的一款筆記軟件Notion，Notion相對于印象筆記、有道云筆記而言更為復(fù)雜，需要花費一定的時間成本學(xué)習(xí)才能夠從容上手使用，但是這并不妨礙Notion被眾多使用者所追捧。Notion的很多功能在使用之前，甚至都不會想到會出現(xiàn)在一款筆記產(chǎn)品里面，如甘特圖，多維表格等，這類功能一般出現(xiàn)在項目管理類軟件中。而Notion塊結(jié)構(gòu)的布局模式，讓筆記能夠自由拖拽，擁有了極強的自由度，用戶可以很自由的用各種各樣的形式來記筆記，要是你肯再花一些心思，你甚至可以在Notion內(nèi)搭建一個個人專屬網(wǎng)站來記錄的學(xué)習(xí)知識，打造個人專屬知識庫。將我們習(xí)以為常的線性筆記思維，轉(zhuǎn)變成縱向思維，甚至是網(wǎng)格狀思維。Notion無疑是復(fù)雜的，但是這樣做是為了給用戶提供的強大功能和極高的自由度，這些功能恰恰也切合了用戶的需求，創(chuàng)造了一種全新的筆記體驗，帶給用戶愉悅的使用感受。
簡單是產(chǎn)品追求的最終形態(tài)嗎？其實未必，很多時候產(chǎn)品設(shè)計的過度簡單反而會給用戶帶來麻煩。為了追求簡單的設(shè)計，不可避免的就需要隱藏一些信息或者拉長操作路徑，這是一個權(quán)衡的過程，我們在做設(shè)計時也會經(jīng)常面臨這樣的抉擇，是追求視覺上的簡約美觀還是信息傳達(dá)準(zhǔn)確性與操作上的效率。給用戶一個簡約美觀的視覺感受無疑很重要，人們對于美的事物往往更有耐心，也更愿意去探索。但是對于一款針對B端用戶的效率軟件、辦公應(yīng)用而言，準(zhǔn)確的傳達(dá)信息，幫助用戶進(jìn)行判斷，頻繁使用的功能設(shè)計得更高效便捷，這些點能帶給用戶更實際價值，也是我們在設(shè)計產(chǎn)品時應(yīng)該優(yōu)先考慮的點。
特別是在一些專業(yè)性的軟件中，如果我們?yōu)榱俗非蠛喖s而弱化或者省略掉一些關(guān)鍵信息，還有可能會導(dǎo)致用戶錯誤操作的出現(xiàn)，造成嚴(yán)重的后果。試想一下當(dāng)你在使用軟件編寫一個計算字段時，軟件提供給你了計算公式卻沒有就近給你提供計算公式的解釋和用法示例，導(dǎo)致你因為書寫上的不規(guī)范使得計算結(jié)果頻繁出錯。這時你可能會滿懷憤怒的抱怨為什么產(chǎn)品會如此難用，為什么不能配置過程中給到更多的反饋與幫助信息來減少配置錯誤的發(fā)生。
前面我們了解了關(guān)于復(fù)雜的定義，認(rèn)識了復(fù)雜與困惑之間的區(qū)別，也明確了在B端產(chǎn)品中復(fù)雜或許難以避免，復(fù)雜是出于實實在在的業(yè)務(wù)的需要而非某位設(shè)計師的錯誤喜好，既然復(fù)雜無法避免，我們就應(yīng)該學(xué)會與復(fù)雜共處，管理與馴服復(fù)雜。那么如何與復(fù)雜共處呢，有一些策略或許可以給予我們一些思路。
復(fù)雜與困惑的本質(zhì)區(qū)別在于復(fù)雜的背后隱藏著規(guī)則與邏輯，而困惑缺少這樣的規(guī)則與邏輯，讓人無法預(yù)測與揣摩，對應(yīng)到軟件產(chǎn)品的設(shè)計，一款成功的優(yōu)秀的軟件產(chǎn)品，應(yīng)該是易學(xué)易用、能夠滿足用戶預(yù)期，用戶能夠直觀的理解產(chǎn)品的流程與主要功能，并通過產(chǎn)品實現(xiàn)自己的目標(biāo)。那么具體到軟件的設(shè)計上我們應(yīng)該怎樣做呢？
這里可以看看我們團(tuán)隊正在使用的研發(fā)管理工具TAPD，TAPD是一款敏捷研發(fā)協(xié)作工具，凝聚了騰訊研發(fā)方法及敏捷實踐精髓，其中敏捷開發(fā)的方法就是TAPD的內(nèi)在規(guī)則與邏輯，有過敏捷開發(fā)經(jīng)驗，理解敏捷開發(fā)流程的的開發(fā)人員能夠快速的上手使用TAPD，對于不了解敏捷開發(fā)的開發(fā)人員也可以通過產(chǎn)品幫助中心學(xué)習(xí)敏捷開發(fā)思想，進(jìn)而理解產(chǎn)品的功能與流程，因此雖然TAPD功能與頁面結(jié)構(gòu)相對復(fù)雜，但是基于對敏捷開發(fā)的認(rèn)識用戶還是能從產(chǎn)品復(fù)雜的功能界面中摸索出一條操作路徑，實現(xiàn)自己的目標(biāo)。這就是產(chǎn)品擁有內(nèi)核思想以后能夠帶來的直觀好處，將原本零散的功能點通過特定邏輯鏈接成操作流程，幫助用戶更好地理解與使用產(chǎn)品。
相同的在我們公司自己的一個項目中我們也運用了同樣的方法，在我們公司之前研發(fā)的一款crm產(chǎn)品中，為了給用戶提供最佳的銷售實踐，幫助用戶更快上手使用我們的產(chǎn)品，我們在設(shè)計產(chǎn)品時尋找了硅谷藍(lán)圖團(tuán)隊做了顧問咨詢，并依照硅谷藍(lán)圖的銷售轉(zhuǎn)化路徑來構(gòu)建我們的產(chǎn)品體系，確定產(chǎn)品功能，梳理產(chǎn)品中的業(yè)務(wù)流程。并希望在以后為客戶做實施的過程中能夠?qū)⒐韫人{(lán)圖的銷售方法一起帶給用戶，讓用戶能夠更好地使用我們的產(chǎn)品，實現(xiàn)產(chǎn)品的最高價值，為中小企業(yè)銷售團(tuán)隊賦能。
通過前面兩個案例其實我們可以感受到，當(dāng)一款復(fù)雜的產(chǎn)品有了內(nèi)在的規(guī)則與邏輯以后，用戶理解和使用我們的產(chǎn)品會變得更順暢，用戶不會迷失在茫茫的功能之中，通過理解規(guī)則與邏輯，用戶能夠?qū)ψ约翰僮鹘Y(jié)果有一個大概的預(yù)期，而不是處于困惑狀態(tài)，作為設(shè)計師的我們也可以將這種規(guī)則邏輯作為我們設(shè)計的引導(dǎo)，讓我們的設(shè)計更為系統(tǒng)和有條理，讓產(chǎn)品不再是一堆功能的堆疊，各自為戰(zhàn)。
復(fù)雜是用戶的一種心理感受，用戶覺得產(chǎn)品復(fù)雜除了產(chǎn)品本身結(jié)構(gòu)信息復(fù)雜之外，也是因為產(chǎn)品在設(shè)計上沒有貼合用戶的心理預(yù)期，用戶很難理解產(chǎn)品的流程與交互，所以貼近用戶心理進(jìn)行設(shè)計就顯得尤為重要。這里我們需要先了解三個概念，實現(xiàn)模型、表現(xiàn)模型和心理模型，三個概念的釋義如下：
實現(xiàn)模型：產(chǎn)品是怎樣工作的
心里模型：用戶認(rèn)為產(chǎn)品是怎樣工作的
表現(xiàn)模型：通過設(shè)計來讓用戶認(rèn)為產(chǎn)品是怎樣工作的
表現(xiàn)模型越接近心理模型，用戶就越容易了解產(chǎn)品功能、容易與之交互。表現(xiàn)模型越接近實現(xiàn)模型，用戶越難理解產(chǎn)品，產(chǎn)品就越難使用。復(fù)雜產(chǎn)品在用戶體驗過程中的痛點在于用戶需要花費時間學(xué)習(xí)或培訓(xùn)之后才能了解產(chǎn)品的運轉(zhuǎn)機制，很多B端產(chǎn)品在設(shè)計時更多的偏向于實現(xiàn)模型，用戶在使用產(chǎn)品的過程中會發(fā)現(xiàn)很多地方的交互和自己心理預(yù)期并不一致，使用過程中會遇到很多的阻礙，影響整體的使用體驗。對于一款復(fù)雜的產(chǎn)品而言，我們需要讓我們產(chǎn)品的表現(xiàn)模型更接近于用戶的心理模型，這樣用戶能夠更容易了解產(chǎn)品的功能，并與之交互。
大家使用電腦時有沒有遇到過類似下圖這樣的電腦報錯信息，里面是一堆的專業(yè)名詞，看得人一頭霧水。這時候我們能做的只有默默的打開百度，去了解彈窗里面講的內(nèi)容究竟是什么，了解后才明白原來這樣，然后按照百度上操作步驟一通操作，僥幸解決了問題。但是當(dāng)下次我們遇到相同問題時，可能還是不知道如何解決，無可避免還是需要求助百度。這個就是表現(xiàn)模型貼近與實現(xiàn)模型會帶給用戶的困擾，用戶不是專業(yè)的開發(fā)者，他們不了解也不需要了解產(chǎn)品背后的實現(xiàn)邏輯，這對用戶而言是沒有價值的，給予用戶這些信息不能對用戶起到預(yù)想的幫助作用。貼近實現(xiàn)模型進(jìn)行設(shè)計會讓用戶與產(chǎn)品交互變得困難，變相的是在人為的增加產(chǎn)品的復(fù)雜度，與復(fù)雜共處，我們需要學(xué)會貼近用戶心理進(jìn)行設(shè)計。
復(fù)雜的產(chǎn)品往往功能、頁面繁多，如果頁面內(nèi)的視覺元素以及交互各自為戰(zhàn)，那么放大到整個產(chǎn)品就是一個災(zāi)難，不僅是產(chǎn)品給用戶感官上不統(tǒng)一、整體性差，過多的交互模式也會增加用戶的學(xué)習(xí)與記憶成本，用戶在這些相視功能但是不同的視覺與交互的模塊之間容易陷入困惑，對用戶使用產(chǎn)品造成困擾。針對這個問題，現(xiàn)在越來越多的公司開始通過搭建組件庫的方式來規(guī)范自家產(chǎn)品內(nèi)的視覺與交互，一個規(guī)范完整的組件庫的確能夠在很大程度上解決產(chǎn)品在視覺與交互上的一致性問題，通過模塊化解決方案，也能降低冗余的生產(chǎn)成本，實現(xiàn)產(chǎn)品快速開發(fā)。因此很多人也認(rèn)為搭建好組件庫就能一次性的解決產(chǎn)品體驗一致性問題，但實際上就算一個產(chǎn)品有了一個自己的組件庫，依舊還會遇到體驗上統(tǒng)一性問題，這是為什么呢？
在原子化設(shè)計理論中，粒子是構(gòu)成頁面的最小顆粒，粒子構(gòu)成簡單組件，簡單組件到復(fù)雜組件，再到區(qū)塊、頁面。雖然用組件能去構(gòu)建頁面，但是還會遇到頁面結(jié)構(gòu)、交互不一致的問題，設(shè)計師各自使用組件去搭建并不能提升我們的效率和解決設(shè)計一致性的問題，在末端設(shè)計并沒有做到約束。因此我們在構(gòu)建好組件以后還需要繼續(xù)抽取出了頁面級的組裝結(jié)構(gòu)和交互模式。
這里我們拿B端產(chǎn)品中常見的列表頁來舉例，縱觀所有后臺列表頁面，抽取后無非就分為這么幾個區(qū)域。不同的業(yè)務(wù)可以通過基礎(chǔ)組件和樣式定義符合自己業(yè)務(wù)線的子模塊。比如列表頁中的篩選區(qū)，在不同的業(yè)務(wù)場景下，對篩選器的需求也各不相同，簡單的可能只需要使用標(biāo)簽選擇就能夠完成篩選，復(fù)雜的可能添加很多的篩選項甚至選項之間還有且或關(guān)系，我們需要根據(jù)實際的業(yè)務(wù)場景設(shè)計適合的篩選器，但是需要注意的是一個產(chǎn)品中用到的篩選器形式不應(yīng)太多，我們需要抽取歸納出三四種篩選器形式去覆蓋我們產(chǎn)品內(nèi)所有的篩選場景。來保證產(chǎn)品內(nèi)不會出現(xiàn)各種相識卻有各不相同的篩選器。
B端后臺產(chǎn)品中比較常見的還有表單，我們可以歸納出產(chǎn)品內(nèi)可能會使用到的表單類型，然后定義出具體的框架結(jié)構(gòu)與交互，在具體的設(shè)計過程中在根據(jù)實際情況選用不同的表單區(qū)塊。
一種常見的信息錄入以及信息展示表單，這種形式是我們最長用。
分布表單適用于信息錄入項以及信息展示項過多，在一個頁面內(nèi)已經(jīng)不能合理清晰的組織傳遞信息，或者表單內(nèi)容的錄入方式或者展示方式存在較大差異，不適宜在一個頁面內(nèi)進(jìn)行展示時。按照布局的不同也可分為橫向步驟和縱向步驟兩種。
組合表單因其結(jié)構(gòu)能夠承載更多的信息，每一個欄目都可以承載一個獨立的表單頁，有效的管理信息。
很多時候我們也會用彈窗來承載表單，好處是交互銜接流暢，不用跳頁。
將產(chǎn)品中類似的區(qū)塊做成最佳的交互模式范例，能夠最大的程度的規(guī)范我們產(chǎn)品中的交互，這樣才能真正的實現(xiàn)產(chǎn)品體驗上的統(tǒng)一，化繁為簡，讓復(fù)雜的產(chǎn)品也能夠調(diào)理清晰，上手簡單容易。在面對復(fù)雜的系統(tǒng)級軟件時，在統(tǒng)一組件樣式的基礎(chǔ)上還應(yīng)該統(tǒng)一產(chǎn)品內(nèi)的交互模式。
復(fù)雜的產(chǎn)品頁面內(nèi)信息往往都特別繁多，如果不做好信息歸納，用戶將很難把握住重點內(nèi)容，信息獲取效率低下，十分影響用戶的使用體驗，所以信息的強弱的整理十分重要，那么什么樣的信息是對用戶而言重要的信息呢？
信息設(shè)計大師愛德華·塔夫特認(rèn)為優(yōu)秀的視覺設(shè)計應(yīng)該是“將清晰的思考視覺化”，他還認(rèn)為只有充分理解觀看者的“認(rèn)知任務(wù)”及一些設(shè)計原則才能設(shè)計出優(yōu)秀的產(chǎn)品。
如何找到對用戶真正重要的信息需要借助到產(chǎn)品設(shè)計中一個十分重要的工具--用戶模型，通過調(diào)研的來得用戶模型是對于我們產(chǎn)品客戶的抽象歸納，通過用戶模型我們可以確定哪些功能對于用戶而言是高價值的重要內(nèi)容該重點突出，哪些內(nèi)容相對不是那么重要可以弱化處理，通過對于頁面內(nèi)容強弱的劃分，用戶能夠更快的獲取到對自己有用的內(nèi)容，盡管頁面仍舊復(fù)雜，但是信息劃分合理、層級清晰、表意明確的頁面人就能夠帶給用戶良好的用戶體驗，幫助用戶高效的處理任務(wù)。
復(fù)雜是產(chǎn)品的本來特性，本身不含褒貶，但是如果復(fù)雜不加以控制，讓其發(fā)展為困惑與混亂，這對于一款產(chǎn)品而言絕對不是一件好事情，這樣即使產(chǎn)品功能上很優(yōu)秀，用戶也無法長期忍受，一旦市場上出現(xiàn)替代產(chǎn)品，那么忍受已久的用戶也將拋棄產(chǎn)品轉(zhuǎn)向體驗更好的新產(chǎn)品。
曾經(jīng)我也是一個極簡主義的追捧者，但是經(jīng)歷過越來越多的設(shè)計項目，我開始發(fā)現(xiàn)某些產(chǎn)品復(fù)雜性是必需的，將產(chǎn)品做得簡單并不是其核心訴求。真正需要處理的問題也不是復(fù)雜，而是混淆的狀態(tài)和由此產(chǎn)生的無條理性。解決的方法不是簡單的去除幾個界面元素，讓其在視覺界面上變得簡潔干凈，而是要讓產(chǎn)品擁有內(nèi)在規(guī)則、一致且能夠被理解。
文章來源：站酷 作者：Yone楊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
具有大量庫存商品，或是涉及復(fù)雜產(chǎn)品的網(wǎng)站，通常會提供產(chǎn)品類別頁面，或者是產(chǎn)品列表頁面。 類別頁面就像是特定產(chǎn)品類別的主頁。他們可能不提供完整的產(chǎn)品列表，但可能會展示一些產(chǎn)品并提供產(chǎn)品子類別的鏈接。這種頁面本質(zhì)上是用戶在進(jìn)入產(chǎn)品列表頁面的過程中經(jīng)過的一個中間步驟，讓用戶不用一下子面對海量的分類信息。
Eddie Bauer 在其全局導(dǎo)航中， WOMEN 鏈接將用戶帶到了這個傳統(tǒng)的類別頁面。這些頁面通常包含產(chǎn)品照片和營銷內(nèi)容，以及促銷子類別（例如SHOP FLANNEL 和 SHOP FLEECE ）的鏈接。
類別頁面通常提供以下組合：
并非所有產(chǎn)品都需要專門的類別頁面。 不過這種情況有時候會讓用戶非常惱火，因為用戶需要通過額外的步驟才能查看特定類別的產(chǎn)品。
許多網(wǎng)站完全省略了類別頁面，而是將用戶直接引導(dǎo)到產(chǎn)品列表頁面，在那里他們可以借助過濾篩選的方式來瀏覽產(chǎn)品。
Bonobos 網(wǎng)站上的 Pants & Jeans 鏈接不是類別頁面，而是將用戶直接帶到產(chǎn)品的列表頁面。這種方法通常效果很好，因為它盡快向客戶展示了他們可選的選擇。
雖然本文偏向于電商網(wǎng)站中的類別頁面的探討，但實際上這些頁面也用于其他類型的網(wǎng)站，特別是新聞資訊和教育類的網(wǎng)站。這些建議也可能適用于這些情況，但最好根據(jù)領(lǐng)域?qū)δ愕脑O(shè)計進(jìn)行測試，以防你的用戶需求與購物型用戶的需求不同。
如果您的電商網(wǎng)站所涉及的產(chǎn)品非常復(fù)雜，以至于您的許多客戶需要經(jīng)過學(xué)習(xí)之后才會使用，才能正確地過濾和比較產(chǎn)品，那么類別頁面就是一個好主意了 。此外，具有 大類別和大量子類別的網(wǎng)站，有時會提供某種類型的獨立類別頁面，以幫助用戶找到有意義的起點。
不過，你可以決定讓特定的產(chǎn)品具有類別頁面，而其他的則不具有獨立的類別頁面。例如，Lululemon 主打的健身服裝產(chǎn)品（大多不需要分類頁面），同時也銷售一種名為 MIRROR 的昂貴的家庭健身產(chǎn)品，后者需要更詳細(xì)的解釋，因此有自己的分類頁面。
Lululemon 為其復(fù)雜的家庭健身產(chǎn)品 MIRROR 提供了一個單獨的類別頁面，但并未為其所有產(chǎn)品類別使用類別頁面。
類別頁面可以對電子產(chǎn)品等復(fù)雜產(chǎn)品起到解釋作用 。如果用戶還不了解產(chǎn)品選項，他們可能還沒有準(zhǔn)備好單擊單個產(chǎn)品。與隨機點擊不同的產(chǎn)品相比，類別頁面為他們提供了一種更有效地了解各種潛在相關(guān)產(chǎn)品功能的途徑。
例如，智能手表通常會有不同的功能和價格范圍，著名智能手表品牌 Fossil 在自己的網(wǎng)站提供了一個類別頁面，列出了不同類型的智能手表，并提供「立即購買」、「了解更多」 以及「比較」的選項。
Fossil 的 智能手表分類頁面解釋了不同型號的智能手表的功能和性能差異
購物型用戶可能不需要通過網(wǎng)站來學(xué)習(xí)服裝或食品等熟悉商品的內(nèi)容和知識。然而，一個擁有大量產(chǎn)品和內(nèi)容，并組織成許多子類別的網(wǎng)站，仍然可以從類別頁面中受益——尤其當(dāng)子類別頁面可以通過獨特的圖文清楚地介紹產(chǎn)品的時候。這比一長串標(biāo)簽文本更容易方便用戶了解產(chǎn)品，此外它還可以為國外的購物者提供幫助。
REI 銷售用于各種戶外活動的許多產(chǎn)品，從皮劃艇到登山用具。如果點擊網(wǎng)站的全局導(dǎo)航中Camp & Hike 鏈接之后，頁面跳轉(zhuǎn)到一個包含所有露營產(chǎn)品的列表面，用戶可能會不知所措，而且無趣。相反，REI 讓鏈接指向到一個傳統(tǒng)的類別頁面，而不是列表，這個頁面包括：
REI 使用傳統(tǒng)的類別頁面來幫助購物者在龐大的 Camp & Hike 類別中找到適合自己的產(chǎn)品。
如果你的網(wǎng)站確實提供了傳統(tǒng)的類別頁面，請同樣為用戶提供了避免進(jìn)入這些頁面的簡單方法，并在他們愿意時，也能直接轉(zhuǎn)到產(chǎn)品列表頁面。為你的站點的全局導(dǎo)航，提供指向子類別產(chǎn)品的列表頁面（比如使用超大導(dǎo)航 Megamenu ），以及指向傳統(tǒng)類別頁面的鏈接。
可能還需要確保搜索結(jié)果始終指向產(chǎn)品選項，而不是將購物者引導(dǎo)到類別頁面。在我們的研究中，Zappos 會將某些搜索結(jié)果指向到以品牌為中心的類別頁面，而不是鏈接到該品牌的產(chǎn)品。
在用戶測試的時候，一位參與者看到孩子后很生氣，因為搜索她最喜歡的品牌 Sam Edelman 時，她進(jìn)入了一個具有促銷感的傳統(tǒng)類別頁面，而不是指向她要的產(chǎn)品。對她來說，這感覺像是一個不必要的額外步驟。
「當(dāng)我進(jìn)入 Sam Edelman 時，我想看到結(jié)果。我不希望打開一個品牌的分類頁面?！?
當(dāng)用戶在 Zappos.com 上搜索「sam edelman」時，她很惱火地看到一個沒有列出任何單個產(chǎn)品的品牌類別頁面。
當(dāng)用戶搜索時，他們希望立即看到結(jié)果。
為了避免傳統(tǒng)的類別頁面的缺陷，并提供對產(chǎn)品列表的快速訪問，許多電商網(wǎng)站現(xiàn)在在主產(chǎn)品列表頁面中，結(jié)合混用了少量的類別有頁面的設(shè)計——例如簡短的描述性內(nèi)容，或簡短的子類別菜單。
在女士緊身褲 產(chǎn)品列表頁面上，Lululemon 包含了一些傳統(tǒng)會在類別頁面上顯示的元素：營銷內(nèi)容（藍(lán)綠色框標(biāo)注的區(qū)域）和對不同緊身褲樣式的解釋，以及指向這些子類別的鏈接（以黃色框標(biāo)注的區(qū)域）。
這種混合呈現(xiàn)方法效果很好，因為對描述或子類別菜單感興趣的用戶可以暫停并閱讀它，而不感興趣的用戶可以簡單地跳過，直接快速訪問實際的產(chǎn)品列表。
一些電商網(wǎng)站在 產(chǎn)品 Banner 旁邊加入營銷的內(nèi)容和元素，這些元素傳達(dá)有用的信息而不會減慢用戶的速度，就像傳統(tǒng)的類別頁面一樣。
高級珠寶零售商 VRAI 使用混合式設(shè)計，在一些產(chǎn)品列表頁面中包含類別頁面樣式元素。它的一個產(chǎn)品列表頁面當(dāng)中，圓形訂婚戒指頁面中，包含了帶有價格的產(chǎn)品列表，以及解釋性的內(nèi)容。頂部的文字描述了此類產(chǎn)品的一般特征。側(cè)面板提供了有關(guān)該類別中所有產(chǎn)品共有特征的說明，以及更多詳細(xì)信息。
在這個列表頁面中，VRAI 包含了促銷內(nèi)容（以藍(lán)綠色框標(biāo)注）和說明性內(nèi)容（以黃色框標(biāo)注）。其中所呈現(xiàn)的圖文內(nèi)容是典型的傳統(tǒng)類別頁面的特征（沒有產(chǎn)品列表）。
一些零售類的網(wǎng)站不使用類別頁面，而是提供指向產(chǎn)品列表頁面上的子類別的導(dǎo)航鏈接。這些鏈接（這是最初發(fā)明類別頁面的原因之一）讓用戶輕松瀏覽網(wǎng)站的產(chǎn)品庫存。
例如，Ann Taylor 的 褲子 列表頁面顯示了不同款式褲子的類別，并提供指向該子類別的鏈接。這些內(nèi)容直接顯示在產(chǎn)品列表上方，幫助用戶了解可用類別項目，并且直接導(dǎo)航到這些類別。
Ann Taylor 的網(wǎng)站在 褲子 的列表頁面的頂部，加入了不同褲子款式和合身度的說明和圖片，以便用戶了解其中的差異。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
在數(shù)字化的浪潮下，政府希望通過人工智能占據(jù)智慧城市的發(fā)展先機，推動民生改善及產(chǎn)業(yè)增長，這離不開政府和科技公司的緊密合作。因此，科技公司不僅面向To B型企業(yè)，同時面向政府或相關(guān)事業(yè)單位，即是稱之為「To G」這種特殊劃分。
鯤云科技（以下簡稱為鯤云）就是這樣一類科技公司，他們作為一家技術(shù)領(lǐng)先的人工智能公司，以數(shù)據(jù)流技術(shù)為核心，提供高性能低延時、高通用性、高算力性價比的下一代人工智能計算平臺和軟硬一體化的平臺解決方案，加速人工智能技術(shù)在智慧城市、智慧安監(jiān)、智慧制造、自動駕駛等領(lǐng)域的落地。
當(dāng)用戶接觸一個產(chǎn)品或物品的第一步，永遠(yuǎn)是外觀視覺。固然，企業(yè)官網(wǎng)作為互聯(lián)網(wǎng)產(chǎn)品，優(yōu)質(zhì)的官網(wǎng)必然是為它的用戶有針對性地服務(wù)。雖然訪客首先感受到的是網(wǎng)站的視覺設(shè)計，但我們不僅要對網(wǎng)站視覺美觀與否有所重視，更好的訪問體驗、更實用的網(wǎng)站功能、更高的網(wǎng)站辨識度，以及通過視覺實現(xiàn)直觀的價值傳遞表達(dá)，都需進(jìn)行深度探討。
網(wǎng)站呈現(xiàn)給訪客的第一印象尤其重要，而網(wǎng)站首屏則會作為傳遞網(wǎng)站風(fēng)格及功能的媒介。我們從鯤云的品牌設(shè)計理念出發(fā)，以直觀的視覺形式來體現(xiàn)科技感。
一個視覺效果好的網(wǎng)站，80%以上是靠優(yōu)質(zhì)的圖片支撐。我們首先在官網(wǎng)首頁Banner采用產(chǎn)品渲染圖來呈現(xiàn)鯤云核心產(chǎn)品。首屏的功能性常會被忽視，其實，企業(yè)官網(wǎng)附帶著商業(yè)屬性，商業(yè)環(huán)境下的視覺應(yīng)該更注重強化產(chǎn)品，滿足需求的產(chǎn)品力加持。
為了提升banner的視覺質(zhì)感，我們對鯤云三款主打產(chǎn)品重新建模渲染，通過主要光源及補光掌握好產(chǎn)品形態(tài)，在將產(chǎn)品細(xì)節(jié)充分展現(xiàn)清晰的前提下，產(chǎn)品暗面加入環(huán)境光使整個畫面更豐富飽滿。
與此同時，完成產(chǎn)品渲染后結(jié)合了場景化的特殊版面來營造氛圍，使整個畫面更具真實感染力。這樣一來，當(dāng)訪客來到鯤云官網(wǎng)，一個極具科技感和創(chuàng)造力的鯤云會給訪客留下深刻的第一印象。
圖標(biāo)是比文字更容易理解的可視化語言，它對于信息傳遞十分高效，可以說圖標(biāo)將這個世界結(jié)合起來。鯤云圖標(biāo)體系由兩部分構(gòu)成，分別是UI icon和3D icon。
3D icon可幫助訪客更簡易、高效地理解鯤云兩大核心技術(shù)的實際屬性。UI icon擁有清晰、簡潔單色線性的特征，其風(fēng)格符合鯤云品牌氣質(zhì)，每個圖標(biāo)特征和細(xì)節(jié)保持一致，在視覺上呈現(xiàn)出更好的統(tǒng)一性。
我們提煉鯤云logo造型輪廓特征、以及根據(jù)產(chǎn)品和服務(wù)方向進(jìn)行圖形發(fā)散，提取鯤云品牌基因，進(jìn)而使圖標(biāo)實現(xiàn)差異化設(shè)計。
一個可以給人留下記憶點的網(wǎng)站，往往需要靠一個個精致到位的細(xì)節(jié)設(shè)計，做到讓網(wǎng)站最終脫穎而出?？梢哉f，細(xì)節(jié)是構(gòu)建起整個設(shè)計的基本元素，細(xì)節(jié)不僅是細(xì)節(jié)。
科技類產(chǎn)品復(fù)雜度較高，只查看技術(shù)和產(chǎn)品概念往往會感到枯燥，如何做到直觀呈現(xiàn)鯤云核心技術(shù)區(qū)別于普通技術(shù)，還能提升趣味性？
在首頁接著往下呈現(xiàn)鯤云核心技術(shù)的第三屏中，我們應(yīng)用柱狀圖結(jié)合交互微動效的方式，將鯤云CAISA芯片與普通芯片進(jìn)行利用率、性能及延時三方面的對比。
當(dāng)訪客點擊查看某一維度對比，可觸發(fā)柱狀圖由下至上勻速的位置及漸變色變化，更直觀地向訪客表明鯤云此款芯片可提供更高的算力性價比的優(yōu)勢，同時引導(dǎo)訪客注意力，加強訪客與其互動鏈接。
在網(wǎng)站中較為常用且能保障性能的微動效有四個變化屬性：大小、位置、旋轉(zhuǎn)、透明度。這四個屬性任何一種或是幾種有所變化時，就能達(dá)到交互微動效的目的，如果再加入其它不必要的屬性，則會影響動效的流暢度。
首頁第四屏的四個核心產(chǎn)品展示中，移動鼠標(biāo)放置各個產(chǎn)品版塊觸發(fā)的微動效，緩動的效果能讓版塊更自然順滑，看起來十分舒服和諧，符合訪客認(rèn)知及預(yù)期。
我們明確了鯤云官網(wǎng)文案語言要保證表述清晰明了、詳略得當(dāng)，直觀地將產(chǎn)品信息及優(yōu)勢傳達(dá)給訪客，便于訪客理解且能產(chǎn)生記憶點。
關(guān)于鯤云
---------------------
核心技術(shù)
---------------------
產(chǎn)品中心
---------------------
應(yīng)用案例
---------------------
合作伙伴
我們見過不少企業(yè)官網(wǎng)文案，都喜歡用抽象的詞匯來高度概括產(chǎn)品概念。在我們看來，佐證產(chǎn)品使用真實專業(yè)的語言搭配數(shù)據(jù)內(nèi)容，可體現(xiàn)出產(chǎn)品專業(yè)性的同時，用更真實的力量打動訪客。
我們利用響應(yīng)式網(wǎng)頁設(shè)計構(gòu)建網(wǎng)頁布局，使頁面能夠更好地適配不同尺寸屏幕，進(jìn)而使網(wǎng)頁體驗更適應(yīng)用戶的需求偏好。
官網(wǎng)建設(shè)需要遵循“不要讓我思考”的原則，這是產(chǎn)品設(shè)計中廣為流傳的一句話。網(wǎng)站作為單向信息傳播工具，我們難以左右訪客的瀏覽行為。
我們需確定官網(wǎng)的層級結(jié)構(gòu)，做好訪客整體體驗的宏觀把控，讓訪客按照我們設(shè)想的行為去操作。我們除了必須滿足訪客基本瀏覽需求之外，更要主動展示企業(yè)核心競爭力的內(nèi)容，這是最終實現(xiàn)增長的有效途徑。
我們從用戶分層入手，站在各個訪客角色的角度進(jìn)行審視，使得鯤云官網(wǎng)各版塊頁面設(shè)計上不同的展示區(qū)、功能區(qū)以及CTA按鈕等充分滿足訪客想看到的信息需求。誠然，各版塊信息內(nèi)容之間存在價值等級，例如知乎的問答會占據(jù)首頁較大的空間。
根據(jù)鯤云先有技術(shù)再有解決方案的底層邏輯，我們將鯤云「核心技術(shù)」板塊放置在導(dǎo)航欄第一位，先有「核心技術(shù)」，再有「產(chǎn)品中心」，后有「解決方案」及「應(yīng)用案例」。
路徑1：「核心技術(shù)」頁面關(guān)聯(lián)「系列產(chǎn)品」
路徑2：「產(chǎn)品中心」頁面關(guān)聯(lián)「應(yīng)用場景」
路徑3：「解決方案」頁面關(guān)聯(lián)「應(yīng)用案例」
通過設(shè)計官網(wǎng)層級結(jié)構(gòu)，結(jié)合對訪客心智特點的思考和利用，讓訪客更多行為能夠發(fā)生在直覺系統(tǒng)的判斷中。當(dāng)然，降低訪客跳出率、建立起訪客信任都在上述層級結(jié)構(gòu)設(shè)計的考慮范圍之內(nèi)。
對于To B和To G產(chǎn)品，企業(yè)更看重的是產(chǎn)品本身能否為企業(yè)帶來價值。鯤云的客戶群體角色通常為多層級，他們會從性價比、效率提升、適配企業(yè)狀況等多個維度進(jìn)行篩選和考量，本質(zhì)既是要優(yōu)化客戶效率，實現(xiàn)“降本增效”。
基于這一特點，我們在「核心技術(shù)」板塊Banner圖設(shè)計了下載白皮書的「 CTA 行動號召按鈕」，并確保CTA顏色對比顯眼且目標(biāo)清晰。
基于鯤云SEM投放需求，我們專門設(shè)計了專屬落地頁——「解決方案」版塊，將官網(wǎng)首頁與該廣告轉(zhuǎn)化頁分開，各司其職。
大家應(yīng)該多少有聽說過，我們可以通過FABE法則和AIDA模型等經(jīng)典方法搭建出一個優(yōu)質(zhì)的網(wǎng)頁框架。
一個落地頁應(yīng)該凸顯對訪客有利的信息，當(dāng)訪客來到廣告轉(zhuǎn)化頁時，如何快速獲得想要的信息，并為他們建立起對鯤云產(chǎn)品的價值認(rèn)同進(jìn)而實現(xiàn)轉(zhuǎn)化，這時就需重點打造信息分層。
整個頁面采用相對清晰簡約的視覺設(shè)計，圍繞「解決方案」這一核心有層次地規(guī)劃整個布局及各信息點優(yōu)先級。頁面Banner作為門面，也是整個頁面氛圍的關(guān)鍵所在，我們將重點信息突出，文案傳達(dá)簡潔有力，圖片素材的選取兼顧了鯤云品牌形象，整個頁面的營銷屬性做到盡量弱化。
訪客瀏覽頁面時，不一定會經(jīng)歷完整轉(zhuǎn)化過程才會轉(zhuǎn)化，我們設(shè)計了及時的行為號召入口，幫助訪客在某一節(jié)點做出行動時，實現(xiàn)快速轉(zhuǎn)化：
......
鯤云面向的客戶群不僅是面向To B，同時面向從To B衍生出To G這一種特殊劃分?；谶@一行業(yè)特點，我們在整站設(shè)計中有更多精致度和可視化的思考，它不需要五花八門的Banner、會員體系以及炫酷的交互動效。
我們只需要讓訪客“慣性”操作，制定更符合人性的策略來指導(dǎo)設(shè)計，讓訪客按照我們設(shè)想的行為去操作，這是最終實現(xiàn)增長的有效途徑。當(dāng)然，提高轉(zhuǎn)化率是我們引導(dǎo)設(shè)計的主要目的之外，降低訪客的跳出率、建立起訪客信任都在我們網(wǎng)站引導(dǎo)路徑設(shè)計的考慮范圍之內(nèi)。
增長超人為客戶做的從來都不僅僅是一個網(wǎng)站，而是為企業(yè)提供從營銷策劃到落地的一整套互聯(lián)網(wǎng)解決方案。網(wǎng)站只是一個載體，我們真正的價值在于能夠幫助企業(yè)找到正確的競爭優(yōu)勢，扭轉(zhuǎn)高成本低轉(zhuǎn)化的現(xiàn)狀，實現(xiàn)營收增長。
文章來源：站酷 作者：增長超人
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
因為智能手機的普及，用PC瀏覽的網(wǎng)站關(guān)注度正在下降。但是，托B2B數(shù)字營銷的福。PC網(wǎng)站今后也變成戰(zhàn)略中心。即使在B2C的領(lǐng)域，PC網(wǎng)站也是不可或缺。
對于在硬件方面沒有太大變化PC的網(wǎng)頁設(shè)計來說，也有技術(shù)被固定化的印象，實際上現(xiàn)在也正在接受時代的潮流而發(fā)生著變化。特別是下面那樣的環(huán)境變化，也給與PC網(wǎng)站的UI設(shè)計帶來很大的影響。
?顯示設(shè)備的多用化。
?智能手機應(yīng)用的普及化
?電子設(shè)備觸摸屏的普及
如果迎合趨勢將會取得成功不是嗎？這個基礎(chǔ)就是抓住用戶動向的變化，有必要完全理解這一變化。因此這篇文章是PC網(wǎng)頁 UI設(shè)計的最新動向，基于那些背景下的推測匯總。
1.Big UI / low Density / Long Page的潮流
舉例說曾經(jīng)的PC網(wǎng)站有很多是在有限的空間內(nèi)填入了大量元素的設(shè)計。但是現(xiàn)在UI部件變得有：大型化（Big UI）、較低的密度（Low Density）、長頁面（Long Page）的傾向。
以前是海外以創(chuàng)意型，初創(chuàng)型為中心網(wǎng)站所采用的設(shè)計，進(jìn)入日本的海外企業(yè)和前衛(wèi)的網(wǎng)頁設(shè)計師，采用那些理念設(shè)計的企業(yè)網(wǎng)站，漸漸地在日本也被廣泛應(yīng)用，這個趨勢也與扁平化設(shè)計相呼應(yīng)。2013年以后以Big UI / Low Density / Long Page 為基礎(chǔ)的設(shè)計理念在網(wǎng)站更新中使用增多了。
這樣的趨勢，不能單單看起來時興，其有合理的存在理由。在開發(fā)的立場，讓響應(yīng)式網(wǎng)站更容易實現(xiàn)。如果在用戶的立場來看，更容易瀏覽、更容易理解、不再迷茫，除了所說的這些以外，讓網(wǎng)站更好的利用觸摸屏，作為其更大的優(yōu)點。
近些年不只手寫板，筆記本電腦也安裝了觸屏。對于在沒有準(zhǔn)備手機網(wǎng)站的情況，在智能手機上，網(wǎng)站的頁面也被要求需要有一定程度的瀏覽。
觸摸屏，因為用手指的點擊，不能進(jìn)行精準(zhǔn)操作。因此用戶界面會變大。元素之間的必需留出充分的空間。如果用戶界面變大，密度變低，當(dāng)然頁面中表現(xiàn)元素要少，頁面變長，以滾動為前提了。
這篇文章之后要介紹很多趨勢，都是從Big UI / Low Density / Long Page的潮流中派生出來的。這不是最時尚的流行，但是現(xiàn)在是最適合用戶行為的設(shè)計思想。
2.1欄布局
作為Big UI / Low Density / Long Page合適的布局，就是1欄布局。
曾經(jīng)左右兩欄布局的PC網(wǎng)站是UI設(shè)計主流。在電子商務(wù)網(wǎng)站等有大量信息的網(wǎng)站中，3欄布局也很常見。但是現(xiàn)在去掉左右欄，只焦點于內(nèi)容部分，1欄布局正在增加。
對于用戶，不再有不必要的雜音映入眼簾，集中真正必要的內(nèi)容。文字更容易閱讀，圖片被展示的更大。
另一方面，映入眼簾的信息量減少，廣告等會變得有些分散。因此，對于用戶活動線路的設(shè)計，必須要更加謹(jǐn)慎。
另外，在側(cè)邊欄設(shè)置局部的導(dǎo)航條手法，與其他層級的網(wǎng)站相關(guān)，有讓用戶不再迷茫的突出優(yōu)點。去掉側(cè)邊欄的導(dǎo)航條，讓網(wǎng)站的層級降低，盡可能減少菜單，不止限于1頁內(nèi)的布局意味著網(wǎng)站全體的設(shè)計方法需要重新考慮。
反過來說，多層級化的前提是與網(wǎng)站的龐大度有關(guān)。有很多的1欄布局不能讓內(nèi)容被準(zhǔn)確的理解，據(jù)此判斷需要謹(jǐn)慎使用。
3.中對齊
1欄布局的一個問題是文字換行吧。文字充滿整個寬度時候會顯的很長，很難保持布局的美觀。如果1行的文字?jǐn)?shù)量超過40個字，人們就會覺得難以閱讀。不能因為是1欄就什么也都不考慮，寬度被文字占滿，是不可避免的。
解決這個問題的一個思路就是中間對齊。說到寬度很寬1欄的布局，中對齊和左對齊如何很好的組合，變成設(shè)計的要點。
中對齊的正確使用有一些值得注意的點。首先，必須避免用戶的視線忽視中間。例如，如果長文本中對齊，文章的開始點就會因此改變，變得難以閱讀。如果使用中對齊，短文章不必要換行，長文章必須左對齊。
還有，接近元素寬度充滿的時候，雖然用中對齊，也不能很好的解決。但是,寬度被占滿的情況是不存在的，看到中對齊不完整的位置就像懸浮一樣。為此，必須要在運用盒子和邊緣等下功夫，中對齊才不會出現(xiàn)違和感。
4.固定的頂部和頂部的超薄化
固定的頂部也很普遍。在很多的時候，這里搭載的是導(dǎo)航條。無論能進(jìn)入頁面內(nèi)哪個位置，都能立即回到主要部分。固定頂部的UI沒有側(cè)邊導(dǎo)航，當(dāng)頁面較長時，能確保使用的敏捷度。
但是，固定的頂部沒必要的時候，會有占據(jù)一些空間的缺點。因此，頂部只能加工的變薄。像曾經(jīng)PC網(wǎng)站的外觀那樣，采用多段式并且較厚的頂部是很困難的。
這就意味著必須在頁面內(nèi)限定元素。如果元素容納的多，頁面就會變厚，很難被固定化。菜單的數(shù)量應(yīng)該被限定，相對于以前，這方面的意識必須要加強。
5.固定的左邊導(dǎo)航
近年可以看到一些布局將導(dǎo)航條設(shè)置在左側(cè)。說起來也與曾經(jīng)2欄布局為主流時代的左導(dǎo)航在構(gòu)造和功能上有所不同。
畫面左邊被固定，最近有很多追隨滑動的按鈕。另外，內(nèi)容部分基本使用1欄布局，跟隨畫面寬度的進(jìn)行伸縮的液態(tài)布局被使用的數(shù)量也很多。
這樣的設(shè)計會帶來應(yīng)用程序的操作感。另外，有容易應(yīng)對多設(shè)備的特點。移動端優(yōu)先的設(shè)計，響應(yīng)式網(wǎng)站和液態(tài)布局即是使用PC也能對應(yīng)多種情況，有采用這樣的構(gòu)造的傾向。
但是，必須注意的是這樣新式布局，對于一般的用戶有很難留下第一印象的危險性。另外，對于菜單的多層級化的時候，連接和鼠標(biāo)經(jīng)過引出下一級菜單的操作是必要的，因此提高了操作的難易度。
從使用能力，全部的構(gòu)造等固定左導(dǎo)航的缺點來看，有必要搞清導(dǎo)入的妥當(dāng)性。
6.液態(tài)布局
在設(shè)備多樣化中，畫面的分辨率呈現(xiàn)前所未有的變化。以前，寬度符合960~980px就可以解決問題的這個規(guī)律變得難以通用。對于分辨率多用化的一個回答就是，符合畫面寬度的布局也就是液態(tài)布局。
液態(tài)布局是，元素和圖片不是用像素而是使用%。因此，無論看到什么樣的尺寸，分辨率的畫面，都會被布局成有一定的平衡?？梢越鉀Q符合小畫面的時候的缺點和符合大畫面的時候的缺點。
必須留意的是，對各個頁面“最合適化”的布局是不存在的。設(shè)想一下各種各樣的分辨率的畫面，匯集了最少破綻并被認(rèn)為是有共同的妥協(xié)點的布局手法。有些特定的尺寸會感到平衡被打破，有些程度是必須被允許的，意味著會布局成像網(wǎng)頁的網(wǎng)頁。
未完待續(xù)...
出典：http://baigie.me/sogitani/2015/02/pc-site-trend-2015/
翻譯：SISENdesign
在千禧年來臨之前，我們首先開始在單一視圖屏幕中進(jìn)行UI設(shè)計，這類屏幕在當(dāng)時最流行的尺寸是640x480。大多數(shù)時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區(qū)域或文本局部區(qū)塊中設(shè)置了內(nèi)部滾動條。毋庸置疑，當(dāng)時的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的，并帶有用于布局的表格。那是在智能手機出現(xiàn)之前，隨著事物的發(fā)展，我們經(jīng)歷了第一個向“響應(yīng)式”設(shè)計的根本轉(zhuǎn)變。我們已經(jīng)走了很長一段路，CSS已得到長足的發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計從2010年開始才真正獲得了專有工具。
圖表來源: https://www.webdesignmuseum.org/web-design-history
隨著CSS3的發(fā)布，我們獲得了對“媒體查詢”（Media Queries）的訪問權(quán)限（譯者注：隨著移動互聯(lián)網(wǎng)的興起,我們需要適配多種移動端設(shè)備,這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創(chuàng)造了“響應(yīng)式設(shè)計”一詞。十多年來，我們一直使用“響應(yīng)式網(wǎng)頁設(shè)計” (RWD) 創(chuàng)建網(wǎng)頁布局，作為一種網(wǎng)頁設(shè)計方法，僅需基于一種屏幕尺寸進(jìn)行設(shè)計，“響應(yīng)式”使我們的設(shè)計能夠適配各種設(shè)備和屏幕尺寸。
在早期，當(dāng)移動電話還不兼容媒體查詢或JavaScript時，“移動優(yōu)先”和”漸進(jìn)式增強”的概念就成為了非常流行的方法，當(dāng)時有很多CSS完全不受支持。
用我們今天的話來說響應(yīng)式設(shè)計，我們認(rèn)為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當(dāng)需要設(shè)計從桌面端調(diào)整為移動設(shè)備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。
很快，使用這種“響應(yīng)式”設(shè)計方法可能會被認(rèn)為與使用表格進(jìn)行頁面布局一樣過時—就像我們在90年代所做的那樣。
我們通過基于viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們?nèi)狈憫?yīng)“用戶需求”的能力，也缺乏將“響應(yīng)式”樣式注入“組件”本身的能力。
當(dāng)我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內(nèi)容，每個“塊”都由各種更小的“構(gòu)建塊”組成。這些組件拼湊在一起構(gòu)成我們的網(wǎng)頁。我們可以使用 global viewport information（全局視口信息）來設(shè)置這些組件，但它們?nèi)匀粺o法擁有自己的風(fēng)格。當(dāng)我們的設(shè)計系統(tǒng)是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。
好消息是這個生態(tài)系統(tǒng)正在發(fā)生變化，而且它正在迅速變化，這需要我們進(jìn)行一些思維轉(zhuǎn)變：考慮如何設(shè)計和定義組件樣式以及它們?nèi)绾芜m應(yīng)周圍環(huán)境。
CSS正在不斷發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應(yīng)式網(wǎng)頁設(shè)計” (RWD) 以來，僅僅10多年的時間，這個生態(tài)系統(tǒng)已經(jīng)準(zhǔn)備好迎接CSS發(fā)生一些相當(dāng)大的改變。
讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設(shè)計方法，以及我們?nèi)绾慰紤]界面設(shè)計。
簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應(yīng)”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設(shè)定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗偏好來調(diào)整用戶體驗。
這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：
這些將幫助我們構(gòu)建更具活力和個性化的網(wǎng)頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網(wǎng)站易于訪問的用戶。更進(jìn)一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經(jīng)在操作系統(tǒng)設(shè)置的偏好。舉個例子，當(dāng)用戶的操作系統(tǒng)偏好設(shè)定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應(yīng)先尊重他們的偏好，并為其他人提供“動效增強”的體驗。
另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設(shè)定），它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設(shè)置將我們的設(shè)計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發(fā)生。
CSS 中最令人興奮的新興領(lǐng)域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應(yīng)式”設(shè)計到基于“容器”的“響應(yīng)式”設(shè)計的轉(zhuǎn)變對發(fā)展“設(shè)計系統(tǒng)”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發(fā)展方向。
簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設(shè)置規(guī)則。這意味著任何組件都更加獨立，與現(xiàn)代設(shè)計系統(tǒng)保持一致，真正成為“即插即用”模塊，可以轉(zhuǎn)移到任何頁面或布局，而且無需根據(jù)新環(huán)境重新考慮所有內(nèi)容。
“容器查詢”為我們?nèi)绾我?guī)劃、設(shè)計和構(gòu)建特定組件提供了一種更加動態(tài)的方法，因為組件本身擁有它的響應(yīng)信息。
甚至Ethan Marcotte自己也表達(dá)了為什么“容器查詢”如此重要，我們應(yīng)該研究一下。
由于各種“形態(tài)因素”（form factors）的變化和擴展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內(nèi)容中，請記住，這是最具實驗性的，并且只是一項正在進(jìn)行的工作，仍在嘗試解決我們可能遇到的任何復(fù)雜問題，同時考慮未來“形體因素”可能會如何發(fā)展。
在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們?nèi)绾巫寖?nèi)容根據(jù)新環(huán)境進(jìn)行適配。例如，你可以在一個屏幕上放置一個收起的側(cè)邊欄（或菜單），并允許內(nèi)容在另一個屏幕上展開并隨頁面滾動。
我知道你在想什么，我們已經(jīng)從事網(wǎng)頁設(shè)計并使用“響應(yīng)式”來進(jìn)行網(wǎng)頁設(shè)計10余年了。我們對其相當(dāng)滿意，那么為什么要改變呢？如果我們真的以終局視角來看響應(yīng)式設(shè)計，那么它就是關(guān)于個人用戶的用戶體驗設(shè)計。我們正朝著一個與每一位個體用戶高度相關(guān)的時代邁進(jìn)。我們的網(wǎng)頁體驗應(yīng)該去適應(yīng)用戶的需求偏好。隨著設(shè)計系統(tǒng)的發(fā)展以及我們?nèi)绾蝿?chuàng)建更便攜的網(wǎng)頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基于各個層級來確定用戶的最佳體驗
考慮到這一點，這意味著我們現(xiàn)在可以使用基于頁面的媒體查（包括跨越屏幕的細(xì)微差別）來設(shè)計宏觀布局；使用容器查詢的組件設(shè)計微觀布局；使用基于用戶偏好的媒體查詢，根據(jù)用戶獨特的偏好和需求定制用戶體驗。
對于新的響應(yīng)式設(shè)計，有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協(xié)同工作的方式需要我們從根本上轉(zhuǎn)變我們對設(shè)計和用戶獨特體驗的看法。我們需要更加適應(yīng)這樣一個事實：即我們的設(shè)計不是靜態(tài)的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學(xué)會在這種模糊性中做出計劃。網(wǎng)頁和設(shè)計的未來變得越來越復(fù)雜，我們需要適應(yīng)和挑戰(zhàn)自己，理解“新響應(yīng)式”體驗的意義。
文章來源：站酷 作者:MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
失敗的網(wǎng)頁設(shè)計各不相同，但是優(yōu)秀的網(wǎng)頁設(shè)計則有著共通的特點。你需要思考人們想要的是什么，什么東西能夠觸動他們，讓他們欲罷不能，無法忘懷。
聽起來似乎很簡單，不是嗎？取悅用戶的關(guān)鍵在于像用戶一樣思考。并不是每一次創(chuàng)新、每一次重塑、每一種新技術(shù)都能讓用戶愉悅，那些真正易于理解、便于使用、降低難度的技術(shù)、設(shè)計手法和抓人的視覺元素，才是一切的關(guān)鍵。下面總結(jié)的7項秘訣，會讓你的網(wǎng)頁脫穎而出的。
定制化，或者說個性化，是今天網(wǎng)頁設(shè)計中最典型的趨勢之一。用戶希望瀏覽網(wǎng)頁的時候獲得更加私人的瀏覽體驗，無論是玩頁游還是購物。
看看世界上最著名的那些網(wǎng)站是怎么做的吧。Amazon 為用戶提供基于購買歷史的產(chǎn)品推薦，Netflix 則會推薦相關(guān)的作品、有待觀看的下一部，并且基于用戶 Twitter 上的內(nèi)容來進(jìn)行推薦。
每一個微小的自定義設(shè)計，都能讓用戶感覺這些用戶體驗設(shè)計是為他們而做的。同時，這種設(shè)計也會給用戶一種參與感和溝通的體驗，從而加深用戶的忠誠度。如此一來，用戶會更好地融入整個網(wǎng)站的用戶群或者社區(qū)。
另外一個大熱的流行趨勢，就是動效設(shè)計。它不僅能為用戶帶來驚喜，而且具備強大的引導(dǎo)性。
動效設(shè)計的精髓在于簡單。令人頭暈或者不知所措的動效，應(yīng)該不是你要的東西吧？動效應(yīng)該是有目的性的，和其他所有的設(shè)計元素一樣，有針對性，達(dá)成目標(biāo)是它存在的意義。
對動效或者說動畫最熟悉的，無疑是迪士尼。Frank Thomas 的《生命的錯覺：迪士尼動畫》中，就詳細(xì)總結(jié)了創(chuàng)造今天動畫的12個原則：
·擠壓和拉伸
·預(yù)期
·登臺
·連續(xù)動作和姿態(tài)對應(yīng)
·緩進(jìn)緩出
·弧形運動
·次要動作
·時序
·夸張
·立體刻畫
·吸引力
對于常見的問題，設(shè)計模式就是可靠且可復(fù)用的解決方案。簡而言之，最常見的信息和交互方式被整合到一個界面當(dāng)中，比如點擊按鈕，滾動頁面，滑動解鎖，它們都是設(shè)計師模式。
你需要熟悉這些常見的設(shè)計模式，并且在設(shè)計界面和交互的時候?qū)⑺鼈冇眠M(jìn)去。這符合用戶在體驗上的訴求，也是易用性的最基本構(gòu)成。
同時你也要在自己的設(shè)計中創(chuàng)造設(shè)計模式，在不同的頁面中使用相同、相似或者規(guī)則化的設(shè)計，讓用戶習(xí)慣。比如，不同頁面中的CTA按鈕的色彩保持一致，卡片式的元素使用相同的樣式，等等等等。
沒人會喜歡單調(diào)無聊的設(shè)計。你的網(wǎng)站應(yīng)當(dāng)同你的品牌保持一致的性格，擁有獨特的氣息。
要做到這一點，通常需要用到微妙走心的文案和親切自然的語調(diào)如果你真的不知道怎么做，可以看看MailChimp 是怎么做的。（請注意他們的文本和圖片是如何無縫地連接到一起的）
用戶同網(wǎng)站交互都是在屏幕內(nèi)進(jìn)行的，無論是桌面端還是移動端，整個體驗都是圍繞著屏幕進(jìn)行的。
這并不是一句廢話。屏幕是一個區(qū)域，它界定范疇，賦予概念，創(chuàng)造隱喻。這也解釋了為什么視差滾動和卡片式界面是如此的流行。這兩種概念將一定量的信息合理地放置到屏幕這個容器中，讓用戶隨之同下一個元素進(jìn)行互動。
如何運用好這個概念其實并不是那么容易。一個屏幕內(nèi)應(yīng)當(dāng)承載多少信息，需要仔細(xì)考慮。一個桌面端頁面所能承載的信息量在移動端屏幕上，可能需要劃分到幾個頁面當(dāng)中去。
從屏幕的角度來考慮問題，可能會讓你的計劃更加龐大復(fù)雜，但是這種考量是有價值的，這種基于屏幕或者基于設(shè)備的考慮能讓用戶感覺更加便捷貼心。
視頻、游戲、測試都爭取讓用戶能與之進(jìn)行互動，這種互動的目的在于驅(qū)動用戶參與到設(shè)計中來。用戶與界面交互的越多，用戶所獲得的體驗就越好。
不過，有趣的元素能讓這一切截然不同。
讓交互內(nèi)容盡量簡單，不要牽扯太多，讓用戶可以一目了然，讓他們輕松獲得反饋的信息，不用在冗雜的體驗中淪陷。這其實和美劇的5分鐘原則有著異曲同工之妙。
最后一個秘訣并非不重要，它甚至可以說是最基礎(chǔ)的原則：讓你的設(shè)計保持干凈、整潔和有序。使用柵格可以讓每一個頁面元素都有準(zhǔn)確的位置。將響應(yīng)式設(shè)計落實到每一個元素，能讓頁面能從一個設(shè)備兼容到另一個設(shè)備。
簡約風(fēng)和極簡風(fēng)能成為設(shè)計趨勢是有道理的。用戶可以更輕松理解這一切。簡約的視覺設(shè)計更容易交互。沒有復(fù)雜信息并且被精心設(shè)計的界面能更好地運作，賦予更好的體驗。
蘋果的官方App Store 和Google Play 都推薦過的游戲 Two Dots 就是個典型案例。誰都可以拿起手機毫無障礙地開始玩兒，它設(shè)計簡單干凈，容易互動，視覺元素周圍有足夠的空間，無需擔(dān)心誤觸。同時，其他游戲所具備的東西它也有——有趣好玩，可以共享得分，能分享到社交媒體。
界定一個網(wǎng)站的體驗與否有的時候并不是單一的標(biāo)準(zhǔn)，而今天所推薦的7條秘訣本身也更接近于基本的Guideline，了解用戶，熟悉趨勢才能提供優(yōu)秀的體驗。
文章來源：優(yōu)設(shè) 作者:陳子木
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
雖然直覺認(rèn)為按鈕是一種很簡單的控件，但在梳理按鈕相關(guān)知識點的過程中，發(fā)現(xiàn)小小控件其中包含了很多容易被忽略的細(xì)節(jié)。
按鈕幾乎是每一個頁面不可或缺的元素，對于按鈕的認(rèn)識基本停留在視覺層面，一個圓角矩形搭配一句文案就能拼湊成一個最基礎(chǔ)的按鈕。視覺是一個觀察的切入點，但僅停留在視覺層面還是不夠的，比設(shè)計表現(xiàn)更重要的往往是背后支持設(shè)計的理由。本文中的所有案例均來自線上產(chǎn)品，觀點僅是個人粗淺的理解，有疑問的地方歡迎大家討論指正。
1. 按鈕的來源
數(shù)字世界是現(xiàn)實世界的一種映射，許多數(shù)字概念，都可以在現(xiàn)實世界中找到原型。按鈕就是很生動的一個案例。在視覺表現(xiàn)上貼近現(xiàn)實生活中真實物體的外觀，擬合用戶心智模型，降低用戶的認(rèn)知和理解成本。
2. 按鈕的定義
如果從視覺形式上看，按鈕的組成很簡單，一個矩形容器加上文字或圖標(biāo)即可組合成一個常見的按鈕，但是僅僅從視覺層面定義按鈕是不嚴(yán)謹(jǐn)?shù)?。按鈕是一種重要的控件類型，而控件是圖形用戶界面（GUI）的主要構(gòu)成模塊。想要深入理解按鈕，就必須要求我們首先理解什么是控件以及控件的分類。
3. 控件分類和介紹
定義：控件是用戶和產(chǎn)品間進(jìn)行交流的屏幕對象，是圖形用戶界面（GUI）的主要構(gòu)成模塊。
分類：根據(jù)用戶目標(biāo)，可將控件分為 4 大類。
每一類控件下又有更多具體細(xì)分。所有界面中常見的具體控件都可以根據(jù)其功能找到所屬的類別。
4. 按鈕的分類
在以上各個細(xì)分控件中，我將部分控件歸入按鈕類別：
命令控件下的：傳統(tǒng)按鈕、圖標(biāo)按鈕、文字按鈕
選擇控件下的：開關(guān)按鈕、單選按鈕、組合圖標(biāo)按鈕、狀態(tài)切換按鈕（開關(guān)和復(fù)選框樣式比較固定，為了方便討論，姑且不算在按鈕范疇之內(nèi)）
因此如果以按鈕為主體，以功能屬性為分類條件，可將按鈕分為：命令型按鈕和選擇型按鈕
不論從功能維度、交互維度、視覺維度上看，這兩類按鈕各自都有不同的特點。
選擇型按鈕非瞬時狀態(tài)有：“選中”和“未選中”兩種互斥狀態(tài)?？梢园堰x擇型按鈕理解為某種狀態(tài)的確認(rèn)和展示。
命令型按鈕的非瞬時狀態(tài)只有一種：正常狀態(tài)，當(dāng)用戶點擊命令型按鈕后，命令即可下達(dá)。可以把命令型按鈕理解為一個動作，點擊按鈕代表著立即執(zhí)行這個動作。
介紹完了命令型按鈕和選擇型按鈕在功能、交互、視覺層面的區(qū)別點后，我們再來看看實際工作中常見和常用的按鈕類型。
GUI 中“按鈕”的概念來源于真實世界中的按鈕。真實的按鈕具有一個非常顯而易見的特點：擁有一個適合點擊按壓的受力面，這個受力面就是可點擊感的來源。試想一下，假設(shè)一個按鈕只有針尖般大小，且不說你是否能認(rèn)出這是按鈕，即便你知道這是按鈕，你會有按下的欲望嗎？真實情況下，擺在人們面前的按鈕面積越大，想按壓的欲望就越強。因此傳統(tǒng)按鈕的最顯著特點就是擁有一個承載內(nèi)容的“受力面”，也就是承載文字或者圖標(biāo)的“容器”。受限于早期的顯像技術(shù)，以及與真實世界的對照，這種“容器”通常一般都是矩形，后期漸漸衍生出更加柔和的圓角。
風(fēng)格發(fā)展：
在相當(dāng)長的一段時間里按鈕都有三維凸起的特征，進(jìn)一步鞏固了按鈕的可點擊感。不過進(jìn)入移動時代后，這種流行趨勢發(fā)生了改變，按鈕的三維印記被不斷移除。用戶已經(jīng)建立起了成熟的心智模型，即便按鈕在視覺上越來越“平”，也不妨礙點擊行為的發(fā)生。結(jié)合多年的使用經(jīng)驗，用戶已經(jīng)將矩形形狀這一特征和按鈕牢固地聯(lián)系了起來。即便現(xiàn)在的按鈕大多都是扁平化，用戶也能一眼就辨認(rèn)出按鈕屬性。
常見按鈕一般是由容器和內(nèi)容組成。
容器層面
移動端比較主流的按鈕形狀有：矩形、圓角矩形、膠囊形和圓形 4 種。一般，在人們的認(rèn)知里，圓角越大傳遞的感覺越圓潤親切。其實形狀本身并沒有好壞區(qū)別，與單純視覺偏好相比，元素的統(tǒng)一性更加重要。一旦選定了某一種按鈕形狀，就需要保證所有場景中出現(xiàn)的按鈕都盡量看上去整體統(tǒng)一。
視覺上，按鈕越大，越吸引用戶注意，決定按鈕大小的主要依據(jù)是按鈕在頁面中的優(yōu)先級。而一個產(chǎn)品涉及到頁面眾多，如果不同的頁面元素之間缺乏統(tǒng)一的調(diào)度規(guī)則，就會出現(xiàn)按鈕尺寸過多，沒有規(guī)律，細(xì)節(jié)混亂，效率低下的情況。為了既能適應(yīng)不同的場景，又能保持產(chǎn)品級的控件統(tǒng)一，一般要給按鈕尺寸設(shè)定幾個檔位以適配不同頁面需求。排除個別特殊頁面，一般把按鈕設(shè)置為 5 個優(yōu)先級梯度檔位就足以滿足設(shè)計需求。
我們可以從優(yōu)先級從高到低的順序，將按鈕分為：特大、大、正常、小、特小 5 個尺寸檔位。
下面展示最常使用的三個檔位，大、正常、小檔位。
按鈕的大小、形狀、顏色三個維度中，人眼是對顏色信息最為敏感的。在一個頁面中，突出一個元素的方式有多種，其中最簡潔有效的方式就是用顏色進(jìn)行突出。顏色包含了色相、飽和度和明度三種屬性，改變顏色的不同屬性，都會對按鈕的表意產(chǎn)生影響。同時，不同的顏色代表著不同的含義，配色時需要加以注意。
容器除了基本的尺寸、形狀、顏色之外，還有多種樣式。
上文介紹的容器是強面性的，此外，容器還有弱面性、線性等樣式。
雖然現(xiàn)階段的按鈕越來越扁平，但在扁平的趨勢下，依舊有發(fā)揮設(shè)計創(chuàng)意的空間。
顏色漸變、投影、動效都是常用的設(shè)計手法。
內(nèi)容層面
聊完了“容器”部分，再來看看容器承載的“內(nèi)容”又有哪些細(xì)節(jié)點。
并非所有按鈕都需要容器，尤其當(dāng)按鈕密度較大時，去掉容器只保留內(nèi)容，可以更好地提高空間利用率，簡約視覺。
比圖標(biāo)按鈕更輕量的按鈕類型是文字按鈕，以文字的形式展示，和界面融合度更高，當(dāng)用戶有需要時才會注意到文字按鈕的可點擊性。
這種組合形式相當(dāng)常見，將多個功能整合在一個區(qū)域內(nèi)，如底部工具欄（ToolBar）或者頂部導(dǎo)航欄（Navigation Bar）。不同按鈕承載著不同功能，側(cè)重越明顯，越利于用戶快速識別并決策。
上面介紹的是常見的按鈕形式，除了以上按鈕，有一些按鈕形式專門適用于某些特殊場景。
如懸浮按鈕、膠囊按鈕等。
一個頁面往往有多個按鈕，不同按鈕承載不同功能，功能之間有相同或者不同的優(yōu)先級，因此按鈕之間也存在這相同或者不同的視覺優(yōu)先級。
我們分兩類情況來討論：相同優(yōu)先級的按鈕和不同優(yōu)先級的按鈕組合。
上文羅列了實際工作中常用到的一些按鈕樣式，最重要的步驟是分清按鈕主次，使用不同的樣式進(jìn)行搭配。
優(yōu)先級強到弱：
強面性按鈕、弱面性按鈕/線性按鈕、圖標(biāo)按鈕、文字按鈕
碎碎念：
本文中出現(xiàn)的部分名詞，比如“弱面性”、“容器”等，只是為了便于交流和統(tǒng)一指向，并沒有具體權(quán)威出處。文中提及的按鈕類型均來源于線上產(chǎn)品，樣本有限，適用場景相對固定，還有很多樣式?jīng)]有一一遍歷。但掌握了如何選擇樣式的原理，就可以根據(jù)日后具體需求做出合理方案。文中出現(xiàn)的數(shù)據(jù)都是經(jīng)驗型數(shù)據(jù)，如按鈕按下狀態(tài)是在正常狀態(tài)下添加 10%純黑的遮罩，文字字號大小等，這些都是建議型數(shù)據(jù)，可以根據(jù)具體情況靈活調(diào)整。
文章來源：站酷 作者：設(shè)計師doo
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://sillybuy.com
