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