本系列文章旨在由淺入深、由理論到實踐地介紹 VR 設計。無論你在做哪個領域的設計，都能通過這個系列了解 VR 設計的特點。本文是第一集，深入分析 VR 界面的文字設計。
文章來源：優設 作者：愛奇藝XRD
今天，90％ 的媒體互動都是基于屏幕的，通過手機，平板，筆記本電腦，電視和智能手表來與外界產生聯系。多屏設計已成為商業設計中不可或缺的一部分，響應式設計正迅速成為常態。作為 UI 設計師，我們希望為我們的產品在不同尺寸下都能為用戶提供良好的用戶體驗，柵格系統可以幫助我們做到這一點。
即使是我們只針對一個尺寸進行設計，我們也經常面臨設計布局方面的問題。合理運用柵格系統可以幫助我們控制布局結構并實現一致和有組織的設計。柵格系統就像無形的膠水一樣凝聚一個設計，即使元素看上去是彼此分離，但通過網格將它們連接在一起，實現良好的層次結構，位置關系和一致性。
設計師和開發者之間的協作過程中，柵格系統在前端開發中是被應用的很廣泛一套體系，許多優秀的設計都使用了柵格系統，使用柵格系統可以加速開發并保證視覺還原。柵格系統雖然是傳統設計方法中的一部分，但它仍舊能幫助我們去設計這個多終端的世界。看到這里，你可能非常想知道柵格系統在頁面中是如何運作的，那么今天我們一起來學習并且實踐我們的格柵系統。
「The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.」
「柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。但是必須學習如何使用網格。這是一門需要實踐的藝術?！?
——Josef Müller-Brockmann《平面設計中的網格系統》作者
柵格系統可以讓你依靠秩序與邏輯去完成設計。
早在 20 世紀初，德國、荷蘭、瑞士等國的平面設計師們發現通過維持視覺秩序，從而使版面能更加清晰有效地傳遞信息，二戰后這種理念在瑞士得到了良好的發展，直到 20 世紀 40 年代后期，第一次出現了使用網格進行輔助設計的印刷作品。由瑞士設計師大師 Josef Müller-Brockmann（約瑟夫·米勒-布羅克曼）所著的《平面設計中的網格系統》一書，自 1961 年出版以來暢銷至今，對設計界有著深遠的影響。史稱 Swiss Typography Movement （瑞士新浪潮平面設計運動），后來成為全球風靡的 International Typographic Style （國際主義設計風格)）。
△ 約瑟夫·米勒一布羅克曼 (Josef Muller-brockmann, 1914-1996)
瑞士的一位平面設計師和教師。1958 年任《新平面設計》（New Graphic Design）主編 1966 年被任命為 IBM 的歐洲設計顧問。布羅克曼因他的極簡主義設計與簡潔的排版、圖形和色彩而聞名，他的設計對 21 世紀的眾多平面設計師都產生了重大影響。
1. 減少決策成本提高設計理解力
柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；UI 設計也是需要理性的、客觀的、具有數學邏輯美感的。熟練運用網格系統能夠讓你的設計更有秩序和節奏感，頁面信息的展現更加清晰，提高閱讀效率，從而提供給用戶舒適的使用體驗。加快認知速度。這意味著用戶在使用產品完成特定的任務時，例如發送消息，預訂酒店房間或乘車。用戶能夠連貫地理解并找到下一條信息或下一步要采取的步驟。
2. 響應化
因為人們使用不同類型的設備與產品進行互動，從智能手表的小屏幕到超寬屏電視，交互是流暢的，并且沒有固定的尺寸。使用產品時，人們通常會在多個設備之間切換，以完成該產品的單個任務。所以響應式設計不應該是一種品，而是一種必需品。這意味著設計師不能再為單個設備的屏幕構建。多設備環境迫使設計人員根據動態網格系統進行思考，而不是固定寬度。使用網格可以跨不同屏幕尺寸的多個設備創建連貫的體驗。
3. 加速團隊協作設計
當多位設計師共同設計產品時，一個統一標準就變得尤為重要。如果沒有一個統一的框架去約束的話，我們的產品的頁面和組件的標準可能各式各樣，這樣的話整個產品的頁面都會比較混亂。因此，網格系統有助于將界面設計工作分開，因為多位設計師可以在統一的布局下進行不同部分工作，并且無縫集成并保持連貫。
4. 加速開發并保證視覺還原
大多數設計項目的實施，涉及到設計者和開發者之間的協作。柵格化提高了頁面布局的一致性和復用性；避免了設計師與開發者在細節上的反復溝通確認，從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。
1. 列和槽（Columns and Gutters）
列（Columns） 和槽（Gutters）。列（Column）是內容的容器，水槽（Gutter）用來調節相鄰兩個列的間距，把控頁面留白；列和列間距加上頁面邊距（Margin）加起來屏幕的水平寬度。列和列間距的內容區域（Content width）由 N個列和（N-1）個水槽組成。通常情況下，web 端采用 12 列，平板采用 8 列，手機采用 4 列。當然，你可以根據項目特點來設計你的網格系統，列和水槽的寬度我們可以利用 8 點網格系統來定義，下面會講到。列的數量越多，頁面就會被分割得越「碎」，在頁面設計時就會越難把控，適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的頁面設計，列間距寬度數值對頁面的影響，與外邊距大體類似，即間距越大頁面越輕松簡單，反之亦然。用戶已經習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此豎直方向可以無限延伸，所以柵格系統在豎直方向的柵格可以不體現出來，我們在執行設計時只要在水平方向保持規律的變化就可以了。
2. 頁面邊距（Side Margins）
頁面邊距就是內容區域（Content field）以外的空間，比較推薦的設計就是頁面邊距可以隨著屏幕尺寸的增大而增大。頁面邊距在移動設備上通常是 12Px到 40Px 之間，在平板設備和桌面設備頁面邊距變化就相當多了。在響應式設計中，你選擇了一個頁面邊距之后，縮小頁面寬度時頁面還是會有你設置的最小頁面邊距，直到到達下一個響應點（breakpoint）。當你增大頁面寬度時，頁面就有更多的頁面邊距，直到頁面寬度到達下一個響應點（breakpoint）。
3. 模塊（Field Elements）
模塊就是你的設計區塊，可以是一段文字，一張圖片，或是其他更加豐富的元素。背景元素并不能算作是設計模塊，所以并不需要遵循柵格系統。模塊的定義是很靈活的，它可以是個小的單位或是元素，也可以是一個元素豐富的區塊。
以 12 柵格系統為例，一個 12 柵格系統可以根據業務需要被 2 等分、3 等分、4 等分、6 等分、12 等分，還可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不對稱分割，具體采用哪種比例的組合需要我們根據自己業務需求來定。
4. 8 點網格（8pt spatial system）
柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局，而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與布局，然后再填充內容、調整細節。
由于列跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的重要一步就是需要先定義好柵格的原子單位「網格」的大小。目前最普適易用的就是 8 點網格。我們也可以利用 8 點網格法來制定產品中的間距，建立 8 點為一個單位的網格，使用 8 的倍數來定義模塊的間距與元素的尺寸。8 點網格有如下幾點優勢：
如果設計上沒有立即可識別的間距系統時，這種設計可能會讓用戶感覺廉價、不一致，而且通常不值得信任。如果設計上遵循一個 8pt 網格系統時，節奏變得可預測和視覺上的愉悅。對于用戶來說，這種體驗是經過修飾和可預測的，這增加了用戶對品牌的信任和喜愛。
無論有多少個設計師在協同合作，現在都有一個一致的間距規范，決策成本將大大降低。設計師可以輕松地從另一個設計師停止的地方開始設計，或者輕松地并行構建。我們定義下規范可以及時和開發同學溝通，因此可以為工程師節省時間。
5. 基線網格（Baseline Grid）
基線網格由密集的水平行組成，這些行提供文本的對齊和間距準則，類似于您在直紋紙上書寫的方式。在下面的示例中，每 8px 行在紅色和白色之間交替。
△ 基線網格
提示：將所有行高設置為基本單位（8x 或 4px）的增量非常重要，這樣您的文本才能與基線網格完美對齊。
△ 字體行高
1. 什么是響應式？
設計師需要通過設計讓內容在不同的平臺上體驗最大化，確保讓用戶在任何一個屏幕上看到內容的時候，會覺得這些內容就是為這個平臺而設計的，而不是單純的縮放而來。這種無縫的體驗，才是跨屏幕設計的真正難點所在。想要制定一套針對不同設備和屏幕的設計方案，你需要一整套的策略。用戶體驗同時包含了性能、交互、效率等多方面內容，也就是說，對于一個線上的響應式頁面，我們不僅要關注視覺上看到的，也要關注我們操作、使用時的感受，這些綜合因素最終影響著用戶使用時的效率與體驗。
2. 響應式設計的核心步驟
確保核心的用戶體驗
雖然用戶體驗是無處不在的，但是對于特定產品，最核心的體驗是存在的。產品通常是用來解決用戶所面臨的特定問題的，它的這一特質讓產品變得有意義。關鍵的內容和關鍵的功能的組合，通常構成了產品的核心用戶體驗。如果你并沒有想明白這個問題，不妨問問自己：用戶需要完成哪些最常見/最重要的任務？找到問題的答案之后，你的產品就應當從各個方面、各個渠道，完整而全面地支撐這些功能，幫助用戶完成這些任務。舉個例子，Uber 的核心用戶體驗是隨時隨地叫車，無論設備的屏幕大小如何，你進行的設計全部都應該圍繞著這個需求和功能來進行。叫車是 Uber 的核心功能，即使使用 Apple Watch 這種極小的屏幕尺寸都應該順利地完成這個任務。
敲定你的產品所覆蓋的設備類型
現在的移動端設備屏幕尺寸各不相同，單獨為某一個設備設計內容無疑是不現實的。根據你的產品覆蓋人群、受眾分類、使用場景，綜合考慮你的內容會優先呈現在哪些設備和平臺上，然后有意識地篩選出常見的設備類型：手機，平板，桌面端，智能電視，智能手表……
不同的設備組合通常是基于不同的場景、需求和服務來構成的，用戶會針對不同的屏幕進行不同模式的交互，甚至處理的內容也會有差異。比如說，在手機上，用戶更加傾向于使用輕量級的任務，并且進行一定量的溝通和交流。在平板上，用戶行為更多集中在內容消費上，并且目前平板的使用量被認為在逐步降低。桌面端依然是用戶完成較為專業、復雜任務的首選平臺，足以應付復雜多樣的內容。了解各種設備類型和使用場景是用來構建用戶體驗的關鍵。
針對不同內容來匹配用戶體驗
并非所有的內容都符合不同設備的使用場景，比如智能手表就不適合展示大量的文本內容。你的產品所覆蓋的設備組當中，每種設備的使用場景不同，應該匹配的用戶體驗也不一樣。移動端用戶和桌面端用戶的需求就是不同的，場景差異也很大。以 Evernote 為例，它可以在多種不同類型的設備之間同步和切換，其桌面端版本就針對用戶的內容需求進行了優化：Evernote 的桌面端應用程序針對閱讀性的內容和多媒體進行了優化，而移動端的 Evernote 則強化了拍攝記錄、圖片和音頻記錄的功能：其次，不同的設備屏幕具備不同的輸入方式，設計師如果忽略輸入方式上的獨特性，也常常會出現許多問題，這里就不擴展開來了。
優先為最小的屏幕做設計
一直以來，設計師都習慣從最大的屏幕著手設計，最后考慮最小的屏幕上的顯示效果，這意味著絕大多數的設計都是從桌面端開始設計的，通常桌面端的內容和功能更全面。當桌面端的整體設計完成之后，再推進到其他設備端的設計。然而，在進行桌面端設計的時候，我們常常會遭遇「廚房水槽」困境：由于產品通常會牽涉到多個利益相關方，許多多余的功能會被加入進來。而實踐經驗表明，移動端優先的設計往往能夠更好的專注于核心功能，更適合作為產品設計的起點。當你優先設計最小屏幕所需要的界面的時候，這種局面會強制你從最關鍵最重要的地方開始設計。這也是之前設計圈和產品開發領域一直所強調的「移動端優先」的策略的由來。在此之后，再進行平板、桌面和電視端的設計，就是一個自然地做加法的過程了。在絕大多數的案例當中，最小屏幕通常是手機屏幕。
測試你的設計
產品的測試環境并不一定都得是在現實世界中尋找，但是在盡可能讓真實的用戶來做可用性測試，并且在產品發布之前解決所有的用戶體驗上的問題。
3. 為何要利用柵格系統來進行響應式設計?
響應式可以響應的前提有兩點：1、頁面布局具有規律性、2、元素寬高可用百分比代替固定數值，而這兩點正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式的設計是順理成章的，也比較快捷，所以響應式與柵格化天生一對好搭檔。
第1步：確定列的數量
第一階段先不要限制自己的列數。首先，創建一個低保真或高保真的原型。設計一些基本元素和用戶流程。在此之后，就開始設計最優的列數和大小。如果在項目開始設計之后不得不改變我們的柵格系統，不要有負擔，我們需要有一些試錯的空間。
我們在設計頁面時，用到最多的布局方式就是等分布局，即頁面內容區域被 N 等分，每一份的寬度則根據屏幕寬度自適應調整。那么就從這個角度出發，思考一下頁面的網格應該設置為多少列，才能的滿足各種等分布局的需要。與 web 類似，移動端最方便的網格之一是 12 列網格。這個網格將允許我們在一行中同時放置偶數和奇數個元素。
對于移動端來說，12 列網格的缺點是一個列的寬度太小，你可能很少創建一個列寬度的元素。如果你選擇 2、4 或 8 列網格，請記住在一行中放置奇數個元素可能會出現的問題。
Pro-Tip：
界面設計通常包含數百個不同的頁面，因此，一個網格可能不適合所有的頁面。如果需要，創建額外的柵格系統，但不要忘記設計的一致性。網格系統的一致性：相同的布局邊距、列之間相等或成比例的水槽，以及更改列本身的寬度時其他模塊也需要保持相同的比例。
第2步：定義水槽和邊距
首先，讓我們先翻閱目標屏幕的設計 Guideline，以找出通常頁面邊距（Side Margins）。目前，Android 和 iOs 的最小推薦布局邊距為 16pt。web 端則依照屏幕尺寸不同而不同。這意味著，如果你希望遵循系統指南，則頁面邊距不應小于 16pt。（但可以更大的）
在選擇 12 列網格時，列之間的水槽不應該太大，因為由于列的寬度小和它們之間的大寬度的水槽，列將在視覺上產生分裂的感覺。同時我建議你選擇與8pt 間距系統成比例的水槽大小。所以布局的水平和垂直節奏會相互重疊。水槽與頁面邊距成比例。那么網格更加一致，也將允許我們輕松地在其中放置特殊元素，如輪播（carousel）。
第3步：定義 8pt間距系統
了幫助不同設計能力的設計者們在界面布局上的一致性和韻律感，統一設計到開發的布局語言，減少還原損耗。在大量的實踐中，我們提取了一組可以用于 UI 布局空間決策的數組，他們都保持了 8 倍數的原則、具備動態的韻律感。經過驗證，可以在一定程度上幫助我們更快更好地實現布局空間上的設計決策。定義網格系統方法很多，如運用 8 點網格系統、斐波那契數列、某最小原子單位的增量、從底層系統參數化定義間距等，我們以最小原子單位的增量為例去定義網格系統。最小單元格的數值選擇需要從兩方面考慮：
在適用性方面，4、6、8、10 這四個數值都是基本可以滿足的，在靈活性方面，4px 表現最佳，但是頁面就會被分割的非常細碎，在設計時比較難于把控。因此我們需要根據 APP 的實際情況選擇合適的數值，4px 或 6px 單元格比較適合頁面內容信息較多，布局排版比較復雜的產品。而 8px 單元格對一般的設計場景都可以很好的滿足，比較適合大多數的 項目，因此是比較推薦使用的。
那么假設我們以 8 為基準的去延展系統間距，得到如下間距系統：
1、2、8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數或能被 8 整除
但是目前間距數量太多，過于細碎也會導致間距比較亂，所以我們繼續優化梳理（以 6 為基準，前面個數是后面個數的 2 倍遞增），得到以下間距系統：
1、2、8、16、24、32、48、64、80、96
第4步：sketch布局設置
利用 sketch 的布局設置功能，即可快速搭建出網格系統的參考布局，在平時做設計的過程中，可以經常使用 Ctrl+L 快捷鍵切換布局的顯示，提高設計效率。
我們來解釋一下這些設置分別是什么：
在傳統的柵格化系統設計中，列的寬度和水槽的寬度是保持不變的，只是列的「數量」發生變化。為什么要這么處理呢？這是為了讓設計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進行折行顯示在第二行上。不需要做任何的調整，因為已經知道它位于第四列上了。在手機上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。但是目前我有更多的響應策略，例如當視窗（Viewport）發生變化時，內容區域的元素如何去響應，具體到我們當前的柵格系統，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調整。
1. 固定柵格或是斷點系統（Fixed boxes or breakpoint system）
固定網格，列寬和水槽寬不會改變，只是改變列的數目，當窗口縮放時，排版布局不會發生任何改變，只有當達到一個臨界值（開發那邊設置好的固定的值），界面才會發生改變。在此之前界面排版都是不變的，就像一部分被切掉了。
如果開發那邊寫了一個固定柵格，當你從桌面縮小到平板電腦，就像是在桌面的瀏覽器寬度時，你不會看到任何變化，設計就像是被剪掉了一樣。但當達到平板屏幕尺寸臨界點時，設計布局馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續減小這個值，同樣的事情也會發生，在到達另一個臨界值之前，設計看起來都是不變的。下面是常見的斷點系統（Breakpoint System）
如圖，響應式是以視窗的最小寬度作為基本依據來制定每種寬度下 Columns、Gutters、與 Margins 的響應策略，也就是說 Viewport Min-width 是做出響應的觸發條件，視窗每達到一個最小寬度，就會觸發該寬度下預設的頁面布局方式，而每種布局都是在該寬度下的最佳布局，也是因此，響應式才會在各種復雜分辨率條件下都能給用戶比較好的體驗。
每個視窗寬度的最小值是觸發響應的關鍵值，因此我們給這些用于觸發的關鍵值起了個名字叫「Breakpoint」，每個 Breakpoint 觸發一種響應策略。
2. 流動柵格（Fluid Grid）
流動柵格系統是編輯內容，儀表板，圖像，視頻，數據可視化等理想的響應策略。當窗口縮小時，內容將動態地發生變化，文本會進行換行，元素也會變窄。然而，這些元素在內容寬度縮小到下一個臨界值之前，布局是不會變化的。在各種情況下，對用戶來說，擴展內容的大小比擴展可見內容的數量更有用。
所以我想說的是，斷點 BreakPoint 只是一個更改布局的參考點。這就是為什么列寬和水槽的數量不會改變的原因，因為我們想讓設計師在考慮布局時能夠更容易地創建一致性。內容寬度會隨著窗口的縮放而發生改變，例如圖片會縮小，文本會換行。水槽的寬度不一定是固定的，可以隨著頁面寬度變化。
在每個斷點處，列計數是固定的，列寬度是最小網格 8PT 的倍數。行高是列大小的倍數，遵循推薦的縱橫比。邊距和填充是小單位的固定倍數。在斷點之間，實際列寬是網格區域的百分比，而不是一個小的單位倍數。內容尺度流暢。
首先從所以屏幕大小中選擇一個基本尺寸，然后按照推薦的縱橫比以基本大小的倍數構建每個響應式尺寸。當每個塊使用相同基礎大小的倍數時，就會出現網格。遵循此方法可確保柵格系統一致性，甚至跨產品的一致性。
3. 混合柵格（Hybrid Boxes）
在實際項目中，使用流動網格和固定網格的組合也是常見的做法。網站通常是流動網格，因為它要去適應各種不同終端的大小。后臺系統設計、工具型的界面設計就比較經常使用網格和流動網格組合的形式。例如的后臺管理系統（dashboard）側邊欄是固定網格，右側內容是流動網格?；旌蠔鸥裨诿總€維度上有不同的縮放規則，所以它們不使用統一的縮放比。當用戶需要調整瀏覽器的大小以使內容在一個維度上伸縮而在另一個維度上不伸縮時，便使用混合網格。
1. 靈活面板（Flexible panels）
靈活的面板允許折疊和擴展狀態。面板的展開狀態為固定寬度，用戶無法調節。當用戶將鼠標懸停在折疊的面板上時，面板就會展開。當靈活的面板擴展時，它們要么壓縮內容和網格，要么將內容推到瀏覽器邊緣之外。
2. 固定面板（Fixed panels）
固定面板保持靜態寬度，不能折疊，也存在于響應網格之外。
3. 懸浮面板（Floating panels）
此面板樣式漂浮在主要內容區域之上，不影響響應網格。浮動面板將任何 UI 元素隱藏在其下方，用戶必須將其移除。內聯菜單、下拉菜單和工具提示也是浮動的。
寫這篇文章的目的是想提供一些關于如何在響應式設計中使用柵格系統，我知道對于我自己來說，我花了很多時間理解網格是如何工作的。我在 YouYube 上看了很多視頻，也閱讀了大量的文章，但每個人都在關注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。
你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的，你將會開始閱讀這些設計系統。為了幫助理解，這里有一些設計系統概述了它們的網格使用：
在完全理解了網格的工作原理之后，你將成為了一名更好的設計師，因為你知道了你的設計將如何在臨界值之間進行轉換。你也可以落地你的設計，使它們能夠達到像素級完美。這樣的規范帶來了更一致，更簡潔的設計，當用戶從一個界面到另一個界面流轉時，這真的提升了產品的檔次。我建議在你的設計中去應用這些網格，并和開發同學一起，以實踐的方式將它們落地，這將會是一個非常不錯的進步。
文章來源：優設 作者：IvanZheng
你不知道，香港設計有位比教父更厲害的教父。
香港自古以來作為中國一部分，具有深厚的中國文化根源，但同時又歷經156年的西方統治，注定其文化基因會產生特殊成分，這些文化特質體現在了流行曲、武俠小說、電影制作等諸多方面，都產生一定國際影響，而其中同樣具有代表性的還有香港設計。
香港設計起步較晚，但發展突飛猛進，很快涌現出大批人才產生了國際影響力，成為“遠東設計風貌”中的代表地區。而回歸前夕，香港設計師也開始熱衷頻繁往返內地，與國內設計師或藝術院校進行學術交流，并且逐漸開展在內地的業務，對內地的設計風貌也產生一定的沖擊。
而香港跟深圳在地緣上親密無間，深圳近年被冊封為中國設計之都，其地位來源與香港的影響有否關系呢？香港設計是如何走向國際的？香港設計對中國設計師又存在什么影響跟啟發？香港設計發展到目前有否青黃不接？
帶著這些有意思問題，我們一起來聊聊香港的現代設計。
我們在上一期聊日本設計時，談到“遠東平面設計風貌”，其實香港就是這種風貌的代表中心，不清楚這個風貌的朋友們可以去回顧一下設計史太濃欄目上一期內容：“日本的設計水平為什么那么高”。我們這里大致給出幾張海報讓大家感受一下。
香港的現代設計發展比內地要早大致20年光陰，也就是1960年左右啟動，至今時間長達60年，期間出現大量優秀設計人才與優秀設計，屢屢斬獲國際設計大獎，并且對于香港文化的推動，創意產業的提升，作出了諸多突出貢獻。香港得以成為遠東設計風貌的代表有幾個重要原因，包括了地域、政府態度跟教育等。
但在敘述這些原因之前，我想先給大家來點地理知識的普及，就是什么叫“遠東地區”？
遠東其實是歐洲人的概念，是指以歐洲為中心后，東邊的國家，所以遠東前面就有了“近東”及“中東”了，中東地區因為物質資源太豐富，常年戰爭不斷所以比較知名，近東極少聽，遠東是隨著亞洲幾個國家的崛起所以頗為知名。
遠東傳統意義上包含的國家有：中國（當然包含了港澳臺）、朝鮮、韓國、日本、蒙古、菲律賓、越南、新加坡、俄羅斯東部等等。而需要強調的是，設計圈里談遠東風貌一般不含日本，原因是日本設計足夠厲害可以獨立成項了，好比一個明星組合里某個成員爆紅，獨立單飛的情況一樣。
而香港平面設計，在國際印象中，也基本滿足單飛的條件，當然我說的僅僅是平面設計。我們將話題回到形成這個情況的原因，看看有否值得內地設計圈學習借鑒的地方。
1） 地域
香港沿海地區非常多，并且地理上處于亞洲心臟地帶，交通優勢非常明顯，通常也被視為通過中國內地的一個門戶，于是成為了內地、日本、韓國、東南亞、美國及泛太平洋地區交流的中心。
而且香港過去被英國統治了一個多世紀，讓市民都兼備兩種文化血統，精通中英文，并且對世界各地的文化時尚有足夠的包容度，隨著商業發展與經濟騰飛，香港人也習慣讓子女海外留學，這個留學群體就包含了大量設計師，留學歸來的設計師帶來諸多國際化設計語言，同時也吸引一部分優秀設計師來港發展，這一塊我們后面將會詳細描述。
2）政府態度
60年代開始，香港旅游業開始興起，大量國際友人訪港，于是1966年香港政府就成立了“香港貿易發展局”，跟當時的香港平面設計發展處在同一個時間，這個機構的職能主要是向世界推廣香港，由此就產生了大量的設計需求，并且香港政府有意借助設計為推廣手段，重視設計的環節與效果，促使香港設計風格的逐步形成，這種風格就類似日本的雙軌制，既有東方韻味又符合國際主流。
香港第一代設計師也由此開始出現。其中包括了王無邪、石漢瑞、靳埭強、施養德、高文安、周志波、張樹新、郭樂山等人。
香港政府對于設計的價值是深信不疑的，所以香港回歸后， 在2001年成立了“香港設計中心“，這個機構獲得特區政府鼎力支持，目的是推動香港成為具備高度競爭力及享譽國際的設計資源中心，除了設計技能的提升技巧與設計思想的交流外，香港設計中心也考慮到設計產業所需的相關技能，比方財經、市場推廣、設計生產的管理等，常年舉辦講座、展覽、賽事等活動，并且通過媒介宣傳香港設計，鼓勵大家參與并重視設計，所以對香港設計又產生了一次非常重大及有意義的推動。
這一點，有點類似美國設計，香港設計對商業的重視程度非常高，但同時力求在藝術上找到恰當的平衡，關于美國設計，可以回顧設計史太濃之前的《商業設計祖師爺-美國設計》。
3）教育
由于政府對設計創意產業的重視，教育上也同步獲得了體現，60年代末香港就開始出現設計專業大學，跟香港設計同步發展，香港設計教育非常專業，開放性強，多元化，并且前沿而務實。
香港設計大學集合了諸多優秀師資，以全英文方式授課，由于地域的優勢，可以獲取到國際的專業教學資料，還經常聘請國際一流的商業設計師來做客座教授，帶來世界前沿的設計資訊，提供大量水平優質的選修課，這種教學配置及質量讓香港的設計專業學生畢業后在國際上具有全方位技能及競爭力，從而良性促進香港平面設計的發展。
對于香港設計大師，內地熟知的主要是靳埭強、陳幼堅跟李永銓等，而有一位比前面諸位輩分更高的香港設計奠基人卻不太被人談論，好比一談香港棟篤笑首先想到黃子華，而忽略了開山鼻祖許冠文一般。
這位大師有著純正中國名字卻并非中國人，這也是讓他在內地不夠知名的其中一個原因，他生于奧地利，在美國學習設計，法國深造，最后扎根香港發展，他就是在香港設計圈里鼎鼎大名，被公認為香港平面設計之父，類似黑幫里“啊公”這種級別的石漢瑞先生。
石漢瑞1934年出生于奧地利的維也納，5歲移居美國，在紐約度過了他的青少年時期，成年后在紐約市立Hunter學院學習設計，畢業后去了耶魯大學攻讀藝術碩士，讀完再去法國巴黎深造，所以石先生屬于超高學歷類型的設計師，期間他師從美國“紐約派”大師保羅·蘭德及包豪斯1925年畢業留校的鼎鼎有名的設計大師赫伯特·拜耶，所以石漢瑞先生嚴格來說，其實屬于包豪斯血統比較純正的第三代傳人。按輩分來說，他跟在哈佛學習的貝律銘先生（著名華裔建筑師）是同屬一個輩分的。
石漢瑞來港發展也算機緣巧合，1961時27歲的他受香港《亞洲雜志》的邀請，擔任設計總監，從而開始他的平面設計職業生涯，其時朝鮮戰爭結束不久，美國此前為了方便從亞洲市場獲得物資儲備，對日本、韓國以及中國臺灣和香港地區所推行的政策是大力扶持其工商業的發展，有了這個前提，香港工商業逐漸興起，而香港設計與其同步獲得發展。由此也可以發現，所以很多大師的誕生都會基于一些社會變革的背景。
在《亞洲雜志》工作了不到4年的石漢瑞，在1964年30歲時獨立創業，創辦品牌創建與戰略咨詢公司，以企業形象設計為主要業務，開展全方位、多領域的平面設計工作，是香港最早推行企業形象設計的第一人。而當時香港人對于什么是現代設計，仍然一片模糊。
石漢瑞的代表作非常多，而且合作的都是大牌客戶，首當其沖的就是當時的港英政府，比方石漢瑞設計了香港賽馬會標志、匯豐銀行標志，甚至是渣打銀行發行的港幣設計。70年代的石漢瑞在香港設計界已經是如日中天，有非常權威的地位。
0年代初，也許因為在《亞洲雜志》任職的緣故，當時的石漢瑞就已經在不斷研究將東方傳統文化與現代設計進行結合，在香港開創了跨文化設計的先河。對后來的靳埭強及陳幼堅產生巨大的幫助作用。
獨立創業后的石漢瑞更是將這種跨文化設計風格發揮到了，前后服務了上百家香港大型企業或機構，石漢瑞平面設計作品的三個主要的特征分別是：創造性的字體設計、獨特的實物與文字結合、跨文化的圖像結合。而他幾乎所有服務香港的作品都基本包含一種設計語言，就是東西文化相互交流與融合中保持一種獨特的跨文化風格，比方下面這些作品：
石漢瑞運用中信泰富的英文字母“CITIC”進行創作，采用中西融合的方式將五個字母設計成中國傳統燈籠的造型，同時又與企業中文名稱的“中”相呼應，寓意著吉祥、信賴以及積極向上的企業經營理念，鮮紅的標準色則象征著旺盛的生命力，可謂巧妙之極，渾然天成。
如果要在此講述完石漢瑞的全部代表作并不可能，所以大致展示了一些可以說明其風格的作品，石漢瑞在香港的成就是公認的，但是石漢瑞雖然擅長做出東方韻味或者中西結合的作品，但他其實完全不懂中文，這是一件頗為神奇的事情，類似的情況還有最知名的中國繪畫史是美國作家高居翰（James Cahill）完成的這件事情。
1972年，38歲的石漢瑞主力參與發起香港設計師協會的成立，1975年41歲的他被選為香該協會主席。同時石漢瑞還是國際平面設計聯盟（AGI）中唯一代表香港的會員。
2004年時，已經70歲的石漢瑞獲得了香港浸會大學（Hong Kong Baptist University）榮譽博士學位，他還曾多次獲得國際獎項，包括亞歐基金商標獎、日本創意 （Idea） 雜志世界大師等稱譽，以及被國際平面設計協會聯合會（ICOGRADA）評為20世紀設計大師。2006年（72歲）奧地利政府為了表彰他對香港和奧地利兩地所做出的巨大貢獻，授予他金級榮譽勛章。
設計之余，石漢瑞也非常熱心于香港的設計教育，60歲過后，出版了諸多重要的設計書籍，比方《跨文化設計—國際市場的溝通及交流》，如今已經84歲的石漢瑞先生仍然定居于香港，但是一般的活動已經鮮見其現身。
轉自：站酷-設計史太濃
Dribbble 經歷了資本入駐、創始人出走之后，最大的事情應該就是這次改版吧？這個全球最大、最有影響力的設計師社區的每一個動作都必然會牽扯著每個設計從業者的注意力，新版背后到底有哪些變化？這些變化又是出于什么樣的想法來修改的？看看 Dribbble 的官博是怎么說的吧：
在過去的10年當中，Dribbble 已經成長成為一個全球性的社區，成千上萬的人從這里獲得啟發和靈感，助力設計，而我們從最初分享設計作品小樣的創意社區，逐步成長為一個全球設計師產品和作品集展示和社交的平臺。在此，而我們也第一次開始問自己一個簡單的問題：【我們到底是在做些什么？】
今天，我們很高興宣布，我們在過去的10年當中首次進行了徹底的重設計。
在過去十年當中，我們所設計的 Dribbble 頁面的特點，是將設計師的作品和內容放在首位，所以叫我們不追隨潮流，采用了極簡風格的設計，即使潮流來來去去，它們也只是 Dribbble 展示內容的一部分。我們提供了一幅未經修飾的畫布，這樣就可以和最瘋狂最激進的設計探索相輔相成。不過，這么多年來，Dribbble 這種「隱形」的設計，在視覺美學上確實和時代脫節了。這次，我們創建了一套有著一致樣式的設計和代碼庫，用以替代以往不斷修改、龐大且不一致的代碼。
「我們新的設計系統旨在保持整個視覺和諧的同時，展示你的創造力?！?
如今，我們正在改進 Dribbble 的界面，以更加干凈的布局、統一的設計系統、更加簡化的配色方案、更加輕便的代碼庫（加載也更加迅速），以及全新配置的文件，來更好地幫你將作品推到最前沿，正確而合理地展示你的創作和個性。
我們新的設計系統旨在保持整個視覺和諧的同時，展示你的創造力。它是你分享設計作品和創造力的理想畫布，而新的美學特質也可以更好地反應此刻我們的公司的氣質。
在進行重設計的時候，我們明確知道，我們要完全重新思考社交化的設計師作品展示，并且將創意更大化地呈現。對于 Dribbble Pro 用戶和 Pro Business 訂閱者，你現在擁有一個全新的、經過全面修改的設置和配置頁面，可以在 Dribbble 上充分展示自己的個性，
Pro 用戶和 Pro Business 用戶可以通過上傳你自己的首圖和定制化的歡迎語，來個性化你的個頁面。
你還會注意到，你的個人頁面還可以上傳更大的照片，這可以讓你的作品對于頁面的訪客、你的客戶、招聘設計師的企業人事而言，看起來都是非常出挑的。新的網格布局是可以自定義的，因此你可以充分完美地設置和展示內容。
此外，我們還修改了「關于我們」這個部分，新版當中，這個部分你可以將所有的個人信息匯集到一起，以便完整而充分地展示你的個人經歷、展示簡歷和技能。
如果你正在尋求工作機會，新的信息發送組件，確保了你的客戶或者招聘企業可以一鍵聯系到你，他們可以直接從你的個人資料頁向你發送信息，非常輕松地和你取得聯系。
當然，并非是只有 Pro 和 Pro Business 用戶才能擁有高度定制化的個人頁面，無論你是普通用戶、內容創作者還是內容策劃人，Dribbble 上每個普通用戶的個人頁面也都會升級。尚未訂閱 Pro 服務的設計師會注意到，他們的個人頁面會更加簡潔，而設計作品會以更加聚焦的形式，吸引到每一個訪客的目光。
我們將以往的帶有分享功能的收藏合集頁（之前叫 Buckets）給翻新了，你可以精心策劃整頁內容和案例，從一個情緒板到完整的項目，這意味著，借助這個收藏頁功能，你可以更加輕松地在 Dribbble 上尋找和搜集靈感。
現在，我們可以非常自豪地宣布，即使你并沒有將 Dribbble 作品給分享出來，每個人也都會擁有一個策劃人頁面，你可以在其中搜集和整理自己喜歡的作品，來展示你的個人品味，通過保存別人的作品，來創建新的合集，我們會自動將它添加到你的個人頁資料頁當中，讓全世界的同好因為品位而關注你。
我們在整個改版設計過程中，面臨最大的挑戰，其實是圖片網格，因為這是絕大多數用戶每天瀏覽圖片、發現設計靈感的地方，我們有意識地去弱化 Dribbble 本身 UI，避免喧賓奪主，讓每個用戶的作品成為視覺焦點，減少噪音。
2020 年才剛剛開始，我們迫不及待地想要展示我們計劃中的一切。從案例研究到更好的視頻支持，再到作品集展示，擺在我們眼前的改版路線圖足以證明我們的雄心，所有的這一切都是為了讓全球的設計師能夠從中獲益，走向成功。請期待我們進一步的改版升級吧！
文章來源：優設 作者：Dribbble
在B端的UI設計過程中經常要接觸到大量的表單設計，且要展示海量數據，因此如何展示更清晰且讓用戶使用起來更便捷是設計師主要需要考慮的。結合自己在實際工作中遇到的列表類型總結了 web 表格設計的常用基礎列表模式，并進行匯總以便后續使用。
一、基礎型列表
web列表中的基礎表格樣式，通常用于橫向表格的縱列數據較少時，使頁面不需要滑動條也可以展示完全。操作項一般置于頁面最右側，便于用戶瀏覽完全后進行操作。
二、 帶有進度條的列表
用于查看數據完成進度，通常與網格型列表搭配使用，方便數據的直觀對比，進度條用不同顏色進行區分，降低用戶認知負荷。
三、可進行選擇、排序、篩選、表頭分組且帶有凍結列的復合型表格
由于業務場景的復雜性，在B端系統中通常一個表格會涉及到大量復雜的操作，這就需要將多種樣式疊加應用提高使用效率，防止用戶產生疑惑。此圖中用戶既會進行單選或者批量選擇，也有可能會對數據進行排序、篩選查看，對于專業術語或用戶不常見的名詞應給予一定的幫助說明。另外由于指標列選項過多，屏幕無法展示完全，還需要將重要列凍結，其他列增加滑動條來展示。
四、用于小計及總計的表格
小計行可能會出現一頁多行的情況，用特殊顏色隔開，方便用戶快速識別不同部分；總計行一般出現于頁面最末端，通常只有一行，文字加粗顯示。
五、行凍結、帶有角標的可編輯表格
點擊帶有角標的表格可直接進行編輯更改數值；
整行凍結：當用戶向上滾動查看或者翻頁時，凍結的行依然懸浮顯示于頁面頂部。
六、主從型列表-可展開表格
表格默認收起狀態，因為 B 端產品的業務數據量通常較大，默認展開多個主從關系表格對服務器的性能損耗較大。因此設定只有當用戶點擊下轉箭頭，此表格單獨展開。
七、雙排文字表格
適用于一屏以內文字內容較多且不需要完全展示時的解決方案。
我們都遇到過這樣頭痛的問題，當列表字段太多，一屏無法完全展示，這時應該怎么做？當用戶需要鼠標頻繁去滑動橫向滾動條查看一屏以外的信息時，易導致操作成本和對屏幕展示信息的記憶成本提高，而產品的易用性降低。因此提供了除增加滾動條外的另一條解決方案，使用雙排文字表格，可節省列表空間，部分內容省略表示，鼠標hover時展示全部內容。
總結：
1.關于對齊方式：隨著工作范圍的深入展開，發現之前做表格時對對齊方式并未做過多深入研究，導致不同項目的對齊方式并不一致，因此總結出一套方法：文本信息左對齊，因為現代人的閱讀方式習慣從左到右，符合正常的心智；數據信息右對齊，更加方便數字大小的直觀對比；內容一樣居中對齊，視覺上更均衡；表頭與信息內容對齊方式一致，給用戶視覺上的統一感，降低視覺噪音。
2.當設計師把設計稿交給開發時，雖然已經標好注、切好圖同時也包括交互注釋，但是不代表開發能把界面表達的跟設計稿完全一樣，甚至會有很大偏差。我們在設計的時候會考慮到字體大小、是否加粗、對齊方式等設計層級，但前端在開發時可能并不會注意到這些細節，因此需要保持與前端的良好溝通，包括出具走查文檔及當面溝通，更能提高工作的質量和效率。
3.由于B端系統的復雜性，常需要不同的表單樣式結合使用，因此還需設計時根據業務場景靈活運用。
文章來源：站酷 作者：小魔女4376
在日常的設計工作中，版式即一個畫面的骨架，也是視覺傳達的重要組成部分，版式整體的活躍程度也能起到改變畫面基調的作用，這也就是為什么很多作品看似很「簡單」，但卻不失設計感的原因。如何把原本比較中規中矩的版式結構通過設計手法將其差異化、提升設計感、增強活躍度，這樣做的目的是為了打破墨守成規的形式，提升用戶停留時間，以及畫面的趣味性，所以本期就和大家一起總結一些常用增強版式活躍度、提升版式設計感的設計手法。
色塊疊壓法，顧名思義就是改變色塊的擺放方式，可以分為兩類，第一類是色塊與色塊之間的疊壓。通過色塊與色塊之間的非常規擺放形式，打破原本常規的版式結構，增強其形式感、活躍度。下面我們舉個例子：
通過上下對比，我們不難發現，下側畫面整體版式結構更跳躍，直白地說就是不死板，而且形式感更強，給人的感覺也更舒服、有趣味性；而上側畫面的整體感受并不是說不合理，只不過相對比而言，這種結構形式很常見，版式結構變化性不高，形式感和設計感也稍有欠缺，那么造成這種現象的原因是什么呢？
色塊疊壓的形式在很多優秀作品中也是很常見的，這種手法對于版式結構的重組、改變也是最直觀的一種。比如：
通過色塊之間的相互疊壓，形成了打破常規的效果，使得頁面版式的跳躍性更強。
第二類是色塊與主體的疊壓方式，通過色塊與主體物或者產品之間的相互疊壓作用，營造出非常規的設計形式，從而提升版式整體的靈活度以及設計感。舉個例子：
這里運用的就是將主體物與色塊之間相互疊壓的手法，形成了一定的前后關系，而且這里主體處色塊最大作用還是打破常規的版面形式，目的是在視覺上給人以更加新穎、更具形式感的感受，且雖然做了結構上的改變，但并沒有影響到主體信息的傳達。切記，不能一味地追求非常規而忽略了設計本質問題，一定要合理運用。
當作品版式不夠活躍的時候，我們可以嘗試刻意改變某處的局部信息，將其放大，提升視覺變化的對比性，因為放大的元素其本身就具有很強烈的視覺沖擊力以及裝飾性，比如大號字體、數字、圖形等等，所以局部放大的手法在頁面版式設計中也是很常用的一種表達形式。比如：
將主體的某一處細節或者某一局部放大處理，與原本偏常規布局形成了鮮明的對比關系，對頁面整體而言也起到了很好的打破版式關系的作用。試想一下：當用戶前面一直在瀏覽比較常規的布局結構時，突然有 1-2 處這樣非常規的處理模塊，會很大程度上提升頁面對于用戶視覺的沖擊力，給用戶留下更深刻的印象，同時也使得作品整體的版面結構更加富有跳躍性。
還有另外一種局部放大形式，即在放大的基礎上故意按照非常規的形式擺放，往往也能起到很好的打破版面布局的作用，只不過這種形式在使用時相對不好把握。比如：
類似案例中所展示的一樣，通過產品非常規的局部放大以及擺放形式，畫面給人的感受更加大氣，視覺沖擊力更強烈，同時版式的跳躍性也更強。只不過這種形式在運用時要注意：頁面整體中最多出現 1-2 次即可，用于活躍版式、提升設計感，一旦出現次數過多，很容易形成雜亂的現象，之所以叫做非常規是因為有常規方式加以襯托、輔助，所以才會在視覺上形成反差。
既然是為了提升版面的活躍度，那么版面中所有的元素都可以是嘗試改變的元素，比如常用到的按鈕，再或者線條等等。使用非常規的形狀、圖形也是方式之一，比如最簡單的：
說到矩形，很多人都會想到常規形式，而也有一部分設計師會聯想到非常規形式 1，少數人會想到 2 和 3 的形式，這四類并沒有設計上的好壞之分，而是當我們習慣了常規形式的色塊之后，也可以嘗試一下其他形式，也是會有意想不到的效果。比如非常規形式 2 的運用：
相比平時看到的矩形排列方式，這一作品則給人很新穎的感覺，原本平面的作品，因為色塊形狀的改變使得整體有了很強烈的縱深感，版面的跳躍性很強烈，這樣的版式還會有人說死板、常規嗎？
非常規形狀 3 的使用可以參考下面這個案例：
在原本頁面中完全統一的形狀圖形中變換其中一處的形式，對于頁面整體跳躍性的提升還是一目了然的，原因在于：此處矩形的形態就屬于非常規類型，本身就具有一定的跳躍性、設計感，而用在此頁面中又與上下形成了一定的反差對比，所以使得版面整體更加活躍。
還有很多非常規的形狀，同樣也可以嘗試，比如：
想要版面看起來不古板，就要在頁面中的每一個視覺元素上找突破。版式聽起來好像一個很大的整體一樣，其實一樣可以拋開整體，把每一個局部作為突破點，尋找合適的視覺表達形式。當某一種形式已經讓大家所熟知甚至成為常識的時候，我們不妨稍作改變，在不影響辨識度以及視覺傳達的基礎上，做一些形式上的調整，往往可以給予版式更強烈的跳躍性以及設計感。
版式就像配色一樣，很感性，沒有完全一成不變的理論。當我們想要提升版面整體跳躍性的時候，我們不妨試試以上方法，也許小小的改變對于整體而言就是完全不同的兩種感受。當然，也不能盲目地追求形式感、特殊性。要切記：特殊是通過對比體現出來的，沒有對比，就無法形成很好的視覺反差，同時也起不到應有的作用。還是要提醒大家，一個整體非常規的手法用在 1-2 處即可，太多的話是很難把握的。
文章來源：優設 作者：美工美邦
一款產品從0到1的設計流程，在進入開發前的所有工作。這篇文章以去年做的一個小項目為例。
1.了解客戶需求，根據競品產生需求
工具：Axure、Mindmanager、Visio、OmniGraffle、PPT
1.1產品初期模型
1.1.1 競品收集（應用市場、專業網站、行業調查報告、搜索引擎、）
在應用市場、專業網站、行業調查報告、搜索引擎中尋找競品
輸出：
在產品的潛在目標用戶尋找競品
對產品的潛在用戶進行挖掘，分析核心功能的其他實現方法，將功能延展擴大可獲得不同層面的競品。
輸出：
將過程、操作的碎片化處理來尋找競品
將產品的結構、使用過程、操作等一步一步的拆開，根據每一個碎片信息來尋找競品。
輸出：
1.2競品選擇
競品選擇中最關鍵的一步，就是對競品進行分類。
1. 功能完全相同的競品：找出當下產品的核心價值，評估與我們設計目的與市場上成型產品的一致性；更快更好地借鑒對方取得成功的地方；有針對性地尋找差異化競品的方向。
2. 核心功能相似的競品：通過以點帶面地挖掘價值點或者創新點，將我們自己的產品做到。功能完全相同是一個點進行縱向思考，然后尋找競品；核心功能相似則是多個點，排列組合式地進行縱向思考，找到的競品更加全面，我們能夠借鑒到的價值點更多。
3. 功能本質相同的競品：加深對待設計產品的需求本質的理解，通過本質相同挖掘需求的核心所在，借此來找到相對應的參照物。該類競品，往往需要我們進行橫向思考，試圖從別的方面，方向入手，其思維廣度大大增加，有可能從其他領域中得到解決問題的啟示。這類競品是最容易發現亮點和突破的。
輸出：1.功能完全相同的競品
壁紙制作：可以將喜歡的圖片制作成精美的壁紙，定制專屬于你的高清壁紙。
2.核心功能相似的競品
座右銘壁紙：可選擇背景、輸入文字形成自己的鎖屏壁紙。
3.功能本質相同的競品
livefun:將視頻轉換為壁紙，將多張照片合稱為一個live photo。
1.3 競品拆解
競品拆解就是用碎片化方法對競品功能進行拆解，并最終形成競品的功能列表的過程。
形成功能列表后，對功能進行備注，尋找到競品使用過程中的不足，從而超越競品。
輸出：
接下來還需要和所有必要的相關人員就產品以及項目的開展方式進行多次頭腦風暴。
頭腦風暴(Brainstorming)是由美國奧斯提出的，一種激發集體智慧產生和提出創新設想的思維方法。頭腦風暴(Brainstorming)指一群人（或小組）圍繞一個特定的興趣或領域，進行創新或改善，產生新點子，提出新辦法。
頭腦風暴可能帶來一套啟動計劃、一個精簡的框架和一系列比較早期的概念圖以及模型。
頭腦風暴如下圖所示：
2.確定需求
2.1產品定位及如何正確描述需求
前面我們已經講述了怎樣搭建初步產品模型，通過梳理產品模型，可以清楚地了解應該如何定位一個產品。產品定位是需求收集的方向。
用戶需求主要包含三個要素：目標用戶、使用場景、用戶目標。
經過對產品定位的梳理，就明確了產品的目標用戶群體，接下來就可以進行需求的收集、分析活動了，總體流程包括需求收集、需求分析和篩選，需求優先級排序幾部分。
輸出：
產品定位：以用戶產出內容為主的可個性化推送壁紙應用。
用戶場景描述：
陶娟平時喜歡根據心情更換不同風格的壁紙，但是每次找壁紙都讓她十分頭疼，很難找到有個性又好看的壁紙（都是用戶制作上傳的壁紙作品）。
陶娟打開8樓壁紙app，登陸后填寫了她的個性偏好，系統根據她的喜好個性化推送壁紙。陶娟選了一款壁紙，還可以看到同時和她使用同一款壁紙的網友。
2.2需求收集的途徑
1.用戶場景畫像：根據之前的產品定位和使用場景用戶畫像文檔分析產出需求
2.競品分析：找到同類競爭產品，深入體驗競品功能
3.頭腦風暴：可以集結產品經理、設計師、運營、市場、開發、進行頭腦風暴，圍繞一個特定的話題進行討論
4.用戶反饋
5.數據分析
輸出：
2.3需求分析和篩選
在需求收集過后，已經有很多的被選需求了。
如何分析和篩選需求呢？
1.篩掉明顯不合理的需求
哪些是明顯不合理的需求？比如當下技術不可能實現的或明顯意義不大的，投入產出比低的、無匹配的產品使用場景、明顯不合理的需求等
2.做需求分析
把明顯不合理的需求排除后，就需要一個一個對剩下的需求進行分析。首先要了解需求的三個分類：用戶描述的需求、用戶實際想要的需求、用戶的潛在需求，這是三件不同的事情，卻有著千絲萬縷的聯系。我們需要通過用戶描述的需求，找到用戶實際的需求，再挖掘用戶潛在的需求。
3.需求做減法
有時候決定不做什么比決定做什么要更重要，產品的需求是無上限的，大量的堆積需求，會使產品非常臃腫，毫無特色，還會導致工期過長，拖慢了產品推出市場的進度，對產品百害而無一益。因此，應該傾向于做“輕產品”，學會做需求的減法。
這就涉及接下來需要討論的問題，如何判斷需求的優先級。
輸出：篩選后的需求列表
2.4需求的優先級
需要對所有的需求定義一下優先級，優先級高的需求優先開發，優先級低的需求延遲開發。
輸出：
2.5 輸出產品功能圖和功能需求列表
用戶需求列表確定之后，先以產品功能的形式展現出來，產品功能圖可以直觀的看出產品的初步功能架構。
輸出：產品功能圖
功能需求列表的價值，一是在于幫助產品經理理清思路，二是在于幫助項目團隊的其他成員了解產品功能需求，讓他們提前做好相關準備。
輸出：功能需求列表
3.產品架構
3.1 產品功能架構
結合之前的市場調研及產品路徑規劃，梳理了一下產品架構的大模塊
輸出：產品功能架構
3.2 流程圖的規范
流程圖有時也稱作輸入-輸出圖，某種程度上來說，流程圖是一種溝通性質的圖形化語言。一般會使用一些標準符號代表某些類型的動作，如判斷用菱形框表示，具體的操作行為、活動用方框表示，開始和結束用圓角矩形框表示。
3.3 確定核心功能流程圖
首先我們要設計的是產品的核心功能流程，例如登陸的流程就需要前期設計好，綁定手機號登陸還是直接微信登陸。登陸的流程會對后期的功能產生影響。
輸出：功能流程圖
做好了核心功能的流程圖后，我們需要對app主干做一個流程圖。保證每一個功能都可以形成閉環。
3.4 評審與確認
評審主要是讓業務部門和開發部門參與，好的流程圖具備清晰易懂、簡單明了、完整準確的特點
4. 原型設計
4.1 什么是產品原型
產品原型是設計方案的表達，是產品經理、交互設計師的重要產出物之一，也是項目團隊的其它成員（尤其是設計師、開發人員）的重要參考和評估的依據。
4.2 低保真產品原型
首先我們要根據產品架構畫出初步的頁面，也就是低保真產品原型。
這樣的原型圖有幾個好處：
可以快速產出：有時候一個需求的開發周期很短，低保真原型可以快速滿足同事的時間要求。
修改成本低：一個產品策劃很可能會被修改很多次，低保真的原型修改起來很方便。
輸出：低保真原型圖
4.3 高保真產品交互原型
工具：axure、ai、ps
高保真產品原型，則是高功能性、高互動性的原型設計，是忠實展示產品功能、界面元素、功能流程的一種表現手段。
高保真的好處：
便于梳理產品細節：制作高保真原型的過程中可以讓產品經理提前發現產品潛藏的各種問題，提前處理風險。
更容易讓其他成員了解產品設計：有時候簡單的線框圖無法讓別人想象出你要做的事情，也不清楚你要放的是哪幾個字段，而高保真原型就可以。
相對而言，劣勢就是制作周期比較漫長，涉及到產品流程的修改，那基本原型就得回爐重造一遍。所以高保真原型可以做一些核心頁面，不重要的頁面可以后期慢慢完善。
輸出：動態交互稿
5. 視覺設計
工具：Sketch、Ai
在產品0到1時候視覺評審，會花大量時間去討論產品的設計風格和主配色，在確定視覺稿沒有交互問題后，然后就是討論視覺設計稿的細節。在產品功能迭代的時候，評審的都是整體視覺風格的繼承性和視覺稿的細節。例如對交互設計的理解是否到位，邏輯是否正確，視覺層次是否正確等。
5.1 設計組件規范
5.1.1 為什么做組件規范
1.保證產品風格統一
每個設計師都有自己的審美和風格，產品迭代可能是不同的設計師來負責項目，但是產品的風格必須保證是統一的，所以就需要一個規范性的文件來作為設計標準。
2.提升團隊效率
在sketch里，有一個好的組件庫，設計師就不用重復去改每一個頁面上的圖標。只需要改動一個就能同步頁面上所有的圖標。
3.打磨細節體驗
在產品長期迭代的過程中，對每一個元素都需要對其場景、狀態考慮清楚。所以在整理過程中，經常會發現以前沒有注意到的問題并優化。
5.1.2 組件規范內容和分類
不同的項目的規范內容都是不同的，我們需要明確規范內容的分類有哪些?？梢韵却_定大體的規范內容，在頁面完善的過程中也不斷的完善規范。
iOS的設計尺寸建議使用一倍圖375*667的尺寸進行設計。因為這和安卓的常用尺寸360*640的誤差很小。安卓和iOS可以共用字體、圖標和間距?？梢愿臃奖憷镒龊媒y一的設計規范。
輸出：
文章來源：站酷
本篇文章將分享 Web 端系統布局，從基本布局初識、網格、布局模塊到柵格進行完整鏈路內容整合，以簡單易懂的案例與大家進行探討。
在以往的學習過程中，我發現市面上大部分文章對于 Web 端系統布局內容講的比較籠統，一般提及較多的是網頁柵格相關的內容，但是一些關聯性和原子結構等相關內容較少。比如，了解布局時應該需要了解哪些方法論？什么是網格？網格與柵格之間是什么關系？柵格與布局之間是什么關系等。我會從這些缺失出發，結合工作經驗與實際案例為大家進行分享。
用戶在操作系統時所看到的頁面框架其實就是系統布局，它是一個產品最外層的框架結構，一般包含了頂部導航、側邊導航欄、面包屑、圖文、卡片、內容等元素。
對于設計師而言，想要了解一個中臺，首先要了解它的系統布局，系統布局是頁面設計的基礎，它與頁面的關系，就如同建筑與地基的關系。日常完成需求時，UI 界面反復的調試頁面寬度與卡片比例會占用我們大量的時間。為了提高工作效率，并且把更多的時間放在業務、視覺創新等方面，我們就應該需要一套完整的布局規范。
對整個公司產品體系而言，內部員工與普通用戶使用的操作系統達到幾十甚至上百個，單一的頁面布局滿足不了各個子項目的使用場景。所以我們從前期的布局框架設計調研到產品業務的特性，定義了中臺界面的幾大類型，并且在我們的設計規范中定義了幾大類型系統布局方式，根據其布局方式定制好柵格，方便日后在各個業務場景中使用，從而能夠保持一致性、并且可擴展，方便快速迭代和維護。
視覺層次
對于中臺的 UI 設計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在 UI 設計師設計頁面時需要把很多互不相關的元素有秩序的組織在一起，正確引導用戶操作與使用。亨利·亞當斯（Henry Adams）曾經說過：「混沌是自然法則，秩序是人類的夢想」。人們總是喜歡秩序，因為秩序可以讓事情變得更容易理解。這同樣適用于數字產品的用戶界面，當 UI 元素被有序組合和結構化時，人們可以輕松的使用應用程序和網站，并對產品感到滿意，所以設計頁面時需要結合視覺層次理論。視覺層次理論是設計過程的核心方法之一。最初是建立在格式塔原理的基礎上，它觀察到了用戶對相互關聯元素的視覺感知，并展示了人們如何將視覺元素歸為一類。那么什么是視覺層次呢？官方概括：視覺層次結構致力于一種用戶能夠理解的方式呈現產品的內容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容，以便大腦可以根據物理差異例如：大小，顏色，對比度，樣式等區分對象。
蘋果的設計一直以來都是引領著設計趨勢，其設計被國內外用戶所認可，所以就以蘋果官網作為案例。其中，字重對比：蘋果官網在字重上給人眼前一亮的感覺，它采用 Medium+Bold 的字重使得標題與詳情內容產生強烈的大小對比，用戶進入官網的第一眼便能了解核心內容。顏色對比：在顏色上使用黑色背景承托產品和內容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：
格式塔理論
往往用戶打開頁面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而并不會感知到一些較細節的元素。往宏觀來講當人們感知到一個物體由許多元素組成的復雜對象時，人們會采用有意識或無意識的方法將這些部分安排到整個組織的系統中，而不只是簡單的元素級。它適用于不同級別的感知，但是視覺部分似乎是設計師設計界面時最能體現價值的部分，這其實就是格式塔理論，格式塔（Gestalt）這個術語來自德語單詞 Gestalt，中文翻譯為「形狀，形式」。
格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背后的基本思想：「整體不是元素基因的總和」。官網概括：「在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。
在我們的現實生活中有很多自然規律都遵守了格式塔原則，比如說每到秋天，北方的嚴寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴密，并且群體在往同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產生人字形或一字形的圖形。
信息框架
剛剛我們也介紹了視覺層級結構和格式塔理論，接下來簡單介紹一下信息框架，它也是在系統布局中需要考慮的內容。信息框架是將信息內容進行組織分層，一個產品的信息框架取決于其特有的業務，他與業務強相關并且需要了解用戶群體目標。根據業務和用戶目標將內容組織搭建信息框架，形成系統布局的骨架，方便用戶在瀏覽或操作頁面時能夠快速找到重點內容，提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個線上產品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產品，那么其信息架構也完全不同。
今日頭條屬于門戶類新聞客戶端，主要是生產內容展現給用戶，首先進入到產品映入眼簾的是無窮式的信息流，它不需要用戶登錄/注冊作為身份門檻，而是直觀的把內容展示給用戶，推送用戶感興趣的內容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗即可，目的是方便第一時間抓取用戶、吸引用戶達到留住用戶的目的。當用戶產生興趣以后想要進入下一步操作如：點贊、評論時才會彈出登錄/注冊，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來。從產品業務屬性來看，今日頭條的布局把重要的內容放入中間，并且占有整個布局的一半大小，其次放在內容兩側；
飛書屬于工具協作類產品，用戶第一次打開產品需要注冊才能使用。與新聞閱讀類產品不同的是工具類型產品用戶目的比較明確，所以首頁做成一個功能介紹頁面，作用是引導用戶了解產品核心功能從而轉化成產品的用戶。當然功能介紹頁也是一個網站的門面，首頁想要出彩，不僅需要在布局上做的合理還需要考慮網站的色彩、插圖等元素的統一性。在設計網站時，首頁的功能介紹頁一定要充分突出自身產品特色，強調出自身產品的優勢和亮點，如飛書首頁主要是想突出其產品能夠提高工作效率，所以直接把「在飛書，享」slogan 這句話放在了首頁的第一屏，輔助文案詳細的介紹了產品的核心功能，直接抓住用戶的痛點。用戶完成注冊以后，進入到功能頁面，如右下圖可以看出，其系統布局的模塊分成三份，占面積最大的模塊屬于產品最核心的部分也就是聊天窗口，較重要部分是聯系人部分，最小區域是功能 Tab 部分。
小結
所以對于設計師而言，在設計頁面時必須熟練掌握一些基本設計基礎知識，并且將這些知識靈活運用到實際的工作當中。比如設計師在搭建系統布局時需要熟知頁面視覺層次、格式塔理論、信息框架等知識才可創建合理的布局基礎。當然布局框架只是整個產品的基礎骨架，在骨架確定之后，設計師才可進行下一步的設計，如統一的視覺表達元素，清晰的功能操作，流暢的交互表達。
系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們（使用規范的設計師）跨平臺使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。
一致性：對于界面來講，界面中的元素和結構需要保持一致性，如：在使用布局時應當使用一致的網格，基準線和填充，在使用設計元素時配色、圖標、文本等需保持一致。
可適配：布局是可自適應的，根據用戶在不同的設計環境下能夠通過交互動效、界面樣式有效作出適配反應。用戶操作后需給出即時反應。
可控性：當用戶看到界面時應直觀有效傳遞內容，如界面中模塊區域明確、內容組織明確、表意明確都能使得用戶快速理解。界面需要簡單直白，讓用戶快速識別，減少用戶記憶負擔。
在設計過程中，為了減少設計師們的日常溝通和理解成本，在設計內部我們統一了一套設計畫板尺寸為 1280。經過我們官方調研得出在中臺系統中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最為保險的的一個尺寸，在設計頁面時設計師如果能夠在 1280 尺寸下，縮小寬度或拉升頁面寬度都能保證沒有遮擋或擠壓問題，那么設計是合理的。在我們的規范中頁面再小于 1280 時需要吊起系統的橫向滾動條。在中臺系統中考慮到用戶效率問題很少做響應式，所以常規情況下設計師會限定界面的一個最小值。如果設計師把畫板設置為 1440 或者 1366 時可能會存在其在畫板中頁面大小正好合適，但是頁面上線以后縮小瀏覽器可能會發生遮擋或擠壓的情況。所以我們建議設計師們使用 1280 寬度畫板畫圖。
首先先分析一下界面框架，我們將頁面的用戶操作行為進行層級區分。我們至下而上將元素進行層級分層，目的是把用戶界面模塊化。界面可分成背景區域、內容層、全局控制層、內容彈層，每一層都具備獨特性，將界面中所有的信息層級提取分類并且按結構屬性分層，目的是能夠使得頁面視覺和交互邏輯符合用戶的習慣認知。之前我們有提到過視覺層次、格式塔理論和信息框架，設計師在創建這一步的時候可以用來指導搭建一套合理的頁面信息層級，一個內容模塊都屬于一個容器，容器可以承載各種內容元素。
背景層
背景層樣式固定，在界面中永遠置于界面底部，并且一般會給予背景層中性色，作用是方便突出內容層和全局控制層。
內容層
視圖結構中最核心和復雜的一層，他與業務強相關，內容層的容器承載了業務場景的用戶需要獲取的核心信息以及輔助核心任務的操作。容器承載了內容，從 Material Design 中的 Elevation（海拔）概念中可以了解到，它屬于第二層級內容，基本布局結構有平行結構或者父子結構。如下圖卡片屬于容器，卡片中承載了數據圖表等內容，整個卡片+內容就屬于內容層。
全局控制層
全局控制層我們定義他在內容層之上，屬于頁面第三層級內容，一般在業務場景中對整個網站的控制以及導航功能如：Header menu、Sidebar menu 組件，如下圖中 Header menu 浮在內容層之上。
內容彈層
當前任務或者內容相關的臨時出現層，優先級高于內容層，一般承載當前需要臨時處理的任務或者需要進行內容補充說明等功能。如：Modal（Dialog 各個平臺叫法不一致）、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現給用戶。Modal 它包括兩種類型，一種是模態內容層不可操控，被蒙版遮罩禁用，比如在業務中需要較為聚焦的分支流程操作時使用。另一種是非模態，吊起彈出層后不印象內容層操作。當然，Tooltip、Popover、Notification 都屬于非模態，反饋較輕，不干擾用戶使用界面。如下圖的頁面中的內容彈層使用了 Popover，在次頁面它的功能就是加以補充說明。
隨著科技高速發展，屏幕分辨率也越來越多樣化對于 UI/UX 設計師來講必須熟練的基本知識方便日常工作所需。首先我們先了解一下屏幕中的一些單位。
在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導致開發實現稿的視覺不符合設計師心理預期，比如：相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個數明顯小于高密度顯示器的像素個數。
其實像素是與密度沒有關聯，我們簡稱密度為 DP (讀作 DIP，英文全稱 Density-independent pixel )，它是可縮放的靈活單位，可在任何屏幕下現實相同的尺寸，如圖顯示，紅色網格為像素密度，被放大內容為 UI 元素物理尺寸。
所以我們可以得出，DP 可以自適應屏幕的密度，不管屏幕密度怎么變化，實際顯示的物理尺寸相同，DP 可以保證物理尺寸的一致性，所以 DP 是目前比較適合 UI 設計的單位。當屏幕的密度為 160 的一個物理像素時，1PD=1PX。要計算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。
關于網格
網格線(Grid Line)，網格線又稱布局分割線，它是構成網格結構的分界線。一般在布局中它們是由行網格線和列網格線組成。如下圖是模擬網格做了一個示意，其中橘黃色兩根線分別是行網格線和列網格線。
網格軌道(Grid Track)，兩個相鄰網格線之間的空間。你可以把它們想像成網格的行或列。如下圖橘黃色的行網格線和列網格線之間的空間既是網格軌道。
網格單元格(Grid Cell)，兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間屬于網格單元格。這是網格系統的一個「單元」。如下圖橘黃色的行網格線和列網格線交叉處即是網格單元格。
網格區域(Grid Area)，由單個或多個網格單元格組成，它是可以用來擺放頁面元素。如下圖所示，橘黃色的行網格線和列網格線交叉處即是網格區域。
網格設置
在設計界面時可以通過網格定制能夠使界面更加有序、整齊、規范，網格的主要用途之一是保持設計元素對齊和排序。通過建立一個網格系統，設計師可以為自己創建一個結構來適配不同的屏幕寬度。
在我制定的規范中一般會把網格的基數設置為 4，它不僅符合偶數的思路同時也能夠匹配多數主流的顯示設備，如中臺系統的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設置網格規范幫助設計師快速搭建頁面，使用有律可循的布局空間的設計給到開發減少溝通成本。下圖所示設計布局網格由三個元素組成：列寬，間距，邊距。
在 Sketch 中設置網格，在菜單欄中找「視圖」-「畫布」-「網格設置」-彈出浮層可設置網格大小，網格設置的基數設置成4，之后在設計界面時可按照網格基礎的倍數作為組件的大小和頁面元素間距分割，如下圖：
我們放大頁面局部大家可以看到，把網格基數設置成 4，每個網格單元格為 4*4 大小。同理，如果把網格基數設置成 8 以后，每個網格單元格大小為 8*8 大小。
界面框架內系統布局是頁面所有模塊的組合方式，我們定義一個頁面框架中基礎模塊和內容模塊的數量最好不超過 3 個。經過調研和歸納總結出 3 大布局類型，分別是上下布局、左右布局、T 字型布局。
上下布局布局是 Web 端運用最廣泛的布局方式之一，頁面內容區以 feed 流形式展現，一般用在 Web 端官網首頁。設計師普遍做法是對兩邊留白區域為內容區并進行最小值的定義，一般定義值為 1200 較多（具體寬度要設計師如何設置柵格，后面會講到如何設置柵格），當留白區域到達極小超過極限值之后需要對中間的內容區域進行動態縮放或遮擋，此邏輯需設計師根據業務所需而定。也有少部分設計師會設計成全屏布局，內容隨瀏覽器寬度自適應。
其優點是頁面結構清晰簡單，強突出內容區，但缺點是布局的規矩呆板，變化少。設計師如果不注意合理的視覺元素和色彩細節變化，用戶很容易感覺到乏味，此布局適用于層級較為簡單頁面。
巨量引擎（Ocean Engine）是字節跳動旗下的營銷服務品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu 激萌、輕顏、穿山甲等產品的營銷能力，為全球廣告主提供綜合的數字營銷解決方案。我在設計此官網時正是采用了上下布局作為頁面布局，頂部導航整合了所有子頁面的內容，導航下方為主要內容區并且內容定寬，當時采用此布局原因第一是因為次官網層級較簡單只有三個層級內容，第二是官網更需要的是突出內容區，所有頁面使用次布局更為合適。
設計師在設計重內容，輕導航類型網站是常用左右布局作為基礎框架進行頁面設計。此布局把系統頁面分為兩大模塊，其中設計師常見的做法是將左側設置成導航欄模塊并且固定，常常用來控制全局內容。而右側區域設置成工作區域或內容區，內容區可進行動態縮放。
下圖為飛書溝通窗口截圖，由于關系到內部信息保密性我把內容進行了模糊，從外觀結構上看還是能大致了解飛書結構是采用了左右布局，整個布局結構清晰有理也是符合左右布局特點。從交互體驗分析左側屬于導航區，它承載了不同功能并且固定。飛書屬于即時溝通產品設計師考慮到瀏覽器窗口有限所以對導航設計成較小模塊，而右邊為聊天窗口對于業務屬性分析它更為重要，所以模塊較大。其導航欄固定，內容區可進行動態縮放。
T 字型布局常用在 Web 端的中臺系統中，因為中臺系統業務結構復雜、層級多，而 T 字型布局能夠解決復雜結構的問題。使用此結構能夠把頁面結構清晰化，主次更加分明。設計師常常的做法是將頂部作為一級導航欄方便控制全局，二左邊設計成是二級導航并且固定導航欄固定，右邊的內區域可進行動態縮放（一般會把其設計成柵格動態區域），內容隨瀏覽器寬度自適應。
下圖是 Material Design 設計文檔，首先簡單介紹一下 Material Design，它是由谷歌的設計團隊創建的一種語言，宗旨是幫助設計師們創建易用性和實用性較強的網站和應用程序，其設計理念是將現實中的物理學帶入進設計中。Material Design 設計文檔中的結構使用了 T 字型布局作為基礎布局。頁面分為了三個模塊，其中頂部導航作為頁面一級內容進行全局控制，接下來左邊為側邊導航作為二級內容控制頁面，右邊是內容區滿足用戶使用瀏覽。從放眼望去整個頁面架構清晰明了。
以上為 Web 最常見的三大布局，但是需要大家在實際的工作中靈活運用。設計師在日常工作中可能會遇到更為特殊的業務場景，設計師可以通過整理基礎模塊然后分析其業務的信息框架，將模塊進行相互組合、嵌套歸納可以總結出更多的 Web端布局框架并落地到業務中。
剛剛在定義布局模塊中已經分析過了三大布局類型，接下要分享的是 UI 設計師更為關注內容「網頁柵格」。網頁柵格也是設計師口中常常提及的柵格系統。其實網頁柵格系統是從平面柵格系統中發展而來，它延續了平面設計的方法與風格，在網頁中使用柵格能夠使得網頁信息展現更加清晰明了、美觀易讀。
首先網頁柵格系統基本由是柵格總寬度/頁面總寬度（W）、一個柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個單元的寬度（A）、外邊距（M）組成。
1. 列寬
一個柵格的寬度（a），我們稱之為列寬，一個列寬包涵了N個網格單元格（Grid Cell）我們也可以把它看成一個網格區域(Grid Area)，在上面我們已經講到過網格的內容，主要目的正是為柵格做鋪墊。其中我把一個網格單元格設置為4（原因在網格中也解釋過，如果忘記的同學可以爬樓看下）。由此可見列寬非固定值，這樣可以使內容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。
2. 水槽
柵格與柵格之間的間隙（i），我們稱之為水槽，一個水槽寬度大于等于1個網格單元（Grid Cell）。在柵格中水槽為一個定值，寬度可以是N個網格單元，如網格單元格設置成4，那么水槽可以是4、8、12、16…N*4。
3. 柵格單元
1個列寬+1個水槽寬度即一個單元的寬度，一個柵格總寬是由N個柵格單元組成，次寬度不固定，由屏幕尺寸決定。
4. 柵格總寬
列寬+水槽再成以N即是一個柵格的總寬，公式為：W=(A*n)-i。
5. 柵格設置
經過調研我們得出常見的柵格分為 12 列柵格系統和 24 列柵格系統。其中 12 列柵格系統在流行的前端開發開源工具庫Bootstrap 與 Foundation 中廣泛使用，適用于業務信息分組較少、業務結構較簡，單個盒子內信息體積較大的中后臺頁面設計。24 等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對 12 柵格系統，24 柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。如下圖分別是 12 柵格系統（左）和 24 柵格系統（右）。
6. 小結
在柵格系統結合布局結構和網格做了我做了一些知識結合，其實前面所講的網格版塊和布局版塊都是為柵格做一個鋪墊，利于同學們更加深入的了解網格、布局、柵格三者的關系。
系統布局只是網頁中的基礎部分，但也是核心內容，一個產品布局需要根據其業務屬性決定。布局搭的好相當地基打得好，但是同時在對美感的追求之上，還應當結合可用性來看待設計。在實際的工作中肯定還會遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發，大家可根據此次分享內容能夠進行舉一反三利用到實際的工作當中。
文章來源：優設
本文整理了人工智能行業中設計師需要理解的一些名詞和內容。
一方面供自己學習思考，另一方面也希望能幫助到準備投入到人工智能行業的設計師。之前聽有的朋友講到，覺得自己沒有計算機背景，有點害怕進入到這樣一個領域來。
沒有計算機背景沒有關系，只要對這個行業充滿好奇，一個個的問題解決掉，在你眼前的迷霧都會散去的。
先簡單舉幾個人工智能在生活中有在應用的例子：
像現在有的超市寄存物件，開箱時采用的人臉識別；像家里購置的智能音響，時不時還能跟它聊上幾句；像接聽到的銀行電話（是的，對方可能是機器人噢）；像在淘寶上咨詢的客服小蜜；像你手機里的虛擬助手….等等這些都是人工智能在生活中的應用。
人工智能在設計領域的應用也相當廣泛，具體可以看這篇文章：
這幾個例子是在生活中比較普遍能接觸到的，實際人工智能應用的領域還在不斷的擴大，我們甚至都無法想象到，未來的生活會是怎樣的狀態和場景。
在這家公司之前，我做過語音交互類的產品交互設計。當時在定義人與設備進行語音交互時，會是怎樣的一個交互場景。從說喚醒詞到發出指令，從收到反饋到繼續對話。喚醒后等待的時間、結束的規則等等這些。
而現在，我大部分時間是在設計工具，如何讓使用者能快速的創建出一個智能機器人。如何讓機器人的創建者方便快捷的添加機器人的相關數據和創建出對話場景。
所以在進行這些工具的設計之前，有些名詞概念，會需要設計師來了解一下，能讓我們更好的理解人工智能的一些原理以及能夠讓設計師具象化到實際的設計中，甚至能基于此技術/原理來進行相關的創新或研究。
整理內容如下：（內容基于工作及自身理解，如有概念理解錯誤，歡迎指正）
下面嘗試用較易理解方式來解釋這些名詞：
與機器人進行對話，首先就需要讓機器人懂我們說的話，這其中，就需要來關注到自然語言處理，通過自然語言處理技術，能夠實現我們與機器之間「無障礙」對話。
我把這三者關系畫了張圖示，我是以這樣的方式理解的
從圖中可進一步看出，NLU 和 NLG 是 NLP 的子集，而 NLP 是人與機器溝通中很重要的存在。
涉及到語音就會經常聽到 ASR 和 TTS
語音識別（ASR）：將語音內容轉為文字
如微信里面，當別人發的語音信息不方便外放收聽時，可以轉為文字查看
語音合成（TTS）：將文字內容轉為語音
如現在很多的閱讀軟件，支持播放，有的就是利用 TTS，直接將文本內容轉為語音播放出來。
我試著將上面提到的 NLP 和 ASR、TTS 組合起來，關系可以如下圖所示
當我們說一句話的時候，機器知道我們表達的是什么嗎？
意圖（Intent）:一個人希望達到的目的，或者解釋為想要做什么，他的動機是什么。
如：
槽位（Slot）：可以理解為系統要向用戶收集的關鍵信息。
如：
「買張明天從上海到北京的機票」
上面這句話中，獲取到意圖（買機票）；提取關鍵信息 時間（明天）、地點（出發地：上海；到達地：北京）
這些關鍵的信息就是槽位，當系統獲知到這些信息后，就能去執行下一步動作。
還可以這樣理解，當我們去銀行營業廳辦理卡的時候，會填寫一張表，表每個要填寫的選項，就是一個個的槽位。槽位就是為你服務的人員要從你那收集的關鍵信息。
實體（Entity）：用戶在語句中提到的具體信息
實體這詞放在生活中，我們很容易理解，就是實實在在的物體，像桌子、電腦、熊貓等等這些都是實體。
但是在人機對話中，機器理解人的語句內容，會識別出語句中的實體信息（如：地點、人名、歌曲名等），然后進行標記。
那槽位和實體是不是講的是一回事？只是不同的說法？
我之前有一度陷入這樣的困惑中，但其實這兩者還是有所區別的。比如，一個實體是數字，但是在語句中，數字將代表不同的含義。
如：
人：有沒有10元的鮮花？ 機器人：玫瑰花10元一支 。
這句話中，實體number「10」，但這個 10 在句子中表達的是價格，所以收集到的槽位信息是價格：「10元」
這樣說可能還是不太能理解，那我們可以先了解下，在一句表達中，需要進行槽位信息收集，但機器如何知道「買張明天從上海到北京的機票」中，「上?！故浅鞘?，并且「上?！故浅霭l地呢？
「上?！惯@個詞會被建立在一個城市實體詞庫中，這是「上?！鼓鼙蛔R別到是「城市」的原因。
其次，通過將解析槽位加入語料中，加以訓練讓機器學習相關表述結構，來獲知該句式中，收集到的第一個城市是出發地，于是把第一個城市填到對應的槽位中。
使用什么工具來讓機器知道，這個信息是要提取的信息？
解析器（Parser）：抽取/解析用戶語句中的關鍵信息
上一個講到實體，這里講到的解析器則是這么個工具，用來抽取這些信息。比如會有些通用的解析器如時間解析器、城市解析器、歌手解析器等等。
解析器的類型也比較多，如通用解析器、詞典解析器、正則解析器、組合解析器等等，這里就不再擴展開講具體解析器，實在過于復雜了。
命名實體識別（NER）：用來識別具有特定意義的實體。主要會包括像機構、地名、組織等。
是不是發現，解析器和 NER 在做差不多的事情？我是這樣理解的，解析器的話是一個更大的存在，其中包括了 NER。解析器下會有不同類型和不同功能的工具來實現關鍵信息的識別/抽取。
在我們與機器人對話時，一般會涉及到四個不同類型的對話，開放域的聊天、任務驅動的對話、問答（FAQ）和推薦。
上面是在有次分享中提到的，這四個不同類型的對話，在機器人平臺中，會需要借助不同的功能模塊來實現。
任務對話（Task Dialogue ）：有上下文聯系，就像我們要去訂票、訂餐之類的一段任務型的對話。
我們公司產品中，任務引擎模塊就是做這個任務對話的創建，比如，要訂機票的場景。用戶在這個訂機票的場景中，會涉及到的對話內容、流程的設計。
知識圖譜（Knowledge Graph）：這個可以理解為可視化關聯信息。
比如：查詢一個明星的身高、年齡，他的學校、他的女友，他的相關作品，這些基于這個人而構建的信息庫，都可以通過知識圖譜在做整理。并且在構建時能夠做到可視化的了解。
要讓機器人知道，它腦子里有貨了！
訓練（Train）：這個概念可以這樣理解，比如你創建了個機器人，但是它什么都還不懂，于是你塞了堆知識給他，這時，它就需要自己訓練學習了。訓練好了，就能回答你塞的那堆知識里的問題了。
講到這就忍不住想用這個學習的例子，來簡單講下一般機器人的創建流程。像我們在學校，會經歷上課學習新知識-復習溫習-考試-整理錯題集，以此循環進行。
這個創建機器人的流程也是一樣通過知識的導入/創建-訓練-測試-優化-上線-優化，以此循環，不斷強化機器人，讓它越來越智能。
其他：
數據標注：將對話日志中的有價值數據做標注（標記/匹配/關聯之類）。
因為人的表達萬千，多種表達方式都代表的同一個意思。有時用戶說了句話，是語料庫中并不包含，于是機器人可能就答非所問了。
Ai 訓練師們就可以將這些數據信息標注到對應的問題中去，這樣當用戶再用同樣方式表述時，機器人就能如預期回答了。
講到標注想到之前在朋友圈很火的你畫我猜，谷歌推出的這個小游戲席卷朋友圈。他們用了個如此聰明的做法，其實我們參與其中的做法就是在做數據標注，而且還是主動提供數據的那種。
這也反映了，數據對于機器人的重要性，通過不斷的進行數據維護和補充數據，機器人就會越來越理解人，表達也會越來越智能。就跟我們學習一樣，不斷學習才能夠理解其他的含義，甚至當認知能力提升了，看待問題的角度才能不一樣。
文章來源：優設
B 端工作看起來總是沒有 C 端工作那么有趣，面臨的限制比較多，面對客戶（金主爸爸），很多時候總是左右為難。在實際工作中，面對這些情況該怎么辦？筆者根據自己的 B 端工作經驗，總結了一些交互設計的要點。
從事 B 端 SaaS 行業已經兩年有余，從最開始面對需求的茫然無措，到現在已經有了自己的一些基本方法論，這期間經歷了從有人帶到自己摸索的一個階段。
每天看看文章、看看書，大家講的都是 C 端的產品，C 端的交互和體驗；每天看同行們分析的不是如何提高用戶活躍量，就是 APP 的設計風格。這在我一個 B 端交互看來，無比羨慕啊。
C 端項目的設計師感覺每天和一線用戶打交道，忙得不亦樂乎，可以與用戶直接對接，可以添加有趣生動的文案。
而對于一個做 SaaS 的 B 端來說，Boss 常說的話就是：
你這個顏色太鮮艷了。
我們是 B 端，你這種頁面布局不合適吧。
這個文案太幼稚了，不適合我們產品的調性。
中規中矩就好，不要太跳。
整理了一堆的字段，畫了無數的線框和流程圖，卻拿不出 C 端設計師才有的豐富多彩的作品集，
盡管如此，設計的原則是通用的，無論是尼爾森十大可用性原則，還是格式塔原理，在設計方案的落實上，都有著相同的方法論。
無意在此討論 B 端和 C 端之間的差異，僅以此文章來總結下我自己的一些工作經驗，如有錯誤，敬請指出。
從業務需求的對接，到界面交互的細節，從功能的設計要點，再到產品的發展導向，我總結出了以下幾個方面，逐步展開：
C 端設計師最開心的可能就是收到用戶的反饋需求了吧，這樣表示自己的產品還有人在用，然后建個群讓用戶開開心心吐槽，完了就從里面提煉適合產品的一些需求和建議。
而對于 B 端設計師來說，如何處理需求是其成長的第一關，尤其是 SaaS 行業，不會處理需求，產品的功能更新將會遇到極大的問題。
B 端的用戶不像 C 端，雖然可以用用戶畫像來進行歸類和分析。但是由于 B 端的直接用戶是付費用戶，付了錢的就是大爺，因此大爺提的需求你敢不應？
用戶提的需求亂七八糟，有些是體驗問題，有些是功能問題，有些就是屬于比較極端的需求。那種傳說中甲方要你做一個可以根據手機屏顯示顏色而改變手機殼顏色的需求，在 B 端行業也是存在的。
那么問題來了，我們該如何處理紛繁雜亂的需求呢，我從收集需求-評估需求-需求落地挨個講起：
如果你也打算像 C 端產品體驗群那樣建立一個群，完了將自己的用戶聚集在那里，靜靜等待需求的話，我勸你三思而后行。你可以這么做，但是應該明確群的目標，可以收集需求，可以是 bug 反饋群，也可以是更新通知群；但是不要將其變成一個純粹的用戶反饋群，因為這會導致用戶的吐槽聲音過大，而讓潛在的用戶流失。
B 端的客戶一旦使用你們的系統，就要付出相應的金錢和時間代價，不是說想換一家就能換。因此他對于已經使用中的用戶反饋是極其看重的，B 端的產品很大程度是靠著同行間的口碑傳播從而取得了良好的效益。如果一個新用戶想進群了解，結果一進去就發現大家都在吐槽這個系統的不足之處，那么可想而知他的選擇是什么。
因此，最好的需求收集方式是通過運營、市場以及客服的同事們的反饋，因為他們是離客戶最近的人，他們每天都跟客戶打交道，了解這個行業從業者的一些基本情況。很多時候，客戶回訪和運營對接的時候用戶會提出一些功能的建議。
通常的一種情況是，在 SaaS 行業，你的一個客戶的流失意味著你的競爭對手多一個客戶。因此一般市場都會有競爭對手的信息，他們會知曉客戶從我們平臺流失到其他平臺的一些原因。最重要的是，他們也為你提供了絕佳的競品資料，進而可以進一步明確需求。
收集好的需求，該怎么處理呢？
工具之前我用的是 trello，很好用，你可以將需求按照類型分為不同的看板，規劃產品的進度。
之后由于團隊的原因，改用 teambition，功能要豐富點，可以寫測試案例等，對于國內用戶比較友好；可以按照 KANO 模型將需求劃分為不同的類型，用以安排產品。
KANO模型
基本（必備）型需求——Must-beQuality/ Basic Quality
一個產品應該具有的基本功能，能滿足用戶的基本需求，比如，微信的基本功能是即時通訊。
用戶不會因為該功能的出現而覺得滿意，因為這是基本的、必備的一項功能。如果連這個都沒法滿足，用戶滿意度會大幅下降。
期望（意愿）型需求——One-dimensional Quality/ Performance Quality
用戶迫切希望產品能提供的功能，當提供該需求時，用戶滿意度會大幅上升，當不提供該需求時，用戶滿意度會下降。
比如百度網盤一直為人詬病的下載限速，無法對單次下載而付費。而需要開通會員，用戶的抱怨恰好說明了其痛點；當提供單次下載付費的服務時，用戶滿意度明顯提升。
興奮（魅力）型需求—Attractive Quality/ Excitement Quality
用戶對該類型的需求并無明顯的期望，但是若產品能夠提供該類需求，用戶滿意度會極大提升，也會培養用戶的忠誠度。
比如，很多產品都有實驗室功能，即對那些不是必備需求的功能設計一個開關，用戶打開后可以進行使用。對于有的用戶來講，這些功能很大程度上會帶來驚喜。當然，每個人期望不一樣，實驗室方案也可以視為另類的灰度測試，用以驗證用戶對于功能的需求。
無差異型需求——Indifferent Quality/Neutral Quality
產品無論是否滿足該類需求，用戶的滿意度是不會變化的，正如用戶不會因為收到「瑪莎拉蒂5元代金券」而感到開心。因此在 B 端行業，開發時間有限的情況下，無需為該類需求投入資源。
比如優化一個用戶訪問量很少的網頁，也無需因為領導或者客戶的個人喜好而改變后臺頁面的顏色。無論使其鮮艷活潑還是穩重大氣，后臺滿足基本的視覺要求和規范即可。當然，這并不意味著你可以把后臺設計的簡陋和雜亂。
反向（逆向）型需求——Reverse Quality
當提供方向性需求的功能時，會招致大部分用戶滿意度的大幅下降。比如常見的在搜索中摻加廣告、強制用戶授權過多個人信息以及推送大量無用的消息等，會導致用戶的反感。
通常需求的收集不是你一個人在進行，產品經理、老板以及其他同事也會幫助你收集，匯總到你這里的需求會開會進行討論，下一步要做什么。
做之前首先要對需求進行評估，評估的原則基本是按照 KANO 模型來，但是也會有比較特殊的情況。
交互設計師需要注意的是，你除了需要關注用戶體驗的問題以外，還要與開發一起評估該需求的實現；你不懂技術沒關系，開發會告訴你該需求的落地會出現什么問題，在實現上會有什么難度。這些在評估需求的階段都要提出來，并且在交互層面解決掉，否則你畫出了原型以后，開發告訴你這個頁面必須要修改，否則開發成本過大，無法在排期內完成，這個時候你再去改交互稿將會費時費力。
評估完需求，定好下期開發的需求后就結束了么？
其實并沒有，因為需求收集不可能是一個固定的階段，它是漸進的、不確定的。因此收集需求和評估需求會不斷在實際工作中疊加和重復，比如你制定好了需求優先級，已經著手開發了；這時候老板或者領導突然又增加了一個優先級很高的需求，所以你得重新安排這些需求。如何在敏捷開發中保質保量的完成工作任務，這是一場斗智斗勇的 battle。
前面講到需求評估的時候，需要與開發人員一起評估技術難度。其實在你將需求落地為交互原型的時候，也需要持續溝通，這完全是為了避免因為技術問題而產生修改設計稿或溝通不順暢的問題。
如果你是在做的過程中，持續與開發人員保持溝通，能了解到他們是如何實現這個功能的。當然，有些基本的設計原則所不允許的事完全不用屈服于他們的「淫威」，畢竟他們得按照你的方案來。如果開發懶惰而想通過最簡單的辦法來實現，用戶體驗又是極其不友好，那么請直接對其說「NO」。
比如常見的刪除的二次確認等彈窗，一般最好的體驗是在按鈕旁邊彈出；但有些開發懶得寫彈窗，直接調用瀏覽器的彈窗，即瀏覽器頂部經常出現的那種確認彈窗，這個時候你要堅決告訴開發，這樣搞是堅決不行的。
需求的落地伴隨著競品分析，判斷一個需求是否靠譜、落地方案是否成熟的一個重要途徑就是競品分析，可以通過調查研究相關競品是如何進行設計的。這對于我們有著非常大的幫助，可以避免很多的彎路，甚至能避免犯錯，提高交互方案的可靠性。競品分析又是個比較繁雜的事項，如果是有特殊要求可以做成報告的形式，如果僅是去參考對照的話只需要去體驗競品即可。
B 端的業務比較重要，尤其是涉及到數據的增刪改查和金額的計算，一旦出錯，將會導致無法挽回的后果。因此在出錯前和出錯后，應該有相應的挽回機制。
1. 出錯前
內容編輯類的功能應該提供自動保存草稿功能，防止沒有及時保存而丟失內容；刪除、禁止等較重操作應該有二次確認，防止用戶誤刪。
對于操作流程應該建立明確的引導機制，長表單可以分開按步驟填寫。
提示信息應該明確而及時。比如一個表單需要登錄才能填寫，在未登錄的狀態下，應該先提示其登錄再填寫否則用戶在填寫大量信息后，因為一個錯誤而前功盡棄。
系統內的禁止信息、警告信息、提示信息建立一套相應的規則。
2. 出錯后
用戶的時間就是金錢，這對于 B 端商家角色中尤為重要，大量訂單的處理、表格化的導入和導出、批量管理和網站運營等方面，對于效率有著極高的要求，商家通過可視化界面來完成某項任務。
在這其中，影響最大的莫過于交互方式了，相信各位一定用過各大銀行的網站，頁面的導航關聯性弱、結構不合理、提示不明確、交互流程過長，甚至有的網站光是登錄，就得大費周章。
如何提率，我認為主要從以下幾個方面著手：
1. 提高易用性
如果你的產品，讓人看一眼就能上手，那么說明是非常友好的設計。易用性不一定意味著簡單和低智，依據復雜守恒定理（泰勒斯定理），每個應用程序都有自己內在的、無法簡化的復雜度。
所以，提高易用性意味著要設計合理的交互，易用性分為對新手（小白用戶）友好和對老用戶（專家用戶）友好，包括數量最大的中間用戶。
如果你的界面是僅僅對于新手友好，那么可能完成的任務都是簡單而輕松的。但是對于老用戶，他需要更復雜的功能來處理大量龐雜的任務；因此在設計的時候，既要提供傻瓜式的操作方式，也要對專家用戶提供提率的工具。
2. 智能化
此處的智能化既包括通過大數據或者人工智能自動將操作步驟變得簡潔，也包括諸如一些字段輸入、自動定位、圖片識別、OCR 等方式來使用戶的效率得以提升的功能。
以前的用戶要摳圖可能會在 ps 中操作好幾個步驟才能完成，但是隨著機器學習技術的發展，ps 已經可以更加智能的摳圖。當然，還包括其他功能的智能化。
在 B 端 SaaS 領域，智能化也是一個重要的趨勢，針對不同的商家所面臨的不同的行業領域，我們或許可以提供更加全面且友好的服務。
3. 場景化思維
如果你深入了解你的用戶，去觀察他們整個行業的運作模式，以及他們對于業務的處理方式，你就會明白你的產品的走向。
你需要深入每一個場景，比如，在戶外旅游領域，發布旅游產品線路的可能是在辦公室中的編輯人員，帶隊出行的是在戶外場景中的導游，現場簽到的可能是集合點的管理人員，而處理訂單的又是另一個坐在辦公室里的小伙伴。
他們需要協同工作，才能使各項工作順利展開，發布活動-用戶報名-訂單管理-報名人統計-活動成行-集合點簽到-帶隊出發-旅游結束-活動評價-領隊評價-交易成功，這一系列流程中，面臨的角色是復雜的，而意外也是常有的事。比如報名人無法參加活動而導致的退款、活動因為天氣原因而無法成行、戶外活動發生意外等。
你需要做的就是：
場景化的思維會讓你設身處地為一線操作用戶的體驗而努力。因此，交互稿完成以后，徹底回退到小白用戶的身份，假裝自己是在某個場景下要做某件事，通過你的交互方案，能否順利完成自己的目標。
此處的通用性是指，在 SaaS 軟件領域，不同客戶所面臨的行業有一定的差別，可能這個功能對于 A 用戶極其重要，但對于 B 用戶，該功能并不重要。比如有的客戶想要在前臺展示某活動的報名人的姓名以增加真實性，用以吸引用戶參加；但是有的客戶就明確反對該功能，認為這個功能侵犯了用戶的隱私。
諸如此類的需求相離、甚至相反的情況太普遍了。合適的解決方式是建立兩套開關，一套是由 SaaS 服務提供商的統一后臺來配置，用以區分比較大的行業差別，比如電商領域中，可以配置店鋪類型為：美妝、服飾、食品、電子產品等；另一套開關在客戶的站點后臺，用以控制不同的站之間的差別，比如前臺界面樣式、交易流程、相關字段或菜單的前臺顯示等。
另外比較重要的一點，也是最基本的一點，軟件設計中存在一個原則就是高內聚低耦合，模塊化設計，用以提高系統內部組件的復用。
交互設計也是同樣的道理，可以將你的商品視為一個模塊，那么這個模塊無論是添加到網站，還是小程序，我只需要創建一個商品即可，可以同步更新到不同的平臺。
另外，訂單的管理只需要添加相關的標記即可（比如來自小程序的訂單標記為小程序，淘寶訂單標記為淘寶等），一個平臺發布，多個平臺同步，有效提高了運營人員的效率。
同樣的，如果你的 pc 端產品和移動端產品沒有實質性的運營差異（即當成兩種模式來運營），那么很多數據（如文案、圖片、banner等）的獲取可以采用同一個數據源 。
最后，提高系統內的一致性，減少用戶認知成本。在同一平臺內的頁面，樣式和交互上要盡量保持一致性，不要有的地方是總金額，有的地方是總價格，這會讓用戶犯迷糊。提高通用性，也意味著你需要關注并熟悉系統內不同功能之間的關聯性，盡量做到統一處理。
在進行商業化運作和產品功能的優化時，對于正向的用戶需要激勵，對于負向的用戶需要限制。
這是我在讀完有贊的白鴉寫的關于有贊產品設計原則的文章后，影響最深的一個原則，他寫到：
我們的使命是幫助每一位重視產品和服務的商家成功?！该恳晃弧购汀干碳页晒Α故俏覀冏钪匾年P鍵詞，我們要服務的是每一位商家，然后幫助每一位商家成功，但是為了整個生態的健康，那些不重視產品和服務的商家，我們是（可以）不服務的。所以我們在產品設計原則上，在產品做一些功能的選擇上，如果這個功能做完了會導致商家不重視產品和服務，我們是不會/能做的。
舉個例子：消費者購買之后（可以）有一個評價，我們的購物評價是要么開啟要么不開啟這個功能。我們不接受商家去刪購物評價，因為商家一旦可以刪了消費者的差評，他就（很可能）不會那么重視產品和服務了。所以有贊永遠不會提供刪除商品評價的功能，商家要么就不開啟?？梢圆挥茫绻镁鸵邮苡腥苏f你不好，商家可以去跟消費者溝通，溝通完了消費者自己改，但是我們不提供讓商家刪壞評價的功能。所以，這就是最基本的有贊產品設計原則，我們只服務重視產品和服務的商家，我們所有的產品設計原則都是需要這樣。
——《白鴉內部培訓：企業服務類產品的底層邏輯和有贊產品設計原則》
更多內容請看：
曾任支付寶首席產品設計師，現任有贊創始人的白鴉是很多人心里的產品大神，這份由他在內部分享的《產品設計原則》值得設計師、產品、運營等閱讀學習。
閱讀文章 >>我將其概括為一個產品的中正原則，即中立且保持正向原則。
一方面，對于企業未來的發展而言，正向的用戶能帶給平臺無盡的潛力，平臺可以和商家一起成長，而負向的用戶，則會給平臺帶來隱患。比如，淘寶既限制商家的違規運營和欺詐客戶，也限制 C 端用戶的惡意薅羊毛，在商家和用戶之間做一個中立者和調節者的角色。
我在做需求的時候，也遇到過很多的負向需求，這在商家看來是一個必須的功能，作為平臺應該提供。但是若是提供給商家，則會對消費者的利益造成損害，刪除差評就是一個很好的例子。
看了白鴉對于有贊產品原則的闡釋，我覺得每一個平臺類的產品，都應該保持自己的中正原則：
在 B 端行業，口碑傳播是非常重要的一種被動營銷方式，很多 B 端公司都是低調的潛行者，堅持中正原則，并不會損害自己的利益，反而會獲得商家的尊重和消費者的信賴。
啰啰嗦嗦說了這么多，比較細碎，不乏邏輯凌亂的片段，但也算是對自己兩年以來對于 B 端交互的一些心得吧。
其實交互的原則基本都是通用的，無非就是根據平臺屬性做一定的調整，不同的是產品所處的行業，每一個產品都無法脫離其所處的行業而存在，這也是使用產品的具體場景。
因此做一個產品前，一定要了解行業，去熟悉行業的通用做法，了解行業的專業術語和規范，研究行業的所屬群體等，這樣你就會做出真正適合市場且能讓大多數用戶滿意的產品。
文章來源：優設
藍藍設計的小編 http://www.syprn.cn