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