那么之前的文章都是對于B端這樣一個系統，進行概括性地講解，系統的講解。那么從今天開始，我將對B端系統對大家進行一個詳細的講解，包括每個控件的具體使用。這就是我們從大到小，再由小到大的這樣一個學習過程，那么目前我們要進行收縮范圍，要精確的明白某個控件應該如何使用。今天我所講解的是表格頁的具體使用方法，以及如何分析現有表格頁的問題。
文章句句將會直擊重點，拒絕長篇大論。
那么為了方便大家的理解和查看，我這里去列舉一張表格頁的圖片。以下的講解都會圍繞這個表格頁的圖片，進行詳細的剖析講解。那么，在看的過程中，我們要時刻的翻到上面這張圖片，對照著這張圖片來吸收消化今天的知識。
大家可以看到這是一個關于資產清單的表格頁，那么它的構造也符合我們常規的表格頁。首先我們對這個表格也進行分析，我們可以看出表格頁是由這幾部分組成的，它們分別是數據過濾，數據操作和數據查看。
數據過濾部分指的就是我們頁面上方的這樣一個搜索框，包括。我們表格頁內容頂部的資產編碼，資產名稱，它們后邊都有這樣一個篩選器，我們可以按照順序或者是倒序進行篩選。這里我把數據過濾的部分用紅色框標注一下。
那么這個表格頁我們可以看出，它的數據過濾其實是非常少的。更多的數據過濾有什么呢？按照資產的新舊程度，我們可以將它分為新的、舊的、淘汰的。那么這三個按鈕也可以作為數據過濾放在我們表格內容頁的頂端。
當然，維度有很多個維度，我們不僅可以對資產的新舊程度進行分類，我們也可以對資產的購買時間進行分類，比如2018年、2019年、2020年至今，我們可以對這樣一個時間維度進行分類。同樣，操作按鈕也是放在表格也的頂部，也就是我們搜索框的后邊。這樣用戶在篩選起來會比較的方便，具體需要按照什么維度進行劃分，需要我們找到，我們的業務目標是什么？我們要找到我們的這個表格頁希望給用戶傳達出怎樣的信息？那么用戶最關心的點是什么？找到這些之后我們就可以對用戶最關心的點以維度進行劃分更多的篩選器，有助于用戶更好的去瀏覽內容。
此頁面我們可以看出他的篩選器過于少。在這里我們并不評價，數據過濾少是好事還是壞事？但是我們要記著，我們時刻要具備分析某個功能模塊。究竟應該放在哪里？它應該怎樣去劃分？這是我們要牢記的點。
那么剛才也說過，一個表格頁分為三部分，分別是數據過濾，數據操作和數據查看?，F在我們來講第二部分，也就是數據操作。那么什么是數據操作？數據操作，顧名思義就是對頁面中的某些數據進行操作功能，可以是增，刪，改，查等等，它都是屬于數據操作。那么數據操作，它一定是一個可點擊的一個功能按鈕，在頁面中，我們如果仔細找一找很容易就會發現數據操作的模塊。在這里呢，我同樣用藍顏色的框給大家框起來。
在這里，藍色框框起來的部分，就是我們這個表格頁中的數據操作部分，也就是第二個部分。
那么很多人可能會有疑問了，說為什么同樣都是數據操作，有的數據操作在上面是純色的一個按鈕顯示，那么有的數據操作又在表格內容頁里，這些究竟有什么區別？
沒錯，數據操作。它擺放的位置是多種多樣的，但它遵循一個規律，什么規律呢？也就是說在我們執行數據操作的設計這樣一個功能模塊的時候，我們需要對其進行第1次的劃分。數據操作部分我們可以分為單行操作，批量操作和全局操作三個操作點，也就是說所有的操作功能無非就是在這三個類別中的某一個類別。好，下面我來給大家詳細講一下什么是單行操作，什么是批量操作和全局操作。
我相信大家通過字面意思也能對這三種操作方式有一定的了解，單行操作指的是針對表格內容頁的一行數據進行操作，一般就是放在表格頁的這一行的尾部。那么批量操作針對的是對多個數據進行操作，他一般放在表格內容的頂部，那么什么是全局操作？全局操作是對整個表格頁的頁面進行操作，比如說我要導入新的表格，或者說我要替換這個表格，那么根據優先級順序來說，全局操作大于批量操作，又大于單行操作。這就是數據操作的三個不同點，那么很顯然在我們上張圖片中。只存在單行操作和批量操作，并沒有全局操作。
接下來我對最后一個部分，也就是數據查看這個部分進行一個講解。數據查看也就是我們系統所反饋給用戶的一些數據，它包括具體的數字，也包括一些漢字，所有的信息都可以被列為數據查看。那么由于這個表格頁上的數據查看部分沒有去寫一些信息，將這些信息打碼隱藏了，但是我們不難想象它填入信息后的樣子，也就是整個表格的內容頁的核心部分就是我們的數據查看，無論是數據操作還是數據過濾，只是進行一些功能上的操作，那么用戶最終的視線還是要落在數據查看這個部分，同樣我用橙色的框給大家標注出來。
如果說我們的數據查看部分，其中的數據是混亂不堪的，或者說它的列數是非常的繁瑣的，那么對用戶的體驗非常不好，也不能在第一時間抓住有效信息，所以我們在設計的過程中一定牢記7±2法則進行設計。
那么有的人有疑問了，說如果我的列數非常多怎么辦？如果你的列數非常多，那么你只顯示其中的重要信息在表格頁這一塊，其他信息應該歸納到查看詳情，或者是二級頁面內，不能在一屏中展示過多的信息，即使你放了這么多信息，你要記著那也是無效的擺放，用戶在進來之后根本就不想看一眼，所以在這里我們要一定要記著7±2法則，或者說我們給自己定一個列數的系統規范也是可以的。
以上，就是今天對表格頁的詳細講解，那么要學習更多知識也可以進我的公眾號學習。我們要知道再簡單、再復雜的表格頁也無非就是三塊，數據過濾、數據操作和數據查看，當然在頁面中也存在我們的導航系統，它們共同組成了一個完整的表格頁，表格頁所遵循的宗旨是簡單高效，信息直觀，操作方便快捷。
文章來源：站酷 作者：弧形線
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：B端和C端是產品經理經常接觸到的兩個話題，那么什么是B端C化呢？這篇文章從B端和C端的區別入手，詳細解答了什么是B端C化以及為什么要B端C化，一起來看看吧。
最近很流行一個詞——B端C化，解釋出來就是可以用C端的模式和思維來對B端產品進行設計，討論者大致分為兩種觀點：
1.C端產品市場已經趨于飽和，可拓展空間剩余不多了，B端產品市場還是一片藍海，于是產生了一些C端設計師轉型去做B端了，將一些C端的模式和思維帶到了B端設計中，導致越來越多的B端逐漸C化；
2.B端產品市場互相競爭，為了在同市場中打出差異化，于是一些B端市場開始招攬C端設計師培養轉型，并且嘗試融入C端產品的模式和思維在同市場內競爭，是產品設計的“內卷化”現象，導致市面上的C化的B端產品越來越多；
但上述無論哪一種觀點，都在闡述一種現象或者趨勢：不管是交互還是視覺還是UI，目前部分C端設計師正在往B端設計師轉型。這個現象的發生對整個設計行業來說無異于新增了很多新亮點——市場上越來越多的B端交互、數據可視化視覺等需求，進而導致對市場培訓行業開始產生B端培訓的訴求，同時也破空而出了很多優秀的B端設計師。那么B端C化到底是什么，和傳統B端C端有什么區別，有這方面想法訴求的同學怎么去實現轉型？
由于我本人之前是做C端UI設計師，到后來轉型成為B端交互設計師，而接觸的業務恰好涉及B端和C端的聯動以及多角色之間的協作，所以這篇文章借助結合我個人的經驗和看法，談一談自己對B端C化的理解。
在談B端C化之前，需要先了解B端和C端的區別是什么。B端C端的區別網上有很多文章和概述了，大致歸納下來主要以四個維度去區分：受眾主體、上線周期、業務類型和產品側重點這四個維度，其余的維度也會有區分，但是影響較小，主要還是圍繞以上四個維度進行B端和C端區分。
受眾主體也就是相對應產品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場景和路徑較為單一的，比如C端產品就以年齡層、城市、性別等來劃分用戶，每個階段的用戶都有不同的訴求、認知和習慣等等；在做任何決策方面都屬于偏感性（Heart）的個人決策（Personal）；用戶穩定性則比較差，要是對產品不滿意，可以立馬換另一款產品，轉換門檻低，有多個競爭對手產品可供選擇；
而B端產品的受眾主體則是為組織群體，特征為多場景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權限等劃分用戶群，但是之間的關系更加復雜，比如設計一個銀行內部管理系統，用戶群就很明確清晰——銀行各級職員角色，根據職級關系設計不同的功能以及權限；在做任何決策方面都屬于偏理性（Head）的團隊性決策（Team）；用戶穩定性較強，要是對產品不滿意，也只能被迫適應和忍受，轉換成本較高，幾乎沒有其他產品可供選擇
上線周期就是指產品從需求階段到設計階段到開發階段直至最后產品上線所需要的周期。
C端產品上線周期模式有個很明確的特點：快速迭代、敏捷，很多C端產品功能更新迭代的速度很快，上線周期非常短，往往半個月甚至一周就完成開發上線，加上用戶群的多樣性和跨度大，所以在上線的時候往往會需要AB實驗去驗證方案可行性；
B端產品上線周期則是和C端一個對立面——長，少則雙月/季度多則半年/一年等，因為B端產品流程上都屬于重型流程，角色之間關系復雜，交互系統較為繁瑣，需求的改動和迭代并沒有那么頻繁，也不需要像C端產品那樣快速上線搶占市場，所以B端上線周期會很慢，也導致在工作強度上相比C端較為輕松一些，但是缺點就是結果沒有C端來的那么快和明顯。
C端產品的核心競爭力就是產品本身，關鍵總結就是讓用戶爽就完事了，所以C端產品的需求類型往往圍繞用戶群的痛點產生；因為C端用戶跨度大，不同的用戶群體有不同的痛點，所以導致C端的需求類型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯中逐漸得出正確的結論；
B端產品的核心競爭力除了產品本身，還依賴復雜的關系、渠道、技術和資源，你的關系夠硬、渠道夠廣、技術夠領先、資源夠豐富，哪怕你的產品很一般，一樣能領先其他同行業的競爭對手，關鍵總結下來就是讓用戶贏就夠了；B端產品的需求類型雖然也是圍繞著用戶群的痛點產生，但需求的目標是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產品來說，B端產品是需求更加明確且容易達成目標。
產品側重點無異于區分C端和B端最明顯的門檻了，C端產品的側重點主要在于體驗，而B端產品的側重點主要在于效益。
前面提到過C端產品核心讓用戶爽就完事了，加上基于用戶更換產品的成本很低：你這款產品我用不爽就換掉了，所以C端產品的側重點永遠以用戶體驗為主，前面說的需求業務類型也幾乎是圍繞用戶體驗產生的；大家對比市場上同類型的C端產品，界面、交互、功能都不會差很多，是因為經過長時間的更新迭代，已經沉淀下來目前最好的用戶體驗類型了，隨著產品量級越大，改變用戶體驗類型就越謹慎；
C端產品就是為了尋找并解決用戶痛點、癢點和爽點，加上品牌性、用戶隱私等因素考量，產品側重點聚焦于用戶體驗。
B端產品側重點則是圍繞效益了，因為作為一個團隊使用的產品，不管是從易用性、功能性還是安全性，為這個團隊解決問題為首要基礎，那么使用者的體驗、產品的美觀度等等相較于優先級就沒有那么高了，所以導致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認知上；
B端產品就是為了使用產品的團隊解決效率、成本、營收的問題，加上產品的穩定性、安全性等因素的考量，產品側重點自然更聚焦在效益上。
前面了解了B端和C端產品的區別，接下來聊一聊什么是B端C化；簡單來說從字面意思理解就是B端的設計層面逐漸靠近C端，網上也有很多B端可視化、趨勢潮流的設計和文章，但是B端C化不僅僅是從視覺設計上的改良，下面我逐漸從大到小聊一下我對B端C化的理解。
在做過很多B端產品之后發現，往往很多產品經理是對整個產品架構、功能形態一切都清晰地了如指掌，但是有時候在搭建產品架構的時候，功能形態單一粗糙，步驟復雜且笨拙；站在業務產品的視角來看，架構邏輯上都是沒有問題的，但是站在用戶視角來看，整體框架是混亂破碎的，步驟繁瑣且復雜，導致用戶對產品的認知變差，但是又不得不去用這個產品，只能被迫去學習使用。
比如一個產品案例，就是一個產品的底層邏輯是前端輸入素材id，后端返還一個素材后就可以使用了，站在產品業務視角來看，這樣設計沒有什么問題，符合產品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來給用戶選不好嘛？
行為習慣自然是指用戶群在該行業下的行為習慣，電商行業、社交行業等等不同行業的習慣、專業術語等都不相同，這個在C端產品中都很能得到體驗，比如電商行業的大紅大紫，社交行業的左右滑動等等，這類有著很明顯的行業屬性和大眾認知，一樣是B端設計中應該注意的點。
最經典的案例就是紅色綠色的定義區分，在數據產品認知中，綠色代表數據漲了，紅色代表數據跌了，比如GMV數據，DAU數據等，紅色為重點關注的數據；而在金融行業中，基金股票紅色代表漲了，綠色則代表跌了，所以設計的原則一定得是基于不同行業的用戶行為習慣。
B端產品的信息量一般是很龐大的，尤其是數據、表單、審批等B端產品，涉及到不同角色不同權限的開放等，所以用戶能否能一眼看清關鍵信息，能否幫助用戶快速達成目標，是交互層面針對信息層級的設計處理一個重要的環節。
之前很常見B端產品中信息處理的方法就是堆積處理，直接將信息、數據等平鋪展示，比如很久之前的某牛商家端后臺等老舊系統；現在很多新的B端產品都是以模塊化處理方法將信息層級區分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設計。
設計語言自然是B端設計中標題、字號、顏色等規范標準，早些年把B端產品組件化后且開源的自然是阿里老大哥了，當時最早的AntDesign、以及后來的ElementDesign組件庫，到現在都被很多中小企業甚至大廠某些產品一直使用中，但隨著B端產品的普及和發展，越來越多的企業開始將自己產品沉淀出完善成套的設計語言，并搭建出自己的組件庫投入使用了。
如何去衡量用戶體驗是否是好的，最客觀來講當然是通過數據去衡量，而數據往往在C端產品中很常見，不管是體驗數據還是表現數據，都是C端產品中最為關注的；然而在B端產品中，更多收集的一般都是業務表現數據，幾乎沒有衡量用戶使用平臺的相關數據，大多衡量體驗的方法都是依靠問卷反饋的形式；但在B端C化的過程中，用戶體驗的數據也逐漸被加入到B端產品當中來，成為體驗標準的考核之一：比如某個任務完成的時長，報錯出現的頻次、某某工具的使用率等
最后就是B端C化表現層的設計，包括目前主流的設計趨勢如大數據可視化、3D建模、材質質感、Dark模式等都逐漸融入到B端產品中，使得B端產品不再追求簡單的“功能優先”和“能用就行”，而是像C端那樣追求更美觀的視覺，更極致的體驗
總結下來“B端C化”就是B端產品無論是從功能架構還是視覺體驗，越來越趨于人性考慮設計，越來越關注使用者的感受和反饋，因為說白了不管B端產品代替成本高不高，用戶是一群專業人士還是普通職員，使用者歸根到底還是“人”在使用產品，那么必然會帶來體驗相關的問題；
所以B端C化會逐漸形成一種趨勢，在企業平臺資源支持的情況下，會將B端產品的功能放大，追趕市場競爭，逐利行業內卷，在體驗和視覺感官上也會更加的人性化，結果自然是產品設計者們更加的卷了（手動狗頭）。
無論是現在的B端C化還是將來其他多元的設計趨勢，隨著市場的競爭和行業內卷，已經反推著設計師們不單單局限于照顧自己的“三分田地”了，無論是之前視覺設計師開始學習3D建模，還是UI設計師嘗試接觸代碼設計，設計師最大的品質就是應該緊跟時代的趨勢變化，及時調整補充自己的能力，提升自我的競爭力，才是在當今環境下立足的根本。
文章來源：人人都是產品經理 作者：雨灰
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
編輯導語：有效地利用 B 端設計系統，產品設計師將可以更高效地做出更好的交互設計。那么前段時間發布的 Arco Design 設計系統，和已有的阿里 Ant Design 系統，二者有什么區別呢？本文作者對兩大設計系統典型頁面發表了他的看法，一起來看一下。
前兩周字節發布了自己的中后臺設計系統 Arco Design，在仔細閱讀官網文檔了過后，想和大家聊聊我自己對于 Arco Design 設計系統的與阿里的 Ant design 的一些對比和差異分析。
ArcoDesign 是一套設計系統的簡稱，是基于字節跳動所有的中后臺產品。ArcoDesign 主要服務于字節跳動旗下中后臺產品的體驗設計和技術實現，主要由 UED 設計和開發同學共同構建及維護。
Ant Design 是阿里打磨出的一個服務于企業級產品的設計體系， 通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
Ant 和 Arco 兩者的前端框架都是基于 React 和 Vue，設計價值觀和設計原則也有所不同。Arco Design 基于「清晰」、「一致」、「韻律」和「開放」的設計價值觀，試圖建立務實而浪漫的工作方式。在「設計價值觀」的堅持上，Ant Design 有四點與眾不同：「自然」、「確定性」、「意義感」、「生長性」。
我的個人理解 Arco Design 是站在設計規范的基礎出發點考慮，希望給用戶傳遞出來的價值出發，讓用戶深刻感受到系統是「清晰」、「一致」、「韻律」和「開放」的，而 Ant Design 所傳遞出來的價值觀似乎更加玄學或者說格局更高，上升到更高的思維境界，即大自然思想和社會責任。
當然這部分的內容相對比較虛，每個人側重點想法都不同，大家可以自己去理解一下這部分內容。
接下來會從工作臺、表格、表單幾個典型高頻的 B 端界面進行分析，看看兩者的差別。
1）布局
Arco 的卡片列布局靈活，基于 24 柵格進行布局，將整個柵格區域 2:2:1 的比例進行分割，信息卡片的寬度根據柵格寬度進行自適應，這樣的工作臺頁面既靈活也能夠滿足業務需求。
Ant 的卡片列布局采用 3:2 比例進行布局，同樣是基于 24 柵格。目前主流的 B 端頁面都是以 24 柵格為基礎進行設計。3:2 還是 2:2:1 這兩種卡片布局方式沒有絕對的優劣，主要是根據我們頁面的信息量以及行業屬性去確定。如果工作臺所展示的單個信息量較多可采用少列大寬度進行布局，滿足信息展示的最優布局。
作為 B 端的工作臺頁面，核心訴求是能夠清晰找到用戶想要的信息，想要做的內容，所以我們設計師要優先保證用戶能夠快速定位到核心的信息，快速到達要到達的功能。
2）信息展示
Arco 針對同系列的模塊設計了兩種尺寸的間距，例如歡迎問候信息與下方的數據信息之間是大間距，數據信息與下方的團隊動態最近項目之間是小間距。
格式塔心理學的接近原則指出：接近的事物會被認為是同一個整體，擁有相似的功能或特征。所以在這里設計師通過兩種間距的留白對我們視覺進行暗示，強調信息之間的關聯程度，便于區分信息層級。
Ant 在卡片方面沒有為卡片間距設置兩種尺寸，從上下到左右都是一種尺寸，這樣做的好處可以讓視覺更加對齊，顯得頁面更加規整，不好的一點就是內容區域外間距與卡片之間的間距一樣寬視覺上并沒有聚焦，顯得內容區域很散。標題方面沒有進行加粗重色強調，將內容進行突出，使用戶更加聚焦于內容。
3）導航方式
兩個系統默認都采用側邊欄導航方式，側邊導航在國內的 B 端產品當中最為常見的。將菜單欄放置在左側，頁面布局上基本為左右結構，將導航菜單放置左側固定。側邊欄導航擴展性強、展示靈活、能夠快速定位，缺點是不易閱讀、閱讀沉浸感低。
Arco 導航區域與內容區域都使用同類淺色，采用線的方式進行分割，整體視覺比較清爽。Ant 導航區域使用了傳統的重色與內容區進行區分。
目前的設計趨勢流行淺色導航，有幾個產品的 WEB 端進行了一系列的大改，YouTube、Twitch、Twitter 都進行了重新設計，他們不約而同地將塊面去除，去掉多余的的灰色，通過留白和空間將頁面拉開。這否是下一個 WEB 端所要追尋的趨勢，我還不得而知，但是對于導航層級多的側邊欄導航，我仍然建議使用深色背景區分導航欄。
有一個細節，在頁面背景有一個以登錄的用戶名形成的一個背景水印，在 B 端的頁面中，對信息的保密程度要求很高，這里是為了防止公司核心數據資料泄露，在截圖的時候會有水印的存在，增強了信息的保密級別，這是一個很好的設計洞察點。
1）表格樣式
表格作為組織整理數據的手段，可以有效地向用戶展示數據信息，是 B 端產品中出現最高頻的模塊之一。
用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化（關聯和區別）。好的表格信息展示設計，應當是能夠輔助用戶高效便捷地實現以上場景中的訴求。
Arco 和 Ant 的表格設計樣式與市面上多數產品都類似，采用表格列無分割線條、表頭與內容左對齊、數字右對齊的方式。
合格的表格設計要定義合理的表格行高，在具體設定表格行高時，由于表格中以文字信息為主，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。
文字行高可以設定為字號的 1.2~1.8 倍，文字與分割線間距離可以設定為字號的 1~1.5 倍。
2）信息展示
表格行高決定屏幕內能呈現的行數，即用戶在一屏內能獲取信息的數量，主要影響用戶縱向對比數據的效率。
在 B 端用戶使用場景中，數據量極大的表格的展示問題是體驗優劣的關鍵因素。對于 1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數的感知不強，但對于 1366×768、1280*720 等這類小屏，顯示行數有限，用戶進行縱向數據對比的效率就會有所降低。在設計前，應當充分了解目標用戶的行為訴求，了解目標用戶設備屏幕分辨率的占比分布情況，有針對性的設置行高。
B 端產品的特點之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。產品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設置開放給用戶，建議不是完全開放給用戶去調整尺寸，而是給出一定階梯度的快速選項，例如舒適、標準、緊湊三種高度來滿足用戶需求。
Ant 的表格功能很齊全，很多功能都是 B 端產品的痛點，例如表格可以通過調整單元格行高來調整密度，緊湊模式下可以顯示更多的數據。
3）操作路徑
作為一個查詢表格，我不是很理解為什么 Arco 將查詢條件放置在表格右上角這么隱秘的位置，而將明顯的左上角放一個添加按鈕，如果存在多個查詢條件是不是要從右往左放置呢？這里我不是很理解，大家也可以說一下自己的想法，相互探討一下。
Ant 的表格使用路徑符合 F 型視覺動線布局，在 B 端的市場中這種表格的設計方式已經符合用戶的操作習慣了。
在 2006 年時候，尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享，他們通過研究發現，用戶傾向于一種 F 模式去查看網站。F 模式，能很好地幫我們創建好的視覺層次結構設計，因為這是人們可以輕松掃描設計一種布局，它能讓大多數用戶感到舒適，因為我們用戶一直從上到下，從左到右閱讀。
在設計之前，我們先要去確定哪些內容最重要，明確信息的優先級，只有清楚知道你希望用戶看到什么，才能將它們放在用戶視線熱點中。
個人認為在表格設計的完整度和設計的合理性方面來看，阿里的 Ant 系統做得比字節的 Arco 更好。
表單在界面中主要負責數據采集的功能，任何一個表單都可以被拆解成三個最基本要素：
標簽（標題）、輸入框和按鈕。
1）表單布局
Arco 的表單屬于復雜表單，當表單條目數在 7 個以上，可歸類到復雜表單，這時候就需要根據表單的復雜度、邏輯性、關聯性進行判斷，選擇合適的分組方式，進行歸納簡化，降低表單填寫負荷。采用 3 列布局，便簽與文本框上下左對齊，這樣的對齊方式有利于用戶瀏覽的效率、對齊的美觀以及國際化拓展頁面的對齊問題。
Ant 的表單也是較為常規的布局方式，有一點差異就是文本框并沒有右對齊，這里阿里自己也做出了解釋：文本框是根據需要填寫的字段進行長度展示的，需要填寫內容比較長的文本框就會比較長。實際業務中，大部分 input 所需填寫內容都存在理想長度，input 的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。
2）標簽對齊方式
Arco 和 Ant 都使用了頂標簽的形式對齊。
標簽分為左標簽、右標簽、頂標簽三種，不同的對齊方式，使用場景不同。
該如何選擇呢？我們需要從 3 個方面進行考慮：操作效率、標簽長度、屏效、視覺對齊。
① 操作效率
根據 Matteo Penzo 的研究總結得到的瀏覽時間表發現，標簽移動到輸入框的時間，頂部對齊最快只要 50ms，其次是右對齊 240ms，左對齊耗費時間最長 500ms。
因此當以操作效率為主時，推薦使用頂對齊的方式。
② 標簽長度
當標簽長度超過 8 個字，或者需要考慮中英文雙版本時，推薦使用頂對齊的方式，其容納的標簽文字更多，拓展性更好，比如 Ones 的建任務的標簽，就采用標簽頂對齊的方式：
③ 屏效
如果只考慮屏效，那么標簽左對齊右對齊均可，但是如果還考慮表單錄入效率，那么推薦使用標簽右對齊的方式，比如蜂鳥匯報：
Arco 的顏色主題配置可以說是讓人眼前一亮了，可調整的范圍非常廣非常牛逼。可以編輯的維度從基礎的顏色、字體、陰影、 到組件的按鈕、導航、分類、表格 一共有接近 40 款組件的樣式，并且都是可以進行可視化編輯與實時預覽的。
如果你用了 Arco 過后，或許不用苦苦地站在前端后面，讓他幫忙調整頁面，作為設計師自己就能夠搞定，并且每一個組件可以調整的粒度是非常之細，包含各種寬度、圖標大小、顏色、投影，等等…在這里可以編輯自己的主題，也可以在商城社區查看到別人發布的主題，真的是很方便啊。
真的有些 amazing！假如你需要去設計一套官方的設計系統，完全可以通過 Arco 進行設計和預覽、落地。
Ant 并沒有做這方面的功能，顏色主題配置這一塊確實是 Arco 很大的亮點。
無論是 Arco Design 還是 Ant Design 設計系統，都代表了字節跳動和阿里兩家互聯網巨頭公司在 B 端領域的沉淀和競爭。對于 B 端交互設計師來說，兩個設計系統都值得我們去研究和學習，建議大家都去看看設計規范里面的內容，對于我們認識和熟悉控件以及和開發對接都很有幫助。
文章來源：優設 作者：哄哄
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
對于大多數網頁設計師來說，你的成品需要在各種類型和尺寸的設備上進行外觀和工作，這是顯而易見的。創建多個設計來實現同一目標的日子已經一去不復返了。
這一切都歸結為選擇響應式或自適應設計模型，以實現任何規模的一致網站設計。
但是響應式和自適應之間有什么區別？它們真的只是一回事嗎？讓我們來看看并解釋你需要知道的一切。喜歡記得關注UI范，每天更新，打造你的知識武器庫！
1.與設備無關的設計的兩種方法
2.響應式設計
現在比以往任何時候都更重要的是，我們正在設計旨在沿著不同體驗的梯度觀看的作品。響應式網頁設計為我們提供了一條前進的道路，最終讓我們能夠“為事物的潮起潮落而設計”。
而這正是我們目前關于響應式網站的思想學派的起點。
無論設備或瀏覽器如何，該設計都適用于任何視口尺寸。
響應式設計對搜索引擎友好（谷歌甚至推薦它）。
允許設計中的很多精確度，以便設計師可以調整任何或每一個細節。
高度移動友好的設計選項。
與你可能用于網站項目的大量主題、網站構建器和工具兼容的常見設計實踐。
該設計將具有統一和無縫的外觀，這將提升整體用戶體驗。
320 像素
480 像素
760 像素
960 像素
1,200 像素
1,600 像素
自適應設計最常見的用途是將舊設計轉換為更適合移動設備的設計。這并不是說它不會發生在新的開發中。
5.自適應設計的優點
由于配置錯誤，您在設計時可能會遇到一些不太常見的設備（例如平板電腦）的問題。
自適應設計可能是勞動密集型的，需要更多的開發時間和成本。
由于內容重復，搜索引擎在使用自適應網站時會遇到更多困難。
有一個偷偷摸摸的現實，你設計同一個網站六次。
文章來源：站酷 作者：UI范
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大多數網頁設計是以目標為導向，也就是網頁做出來能為用戶提供什么、能解決用戶的哪些問題。例如電商網站的終極目標是賣出更多的商品，資訊類網站的目標是讓用戶能更多地閱讀最新訊息，目標不同，兩類網站在設計上也會有截然不同的差異。
在設計上，電商網站會更注重頁面氛圍的營造，把紅紅火火的促銷氛圍搞起來，用戶看到會更興奮。
在電商網站中，設計重點放在幫助用戶瀏覽店鋪并輕松找到特定商品上，放在詳情頁上用盡可能好的方式展示商品；付款流程也經過簡化和仔細計算(例如某寶最近更新的訂單頁把價格聚集在一起)，因此用戶不需要經過太多思考就能快速下單購買。
網頁中炫酷的視覺效果能讓用戶印象深刻，但效果實現需要付出更成本。能明確知道什么時候更簡潔的視覺效果能讓整個設計變得更好，能讓用戶專注于正確的事情，這一點很重要。
有時候在網頁中添加過多元素，會分散有價值的信息，用戶也難以識別他們想看的內容。
對齊和對稱是頁面保持平衡的重要因素。對齊既保證了布局統一，又將有聯系的元素緊密連接起來；對稱營造一種平衡的感覺，元素整齊有序。
網站的登錄注冊頁往往都設計得很簡潔，有大面積的留白處理，只保留關鍵的信息輸入框，這樣用戶能更專注于輸入內容。
在宜家網頁中，清晰的視覺層級結構以及留白的運用讓整個頁面看起來非常整潔有序。好的結構能讓用戶知道他們在看什么，留白提供了視覺上的緩解作用，有助于引導用戶的注意力。
格式塔原理基本上定義了我們感知事物的六種不同的認知規則。在網頁設計中，這意味著需要以一種合理的方式來安排元素，幫助用戶從整體上理解設計。
設計中需要考慮不同元素的對齊關系、相似元素或按鈕的排放位置、一組信息要如何展示、列表類信息該如何展示…
另一個重要的原則是?？硕?/span>，也就是向用戶展示的選項越多，做出決定需要的時間就越長。因為我們的大腦需要考慮和分析所有選擇，然后再選出最好的選擇，當選擇太多時，這就會成為一個問題。
這就像我們在餐廳里點菜一樣，如果拿來一個 20 頁的菜單，我們可能會從頭到尾把這 20 頁全看了，仍然不知道該點哪個，然后又把這個 20 頁的菜單重新翻一遍。去餐廳吃飯是件放松高興的事，我們肯定不想在點餐上給自己帶來壓力，這樣吃飯的樂趣也會大打折扣。
如果需要填寫很長的表單，考慮將長表單拆分成幾個短的問題，讓用戶按步驟依次作答，避免一下看到過多問題給用戶帶來負擔。
網頁設計需要知道面對的用戶是誰、他們想獲取什么、想處理什么問題以及他們是想法是什么等等。
對最終用戶的印象越清晰，越有可能創造出成功的設計，就像設計一個面向兒童的網站與設計一個供老年人使用的網頁會完全不同。所以在一開始，要先學會把自己的觀點先放在一邊，傾聽目標用戶的意見，然后再慢慢驗證自己的想法。
抖音千人千面的推薦機制，能為用戶精準推送他們感興趣的內容，把握住了用戶的興趣，產品才能越來越受歡迎。
排版需要長期的積累和沉淀，如何合理地安排頁面中的品牌標識、圖片、文字等元素，是始終需要考慮的事。比如不管網頁設計的目標是什么，或者選擇什么樣的視覺效果，在選擇字體時我們總要考慮字體的粗細、大小或對比度等因素。
根據設備不同，最佳字體的選擇可能會發生變化。在移動端設計中，文字可讀性是首要的，屏幕越小越要保證信息的可讀性。
網頁的導航設計和信息架構共同構成了產品的主干，讓用戶能夠了解產品和功能并找到需要的信息。
無論信息的長短如何，合理的層級結構有助于在產品中創建邏輯結構，以便用戶可以查找信息。導航能反映出產品架構，這樣用戶無需花費大量精力，就能輕松找到主要信息和功能。
點擊按鈕之后會切換到哪一頁、怎么返回到當前頁、點擊哪些按鈕頁面不跳轉。架構流程不僅自己要明確，更需要用戶看得懂。
咱們前面提到，如果面臨的選擇太多，就需要經過大量思考，這樣用戶很可能會變得有壓力甚至困惑。其實這里面還包含著另一層意思，過多的選擇會增加用戶的認知成本。
只有降低認知成本，才不會給用戶帶來過多壓力，才能快速做出判斷。在網頁大框架已經設計好的基礎上，降低認知成本的地方往往更在于細節。
準確拿捏細節。在面包屑導航中，鼠標懸浮上去是一種狀態，點擊后又是一種狀態；選中的標簽與未選中的標簽在顏色上做出區分；當前頁碼重點突出的同時，告知用戶前后頁碼還支持左右切換。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.準備工作
設計工具
Sketch
精不精通Sketch，就看插件用的溜不溜，推薦個網站：http://sketch.cm/
無論是學習Sketch，還是搜插件、找素材，都是Sketch使用者的優選項。
Sketch是OS X平臺獨占，需要下載Sketch可以到這個網站去下載。
這里推薦個Mac平臺應用的下載網站，使用Mac的小伙伴可以去這里下：http://xclient.info/
我個人是很推薦使用Sketch做UI設計的，軟件本身已經提供了大量的IOS和Android系統設計資源，配合各類插件，幾乎無所不能。
Photoshop
相比于Sketch來說，體型胖了點，在UI設計上略遜一籌。不過因為Sketch是OS X獨占，所以因為平臺限制的原因，用PS設計也沒有問題。
我很久沒用它做UI設計了，也沒啥可推薦的了。
Adobe XD
全稱為Adobe Experience Design；這是一款集原型、設計和交互于一體的小清新時代風格的設計軟件。雖然有人說，Adobe XD將會是Skech的勁敵。然而在windows系統當中，Adobe XD的確是產品原型設計領域最順手的設計軟件。它使用簡單，界面整潔，雖然之前一直使用的是Axure 8.0，但看來，Adobe XD在界面、素材以及設計操作上的確甩了Axure好幾條街，至少它成功的吸引到了我。
做好版本管理、文件歸檔的工作
專業水平不僅體現在設計能力之上，優秀的管理能力也是重要的職業素養。
合理規劃好設計版本，進行明確的文件歸檔工作，有助于提高設計師的工作效率。
這里不贅述了，每個人有自己的版本管理方式，不過目標只有一個：清晰高效。
2.關于手機的基礎概念
這里的概念性內容不要強行記憶，理解即可，它是做移動UI設計的理論常識。
手機分辨率
手機屏幕的像素點數。比如750*1334、720*1280等等，細分還有物理分辨率和邏輯分辨率，這里不擴展講解了，想了解自行百度吧。
手機分辨率牽扯到的就是工作時設計稿的尺寸，只要記住設計尺寸就可以了。
屏幕尺寸
手機對角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
屏幕尺寸和設計其實關系不大，主要是用來計算屏幕密度的。
屏幕密度(DPI或PPI)
每英寸的像素點數。簡單理解就是屏幕密度越大，畫面越逼真細膩。
下面是屏幕密度的計算方法，范例是5英寸，分辨率為1920*1080的手機：
屏幕密度牽扯最多的是安卓系統，安卓手機屏幕本身的密度種類非常多，這也是導致了安卓系統需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題，這個我們下面會提到)
3.基礎設計規范——IOS系統
這是蘋果的開發者官網：https://developer.apple.com/
這里有持續更新的最新設計規范和資源模板，雖然是全英文的，但并不影響閱讀。
設計師應該學會從官方獲得設計資料，這比其他途徑獲得的資料更加全面和權威。
最新系統版本：IOS 11.4.1
中文字體：蘋方黑體
英文字體：San Francisco
官方系統設計模板下載：
https://developer.apple.com/design/resources/
官方系統設計字體下載：
https://developer.apple.com/fonts/
下圖是截止到目前，可能還需要支持的機型和對應的設計尺寸：
設計稿尺寸
只推薦750*1334的尺寸來做設計稿，這是向上向下都最容易適配的尺寸，包括用這個尺寸去適配Android版。
除了IPhone X的比例特殊外，其他的IPhone比例幾乎差不多的，比較容易適配。
Sketch設計
使用375 * 667尺寸即可，開發在Xcode里也是使用這個尺寸。
導出的@2x圖適配IPhone 5/5S/5C/SE 6/6S/7/8
導出的@3x圖適配Iphone 6/6S/7/8 Plus IPhone X
Photoshop設計
畫布就建成750 * 1334尺寸的即可，在這個前提之下，
導出原尺寸圖片加后綴@2x，適配IPhone 5/5S/5C/SE 6/6S/7/8
導出1.5倍圖片加后綴@3x，適配IPhone 6/6S/7/8 Plus IPhone X
常用數據
下面的內容蘋果官方提供的模板文檔其實都有對應的數據，可以去官網下載。
字號使用建議(這個不是硬性規定，根據視覺效果酌情使用)
導航文字 34-38px
標題文字 28-34px
正文文字 26-30px
輔助文字 20-24px
Tab bar文字 20px
圖標尺寸建議
APP應用圖標，建議使用1024*1024尺寸去做，逐級縮小去應用到各種場景中。
SKetch已經提供了IOS和Android系統的APP尺寸圖標模板，直接使用就可以了。
界面適配
程序內部的功能界面：這種界面通過寫成自適應的界面可以很好的適配各種機型；如果有特殊的布局要求，也可以讓開發根據特定機型去調整，不需要單獨為各類機型再做設計稿。
覆蓋全屏類的界面：比如閃屏、啟動頁、引導界面、插畫頁面等等，這類覆蓋全屏的界面必須要單獨為IPhone X的比例重新繪制或者調整設計稿。
其他的IPhone機型，遇到這種界面，整體放大縮小、微調之后按照各機型的設計尺寸輸出對應的切圖就可以了。
IPhone X的安全區域：IPhone X的安全區域就是扣除頂部劉海狀態欄和底部虛擬home鍵之后，中間的內容顯示區域。如果你不得不使用IPhoneX的尺寸做設計稿，請一定設置好參考線，不要把內容做進這兩塊區域內部。
IPhone X規范：iPhone X 人機交互指南及其設計細節
簡單理解APP構成
下圖是IOS開發工具Xcode里的一個空白頁面，圖片的文字標注請仔細閱讀。
本質上，開發寫APP界面和設計做設計稿是一樣的，只不過兩者實現方法不同。
APP的構成遠遠要比上圖寫的復雜的多，我們這里使用最簡單的理解方式。
設計稿的標注
根據上圖我們可以理解設計稿和程序之間的關系：
設計稿里的按鈕、文字、圖標、列表、背景色、線條等等所有的設計元素，
在Xcode里都有對應的控件，設計元素必須使用對應控件，才能在APP的界面里顯示出來。
設計稿的標注，實質上是標注的各類控件的屬性以及相對于其他控件的關系：
設計稿中：
文字的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；
圖片的自身屬性：寬高、間距、距離、透明度。
至于標注在上篇文章有詳解：一款APP從設計到切圖標注適配全記錄，這里就不累贅了！
程序的對應控件
Label的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；
Image View的自身屬性：寬高、間距、距離、透明度。
實際上各類控件的屬性也要比這個復雜的多，這里是最簡單理解的舉例說明。
如今使用本地化插件Sketch Measure，幾乎不用手工標注，標注導出HTML后，扔給開發，他們想看什么屬性自己點擊查看就是了，所以我們這里了解下標注原理就行。
而一些線上工具的插件，比如藍湖、墨刀、Mockplus等等，功能更加豐富，各位根據自身情況靈活運用吧。
Sketch Measure去http://Sketch.im下載
設計稿的切圖
IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴，是為了在Xcode導入圖片資源時，識別對應機型所用的圖片。
Xcode里提供了相應的位置，相同命名圖片會根據后綴填入到對應的位置。
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是對于UI設計來說，常用的圖片格式就以下幾種：
PNG 常用圖片格式，沒什么解釋的，目前大部分產品還在使用此格式；
WebP 安卓的圖片格式，同等質量圖片下體積非常小，非常推薦給安卓使用；
SVG 矢量格式，完美解決適配問題，但也有部分缺點。
想具體了解WebP和SVG，可以查看之前的文章。
切圖輸出規范
前提：同一類型、位置的切圖，請保證切圖尺寸、規格一致，圖片尺寸為偶數大小。
1.有操作功能、可點擊的功能性切圖：最小點擊區域問題
蘋果官方提供的能準確點擊的最小點擊區域：88 * 88px;
小于這個范圍也可以點擊，但是點擊不靈敏，體驗較差。
對于比這個范圍小的可點擊按鈕，周圍需要用透明區域填充后再輸出切圖。
解釋下為什么用透明區域填充來擴大點擊區域范圍：
圖標這東西，對設計師來說沒區別，都是圖片。
但對開發來說，可操作和不可操作的圖標是兩種類型的控件，圖標的樣式不過是傳給該控件的顯示圖片罷了。
可操作的功能圖標在Xcode對應控件是UIButton。
對控件來說，如果不在代碼里明確固定控件的大小、點擊區域等等各類屬性，設計師傳給我多大的圖，這個控件就會被這張圖撐到多大。
你給我一張40*40的按鈕切圖，如果開發什么都不做，那這個UIButton在手機界面里就被撐到40*40的大小。
我也可以在Xcode里寫幾行代碼，固定圖片的大小就是40*40，擴大UIButton這個控件的大小變成88*88，這樣這個控件的點擊區域也擴大了。
但是一張規范的切圖就能解決的事情，為什么還要在代碼里再手動加幾行呢？
一個可點擊按鈕需要加一行代碼，整個APP就可能多加上百行上千行的代碼。
規范的切圖也是可以提升產品開發效率的。
2.非功能性切圖，比如列表圖標、說明圖標等，按統一規格的最小尺寸切。
這么切還可以減少一些程序因圖片資源大小導致的體積大小問題。
這類切圖，對應的是UIImageView控件，就是一張圖片，無操作，只是占位和顯示。
所以你按照相同規格，最小尺寸切就可以了。
有朋友問：一定要切正方形的嗎？如果圖標都是30*20的，那我統一切30*20的行不行
答案是：可以，這個沒有完全的硬性規定。雖然我是設計師，但也會去寫一些IOS程序。正方形規格切圖就是為了方便開發，當然還是推薦你使用正方形規格來切圖。
但實際開發過程中，只要保證同一位置，切圖規格統一就可以。
切圖輸出狀態：
同一按鈕、元素的不同狀態，要明確命名對應狀態之后，分別輸出對應圖片。
下圖示例按鈕的選中狀態多出現在游戲APP中，這里僅表示說明。
命名規范
不要使用中文、特殊字符，請使用英文、下劃線、數字對切圖命名，數字不要打頭。
命名方式盡量清晰，推薦采用：種類_位置_功能_狀態
示例說明：
btn_homepage_seach_normal@2x.png
開發看到就會明白：這是位于首頁，處于正常狀態的搜索按鈕2倍切圖。
4.基礎設計規范——Android系統
這是Android Material Design中文版的地址
Android的英文版地址
最新系統版本：Android 9.0
中文字體：思源黑體
英文字體：Robot
Android不整理各類機型的尺寸規范了，數據零散，難以整理。所以我們從屏幕密度這里理解設計規范就可以了。
Android手機屏幕密度
上文我們提過屏幕密度的計算方式，安卓手機因為各種屏幕尺寸和分辨率，導致如果單純按照數值計算，可能屏幕密度種類會多到讓設計師崩潰。
所以為了解決這個問題，安卓手機出廠時，屏幕有自己初始的固定密度，系統會根據這些屏幕密度自行適配，下圖是對應的屏幕密度表：
Android的開發單位以及設計尺寸
正因為Android手機分辨率多樣，為了保證同一設計在不同屏幕密度的手機上顯示效果一致，Android系統使用了下面兩個單位：
dp：android開發單位，相當于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果；
sp：android開發文字單位，和dp類似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。
當屏幕密度為MDPI（160DPI）時，1dp=1px
當屏幕密度為MDPI（160DPI）時，1sp=1px
按照上面兩個公式的換算，同樣dp大小的圖片在不同屏幕密度的手機上如下圖所示，
基本可以保證圖片顯示效果在各類手機上相同。
設計稿尺寸
通過上面的分析，在xHDPI這個密度等級下，倍數關系為2，推薦使用720*1280尺寸做設計稿，換算方便，適配容易。
不過目前的現狀是，如果公司的產品有IOS和Android兩個版本，基本上設計師只會做IOS的版本，然后套用給Android，這樣做也是可以的。兩者的切圖，在這個設計尺寸之下是可以通用的。
設計稿的標注
推薦使用dp和sp進行標注。但是呢，如果你用720*1280做設計，使用像素單位標注，現在也不會影響什么。
因為前面已經提到過IOS的標注了，這里也就不再贅述了。
設計稿的切圖
理論上，對于Android系統來說，如果你想完美適配各種機型，應該為不同的屏幕密度提供不同尺寸大小的切圖，而Android的開發工具也為不同的屏幕密度提供了對應的資源文件夾。
但實際上，并不需要提供上面密度表那么多套的切圖，程序安裝包的大小基本就是由于圖片占用了太多的位置。
所以需要提供多少套圖片，請和公司的開發溝通，確定你們的產品實際支持哪些屏幕密度。
圖片格式
WebP和SVG
我個人是推薦現在為Android系統使用WebP格式，體積小，顯示效果好；
而SVG這種矢量圖片格式完美解決了Android多套切圖的問題，一套切圖，完美適配各種屏幕密度。
最小可點擊區域
48dp：這和IOS的最小點擊區域性質是一樣的，都是考慮到手指點擊的靈敏性的問題，設計可點擊控件的時候要考慮到這一點。
更多的注意事項和IOS切圖是相同的，這里不再贅述了。
5.UI設計師的職業道路
如今的移動UI設計行業已經很成熟了，針對移動UI設計的便捷工具層出不窮；移動UI設計的理論體系知識也已經漸漸完善。但這些都是外部因素，社會發展了，我們跟著一起向前適應就好了；
但對于設計師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業規劃！
很多設計師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒有職業目標。
目前我工作5年，就從我自身的體會來分享我自己的方式，當然資深的、精英設計就別跟我較真了，我代表的是那90%還在向上努力爬的普通設計師~
工作能力，不僅僅指的是自身的專業技術水平，還包含了各種綜合性能力，請務必對自己有明確的職業規劃和能力發展軌跡。
工作0~2年
這個階段對于新人來說，是一個設計能力和工作經驗的快速積累過程，不夸張的說，這兩年內的經驗可以決定你之后的職業發展道路是否順利。
此階段目的：提升設計專業能力、完善理論知識、積累實際項目經驗
這個階段就別想著一專多能了，先把那個“一?！备愫镁涂梢粤?，當然不是不讓你學習別的知識，而是說重心應該發在提升目前的專業能力上。
提升設計能力：
一方面，通過公司的實際商業項目提升能力，這個沒什么可說的；
另一方面，業余時間務必進行大量的作品練習，無論是臨摹、還是重設計都可以，目的就是一個：量大 從優！
臨摹請用高質量作品，臨摹一堆垃圾還不如不做，臨摹請務必做到99%以上的相似度，不然那不叫臨摹，臨摹的過程是考驗軟件功力、設計技法能否完美復制的過程。
重設計請使用成熟知名產品，不要重設計一堆垃圾應用，成熟產品每個界面的布局、樣式、功能、邏輯都是經過深思熟慮后呈現給你的。
重設計的目的是要體會產品背后反映的設計意圖，不是為了重設計而重設計。
所以重設計之前請自己思考原產品這么做的目的再動手。
完善理論知識：
沒有理論體系方法的支持，在設計道路上是走不遠的。
現在關于UI設計的知識網站已經很多了，當然不局限在這類專業性網站上。
人人都是PM、UI中國、25學堂等等很多這類網站都是學習理論知識的好地方。
當然，你也可以關注我嘛~（給自己打個廣告，吼吼~）
工作2~3年
3年對于互聯網從業者是一個坎兒，其實這是相對于職業規劃來說的。
通過前兩年的積累，對于UI設計本職工作已經可以勝任了，接下來的要考慮的是個人的職業發展規劃了。
此階段目的：拓展技能、明確職業目標、為進大廠做準備
拓展技能：
這個階段可以考慮“一專多能”的多能了，作為UI設計師，可以學習的東西實在太多了，交互、動效、產品設計、開發等等。
不要求你達到那些專業從業者的地步，你要學到專業程度，還干什么UI設計啊。
目的是為了拓展自己的技能樹，為自己提供更多的競爭力，這個習慣要一直保持伴隨之后的工作……
明確職業目標：
設計師最怕的就是迷茫，如果說前兩年因為剛入行，對行業，對自身都不完全了解，那情有可原。但工作兩年后，對自身的情況再不清醒那就說不過去了。
可以從以下方面考慮：
是始終堅持在一線崗位的設計技術大牛，還是想做設計管理者，亦或者想從UI設計師轉職成交互設計、產品設計等等。
工作兩年已經對自身，對行業有理解了，自己的能力是否適合設計崗位，對設計的熱愛是否能經久不變都可以作為參考調節了。
為進入大廠做準備：
剛工作，可能限制于能力實力問題，委身于小公司。
但是！雖然我們身在小公司，但心要在BAT CAO TMD，
Apple、Google也不是不可以！
Skr！Skr！
這階段可以為大廠準備一下，當然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當我放屁吧~
意思是，可以以進入大廠為目標，綜合性的考慮自身的缺陷并盡量彌補。
千萬別以為就在小公司將就著干吧，反正拿的錢也差不多，大公司的滋味你是體會不到的。
拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對個人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。
工作3~5年
對互聯網人來說，3年一個坎，5年一個坎，都是職業規劃的節點時間。
3到5年的設計師，如果你真的用心工作了，一個人可以實實在在的頂起來一個項目。
我們上面說，為進入大廠做準備。在這個階段，可以考慮進入一些中大型企業，提升個人的綜合能力、拓展人脈。
部分企業也比較喜歡要這個階段的設計師，有工作能力，職業道路又剛開始，搞不好可以在公司培養起來。
此階段的目的：提升綜合能力、拓展人脈圈子
這時的個人專業水平其實已經不是問題，繼續在工作中磨練積累就可以了；
這里需要的是打開個人在職場上的道路。
說實話，即使是互聯網行業，搞技術除了要保證自身技術過硬之外，會不會發展人脈，能不能提升綜合能力才是最后職業道路能不能走遠走高的決定因素。
提升綜合能力：
與各部門的溝通能力、對設計資源的協調能力、在公司業務上的話語能力、對項目的把控能力等等，都算綜合能力，這是對內部的能力。
不要以為對設計師來說，我悶著頭接需求，做設計就可以了。
這樣的設計師，也許你可以踏踏實實當個接需求的小設計，但你永遠也只是一個這類的設計，對于有更高更強的職業追求的人來說，沒有幫助。
所以，張開嘴、邁開腿，一步一步嘗試去推動自身進步吧，這個沒什么技術性方法，必須要自己親自去做。
拓展人脈圈子：
人脈對個人職業道路的幫助，遠遠要比專業能力的幫助要大的多，這是對外的能力。
設計師的圈子，說實話不算大。搞技術的，本身就坐辦公室，而做設計的人本身性格也有一部分原因，但還是請你努力拓展自己的人脈。
對于自身的專業圈子，努力分享自己的設計經驗、工作心得，總結自己的體會，發布到各類設計專業論壇上，積極的幫助別人，這都算一種拓展方式。
時間久了，就會結識非常多的設計界朋友，設計大牛也會逐漸注意到你，這些都是你職業道路上的寶貴資源。
還可以認識幾個不錯的獵頭朋友，有好的職位，他們都會優先想到你的。
作者自述
這也是我寫的最后一篇關于基礎規范類文章，也算是整理一下工作到現在的基礎常識類內容，以后不再寫這類基礎文章了。
人總要進步的，設計師還是要靠干貨作品來撐腰的，對吧。
以后發的內容都是我做過的實際商業項目，我會把設計經驗和工作方法融入到這些作品實例里來寫，這總比我單純講理論知識要強。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
寫在前面
近幾年云計算和大數據的興起，以及政府數據化戰略的升級，G端逐漸出現在大眾視野里，受到各大互聯網公司、IT廠商的青睞，BAT也在2018年宣布進軍G端市場，給信息化市場帶來了新的氣息。
由于工作需要，經常會和客戶溝通，總結出來G端客戶有一個特性是，他們大部分為高知人群，從學歷、社會地位、經濟收入、家庭背景等都占有相當的優勢，長期在政府部門工作，他們習慣于政令形式、層級森嚴的環境，會有工作任務固定、重復率高、失誤率低的需求。
與toB相比，toG產品項目的特點是——
1/ 客戶業務主導性強
調研對象政府相關部門的領導和科員，對業務主導性強
2/ 改變用戶行為難
原系統運行時間較長，形成了用戶習慣，接受新系統難度較大
3/ 項目工期短
部分toG項目要求工期緊，系統需求調研、開發時間較短
4/ 系統應用阻力大
涉及原系統、單位內部環境等問題，系統使用過程需要長期博弈
工作以來做了不少toB和toG的項目，這兩者相似卻又不同。
【相同點】
都是服務于用戶，需要站在用戶的角度分析用戶需求，為用戶解決問題
都是要把產品和項目做好，兼顧功能的同時，使用戶體驗更好，才能實現盈利
都是重功能、輕視覺，要符合產品的實際需求，并有效提升業務運營的效率
...
【不同點】
1/ 面對的客戶群體——
toB是面向企業客戶的，一般為企業內部人員使用，不向大眾公開。
toG是從toB衍生出來的一種特殊劃分，面向的企業是政府相關單位。
2/ 資金來源——
toB通常由企業撥出資金
toG通常由國家財政撥出預算，并非完全基于自身的組織或企業的資金。
3/ 決策機制——
toB一般為客戶、公司管理層
toG的話，不同層級的決策者有不同的考量，比如高層領導希望打造影響力來獲得政績，中層領導希望體現布局和價值，小領導希望解決自身申請項目和提升職稱等的需求，最終用戶能否用起來，反而不是很重要。所以解決方案要滿足不同層級和角色的需求。
4/ 產品需求——
toB滿足剛性需求并滿足一線使用者需求為主
toG非常多的產品功能非剛性，通常會讓研發人員難辦，因為比較難證明產品或研發價值，但在售前和控標階段，大而全的功能又會成為各產品之間的軍備競賽，最后將產品功能補齊，開啟同質化競爭。所以更多的是滿足非剛性、但有利于搞定決策人的、有價值的功能需求。
5/ 產品標準化——
toB面對中小型客戶，需求淺、沒有足夠的談判籌碼，不需要定制化；大客戶的話，需求更深入，定制化不可避免。
toG比較難實現標準化，因為toG本質上是重政績輕實用，這就導致相關決策人總希望做出不一樣的東西，不僅別人有的我要有，我的還要有特色。所以可以從兩方面入手，一是只做通用層能力，定制化找合作伙伴來做，保證渠道和底層能力的核心競爭力；一是自建定制化團隊，專做定制化需求，避免拖累正常的產品迭代。
6/ 視覺設計——
toB一般冷色系居多，整體簡潔
toG要根據客戶喜好來設計，最好能體現單位或地方特色；視覺方面，界面不能過于簡單，互聯網扁平化并不適用，要盡可能充實界面，但要把握「度」，不能太花哨，一般配色以紅&藍為主，莊重、大氣；內容方面，要遵循國家相關要求和當下政策環境，不可隨意亂造，最好是當前業務測試內容；交互方面，不可有過多的交互層級和特效，操作路徑要盡可能短一些，一般是一到兩個交互動作就可以完成任務，要考慮40-50歲人群的體驗習慣。
（這里可參考之前寫的一篇文章，詳細介紹了簡化操作路徑的案例，一站式解決問題，有需要的同學可以看看，鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html）
7/ 產品迭代——
toB一般有一定的周期
toG產品項目，一般第一次上線之后，客戶會提出一系列問題，返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產品)，因為政務用戶不同層級的需求和對需求的認知不同，造成了對統一功能不同用戶的意見有很大的不同，其實第一次上線運行就相當于一次內部測試，返工的時候不必太挫敗，只要做到核心業務流程和業務模塊完整即可。接下來再通過幾次的測試、收集意見反饋，討論決定最后的需求，這就是很多toG項目需要去客戶現場駐場的一個原因，采用小版本、多迭代、多溝通，及時解決問題。
PS: 關于去客戶現場，這里想多說幾句。
通常情況下，是產品經理和開發團隊駐場居多，但有時候設計方面常會遇到一種情況是，客戶需求不明確。通過產品經理在客戶和設計師之間來回轉達消息，效果也并不是很好，這個時候就需要設計師主動爭取機會去客戶現場。有一個典型的案例是，去年做GAB的項目，需要設計一個登錄界面。設計稿做了很多，客戶一直不滿意，于是我申請到客戶現場進行面對面溝通，去的時候會帶幾個有代表性的風格給客戶看，先把不想要的風格排除掉，然后把握大的設計方向。具體設計的時候同步表達自己的設計理念，一步步引導客戶，客戶中途一步步給意見建議，參與其中，這樣更容易明確需求，客戶也會覺得這是自己與設計師共同的成果，會更容易接受，做出雙方都滿意的設計，促進驗收，最后雙贏。
這就是那個「看起來平平無奇 · 但解決了實際問題 · 客戶很滿意」的登陸界面，如下圖：
8/ ...
很多toG的產品項目上線后造成的客戶影響不好，這個時候要調整好心態，只要你設身處地站在用戶的角度思考，分析場景和需求，用我們的專業技能來解決問題，當你經歷各種否定和困難最終得到客戶的認可，這種打磨過后的成就感真的難以言喻。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
導語：提起中后臺，除了高效、靈活和強大之外，不可忽視的還有它的海量數據。海量數據的篩選與呈現，直接決定決策人員的效率高低。本文作者主要是結合自己在實際工作中遇到的表格設計問題，針對Web端數據呈現方式之一，表格的設計進行探討。
表格，是一種常見的信息組織整理手段。常用來展示、保存、對比分析、排序、篩選 、歸納等，是最清晰、高效的數據展現形式之一，由內、外兩部分組成。
說完表格的組成，接下來將會從易讀性和易操作性兩個方面來分析下表格設計。
表格的組成，也可以看作行與列的自由組合，這種組合賦予了表格多樣性的特點。行與列構成了單元格的長與高，不同的長高會有疏密之分，充實與透氣之感。
B端中后臺通常會對應不同的角色及場景需求，根據目的及信息主體的不同，讓用戶根據自己的需求來定義表格的展示列及列的順序，也可以通過行與列的顯隱變化，來更好的滿足信息的傳達。
但需要注意的是系統應記住用戶上一次的自定義列設置，減少用戶重復操作。對于列的選擇，應盡量減少列的數量，既要展示用戶必要信息，又要避免出現用戶無關數據，以免信息冗余，影響信息閱讀效率性。對于用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決。
默認排序，應從用戶目的出發，遵循用戶查看數據的習慣，尊重數據之間的關聯性，設計用戶查看、操作數據的路徑，而非隨機排列。
B端中后臺中的表格展示的數據多且雜，這就要為用戶先一步對數據進行梳理歸納，提高用戶獲取信息速度。
為便于對數據進行對比分析，一般需要在原始數據的基礎上給出差值、升降變化、平均值、總計等數據處理結果，減少用戶二次加工數據的過程，提升用戶閱讀信息的效率。
數據匯總展示
在表頭或者表尾分別提供了總計的數據，方便用戶進行快速查閱。
數據對齊展示
常用對齊方式有數字右對齊，文字左對齊，混合型文本左對齊，列標簽的對齊方式與數據的對齊方式保持一致。這樣能形成的視覺邊界線，便于視線的流動，從而快速提升數據的瀏覽、對比效率。
空數據展示
B端中后臺數據類型較多，對于空數據，切忌不要與數據為“０”進行混淆，對于空數據通用做法是用“－”表示，而不是什么都不顯示，會讓用戶誤以為是沒有數據還是“0”數據。
最好做法就是為空數據做出釋義，可以加在“列標簽”的名詞解釋文案中。
數據的關鍵屬性標識展示
對于用戶重點關注的數據狀態、上升和下降等，可以用符號進行標識，幫助用戶快速定位到目標信息。
在有限屏幕內，有限的內容展示區域內，閱讀豐富且繁多的表格時，用戶不得不拖動橫向或縱向滾動條來閱讀信息。
固定表頭、固定列和固定分頁，能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。
固定表頭
在固定的小區域內滾動會非常局促，而且區域滾動和全屏滾動同時存在時體驗也很不好。固定表頭可幫助用戶識別信息，在全屏滾動上去后固定表頭，有利于用戶向下翻屏時能夠便利的閱讀數據。
固定列
固定列的內容可視業務及目標用戶的訴求而定，一般采用方法是固定比較重要信息，方便用戶進行數據定位與對比，最好可以讓用戶自定義，滿足不同用戶訴求。
固定分頁
分頁處理目前有放在上部、下部或上下部均有，需要根據場景來選擇。分頁固定目的是為了省去用戶需要翻到頂部或底部進行操作的麻煩。
特別是可以自定義每頁的數量和需要橫向拖動數據查看，這就需要把分頁固定在底部，方便用戶橫向拖動滑條查看信息和進行翻頁操作。
在Web端中的表格，涉及到跨頁的數據操作時，分頁會帶來不便。
但往往受限于數據加載的壓力，這種情況在大廠中尤其突出，加載數據都是億量級別的，在Web端和手機端都需要實時下載數據的終端，我們通常做法就是提供分頁展示數據來緩解服務器的壓力。
表格中的的數據內容超過一定“數量”時需要提供翻頁功能，而這個“數量”是由表頭的數據的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定。
原則上整張表不要超過一屏，考慮到每個用戶的使用習慣，我們一般提供可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利，也更符合瀏覽信息路徑。
表格全屏展示是非常有必要的：
在大量的表格信息中，如果沒有篩選查找信息簡直猶如大海撈針，而表格跟篩選是不分家的。
說到表格一定會說到篩選，篩選也就是數據過濾，常在數據量較大的場景中使用，其目的是通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內容。
對于表格外部篩選，如果有時間會單獨出一篇詳情介紹。這里不展開詳細說。
篩選根據篩選功能的位置不同，可分為表外篩選和表內篩選。
在信息列數較多的情況下，數據的選擇就尤為重要。當鼠標指針懸停在表格列或行時，給予視覺狀態的變化提示，可以讓用戶捕捉到所在的位置，而不至于視覺上的錯行，能夠降低人的心理壓力和增加掌控感。根據數據選擇功能分為單個選擇和批量選擇。
單個選擇
鼠標指針懸停在整行時應與默認態有所區分。當標識選中行或選中行的數量，選中行可操作的命令狀態須同步，明示當前行可操作的命令或反饋當前已選行的數量。
批量選擇
提供選擇當前頁部分行、選擇全部行、取消選擇全部行三種功能；狀態反饋分為半選態 、未選態、全選態共三種。
對于數據的操作，主要針對表格內部來說。表格操作大體可分為顯性操作和隱形操作。
顯性操作
指操作選項顯示在行內，優點是明顯直觀，可以根據列表上的信息做出快速的判斷并且高頻發生的操作。
適用列數較少的列表。但弊端是信息過載，尤其是列數較多，可展示列數會隨操作數增加而減少，同時誤操作率較高。對于危險系數比較高的操作，也不建議采用這種設計。
隱性操作
當鼠標懸?；螯c擊時才顯示其他低頻、高危的操作選項，優點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，可減輕空間壓力，減少干擾。
弊端是增加用戶的點擊次數和提高了操作門檻。列數較少的表格不適用隱性操作。
為方便用戶對數據進行再次整合分析、統計分析等，可提供數據下載功能及多種下載格式。
對于B端中后臺來說，表格顯示最多就是兩種情況：一種就是表格有數據，這種最容易解決，有數據就顯示相應數據；還有一種表格是沒有數據，也就是空表狀態，這也是讓很多設計師容易忽略掉的頁面。
空表分兩種：可創建和純展示
可創建
是用戶有創建訴求，數據是由用戶或系統產生的，可創建分兩種：
純展示
沒有創建訴求的，數據是系統產生的，不是由用戶創建的，直接告之暫無數據。
看上去平淡無奇的數據表格，其實是非常重要的，通過合理的組織架構和呈現方式，使原本枯燥的數據呈現出生命力，這是一件很神奇的事。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么了解網頁布局很重要？網頁布局在很大程度上決定了網站的訪問者將如何與網頁內容進行交互。
這里將介紹一些常見的網頁布局形式，例如卡片式、分屏布局、網格布局……一起來看看吧！
卡片式布局被Pinterest、臉書和推特等網站所使用，它非常適合在新聞網站和博客上使用，因為卡片式布局可以在頁面上放置大量內容，同時又保持每部分內容各不相同。
卡片式布局主要有兩種形式：
網頁中每個卡片的尺寸相同，卡片的排列非常標準，例如Dribbble的網頁布局；
使用不同尺寸的卡片組成頁面的布局，卡片間沒有固定的排序，例如Pinterest、花瓣的頁面布局。
當兩個元素在頁面上具有相等的權重時，分屏布局是一種流行的設計選擇，并且通常用于文本和圖像都需要突出顯示的設計中。
分屏設計特別適合電子商務網站上的產品頁面。產品圖片需要在頁面上突出顯示，但價格、規格、購物車按鈕等信息也要顯示。
隨著移動設計的盛行，大標題排版變得流行起來。大號字體在標題中特別流行，在一些網站的正文中也能看到。
較大的文本更具可讀性，可以改善使用體驗。另外它還提供了強大的視覺效果，因此這種布局在極簡主義設計中特別受歡迎。
個性化算法推薦可以根據每個人的喜好量身定制數字體驗。人工智能技術的發展讓算法變得更易用，能精確分析用戶的喜好。
根據用戶之前的訂閱習慣，Netflix可以為用戶個性化推薦他們最有可能觀看的電影。
像Medium這樣的網站會基于用戶以前閱讀和喜歡的內容，向他們展示很多同類型的文章。
網格為設計提了視覺上的平秩序感，以一種平衡且有組織的方式呈現內容，使內容更易于人們使用。
在網格設計中使用不同大小的內容可以在保持內容有序的同時增加視覺吸引力。
雜志和期刊的布局方式影響了網絡雜志的版面設計。這些網頁布局很適合有大量內容的網站，尤其是每天都需要更新內容的網站。
單頁布局將網站的所有主要內容放在一個網頁上，通過滾動完成導航，有時還使用視差滾動效果。
對于內容稀疏的網站，單頁布局是一個很好的解決方案。同時它也是內容敘事的完美選擇，比如交互式兒童讀物。
F型和Z型布局是指用戶的視線如何在頁面上移動，即用戶如何掃描內容。F型布局有非常明確的視覺層次結構，因此適合內容更多的頁面。
Z型布局將視線吸引到頂部，然后沿對角線方向向下延伸到底部，然后再次延伸。
在設計中，不對稱會產生動態化的視覺沖擊力。大多數情況下不對稱是由于圖像和文本間無法平衡而造成的。
由于不對稱會產生動態的、充滿活力的視覺印象，因此對那些想要傳達這種形象的品牌來說是非常有用的。
這種布局的優點在于完全專注于內容，沒有視覺上的混亂。
干凈簡單的布局幾乎適用于任何類型的網站。許多優雅的網站都可以被認為是“簡潔的”，無論它們包含什么設計形式。
導航標簽適合用于包含少數項目的菜單，否則導航會顯得很混亂。
輪播內容包含圖像和文本，通常出現在網站的頂部，用來突出顯示內容。
好的網頁設計具有很強的適應性并且對用戶來說始終是友好的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
無論作為設計師還是普通瀏覽者，大家觀看一個網站時最先接觸到的就是網頁的頭部區域，這部分內容為網站的其他各個方面設定了基調，在網頁設計中起著非常關鍵的作用。
尤其是如今簡潔設計比較盛行，多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力，同時要兼顧創造力和實用性。根據一項Google的研究，用戶只需要短短數秒就可以形成對一個網站的看法，甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。
在通常網頁設計中，首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分，頭部信息起到了一種邀請作用，它應該提供有關網站的基本信息，以便用戶能夠在幾秒內了解網站的主要內容。
如果以招聘活動站點為例，整個頭部區域設計要明確傳達企業形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業已向你發出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。
網頁頭部的任務是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴，那么就是正確的設計。
那么主要元素通常包括：
在設計網站頭部內容時，從思維層面來講沒有任何東西會限制你的創造力，它應該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創造性的開放領域。
下面讓我們一起來看看頭部內容設計的一些技巧。
1. 關于尺寸
對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字，但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經驗積累的常識規則。
頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區域是一個不錯的選擇，而對于落地頁或者企業客戶首頁，頭部區域可能會更大，而且多數大客戶會有主視覺單屏展示頁。
如果某些網頁，例如落地頁頭部內容較長的情況下，最好在首屏給下一屏內容露出一些空間，這樣用戶就可以意識到下一頁還有內容，引導用戶滾動。
2. Logo展現
當一個人發現自己在陌生網站上，總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果，但是多數用戶如果他們常規位置找不到預期的信息，將會不假思索地認為這個頁面是難用的和不規范的，需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數受眾。
Logo ——與居中或右側放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側要低。
3. 吸頂導航欄
吸頂導航，換句話說就是「粘性標題」，當你滾動頁面時，導航區在頁面中跟隨，現在成為一個網頁設計標準。如果不違反網站整體設計理念，請將導航欄吸頂固定。無論是PC端還是移動端設計，這都是一個好的選擇：
可根據頁面內容展示要求，向下滾動時調整導航背景透明度，盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導航欄有助于提升用戶體驗，保持用戶導向并給予了他們更多控制權。
3. 關于圖片的應用
頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的，例如招聘類網站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容；
高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業業務的出色照片，這種方式就沒錯！企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。
插畫——網站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯系。如果圖片是獨特的且易于辨認，即使是從網站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現這一點。
4. 視頻或動畫
當然我們也不能只關注靜態圖片，添加視頻也是最有效的網站頭部創意之一。如果可能的話，嘗試著在頭部內容中添加主題視頻材料，很多網站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產品。
△ 華夏幸福校招官網首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業務線融合到幾個轉輪中，產生了故事性的動畫場景。
如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非?？帷Ｒ悦考拘@招聘企業站點為例，各大公司對應屆生群體的追逐，很大程度上體現在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。
當然不一定只有滿屏大型動畫，一般動畫越復雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據功能不同，設計一些交互性的動畫，去提升客戶使用感受，盡量不影響網頁打開速度。
5. 移動端頭部設計
網頁頭部不可能只顯示PC端的網頁上，還應該正確顯示在移動端的網頁上。因此，在近年的設計中，網頁必須具有響應性，并且能夠很好地適應各種移動設備，這樣才能帶給用戶完整的設計體驗。
移動設備的日常使用廣泛性早已影響網站設計，即使在PC中，也有一些細節看起來像是面向移動設備的網站設計。例如，Banner和漢堡包菜單都起源于移動設計。
移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設計師在一開始就考慮到兩種界面的適應情況，比如在PC上頂部一條的導航，到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容，在移動端會向下層延伸，首層界面成為一個內容聚合頁。
網站是以頭部內容為先導的，它就像是一張獨特的名片。因此，我們在設計網站時，盡可能最大限度地關注該區域。
最后還要提醒大家，一定記得定期更新網站頭部內容哦！以校園招聘大客戶為例，大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網站的新鮮感和時效性。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn