<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          


          
    
  
    
          
    
                    首頁
    
          
              
          
            
            
          底部標簽欄全面解析
          
            
          
               純純                                            
          
            
          
    一、標簽欄是什么？ 

          

          
    
          
           

          

          
    標簽欄也叫Tab Bar，是移動端應用程序中最常用的UI元素之一。標簽欄出現在應用程序屏幕的底部，可以讓用戶在應用程序中的不同部分之間快速切換。標簽欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在顯示鍵盤時被隱藏。標簽欄可以包含任意數量的標簽，但是可見標簽的數量根據設備的大小和方向而變化。如果由于水平空間有限而無法顯示某些選項卡，則最終的可見選項卡將變為“更多”選項卡，該選項卡將在單獨屏幕上的列表中顯示其他選項卡。 

          

          
    
          

          

          
    標簽欄在任何目標頁面中的高度是不變的，iOS 規定它的高度為98px(iOS @2x)。但因為 iPhone X 之后的全面屏手機引入了 Home Bar ，所以在進行界面適配的時候，請務必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標簽欄中標簽的展示，這會讓兩個控件發生操作手勢沖突。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    二、為什么標簽欄要放于底部？ 

          

          
    
          
           

          

          
    史蒂文·霍伯（Steven Hoober）在對移動設備使用情況的研究中發現，人們會根據自己的設備，需求和背景以多種方式觸摸手機，觸摸手機屏幕或按鈕的用戶分三種基本方式：抱著手機的人占36%、兩只手使用手機的人占15%，而49％的人依靠一只手在手機上完成事情，除此之外75％的用戶僅用一個拇指觸摸屏幕。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    在下圖中，出現在手機屏幕上的圖表是近似覆蓋圖，其中的顏色表示用戶的拇指可以接觸到哪些區域以與屏幕交互。綠色表示用戶可以輕松到達的區域；黃色，需要伸展的區域；紅色區域，要求用戶改變握持設備的方式。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    這意味著： 

          

          
    將常用的“行為”放在屏幕底部很重要，因為只需一鍵式的交互即可輕松到達這些“行為”。 

          

          
    
          

          

          
    
          

          

          
    三、標簽欄的三大原則 

          

          
    
          
           

          

          
    底部標簽欄設計應當遵循三大原則：結構合理、位置清晰、可預測行為。 

          

          
    
          

          

          
    3.1 結構合理 

          

          
    為了讓標簽欄表現清晰，兩大平臺在規范里都對標簽數量給出了相同的建議：建議標簽欄內的標簽個數為3個至5個。因為標簽過多會使每一個單元標簽的可觸空間降低，人們在物理上（手指）難以點擊或誤觸，除此之外還會增加應用程序結構的復雜性。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    注：如果你因為產品結構非常繁雜，標簽數量想要達到更多，那么在 iOS 中就會給你強硬處理，iOS 人機交互規范告訴產品設計者們：標簽欄雖然可以包含任意數量的標簽，但可見標簽的數量會根據設備的大小(平板或手機)和方向(豎屏或橫屏)而自適應變化。如果由于水平空間有限而無法顯示某些標簽時，最后的一個可見標簽將被會被系統強行轉換為“更多”選項，需要用戶點擊“更多”選項之后，系統才將在單獨屏幕上的列表中顯示其他被隱藏的標簽。 

          

          
    
          

          

          
    3.2 位置清晰 

          

          
    “我在哪里？” 是用戶成功導航所需要回答的一個基本問題，我們應當采用適當的視覺提示讓用戶知道目前所處的位置（選中狀態）。在APP應用中我們常見的處理方式有4種：改變圖標樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨立存在的，可以同時作用于一個標簽。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    3.3 可預測行為 

          

          
    選取每個底部導航選項都有通向它的目的地，底部導航應當將用戶直接引導到相關頁面，不應該打開菜單或其他窗口。如果在某些情況下可以使用標簽，但在其他情況下則無法使用，則應用程序的界面將變得不穩定且不可預測。我們要確保所有選項卡始終處于啟用狀態，并說明為什么選項卡內容不可用。例如造作新家APP，當用戶處于未登錄狀態時，就不能查看底部標簽“我的”信息，當我點擊標簽“我的”，就會彈出快捷登陸界面，這樣就能讓用戶明白不能使用的原因是賬號未登陸，從另一層面講也很好的引導了用戶注冊與登陸。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    注：不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件，如果需要提供控件，請使用工具欄。 

          

          
    
          

          

          
    
          

          

          
    四、標簽欄的基礎規范 

          

          
    
          
           

          

          
    在設計標簽欄前我們首先要了解它的基礎規范，在保證基礎規范合理的情況下再去進行設計。 

          

          
    
          

          

          
    4.1 圖標視覺大小 

          

          
    為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網格尺寸來進行繪制圖標，下面就以常用的24x24為大家舉例： 

          

          
    
          

          

          
     

          

          
    
          

          

          
    網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域，同時還能夠很好的平衡圖標的視覺重心。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    最后加入圖標的keyline，keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易，并有助于在設計相似比例的圖標時有共同的參考準則。 

          

          
    
          

          

          
    在24尺寸下的keyline構成如下（24尺寸下的出血區域為2）： 

          

          
    
          

          

          
     

          

          
    
          

          

          
    當把圖標畫在網格上時可以很好的規范圖標，讓它們從整體的視覺上看著統一規范。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    4.2 標簽欄布局 

          

          
    標簽的數量以及標簽的展示形式決定了標簽的布局形式，標簽的常見布局一共有2種：屏幕等分、圖標左右間距相等。 

          

          
    
          

          

          
    4.2.1 屏幕等分 

          

          
    屏幕等分是最常見的標簽布局形式，因為不管它存在多少圖標，都可以用它進行屏幕劃分，計算方法也十分簡單，屏幕的寬度除以標簽個數就是每列寬度。采用此等劃分的案例有：懂車帝、今日頭條。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    4.2.2 圖標左右間距相等 

          

          
    圖標左右距離相等多用在標簽數量為3個的情況下，計算方法是先去除中間圖標的尺寸，然后再左右平均劃分等距。相對于屏幕等分，圖標左右間距相等劃分更為緊湊。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    4.3 標簽欄熱點區域 

          

          
    根據菲茲定律，使用指點設備到達一個目標的時間，與當前設備位置和目標位置的距離（D）和目標大?。⊿）有關。標簽欄作為向用戶展現產品框架的關鍵控件，熱點區域（可點擊區域范圍）的設定一定要合理。底部圖標尺寸較小，如果將圖標作為熱點區域，那么可點擊區域就偏小，很可能出現用戶點擊不到的情況，正確的做法是以標簽欄的布局作為基礎設定，在標簽相鄰的部分劃出一定區域作為不可點擊區域，以免用戶誤操作，參考如下，紅色為可熱點區域，藍色為不可點擊區域： 

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    五、標簽欄的圖標樣式 

          

          
    
          
           

          

          
    在產品設計中，不同樣式的圖標會給人不同的感受，隨著APP風格越來越簡潔化，標簽欄圖標風格緊緊地跟著界面的風格而改變。經過長時間的沉淀，標簽欄圖標常見的默認設計樣式一共可分為四類：線性圖標、面性圖標、線性+面性圖標、輕質感圖標。 

          

          
    
          

          

          
    5.1 線性圖標 

          

          
    線性圖標通過線來塑造輪廓，在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2px、3px、4px，不同的線條粗細所帶來的視覺感受也不同，我在“如何讓你的圖標具有說服力”文章中提到過，線條越粗那么圖標的性格就越活潑、粗曠，線條越細圖標性格就越精致、商務，圖標使用描邊的粗細可以根據產品的氣質來決定。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    選中狀態：當選中狀態為高亮線性圖標時，選中狀態的圖標顏色會與默認狀態的圖標顏色形成較強的反差，但由于線和線的差異性并不強，線性圖標沒有面性圖標更具吸引力（引導性），即使加入了高亮色識別度也不及面性強。airbnb在處理線性圖標選中狀態時就考慮到了這一點，選中狀態下不僅對圖標的顏色做了較大變化，還加大了圖標及文字的描邊粗細，從一定程度上加強了圖標的引導性。（注：線性狀態的圖標選中狀態也可以變為面性圖標或線性+面性圖標） 

          

          
    
          

          

          
     

          

          
    
          

          

          
    5.2面性圖標 

          

          
    面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感，面性圖標的承載信息相對與線性圖標來說更重，更具有引導性。 

          

          
    選中狀態：面性圖標的選中狀態為高亮面性圖標，顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態就采用了高亮面性圖標的展現方式，除了把圖標底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會員”標簽更加突出，還單獨對“會員”標簽的顏色進行了修改。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    5.3線性+面性圖標 

          

          
    線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。 

          

          
    選中狀態：線性圖標的選中狀可以為高亮的線性+面性圖標。懂車帝在處理標簽選中狀態時就把圖標底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態的視覺重量，更加明確的讓用戶感知自己所處的位置。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    5.4輕質感圖標 

          

          
    輕質感圖標層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺。輕質感圖標在標簽欄中運用的較少，在特殊情況下才會使用，例如盒馬，就把輕質感圖標用在了首頁標簽與盒馬小鎮標簽，首頁標簽的引入是為了讓用戶加強對品牌形象的認知，而盒馬小鎮標簽的引入則是為了加強圖標的引導性。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    *圖標樣式的常用變化（選中與未選中） 

          

          
    在我調研上百種應用程序中，發現主流的APP標簽欄樣式變化大致分為六種：線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標簽的樣式變化繁多，但是使用率最多的是“由線性轉面性”標簽。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    六、標簽欄的展示形式 

          

          
    
          
           

          

          
    標簽欄的不同展示形式會給用戶帶來不同的使用習慣和使用感受，常見的標簽展示形式有四種：圖標+文字、純圖標、純文字、舵式。 

          

          
    
          

          

          
    6.1圖標+文字 

          

          
    圖標+文字是最常見的標簽展示形式，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。正因為有文字提示，所以沒有必要過于擔心圖標的識別性問題，那么圖標就可以得到更深的延展，可以做的更有趣，更具有產品氣質，甚至可以代入更深層次的動效。 

          

          
    例如東家·守藝人APP，專門售賣各種手藝人的親手制作的各種藝術品，面向的對象是喜歡傳統文化的人群，在這樣的背景下東家結合宋體的筆畫（筆畫拆分）把圖標設計的更加傳統、古樸，創造出具有東方韻味且極具形式感的圖標設計。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    6.2純圖標 

          

          
    采用純圖標展示形式的產品比較少見，純圖標樣式的最大缺點就是識別性低，沒有文字說明會導致用戶很難找到自己想要去的位置，也不明確自己所處的狀態。所以我們如果要設計純圖標形式，那么必須要考慮到圖標的識別性問題，間接的舍棄掉圖標更多的延展性，讓圖標變得更規矩。（識別性的提升我之前寫的圖標文章中提到過，主要可以從大眾認知隱喻與真實世界映射兩個方向出發去提升） 

          

          
    使用純圖標樣式的產品特征：產品單一、領域垂直、小眾化、用戶群體接受度高。即使滿足這些條件下產品使用純圖標標簽，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉后才會得到好轉，所以一定要慎用。除此之外不太建議用于電商、視頻、學習、社交等領域。 

          

          
    對于我們設計師來說使用純圖標樣式的產品中最為熟悉的就是花瓣了。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    6.3純文字（部分含標識） 

          

          
    采用純文字展示形式能夠更直觀的讓用戶進行操作，遵循簡單易用的原則。適合用戶群體跨度較大的產品，多用于直播類、內容類、簡單工具類APP中。缺點也顯而易見，圖標樣式比較單一，沒法加入更多趣味化、具有產品特性的元素到標簽中。 

          

          
    采用純文字展示形式的產品有很多，最熟悉不過的就是抖音，抖音的標簽默認狀態下采用了純文字形式，選中狀態則把文字高亮顯示，并且底部加入了圓角矩形，對于用戶群體跨度較大的產品，這樣的展現形式再好不過了。（抖音在途中改用過圖標+文字格式，不過后面也放棄了，我當時用著圖標+文字類型的抖音，的確感覺太奇怪！） 

          

          
    
          

          

          
     

          

          
    
          

          

          
    6.4舵式 

          

          
    舵式標簽可以看為底部標簽式導航的一種變體。它在后者的基礎上，突出強調了一個標簽并且放在中間的位置，樣子看起來像攢了一個舵，所以取名為舵式標簽。一般舵式標簽的顏色、大小等視覺表現會被設計得和其他普通標簽有所差異，通過視覺對比的方式吸引用戶關注。舵式標簽通常和產品框架體現無關，大多數應用程序使用舵式標簽是用來承載系統功能。起初是因為社區類APP為了激勵和方便用戶隨時隨地地輸出UGC內容，所以把觸發用戶創作/發布的功能按鈕放置在標簽欄中。 

          

          
    因為舵式標簽可以很好地承載產品的重要功能，而被許多的應用程序設計所采用，經過越來越多的應用采用舵式標簽，使用的形式也越來越多樣，它現在并不再單一地用于承載產品功能，而是配合營銷場景、付費場景，給產品的變現、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標上，并且為了讓圖標更加顯目，甚至把圖標做成了輕質感的形式體現，同時也通過2像素的線性圖標減弱其他4個標簽的引導性。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    七、賦予標簽更多內容 

          

          
    
          
           

          

          
    標簽欄不僅是向用戶展現產品框架的關鍵控件，還可以貫穿整個產品的商業價值的體現，它是連接著整個產品最重要的頂層信息。如果想要讓標簽變得更加豐富，想要標簽內容中含有更多的情感需求、 商業需求、運營需求，那么我們可以重點從這兩個層面考慮：視覺層面、交互層面。 

          

          
    
          

          

          
    7.1視覺層面 

          

          
    在視覺層面上我們可以迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅能夠很好的向用戶傳遞著產品調性還能吸引用戶關注以及引導用戶進行操作。 

          

          
    
          

          

          
    7.1.1設計裝飾性圖標 

          

          
    裝飾性圖標僅僅是用來提升整個界面的視覺體驗，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極。 

          

          
    
          

          

          
    &整體裝飾圖標 

          

          
    整體裝飾性圖標的出現往往是為了滿足情感需求與商業需求，整體裝飾圖標并不是一直存在的，它的特點是季節性與周期性，并且它并不具備任何功能性。 

          

          
    從情感需求出發設計裝飾圖標：例如世界杯火熱進行時，優酷為了滿足用戶的情感需求，就把標簽欄的圖標全部替換為帶有世界杯元素的圖案，讓用戶與其產生情感的共鳴。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    從商業需求出發設計裝飾圖標：現在的年貨節，之前的雙十二、雙十一、618等，每到節日促銷活動的時候，很多電商應用都會換上裝飾性圖標，例如一號店，在過年前就把標簽欄圖標全部改為含帶過年氣息的元素，提前來預熱活動，引導用戶消費。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &單個裝飾性圖標 

          

          
    單個裝飾性圖標的出現大部分都是為了滿足運營需求，運營為了推出某個活動或功能，往往會單獨裝飾某個圖標的設計視覺，以便于提高圖標的引導性，最直接的例子就是我剛才提到過的拼多多。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    7.1.2加入品牌基因 

          

          
    我們可以在標簽中加入更多的品牌基因，讓其與品牌產生聯動性，這一形式是大部分應用程序都在做的，我們可以從這6個層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。 

          

          
    
          

          

          
    &品牌顏色 

          

          
    色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標簽欄的圖標（選中狀態）就提取了品牌的黃色，讓其與品牌調性高度一致。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調整，圖標采用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精致、有活力。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &品牌LOGO 

          

          
    提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復加強了用戶對App的LOGO印象，這樣不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO，同時也使用了品牌顏色。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &品牌元素 

          

          
    我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。例如QQ音樂，它并沒有把它的品牌LOGO直接放于其中，而是通過大眾所熟知的音符作為首頁圖標。 

          

          
    
          

          

          
     

          


          

          
    &品牌名稱 

          

          
    如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內，需要注意的是這類圖標不能單獨出現，因為它本身不具備識別性與引導性，必須配合文字一起出現，這樣才能讓用戶理解標簽的真正功能，我們不能為了設計而設計。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &品牌性格 

          

          
    圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &品牌吉祥物 

          

          
    現在大部分品牌都會含帶吉祥物，我們可以在設計圖標時提取吉祥物的外形，把它用于產品的標簽中。例如盒馬，它就把吉祥物做為了底部標簽，不過需要我們注意的是如果吉祥物的風格與我們的圖標風格差別較大，我們就需要對它做風格化的處理，不然看起來就十分突兀。（盒馬對吉祥物做了輕質感的風格化處理） 

          

          
    
          

          

          
     

          

          
    
          

          

          
    7.1.3讓用戶自定義 

          

          
    讓用戶自定義的標簽現在越來越常見，而每個產品對其思考的層面也都有所不同。自定義標簽往往出現在個人中心，它會根據用戶上傳的頭像或用戶的捏臉生成圖標。 

          

          
    
          

          

          
    &用戶頭像 

          

          
    目前市面上很多APP都把用戶上傳的頭像作為了個人中心標簽展示，例如我們常用的百度網盤就采用了此方案，當用戶注冊未上傳用戶頭像時，會默認顯示系統標簽，當用戶上傳完后就會顯示用戶頭像，并且如果你是會員，還會把會員標示顯示在標簽的右上方，彰顯會員用戶的尊貴性。 

          

          
    我們可以很明顯的發現百度網盤的底部標簽默認狀態為線性圖標，而個人中心不管默認狀態還是選擇狀態都為面性圖標，所以如果你想要加強個人中心的引導性，那么可以采取此方案。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &捏臉 

          

          
    捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實人格屬性，加強了社交的傳播性，所以SOUL決定把用戶自定義的捏臉放于個人中心標簽中。 

          

          
     

          

          
    
          

          

          
    7.2交互層面 

          

          
    除了對標簽做視覺的提升外，我們還可以對其加入合理的交互效果，一方面可以提升用戶在使用產品過程中的樂趣，另一方面還可以為用戶提供更多便利，從而增強用戶體驗。 

          

          
    
          

          

          
    7.2.1標簽功能切換 

          

          
    在不同的狀態下點擊標簽的功能也不一樣，一個標簽可承載2到3個功能，可以滿足不同狀態下的用戶需求。 

          

          
    
          

          

          
    &承載2個功能案例 

          

          
    SOUL的廣場標簽（進入選取頁+刷新） 

          

          
    SOUL的廣告標簽承載了2個功能，當你處于其他標簽時，點擊廣場標簽則直接進入到廣場頁面；當你處于廣場頁面中時，再次點擊標簽則會刷新整個頁面。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    有貨的發現標簽（進入選取頁+上傳圖片） 

          

          
    有貨的發現標簽也承載了2個功能，在設計上運用的非常巧妙，當你處于其他標簽時，點擊發現標簽則進入到發現頁面；當你在發現頁面時你的發現標簽則變為了上傳圖片標簽，可以點擊上傳圖片。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &承載3個功能案例 

          

          
    淘寶首頁標簽（進入選取頁+刷新+置頂） 

          

          
    淘寶的首頁標簽同時承載了3個功能，當你處于其他標簽中，點擊首頁標簽則直接進入到首頁頁面；當你在首頁頁面第一屏時，你點擊首頁標簽則會刷新整個頁面；當你滑過3分之1屏時，首頁標簽的功能則變為置頂。所以在不同狀態下首頁標簽也會具備不同的功能，并且每種狀態下的標簽樣式也是不同。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    愛奇藝首頁標簽（進入選取頁+到達指定位置+置頂） 

          

          
    愛奇藝的首頁標簽也是同時承載了3個功能，不過它與淘寶有些許不同，愛奇藝并不能刷新頁面，而作為替換的功能是直接到達指定位置“猜你喜歡”。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    7.2.2觸覺與聽覺 

          

          
    我們做的設計不要僅限于視覺所看到的，還要考慮到所觸摸的、所聽到的，我們可以利用觸覺與聽覺去輔助用戶確認自己的選擇，當然我們一定要合理利用，反之則會讓用戶感到十分反感。 

          

          
    
          

          

          
    &觸覺 

          

          
    西瓜視頻與今日頭條在點擊標簽欄圖標時手機就會發出輕微的震動，給予了用戶很好的點擊反饋。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &聽覺 

          

          
    SOUL點擊星球標簽時手機就會發出戀愛鈴聲，在SOUL的產品報告中，SOUL主要面對女性用戶，女性用戶約為男性用戶的2.4倍（女人更偏感性），并且它的主要需求是滿足測試、匹配、交友，所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊，當你在特定場景下使用SOUL時，點擊到星球標簽周圍人也都能聽到戀愛鈴聲，實屬尷尬，所以我在特定場景下使用SOUL時都會默默的關掉聲音。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    7.2.3標簽動畫 

          

          
    精彩的圖標動畫，對整體的設計具有畫龍點睛的作用，降低標簽切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設計給用戶傳達出整個 APP 設計的品牌及理念。標簽動畫往往都比較簡單，主要有：縮放、旋轉、顏色過渡、位移、抖動、填充、線性軌跡、結合容器、元素介質等。接下來我們來看看SOUl、虎牙、汽車之家是怎么做的。 

          

          
    
          

          

          
    &SOUL-彈性縮放+結合容器+線性軌跡 

          

          
    SOUL的底部標簽欄運用到了彈性動畫、結合容器以及線性軌跡。帶有彈性縮放的標簽反饋，讓整體的設計更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標的運動規則：先從 0 放大到最大（數值根據實際情況設定），然后再回彈至正常大小。除了彈性動畫外，它還結合了容器的元素對內部進行了顏色的替換以及單線條的軌跡動畫。這樣的處理不僅趣味性十足，還強化了選中當前狀態，整體標簽切換的一致性也較高。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &虎牙-抖動+趣味表達 

          

          
    虎牙一直是我比較喜歡的直播平臺，它的底部標簽動畫也是非常值得借鑒，運用到的動畫形式是抖動與趣味表達。抖動是通過圖標的左右、上下快速位移或旋轉形成，整體的動畫效果節奏較快，具有一定的速度感，使整個標簽切換的情緒表達較為俏皮、可愛。除了抖動外還在切換過程中代入了更多小元素的趣味表達，賦予了圖標更多的性格，對我們的設計進行再升華，從而提高整體設計的質感和趣味。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    &汽車之家-結合容器+細節晃動 

          

          
    因為用戶群體的不同，汽車之家在標簽動畫的設計上也相對簡單、嚴謹，它的動畫形式主要是結合容器與細節晃動。選中效果由線切換為面，并加入了品牌底色，這樣能夠清晰的給用戶傳達當前頁面。并且為了不使整體的切換效果變得生硬，在切換過程中采用了透明度與彈性縮放，讓其過渡的相對柔和。在細節的處理上也是非常用心，每個圖標都帶有笑臉的形狀，間接的給用戶傳達“笑臉”信息，在選取標簽時內部形狀會輕微晃動。整體來看汽車之家的標簽動效雖然偏向嚴謹，但是在細節上也給予用戶傳達了更多的情感。 

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    作者：黑獅力    來源：站酷 

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          
            
          
              
                評論(0)
                瀏覽(1873)
              
                          
          
          
          
                      
          
            
            
          如何讓你的圖標具有說服力？
          
            
          
               純純                                            
          
            
          
    
          
    
          
        
          
        
          
        
          
            一、圖標的定義及分類 
        
          
        
          
            
          
        
          
        
          
            1、圖標的定義
        
          
        
          
            圖標是具有高度概括性的、用于視覺信息傳達的圖像。圖標常?？梢詡鬟_出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內容和信息。
        
          
        
          
            在數字設計領域，圖標作為網頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎設施，也是達成人機交互這一目標的有效途徑。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            2、圖標類型（基于功能劃分）
        
          
        
          
            
          
        
          
        
          
            2-1釋意性圖標：
        
          
        
          
            釋意性圖標是用來解釋和闡明特定功能或者內容類別的視覺標記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標來獲取信息。不過有時候圖標表達的含義可能還不夠完整或者清晰，所以會將圖標和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標一共可以分為以下三類：
        
          
        
          
            
          
        
          
        
          
            2-1-1純圖標： 
        
          
        
          
            例如火球買手APP中的店家“特定標簽”，以及圖文展示下的“觀看數量圖標”與“收藏圖標”，它們并不需要用文字去解釋，用戶也知道它表達的是什么。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            2-1-2圖文結合： 
        
          
        
          
            例如造作APP中的“購物車圖標”與“收貨地址圖標”，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            2-1-3純圖標（圖標內含文字）： 
        
          
        
          
            例如開眼APP中視頻封面左上角“開眼精選圖標”，它把圖標與重要文字結合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            2-2交互性圖標：
        
          
        
          
            交互圖標的最大意義在于可以引導用戶進行交互行為，是在產品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執行不同的交互過程，這種類型圖標也是APP中最常見的，常見的交互性圖標如：搜索、底部標簽、返回、點贊、收藏、掃一掃等。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            2-3裝飾性圖標：
        
          
        
          
            裝飾性圖標僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標”。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            3、圖標類型（基于基礎樣式+表現手法）
        
          
        
          
            圖標基于基礎樣式（線、面、線面結合）+表現手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。
        
          
        
          
            
          
        
          
        
          
            3-1線性圖標（6種）
        
          
        
          
            線性圖標通過線來塑造輪廓，在界面中App的圖標尺寸并不大，所以如果線過于復雜，在小面積中過多的線會對識別性產生較大的困擾。在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3-2面性圖標（6種）
        
          
        
          
            面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3-3線面結合圖標（6種）
        
          
        
          
            線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3-4擬物化圖標
        
          
        
          
            這類圖標的特點是通過細節和光影還原現實物品的造型和質感，能給用戶極強的代入感，用戶可通過對現實事物的聯想，快速領會圖標表達的意圖。但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現在擬物化的圖標很少運用在APP界面之內。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3-5輕質感圖標
        
          
        
          
            相較于擬物風格不會有太多復雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設計中，一般在面積比較大的區域我們會使用加入輕質感的圖標。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            二、圖標設計規范
        
          
        
          
            
          
        
          
        
          
            合理的遵循圖標規范可以有利于設計師之間合作使用，指導設計師如何規范的去設計圖標，以確保企業所有產品圖標風格的一致性和可用性達到統一，同時也是為了后續產品更新迭代有可參考的地方。
        
          
        
          
            
          
        
          
        
          
            1、圖標尺寸
        
          
        
          
            為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網格尺寸來進行繪制圖標，常用的網格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設計中也會存在特殊的尺寸，例如谷歌在臺式機上設計圖標，當鼠標和鍵盤是主要輸入方法時，就會使用密集布局，基礎網格就會縮小到20。
        
          
        
          
            下面就以常用的24x24為大家展示：
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域，同時還能夠很好的平衡圖標的視覺重心。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            *在使用常規圖標時避免一部分在出血位。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            *在使用多個元素的圖標時，避免圖標擁擠我們可以讓其部分出現在出血位，確保它們之間有足夠的空間。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            2、圖標的keyline
          
        
          
        
          
            keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易，并有助于在設計相似比例的圖標時有共同的參考準則。
        
          
        
          
            
          
        
          
        
          
            在24尺寸下的keyline構成如下（24尺寸下的出血區域為2）：
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            當把圖標畫在網格上時可以很好的規范圖標，讓它們從整體的視覺上看著統一規范。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3、像素
        
          
        
          
            
          
        
          
        
          
            3-1像素統一
        
          
        
          
            在設計一整套系統化的圖標時，我們一定要注意圖標的像素大小，要運用相同的網格尺寸設計相同線條粗細的圖標，包括曲線，角度以及內部和外部筆劃。這樣圖標看起來才更統一，也有利于后期圖標的迭代更新。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            當然，描邊像素的粗細并不是絕對的，如果我們要做一些密集型的圖標時，可以考慮適當的縮小線的像素大小。如下，我們設定的系統圖標線條粗細為3px，當你用3px作用于指紋圖標上時就會顯得非常擁擠，并且在視覺上比其余圖標更重，這時我們就可以把它的線條像素降級，設定為2px。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3-2避免小數位
        
          
        
          
            我們在用矢量工具繪制圖標時，要仔細看好圖標的網格尺寸和圖標結構尺寸，避免產生小數位。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            4、圖標的曲率
        
          
        
          
            曲率簡單來講就是圖標中帶有圓角的邊角度數，只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現方式有兩種：外曲、內曲。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            外曲與內曲并不一定同時存在，在特定情況下內部結構可以是直角（無曲率）。如下圖：當內部結構都是圓角時會發現整個圖標稍顯臃腫，這時我們可以把部分內部圓角直接變為直角（也可以改變曲率大?。?，改變后就會發現圖標的整體結構會顯得更加協調。需要注意的是如果一個圖標做了這樣的處理，在同等情況下的圖標都要做一樣的處理，不然圖標會顯得非常雜亂，不統一。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            5、傾斜角度
        
          
        
          
            根據像素的網格線來設置兩條對角線，會讓你的圖標看起來更清晰。在傾斜的角度選擇上，不要出現7.8°、14.2°這樣的奇怪數值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規律的角度方案），這樣會使得整體的圖形變化顯得更加規律，也能夠滿足不同圖形的角度需求。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            6、斷點形態
        
          
        
          
            在做很多圖標時都會用斷點的缺口來打破“全包邊圖標”的沉悶感，使圖標具有透氣性，如果想給圖標添加斷點，那么要保證斷點的形態保持一致。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            7、圖標間距
        
          
        
          
            確保圖標內每個細節和元素都有足夠的空間，圖標的相鄰元素之間的空間在整個圖標中不應太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            8、透視
          
        
          
        
          
            如果在做圖標時牽涉到了透視需求，那么就一定要保證圖標的透視角度一致。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            9、視覺重心
        
          
        
          
            非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標視覺重心并不在一條水平線上，需要微調才能保證平衡感。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            10、圖形整潔
        
          
        
          
            在圖形的處理上，不要留有多余的節點，干掉多余的節點，保持圖形的整潔。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            11、命名
        
          
        
          
            ICON命名要求較為嚴格，涉及到我們切圖給開發，所以我們命名爭取做對，且需嚴格遵守規則，正確的命名原則：類型_位置_功能_狀態_大小
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            三、圖標的性格走向
        
          
        
          
            
          
        
          
        
          
            每個App應該有自己獨特的產品氣質，同樣圖標性格也應當與產品氣質保持一致。圖標性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務（細直）、精致（細圓）。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            1、粗曠類圖標
          
        
          
        
          
            圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為直角。
        
          
        
          
            粗曠類圖標讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調類型等產品中。例如VSCO，它的底部標簽欄圖標全部采用了粗線條的直角設計。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            2、活潑類圖標
        
          
        
          
            圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為圓角。
        
          
        
          
            活潑類圖標讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產品中。例如閑魚，不管是在LOGO字體的處理還是APP內部的圖標處理，都是采用了線條較粗的圓角設計。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3、商務類圖標
        
          
        
          
            圖標結構特點：線條較細、拐角為直角。
        
          
        
          
            商務類圖標讓人看起來十分規矩、嚴謹、值得信賴，它更多適用于新聞、政府、商務、工具等產品中。例如工具類的思維導圖APP，它的可操作按鈕都是商務類的圖標。因為這類圖標的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            4、精致類圖標
        
          
        
          
            圖標結構特點：線條較細、拐角為圓角。
        
          
        
          
            精致類圖標讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、奢侈品、藝術、領域垂直等產品中。例如airbnb，在APP應用中大部分都采用了精致類圖標。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            四、圖標的評判標準
        
          
        
          
            
          
        
          
        
          
            當圖標設計完后，我們應該如何去評判一個圖標的好壞？很多設計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標進行評判：識別性、圖標氣質、協調性、一致性、品牌調性。
        
          
        
          
            
          
        
          
        
          
            1、識別性
        
          
        
          
            圖標最主要的用途就是輔助用戶理解信息，特別是對于當圖標單獨存在時，一定不能讓用戶產生疑慮。要想圖標達到高識別，我們可以從這2個方向入手：大眾認知隱喻、真實世界映射。
        
          
        
          
            
          
        
          
        
          
            1-1 大眾認知隱喻
        
          
        
          
            在互聯網普及的今天，許多界面的隱喻圖標已被廣大用戶熟知認可，對于這類隱喻圖標用戶不用思考身體就已做出反應，我們在設計圖標時可以從隱喻圖標中添加修改部分元素，從而形成新的圖標，這樣既能保證圖標的識別性，也能做出差異化。
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            1-2 真實世界映射
        
          
        
          
            選擇真實世界中的物品映射，能使人下意識對圖標的作用有近似預期，降低學習成本，提高識別度。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            2、圖標氣質
          
        
          
        
          
            每個App應該有自己獨特的產品氣質，而我們所做的圖標就是要跟隨產品的氣質。例如當你要做一款二次元產品，你的圖標氣質就應該偏活潑、可愛、萌、青春，而不是剛硬、嚴謹、規矩。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            3、一致性
        
          
        
          
            一致性是圖標的基礎，我們在繪制整套圖標時要確保它們的基礎屬性全部一致，細節統一，圖標內容的統一在視覺上也更加和諧美觀。圖標是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。
        
          
        
          
            
          
        
          
        
          
            3-1 尺寸大?。壕W格大小是否統一、是否遵守圖標的keyline規則。
        
          
        
          
            
          
        
          
        
          
            3-2 圖形角度：是否遵循設定的角度規范（15°的增量用于傾斜角度）
        
          
        
          
            
          
        
          
        
          
            3-3 拐角（曲率）：拐角的曲率是否統一，如果圖形太多且復雜，那么我們可以根據圖標的特性去設定曲率的規則，例如可以設定當邊角像素在1-2px時內外曲率為2px；當邊角像素在3px時內外曲為2px，內曲為1px；當邊角像素大于或等于4px時，外曲為2px，內部則為直角。
        
          
        
          
            
          
        
          
        
          
            3-4 描邊：描邊大小是否一致。
        
          
        
          
            
          
        
          
        
          
            3-5 間距：是否遵守間距規范。
        
          
        
          
            
          
        
          
        
          
            3-6 透視：透視是否一致，避免在同一套圖標中出現正視圖/側視圖混雜的情況。
        
          
        
          
            
          
        
          
        
          
            3-7顏色：在圖標的配色上要保持一致的規律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協調，避免出現飽和度、明度反差過大的配色。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            4、協調性
        
          
        
          
            一致性代表的是圖標的基礎，而協調性則代表圖標的整體狀態，協調性的呈現狀態是驗證一致性是否合理的標準，當協調性存在問題時，我們就要反過來查看一致性存在的誤區并給予修改。在圖標的協調性上我們主要審視這三點：視覺大小、飽滿度、透析感。
        
          
        
          
            
          
        
          
        
          
            4-1 視覺大小
          
        
          
        
          
            視覺大小對標的是一致性的尺寸大小與描邊大小，當你發現圖標視覺大小不對等時，你就要回過去查看你的網格與keyline是否運用正確，確保正確后再查看你的圖標是否按照keyline的規范繪制以及描邊大小是否一致。（同樣尺寸下的圖標，從光感上來看描邊粗的圖標視覺偏大）
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            4-2 飽滿度
          
        
          
        
          
            飽滿度對標的一致性的間距，當你發現圖標不夠飽滿時，你就要去查看你設定的間距值是否偏大，是否合理。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            4-3 透析感
        
          
        
          
            透析感簡單來說就是留白區域。透析感對標的也是一致性的間距，當元素的描邊過大時，我們就要合理的設定間距的最小值，不然整個圖標就顯得非常臃腫。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            5、品牌調性
        
          
        
          
            品牌調性是我們經常提到的緯度，我們打開很多APP都會發現他們的圖標設計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯動性。其實我們可以結合品牌調性，在圖標上做更多的聯動、創新。
        
          
        
          
            
          
        
          
        
          
            5-1品牌顏色
        
          
        
          
            色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標簽欄的圖標（選中狀態）就提取了品牌的黃色，讓其與品牌調性高度一致。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調整，圖標采用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精致、有活力。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            5-2品牌LOGO
        
          
        
          
            提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復加強了用戶對App的logo印象，這樣不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            5-3品牌元素
        
          
        
          
            我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。例如QQ音樂，就把音符作為首頁圖標。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            5-4品牌名稱
        
          
        
          
            如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內，需要注意的是這類圖標不能單獨出現，因為它本身不具備引導含義，必須配合文字一起出現，這樣才能讓用戶能易理解。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            5-5品牌性格
        
          
        
          
            圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            5-6吉祥物 
          
        
          
        
          
            如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產品的圖標中。例如盒馬，它就把盒馬的吉祥物做了風格化的處理，放于APP的首頁標簽。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            
          
                作者：黑獅力    來源：站酷 
            
          
            
          
                藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 
            
          
            
          
                分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          
           
            
          
            
          
                藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
            
          
        
          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1293)
              
                          
          
          
          
                      
          
            
            
          客戶：要多、要大、要好看，能安排不?
          
            
          
               seo達人                                            
          
            
          

          
    
          
        一、使用比較有特色的風格 
    
          

          

          

          
    既然粗暴、接地氣的設計容易被人說成“土”，那么使用一種當下比較流行，或者比較有特色的風格，就能有效增加畫面的設計感和時尚感。

          

          
    圖片 

          

          
    ▲ 上圖使用高飽和度的藍色和綠色組合搭配，以及文字以背景的方式環繞在產品的周圍，都是近幾年比較流行的設計手法。

          

          
    圖片 

          

          
    ▲ 上圖使用扁平效果的描邊色塊來進行排版，既能突出文字信息、視覺效果也很時尚。

          

          
    圖片 

          

          
    ▲ 把高飽和度對比色、扁平風、幾何圖形、文疊圖等一些常在藝術海報中使用的技巧，用到促銷海報中來，這種接地氣的設計是不是也變得高級了很多?

          

          
    圖片 

          

          
    ▲ 用波普風格設計促銷海報，效果也是很亮眼的。

          

          
     

          

          
    二、把文字圖形化 

          

          
    有很多海報設計需求是以文字為主的，客戶也并沒有提供配圖，如果只展示文字，效果很容易單調，這時就可以嘗試提取文字中的關鍵詞，設計一個圖形符號與文字信息進行巧妙組合，文字與圖形符號共同組合成視覺主體。

          

          
    這么做既可以增加畫面的美觀性、視覺沖擊力、形式感，同時文字的面積占比也不會被大面積壓縮，保證信息的清晰易讀。

          

          
    圖片 

          

          
    ▲ 把文字與光線組合在一起，既突出了文字、也加強了畫面的視覺沖擊和美觀性，同時，電子產品的品類調性也得到了體現。

          

          
    圖片 

          

          
    ▲ 上圖把文字與漢堡圖形組合成一個主視覺圖形，加強了畫面的形式感。

          

          
    圖片 

          

          
    ▲ 上圖把文字與打板器組合成主視覺圖形，打破了純文字的單調感。

          

          
    圖片 

          

          
    ▲ 上圖把文字和圖片放在一個外賣袋里，加強了設計的帶入感和產品屬性。

          

          
     

          

          
    三、把文字場景化 

          

          
    其實這也是文字圖形化的一種形式，只不過不是把文字與具像的圖形符號結合，而是把通過把文字進行扭曲、變形、添加元素等方式，使其具備抽象的場景特征。

          

          
    圖片 

          

          
    ▲ 該海報把主要信息組扭曲成墻面和地面的效果，創造出一個立體空間。

          

          
    圖片 

          

          
    ▲ 這件作品與上圖的設計手法有點類似，也不知道是誰借鑒的誰。

          

          
    圖片 

          

          
    ▲ 上圖把“敢為先”這個幾個字拉大，布滿月球后面的整個天空背景，就好似一扇巨大的城門。

          

          
     

          

          
    四、圖文組合 

          

          
    即把圖片與主要文字組合在一起，共同形成畫面的主視覺，而不是相互獨立，把文字當成圖片的配文，常用的圖文組合方式有圖疊文、文疊圖、圖文交叉等。

          

          
    圖文組合的設計方式可以加強圖文之間的聯系和對比關系，使畫面更整體、更聚焦。

          

          
    圖片 

          

          
    圖片 

          

          
    圖片 

          

          
    圖片 

          

          
     

          

          
    五、加入人物或動物插畫 

          

          
    如果版面中只有文字，或者只有文字和產品圖片，那么版面都容易顯得無趣、缺少細節，在畫面中加入人物和動物而可以增強代入感和親切感，不過這類實物素材都有版權，而且比較常規，而改成插畫素材就可以有效解決這一問題。另外，最好要讓這些插畫元素與文字或產品發生互動。

          

          
    圖片 

          

          
    ▲ 上圖加了一個卡通的廚師以后，除了畫面更生動、更有趣，也會給人一種值得信賴的感覺。

          

          
    圖片 

          

          
    ▲ 上圖的排版和形式其實比較普通，但配上搞怪的插畫后，海報變得有趣了許多。

          

          
    圖片 

          

          
    ▲ 版面上方的熊貓加強了海報的吸引力和趣味性。

          

          
     

          

          
    六、精致的排版和配色 

          

          
    下面的這些促銷海報并沒有特別的風格、巧妙的創意，也沒有新意的設計形式，只是通過精致的排版和漂亮的配色，把大量的文字和圖片素材合理地編排在一起，效果照樣不錯。

          

          
    圖片 

          

          
    ▲ 信息雖然很多，但是層級分明、清晰閱讀，大量使用色塊進行排版，而且在編排上有很多細節的變化，顏色為類比色組合。

          

          
    圖片 

          

          
    ▲ 圖片和配色很有食欲，文字排版簡單、清晰，但又通過不同的色彩、字體、字號、修飾手法將不同信息進行鮮明的層級區分，文字與圖片有關聯但互不干擾。

          

          
    圖片 

          

          
    ▲ 外邊框的處理以及版面中的圓點底紋使版面顯得更精致、更有設計感，版面雖然排得很滿，但是主次分明、信息清晰易讀，三組食物所搭配的文字雖然不大，但是細節滿滿、井然有序。

          

          
    圖片 

          

          
    ▲ 大量的手寫字體給人一種“純手工制作”的感覺，與樸實無華的產品形成呼應，文字全部集中排在版面的上方和下方，而中間區域完全留給了產品圖片，視覺對比鮮明。

          

          
     

          

          
    圖片 

          

          
    拋開客戶的需求以及效果談設計的美觀性就是耍流氓，把文字縮小、加一些沒什么意義的英文、使用一些酷炫的排版技巧，可能會讓你的設計更精致、更洋氣，但如果拋棄了客戶的需求和消費者真正關心的東西，那么我們并沒有真正解決問題，如果客戶要大、要多，那么我們就爭取給他一個又大、又多、又好看的方案。

          

          
    
          

          

          
    作者：蔥爺

          

          
    轉載請注明：學UI網》客戶：要多、要大、要好看，能安排不?
          

          
           

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

          

          
    
          
           

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          

          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1567)
              
                          
          
          
          
                      
          
            
            
          中后臺加載-被忽略的體驗細節
          
            
          
               純純                                            
          
            
          
    
          
    
          
        
          
            undefined 
        
          
        
          
            大部分設計師應該都遇到過這種場景：在做設計前并沒有考慮到加載，但在進行還原度走查或者驗收的時候才發現，由于某些頁面數據請求較慢，導致在頁面中會出現空屏狀態。這時才想起需要在這些頁面添加動畫來承載頁面的過渡。
        
          
        
          
            歸根結底是因為設計師在設計過程中，更多關注頁面本身，而很少去思考頁面在呈現過程中何時會出現白屏狀態，都是后知后覺去補充完善。加載作為必備的一環，卻總是被忽略。目前很多B端產品在這方面都沒有一個系統合理的規劃，導致系統的加載體驗缺失或者不統一。
        
          
        
          
            因此希望這篇文章能夠講清楚中后臺加載出現的場景和規則，對需要深入了解加載以及在制定加載規則的設計師朋友們帶來一些幫助。
        
          
        
          
            
          
        
          
        
          
            undefined 
        
          
        
          
            加載通俗來講就是用戶從觸發頁面操作，到頁面最終呈現的一個等待過程。這個過程始終存在不可避免，只是時間有快有慢?？斓募虞d只需要幾百毫秒就結束，但慢的加載就可能會達到幾秒甚至十幾秒，讓人產生焦慮。
        
          
        
          
            而為什么會有如此大的差距，這就需要從頁面渲染的整體過程來進行說明。當我們從瀏覽器輸入網址，再到我們看到完整頁面的這個過程，網頁到底經過了哪些步驟呢。經過資料查詢和與前端確認，整體過程可以闡述如下：
        
          
        
          
             
        
          
        
          
            從這里我們可以看到頁面的呈現是程序經過了一系列操作才最終呈現到我們面前的。在這里可以將其簡化為四個階段：用戶操作功能→頁面向服務器發送請求→服務器接受并返回數據→頁面呈現。
        
          
        
          
             
        
          
        
          
            而決定整個頁面加載快慢的就在于請求與數據這里。一般我們可以將頁面的數據分為2種類型：靜態資源和動態資源。
        
          
        
          
            
          
        
          
        
          
            靜態資源：前端的固定頁面，這里面包含HTML、CSS、JS、圖片等等，不需要查數據庫也不需要程序處理，直接就能夠顯示的頁面。可以簡單理解為你頁面上的固定字段和結構。這種頁面一般加載速度比較快，比如我們看到的展示型官網一般都是前端寫好的靜態資源。
        
          
        
          
            
          
        
          
        
          
            動態資源：而對于頁面上的動態變化的，需要程序處理或者從數據庫中讀數據，能根據不同的條件在頁面顯示不同的數據，比如表格數據、統計數據等稱為動態資源，這種都需要調用后臺接口來進行返回，因此加載速度相比于靜態資源就會更慢。
        
          
        
          
            而它們的區分點用下圖可以表示：
        
          
        
          
             
        
          
        
          
            可以看到靜態資源基本是直接返回，而動態資源還需要連接數據庫調取資源，尤其是在遇到數據庫調取較慢時就會花費更多時間。而我們加載緩慢的大多數問題，也基本上更多出現在動態資源的獲取上。
        
          
        
          
            
          
        
          
        
          
            undefined 
        
          
        
          
            當我們清楚加載形成的原因，接下來要做的就是在需要加載的地方對其進行處理。這也是在設計過程中我們經常遺漏的地方。我們先看一下目前常見的2種處理方式：「默認處理」和「使用進度指示器」
        
          
        
          
            
          
        
          
        
          
            2.1程序默認處理方式：直接顯示
        
          
        
          
            當我們對加載過程不進行任何處理時，程序就會以默認的方式進行-即根據資源獲取速度一步步呈現?？梢钥吹胶俚旰笈_的處理過程就是一種默認處理方式：
        
          
        
          
             
        
          
        
          
            但是這種做法就會導致我們在頁面加載過程中會出現空屏狀態，比如上圖切換到概覽時出現了空屏狀態，尤其是當遇到了網絡緩慢的情況，會造成在加載時頁面停留在當前狀態下不動，往往會讓用戶陷入到「系統故障」的錯覺。
        
          
        
          
            
          
        
          
        
          
            2.2通用處理方式：進度指示器
        
          
        
          
            這個名詞說起來可能比較陌生，它指代的就是我們平時經常看到的加載動畫、骨架屏或者進度條等。進度指示器的作用就是告知用戶當前頁面并沒有故障，而是正在讀取數據。
        
          
        
          
            通過添加進度指示器來對空屏狀態進行承載，能夠減輕用戶的焦慮感。目前很多B端產品更通用的形式是添加動畫來過渡。
        
          
        
          
             
        
          
        
          
            但是在體驗過程中很容易發現一個問題，就是在產品的整體加載過程中，某些空屏狀態是沒被加載動畫覆蓋到的。當這些沒被覆蓋到的加載過程過長時，很容易出現焦慮感。比如神策數據在左側列表切換時的加載過程就沒被覆蓋：
        
          
        
          
             
        
          
        
          
            想要更全面的把加載動畫覆蓋到所有頁面，我們就需要弄清頁面在哪些狀態下會出現空屏狀態，從而制定統一的加載動畫規則。這個問題可以先思考一下，后面解答。
        
          
        
          
            
          
        
          
        
          
            undefined 
        
          
        
          
            在制定統一加載規則之前，我們需要明確一個概念，就是加載的模態與非模態。
        
          
        
          
            
          
        
          
        
          
            3.1模態加載
        
          
        
          
            模態加載的含義就是當前加載會中斷用戶其余操作，用戶在這個期間只能等待加載而不能進行其他操作（有的模態會提供取消按鈕）。如果你的頁面涉及到以下2種情況，可以考慮使用：
        
          
        
          
            1.用戶當前的操作本身不能與其他操作同時進行。比如系統更新，或者工具類的導入導出相關操作，我們只能等待更新、導出完成才能繼續進行后續的操作。這時候可以使用模態加載來承載，比如protopie的導入操作；
        
          
        
          
             
        
          
        
          
            2.當用戶進入到一個全新的頁面時，這個時候頁面什么都沒有，我們只能等待頁面加載完成才能進行后續的操作，因此在這種情況下也可以采用模態加載，比如我們剛進入Asanan產品頁面看到的首屏加載動畫：
        
          
        
          
             
        
          
        
          
            除了上述2種情況外，你也可以根據你的業務場景來進行模態加載的選擇，但建議是盡量少用模態加載，其會對用戶的打斷和干擾性比較強。
        
          
        
          
            
          
        
          
        
          
            3.2非模態加載
        
          
        
          
            非模態加載的話，這種加載通常只會出現在需要加載的部分，不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數據篩選加載等都屬于非模態加載。
        
          
        
          
            非模態加載相比于模態加載會更輕量，因為用戶隨時都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態彈窗來進行承載，比如飛書的左側欄切換操作：
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            undefined 
        
          
        
          
            接下來我們進入正題，在這里我從加載的角度將網頁整體加載過程分為呈現加載規則和操作加載規則。
        
          
        
          
            我們先談頁面呈現規則。前面已經明確加載產生的原因和類型后，我們就可以開始為我們的產品制定統一的加載規則，以保證后續頁面加載的一致性。
        
          
        
          
            
          
        
          
        
          
            4.1 頁面的加載過程拆解
        
          
        
          
            在拆解頁面的加載過程前，我們進一步闡述之前提到的渲染原則，從前文中提到最后會經過「解碼」和「渲染」2個步驟，這也是決定了我們看到的頁面的最終呈現順序：
        
          
        
          
            
          
        
          
        
          
            1.頁面的渲染順序 
        
          
        
          
            我們看到的頁面是由HTML、CSS和JavaScript來進行構成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式，JavaScript則是負責頁面中的交互(當然JS也可以控制樣式，這里只描述主要功能)。
        
          
        
          
            頁面在「解碼」階段，拿到的HTML文檔會被解碼為DOM樹，同時將CSS文件解析成CSSOM，這兩者結合后一起渲染頁面，JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染，最后渲染交互。視覺的角度來講就是先看到元素樣式，然后才能進行對應操作。
        
          
        
          
            
          
        
          
        
          
            2.頁面呈現的視覺順序 
        
          
        
          
            由于瀏覽器渲染順序一般會根據代碼的順序進行渲染，而代碼在頁面中的構建一般也是按照頁面的上下和左右的順序去寫的，因此我們看到的頁面的視覺呈現順序也是遵循從上到下，從左到右。
        
          
        
          
            所以幾乎所有的產品都是先看到頂欄，然后左側邊欄，然后其他內容。因此我們可以通過這個原則來拆解對應的頁面，我們按照頁面常規結構可以將其分為三個加載部分：頂欄、左側導航欄、內容區域。而其加載順序如圖所示：
        
          
        
          
             
        
          
        
          
            當知道對應頁面的渲染順序后，我們就能夠清楚在頁面渲染的過程中哪些地方會出現空屏了。因此將頁面加載過程拆解為如下順序：
        
          
        
          
            undefined 
        
          
        
          
            我們的加載動畫需要承載的就是上述這些白屏的地方，從而將加載細化為三種場景的拆分：全局加載+局部加載+內部加載。如圖所示：
        
          
        
          
            undefined 
        
          
        
          
            通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細闡述一下這三種類型的定義和用法。
        
          
        
          
            
          
        
          
        
          
            4.2 全局加載
        
          
        
          
            如上圖所示，全局加載的目的是為了覆蓋用戶從輸入網址到頁面的資源渲染的這個中間過程的空屏狀態而存在的。而這種狀態會涉及三種場景：
        
          
        
          
            1.通過網址進入到一個新的頁面時；
        
          
        
          
            2.通過鼠標右鍵或網頁刷新按鈕對該頁面刷新時；
        
          
        
          
            3.通過頁面操作需要新開頁面時。
        
          
        
          
             
        
          
        
          
            該全局加載的動畫構成為：
        
          
        
          
            1：覆蓋整個頁面的加載，由純白色+加載動畫構成；
        
          
        
          
            2：加載類型為模態加載，因為用戶在這種頁面狀態下并不能進行其它操作。
        
          
        
          
            undefined 
        
          
        
          
            但在這里我們需要注意全局加載的開始和結束時間：
        
          
        
          
            開始時間：當進入頁面時立即呈現加載動畫；
        
          
        
          
            結束時間：當頁面加載出頂欄的時候，此時停止加載。
        
          
        
          
            
          
        
          
        
          
            為何要這么處理結束時間，原因其實圖中已經給出了。這里再解釋一下原則：只要有頁面資源返回，我們的全局加載動畫就會結束，隨后啟用局部加載來承接后續的狀態，避免用戶在當前狀態長時間等待。而頂欄在一般情況下都是最先加載出來的，所以以頂欄出現作為結束全局加載的標準。當然如果你的結構沒有頂欄，可以以左側欄來作為結束標準。
        
          
        
          
            
          
        
          
        
          
            4.3 局部加載 
        
          
        
          
            局部加載是用在頁面整體框架加載的過程中，承接在全局加載后。局部加載的使用場景可以概括如下：
        
          
        
          
            1.頂欄加載結束后，用在剩余框架的加載效果（具體體現為左側邊欄和右側內容區域）；
        
          
        
          
            2.對于涉及到局部頁面的切換操作都會進行局部加載（比如左側邊欄的切換）；
        
          
        
          
            光看文字可能不是特別清晰，在這里可以舉一個動態的例子來幫助理解：
        
          
        
          
            
          
           
        
          
        
          
            上述展示的是在頁面呈現的時候一個完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區分的，可以通過程序控制讓這種加載動畫只在初次加載時出現。
        
          
        
          
            
          
        
          
        
          
            第一次加載時出現是因為我們需要有加載動畫來承接框架首次加載的空屏時間：
        
          
        
          
             
        
          
        
          
            但第二次的時候由于有緩存（緩存會加載我們的靜態資源，能夠讓我們的頁面框架在第二次時更快顯示），這樣在讀取框架時基本不需要加載，我們就可以通過程序來直接去掉其中的局部加載動畫，直接顯示框架來進行呈現。
        
          
        
          
            undefined 
        
          
        
          
            目前在飛書和釘釘等B端產品后臺均采用了這種處理方式。可以看到圖中我在第一次切換到角色管理時是有碰撞小球的局部動畫存在的，而第二次再次進入時則直接出現框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態，又避免了局部加載動畫的頻繁出現。
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            4.4 內部加載
        
          
        
          
            內部加載是用在頁面內部不同模塊數據間的加載。當框架都已經加載結束，但某些數據由于接口比較慢，此時還沒有返回，這時我們就可以用內部加載來進行承載。這應該是我們更常見的加載情況：
        
          
        
          
             
        
          
        
          
            在進行內部加載的時候，需要注意，內部加載的時候一般標題是存在的，因為標題基本都是固定的，所以能夠很快被拉取。比如Zoho的內部加載，加載時標題已經出現了：
        
          
        
          
             
        
          
        
          
            通過這三種類型的加載，能夠覆蓋從用戶輸入網址，到頁面渲染完成這個頁面呈現過程中的全部加載場景。
        
          
        
          
            
          
        
          
        
          
            undefined 
        
          
        
          
            說完頁面的呈現規則，再談頁面操作加載規則。頁面的操作其實對應的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態，而且需要考慮到控件影響的其他頁面范圍。
        
          
        
          
            
          
        
          
        
          
            5.1需要考慮控件本身加載 
        
          
        
          
            控件的加載并不是隨時都需要，我們要根據實際的數據量大小及業務場景來選擇性使用。目前我們需要考慮的控件及其加載狀態主要有如下：
        
          
        
          
            undefined 
        
          
        
          
            比如圖中的按鈕的加載狀態是必備的，在很多場景下都會用到。但是下拉列表和級聯列表，在一般的場景下都不太需要進行加載，當遇到列表中的數據特別多或者調取特別慢時就可以考慮為其加上加載狀態。
        
          
        
          
            
          
        
          
        
          
            5.2當控件操作會影響到頁面其他元素 
        
          
        
          
            這種控件比如日期篩選、表格篩選或者保存等操作，當你切換篩選條件后所有與其相關的頁面元素都會發生變化。在這種情況下我們需要考慮到被影響元素的狀態。目前的設計實現上有兩種做法：
        
          
        
          
            1.被影響元素不可被操作，且該區域有遮罩+加載動畫來覆蓋；
        
          
        
          
            2.被影響元素可進行操作，無任何動畫，但操作并不會影響之前提交的結果；
        
          
        
          
            
          
           
        
          
        
          
            這兩種方案一種是利用遮罩防止用戶無效操作，另一種則是保持了足夠的操作自由性。個人在這里更傾向于處理方式1，我認為被影響的元素是需要有遮罩+動畫的，來避免用戶在加載期間對其進行無效操作，比如示例中方案2后面修改的名稱是沒有被系統保存的。
        
          
        
          
            需要注意的是如果在產品中使用方案1，我們的遮罩區域只需要覆蓋被影響的元素就可以了（保存這種可以將按鈕一起覆蓋），比如通過篩選導致圖表數據發生變化，這時只需覆蓋圖表區域，而不用覆蓋篩選區域。這樣的好處是當某些篩選數據出現加載過慢問題時，用戶可以通過切換篩選項來打斷當前加載。
        
          
        
          
             
        
          
        
          
            上述描述的操作都是針對于當前頁加載。當控件導致頁面刷新或者跳轉時，則整體遵照頁面呈現的規則進行加載。
        
          
        
          
            
          
        
          
        
          
            undefined 
        
          
        
          
            上面闡述的加載已經完全能夠覆蓋我們頁面整體的加載，但是還是需要提及一下骨架屏和進度條這兩種加載形式。
        
          
        
          
            undefined 
        
          
        
          
            先說骨架屏。實際上骨架屏的使用效果體驗是優于加載動畫的體驗的（骨架屏的加入使用會讓用戶感覺網頁出現的更快）。那么為什么在大部分的B端業務頁面中沒被用到呢，主要有2點原因：
        
          
        
          
            1.每種骨架屏都需要進行對應的定制開發，需要與加載后的頁面框架保持一致，這會增加了開發成本。
        
          
        
          
            2.中后臺的業務界面對來說固定結構的頁面會較少，這對于骨架屏的使用機會就相對較少。
        
          
        
          
            個人認為在前期可以以統一加載體驗為主，在后期業務相對成熟后，可以針對固定結構，通過骨架屏的使用優化加載體驗。
        
          
        
          
            
          
        
          
        
          
            再說進度條。我理解的進度條的使用條件：對于加載時間較長的規定場景可以考慮用進度條來承載，比如我們常見的游戲加載中進度條就用得比較多，因為游戲一般資源比較大。還比如figma在進入設計文件的過程中也采用了進度條加載也是因為設計文件可能會很大。
        
          
        
          
            進度條在特定場景下能夠緩解用戶焦慮，讓用戶知道進展。但進度條在多數情況下都抓取不到程序的真實進度，這也會導致有時候我們看著加載到99%，那最后的1%遲遲加載不出來的的原因。目前很多中后臺產品對于進度條加載使用相對較少的原因，很大程度是沒有那種加載特別長的場景。
        
          
        
          
            
          
        
          
        
          
            因此這兩種加載場景的使用會更加定制化，如果需要使用請根據具體的業務場景來進行選擇。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            如果把加載動畫等比作頁面加載的外在，那么緩存和加載策略則是頁面加載的內核，合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度，讓用戶更快速地看到頁面。
        
          
        
          
            
          
        
          
        
          
            7.1 關于頁面的資源緩存 
        
          
        
          
            大家肯定聽過緩存這個概念，前后端都可以使用緩存。緩存就是數據交換的緩沖區（稱作Cache），是存貯數據（使用頻繁的數據）的臨時地方。在這里主要講一下瀏覽器緩存：
        
          
        
          
            undefined 
        
          
        
          
            從這張圖可以看出，服務器在請求數據時，會進行緩存的判斷，如果有緩存則首先讀取緩存，如果沒有則從服務器中拿取。調取緩存會在很大程度上提升頁面的加載速度，縮短了從服務獲取數據的時間。通常瀏覽器會主動對頁面的靜態資源進行對應的緩存，這也就解釋了我們第二次進入頁面會比初次進入頁面時加載快的原因。
        
          
        
          
            
          
        
          
        
          
            但程序其實也可以對動態資源（也就是需要從數據庫等拿到的資源）進行緩存的，并且可以設置緩存的過期時間（比如設置過期時間為1小時，那么1小時過后就會重新拉取新資源）。對于某些動態資源拉取過慢并且更新頻率不高的我們可以采用動態資源緩存的策略，從而提升整體的頁面加載體驗。
        
          
        
          
            
          
        
          
        
          
            7.2 加載策略的正確使用
        
          
        
          
            現階段我們常用的主要有下列6種加載策略：
        
          
        
          
             
        
          
        
          
            加載策略的本質就是通過對應的加載設置來縮短產品與服務器交換數據的時間，接下來我們詳細看一下每種加載策略的具體使用策略：
        
          
        
          
            
          
        
          
        
          
            7.2.1懶加載 
        
          
        
          
            懶加載是當內容落入視窗被用戶看到時，才會進行加載。這種比較節省資源和減輕服務器壓力。對于當前頁面內容很多的可以采用這種加載策略。而這種加載策略的設計，能夠讓用戶更快看到當前屏幕內的內容，減少等待時間。
        
          
        
          
             
        
          
        
          
            比如蘋果官網的加載策略就采取了這樣的一種方式。我們可以看到右側的資源只有在我們向下滾動出現在屏幕中時才會進行對應的加載，這樣能夠保證用戶在進入網頁第一時間看到首屏內容，并且用戶幾乎感知不到這種加載延遲。
        
          
        
          
             
        
          
        
          
            
          
           
        
          
        
          
            7.2.2預加載 
        
          
        
          
            預加載是在頁面空閑的時候就把用戶即將用到的資源加載完存到緩存中，等用戶需要使用時，通過緩存直接調用呈現。比如用戶在看A頁面的時候，就可以通過預加載來準備用戶需要的B頁面資源。當用戶需要B頁面的時候，立刻就可以呈現。
        
          
        
          
            比如某些頁面在實際中加載比較慢，這個時候就可以考慮是否用預加載的策略來提升網頁整體加載速度。比如知乎的視頻和文字在都進行了對應的預加載。即使當你處于斷網狀態（圖中我將頁面網絡切換為斷開狀態），可以看到依舊可以點擊全文進行查看和視頻的部分預覽。
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            7.2.3分步加載 
        
          
        
          
            當頁面中有文字和圖片時，優先加載占用網絡資源小的，比如文字資源，然后再進行占用資源較大的加載，比如圖片資源。通過分步加載也能有效減少頁面等待時間。比如大眾點評等圖片很多的網站往往會采用這種加載策略。
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            7.2.4分頁加載 
        
          
        
          
            分頁加載是我們目前很常見的方式，比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載，分頁適用于數據量比較大的內容，比如表格數據或者大數據搜索場景可以使用。
        
          
        
          
            分頁加載可以理解為當前獲取到100條數據，但是將100條數據分別拆成5頁每頁20條數據提供給用戶，這樣也可以讓用戶減少等待時間：
        
          
        
          
             
        
          
        
          
            在目前還有一種滾動分頁的加載，就是不提供視覺上的分頁，而是當用戶進行滾動時，自動加載一定數量的內容，這樣從用戶的視角看就是一個連續不間斷的數據展示。比如一些資訊類的網站就是采用的這種加載策略，有的也把這種滾動分頁的方式稱為自動加載。
        
          
        
          
             
        
          
        
          
            
          
        
          
        
          
            7.2.5延遲加載 
        
          
        
          
            這里講的延遲加載更多的是一種防護加載機制，一般延遲設置的時間為300ms。這里的延遲加載有2種使用，第一種多用于搜索，通過延遲加載能夠讓用戶更好進行連續輸入，避免搜索結果被高頻率刷新，同時緩解服務器壓力。如下圖，可以看到我在輸入1后會有個延遲才出現加載列表，并且我在連續輸入12306的過程中是沒有對結果進行更新的，當我輸入完后才更新。
        
          
        
          
             
        
          
        
          
            第二種則是通過延遲加載可以更好防止反復操作。當用戶在同一組件上面進行切換時，如果該操作小于300ms,則只記錄最后的點擊操作。這種情況可以用在我們的表格翻頁和開關等狀態上，防止用戶瘋狂點擊導致數據反復請求和屏幕閃爍的情況。我們可以通過下面這個組件演示例子來進行對應的感知：
        
          
        
          
             
        
          
        
          
            延遲加載更多用于上述2種場景，對于其他情況的加載，直接加上就可以了，并不需要刻意設置延遲。
        
          
        
          
            
          
        
          
        
          
            7.2.6后臺加載 
        
          
        
          
            這里想要表達的含義是當用戶在操作后，客戶端立即反饋操作成功，然后把請求放到后臺與服務器交互，這一過程用戶不需要了解，不需要等待。無論在什么網絡環境下你基本上都能操作成功。比如微信的朋友圈發布就是這樣的操作，即使你在斷網的情況下都能夠立刻發布，但實際上這個時候并沒有發送成功，還需要上傳到服務器后才你的朋友們才能看見。
        
          
        
          
            
          
        
          
        
          
            這樣的好處是用戶使用起來非常流暢，但是壞處就是，當操作不成功時，用戶并不能及時進行感知，仍然以為操作已經成功了。所以這種場景我們也需要根據場景進行對應的判斷和選擇。對于復雜的B端場景個人建議慎用或者不用這種操作，畢竟很多發布的功能會同時影響很多業務線。
        
          
        
          
            
          
        
          
        
          
            這里就拿微信的朋友圈發布來進行舉例，下方手機狀態都為斷網狀態，可以看到微信立即發布，而貼吧在這種狀態下提示網絡錯誤。
        
          
        
          
             
        
          
        
          
            通過這些加載策略的選擇性使用，能夠在特定環境下提升我們系統的整體使用體驗。因此我們需要對這些加載策略有一個比較全面的認識，這樣我們不僅知道加載慢的原因，還可以利用加載策略去提升頁面性能。
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            在整體的加載過程中，別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網絡速度過慢或者突然斷網這兩種狀況讓頁面一直加載不出來，這時我們需要考慮對長時間的加載過程進行處理。
        
          
        
          
            通常做法是我們要對加載狀態有一個最長時間的限制，一般為加載不超過10s，超過最長時間后就進行異常狀態顯示（提示語+刷新按鈕）。這樣用戶可以選擇重新加載或者離開此頁面，而不是一直等待。
        
          
        
          
             
        
          
        
          
            在這里還想到一點，就是對于編輯頁面，我們應當加入網絡連接是否異常的判斷，比如當進入到編輯頁面后，如果遇到網絡斷開，需要在頁面的頂部加上常駐提示條【當前網絡連接斷開】，這樣用戶能夠及時進行察覺并修復。避免在無網環境下繼續輸入。這對于某些需要輸入很多內容且并不提供本地保存的頁面來講是非常有必要的。
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            加載在設計中是非常容易被忽略的模塊，因為在大部分情況下網絡速度都較快，人們很難深刻地感受到加載過程。但加載卻在產品運行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個點：
        
          
        
          
            1.我們需要明白加載為什么會出現，這個過程是怎么樣的；
        
          
        
          
            2.加載的通用處理手段是怎么樣的，非通用處理方式有哪些；
        
          
        
          
            3.通過緩存和對應加載策略能夠讓頁面加載速度有本質上的提升。
        
          
        
          
            
          
        
          
        
          
            這樣當我們在頁面上遇到加載速度慢的問題時，在為其加上動畫承載過渡的同時，還應該思考其加載緩慢背后的原因，是因為數據量太大還是加載策略的相關問題，是否可以將其進行懶加載或者分步加載，這時我應該去找前端或者后端如何溝通。從源頭上解決加載時間長的問題，才是后續產品設計過程中的長久思路。
        
          

          
        
          
            作者：蒙東東    來源：站酷 
        
          
        
          
            藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 
        
          
        
          
            分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          
           
        
          
        
          
            藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 
        
          
        
          
            
          
           
        
          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1135)
              
                          
          
          
          
                      
          
            
            
          B端產品設計思路&高頻設計要點筆記
          
            
          
               純純                                            
          
            
          
    
          

          

          
     

          

          
    ★目標導向·B端產品的商業目標 

          

          
    
          

          

          
    設計開始要了解設計的目標，用戶的行為都是有「目標動機」的，B端產品的業務目標往往都是為了為企業或個人為了解決某一項工作上的問題。
          
當設計過程以「目標」為出發點，可以增強設計判斷力，輸出更有效設計解決方案。

          

          
    
          
B端產品的設計原則：提高使用者的工作效率，同時降低業務鏈路的操作及學習成本。
          

          
當你有了目標以后你的設計就可以圍繞這個目標展開：

          

          
    
          

          

          
     

          

          
    
          
           

          

          
    ★設計價值·B端的設計價值體系搭建 

          

          
    
          
           

          

          
    對于B端的產品而言，用戶最關心它能為實際的工作帶來哪些便利，而并非這個界面做的多么的好看，以及用戶體驗多么棒。所以B端產品設計價值優先級往往是  功能性＞表現力 

          

          
    
          

          

          
     

          

          
    
          

          

          
    B端產品設計需要站在整個業務線全局角度去把控各個設計點，不再是「用戶體驗」至上，為實現「任務目標」，「犧牲」一部分「用戶體驗」是必要的，這個時候視覺和一些體驗就不那么重要了。通過調研業務去了解各個角色職能的工作流程、相關痛點，讓產品能用，好用。

          

          
    
          

          

          
    
          

          

          
    要點1·了解項目的業務流程 

          

          
    
          

          

          
    理想的B端設計需要了解業務目標以及業務鏈路中每一個環節的過程。將業務邏輯理解透徹再考慮應該如何進行設計實現。
          

          
這樣做的原因當你站在使用者的角度進行同理心設計可以更好的幫助用戶完成他要完成的工作，從而提高效率。產品原型一般基于「功能」本身，而設計師從用戶實際場景規劃用戶的任務流，可以優化產品邏輯，補全缺失場景，通過了解業務流程也能給予創造性解決方案

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    要點2·用戶調研與場景化設計思維 

          

          
    
          

          

          
    B端產品往往是是服務于企業用戶，用戶畫像需要專注于用戶特征中的「群體職業身份」這類人無論性別、年齡、地區有何差異，他們都是一類角色，我們的產品要提供給這類角色使用，而不是某個人使用。

          

          
    
          

          

          
     

          

          
    
          

          

          
    由于B端設計師不是產品的用戶，無法沉浸在與用戶相同的真實場景中，建立共情。所以設計師最好親自感受一下業務流程，獲得一手的用戶洞察，

          

          
    
          

          

          
    獲取B端用戶反饋的方式 

          

          
    「通過業務人員交流」業務人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫像。
          
「實地走訪」：觀察在自然狀態下用戶如何完成工作任務，并提問題：「你怎么做？」或者「為什么這么做？」
          
「建立種子用戶群」：聚集活躍的種子用戶群，收集意見和建議，并在群里驗證設計想法。
          
「親身體驗」：成為真正的客服小二，接聽客戶電話，記錄自己在工作臺場景下的真實體驗和感受。
          

          
獲取用戶畫像后了解該群體背后工作感受，行為習慣，以及任務類型。

          

          
    
          

          


          

          
    
          

          

          
    
          

          

          
    要點3·情感化設計心理 

          

          
    
          
           

          

          
    安全感和信任感建立：人們越來越關注隱私和信息安全。如果你要求必須填寫敏感信息，請確保使用字段下方的注釋文本解釋為什么需要這些信息。

          

          
    
          

          

          
    實際工作中我們曾經自動獲取過用戶之前表單中填寫的的支付類賬戶信息，在收集的用戶反饋中，用戶會感覺到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗會更好，但是考慮到信任感，敏感類信息請不要自動獲取。

          

          
     

          

          
    
          

          

          
    讓用戶感受到你正在幫助他操作：Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導原則）是搭建B端用戶幫助體系的核心準則，在理想情況下，沒有幫助文檔就可以使用系統是最好的，但在某些情況下（尤其是B端系統），提供一些引導性的幫助其實是必要的。

          

          
    
          

          

          
    B端系統中可以嘗試搭建用戶幫助系統：

          

          
     

          

          
    
          

          

          
    
          

          

          
    
          

          

          
     

          

          
    要點1·降低學習成本
          

          

          
    
          

          

          
    對B端產品來講，設計師在設計的時候是不需要耗費太多的思考的，只是去按照交互設計師的規劃堆砌圖表和列表。但是對于使用者來講，其中縱橫交錯的商業邏輯和業務邏輯卻是給用戶搭建了一個十分高的門檻。

          

          
    
          

          

          
     

          

          
    
          

          

          
    要點2·保持高效

          

          
    
          

          

          
    例如修改資料的時候，使用彈窗、浮層等等交互操作會減少頁面跳轉的頻率。
          

          
但是與此同時，減少頁面跳轉并不代表真正的高效，例如瑞幸的供應商系統，供應商所產生的訂單需要按照指定的流程一步步進行操作確保不會出現問題這樣雖然頁面的跳轉增加，但是可以避免操作出錯給用戶帶來更大的困擾。

          

          
    
          

          

          
     

          

          
    
          

          

          
    要點3·整理信息/引導視覺

          

          
    
          

          

          
    設計要根據用戶的瀏覽習慣和視覺動線。要嘗試引導用戶的視覺，舉個例子，如何引導：

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
     

          

          
    設計側核心要點

          

          
    
          

          

          
    B 端產品是以業務為核心，是需要用戶長時間操作并完成工作任務的，對于操作和展示內容無關的元素，越少越好。視覺為功能讓步，追求簡潔、清晰、克制、理性的視覺風格。設計語言盡量做到不干擾不打擾。

          

          
    
          

          

          
     

          

          
    
          

          

          
    要點1·表單設計

          

          
    
          

          

          
    輸入順序：先易后難；先必填后選填；先公開信息后隱私信息；有關聯性的合成一組，特殊問題后置，用戶輸入時、不會覺得突兀、門檻太高 。
          

          
自動對焦（PC端）進行表單頁面，自動對焦第一個輸入字段可以引導用戶開始進行輸入。
          

          
標題：標題是對下文最短最精的概括。用戶一般都會跳過表單內容，而且幾乎都不會仔細閱讀那種特別詳細的描述。所以用最少的文字說清楚一個表單的目的尤其重要。
          
用戶應該可以看一眼標題就知道他們應該怎么做，而不是非得把剩下的全部看完，
          
（附：這部分感興趣的同學可以搜索“微文案設計”）
          

          
在表單編寫方面，或者說各種寫作中，刪減詞語都要比添加詞語更加有益。 在仔細檢查不必要的詞語后，文章會更篤實，更連貫，更吸引人。

          

          
    
          

          

          
     

          

          
    
          

          

          
    這個鏈接有什么用？關閉是點擊右上角的按鈕嗎？如果并沒有增效，那就是減效。每一個字，每一張圖片，都不是100% 必需的，這些都會降低你表單的轉換率。
          

          
刪除一個字段，表單提交率就可以提高 26%。（本篇筆記原本有12000余字，為了避免浪費大家時間，我僅保留4000余字的高頻要點內容）

          

          
    
          

          

          
    PC端產品提示文字盡量不要放在框內 

          

          
    提示文字存在于框內常用在移動端，它的空間占比很小，對移動端的小屏來說，是非常友好的，但如果在交互上處理不好，會有很大的缺陷。
          

          
內部標簽結構，只有提示性文字，用作提示用戶應該輸入什么內容，但用戶在輸入的時候，內部的標簽/提示性文字就會消失，這時候，用戶會失去它是否輸入準確的唯一判別標準。 

          

          
    
          

          

          
    減少打字需求 

          

          
    字段輸入通過部分人工智能自動將操作步驟可以變得簡潔高效 ，也包括諸如一些、自動定位、圖片識別、自動獲取，第三方導入等方式來使用戶的效率得以提升的功能。
          
打字是在線表單中最耗時、最密集的部分，而且經常會導致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能，將減少工作量并提高轉化率。

          

          
    
          

          

          
     

          

          
    
          

          

          
    使用文本塊 

          

          
    文本塊會更容易讓用戶記住內容：例如銀行賬戶、電話號碼等等。它指的是將信息排列成「塊」的過程，使內容更容易保留、處理和回憶。一份研究聲稱數字 3 是幫助人們吸收和回憶信息的神奇數字。

          

          
    
          

          

          
    表單的提示文字和定義格式要求

          

          
    如果一個字段需要特定的格式輸入，請告訴用戶。例如密碼要求、語法規則、編號間距等等。

          

          
    
          

          

          
     

          

          
    
          

          

          
    用輸入框長度提示 

          

          
    可以用輸入框長度提示用戶輸入的內容是否正確。
          
德萊厄斯研究所的可用性研究發現，如果一個字段太長或太短，用戶開始懷疑他們是否正確理解了標簽。

          

          
    
          

          

          
    在用戶輸入的時候，右下角告訴用戶已經輸入了多少字，如果超過 限定字數后輸入框紅色，用來警示用戶，此時用戶依舊可以再輸入字符，但當出現警示，用戶繼續輸入一定數量字符后，系統需要強行限制無法輸入新的內容，避免用戶沒有察覺到警示反饋導致的過多輸入，從而浪費的時間。

          

          
    
          

          

          
    （該部分感謝酷友@sh9513 提出的反饋）

          

          
    
          
如果用戶填寫錯誤，向用戶顯示錯誤發生的位置，并說明原因。

          

          
    
          

          

          
     

          

          
    單選框

          

          
    如果你的表單里的選項少于5個可以列出所有選項供用戶快速選擇，當大于5個時候可以嘗試用下拉框解決。
          
將第一個選項作為用戶最有可能的默認選項，且是最安全的選項，提前預判用戶的操作提升選擇效率。排列方式推薦數直排列，豎直排列相對于水平排列容易讀取和定位，提高用戶的瀏覽順序。

          

          
    
          

          

          
     

          

          
    
          

          

          
    解釋隱私消息

          

          
    當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

          

          
     

          

          
    
          

          

          
    收集設計反饋

          

          
    完成表單的設計后可以給業務用戶進行簡單的測試，并記錄他們填寫的時間收集反饋，以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設計。
          

          
最后在情感化設計系統里記得感謝用戶填寫或者反饋問題，因為用戶是花時間的。所以請表示感謝。

          

          
    
          

          

          
    要點2·表格設計

          

          
    表格的設計圍繞著「可讀性」和「易操作」兩個設計原則。設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。

          

          
     

          

          
    
          

          

          
    列寬有三種常見處理方式：
          

          
1.  根據內容的極限長度給出足夠的固定寬度；
          
2. 可以固定部分列的寬，其余列按百分比處理；
          
3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態，內容為空狀態顯示方案；
          
4.需要設置列之間的最小寬度，表格響應式布局情況下最小不小于此寬度。

          

          
     

          

          
    M-Densign規范中對齊方式會遵循如下規則：
          
表格的排序，應從用戶目的出發，遵循用戶查看數據的習慣，尊重數據之間的關聯性，設計用戶查看、操作數據的路徑，而非隨機排列（這部分可以在業務側調研時驗證，提高用戶體驗和閱讀效率）。

          

          
    
          
1. 文本信息/混合型文本左對齊，符合從左到右的閱讀習慣；

          

          
    2. 數字信息右對齊，方便數字之間的直觀對比；

          

          
     

          

          
    （該圖片感謝好友@晴藍 同學反饋的一個錯字，圖片已修正）

          

          
    
          

          

          
    要點3·按鈕設計

          

          
    設計規范需要定義按鈕的四種狀態：正常狀態(Normal)、懸停狀態(Hover)、激活狀態(Active)、加載狀態(Loading)、禁用狀態(Disabled)

          

          
     

          

          
    
          

          

          
    
          

          

          
     

          

          
    B端產品的開發一般涉及多個開發團隊協作，例如瑞幸的后臺修改按鈕顏色，都可能牽動10+工程師的協同。

          

          
    所以B端產品在進行設計改版以及設計側調整時候要思考調整對于業務側是否有直接幫助，在設計和規范建立之前，切勿頻繁改動。

          

          
    
          
除了完全獨立設計開發的項目以外，還有大量的 B 端項目是采用第三方框架開發而成的，如 Ant、Element 等等。這是因為這些第三方程序可以幫助團隊節省大量的開發時間和精力。
          

          

          

          
    作者：Cesare_玄漓    來源：站酷 

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          

          

          
    
          

          


          
            
          
              
                評論(0)
                瀏覽(1349)
              
                          
          
          
          
                      
          
            
            
          設計規范和適配
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          

          

          

          
    
          
        
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                一 開篇：為什么需要建立設計規范？ 
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                1、保證設計的一致性。 
            
          
            
          
                對內部：多個設計師合作，依然能保證設計風格的統一。
            
          
            
          
                對用戶：提高用戶體驗，提高操作效率，加深對產品的記憶。
            
          
            
          
                2、提高開發效率 
            
          
            
          
                與前端有效溝通的工具，提高設計還原度，降低對接成本。
            
          
            
          
                開發可以建立公共組件庫，極大的提高了開發效率。
            
          
            
          
                3、方便產品迭代 
            
          
            
          
                隨著產品的業務變化，發現一些問題或者需要優化用戶體驗的時候，針對單個控件進行調整，就可以影響全局，十分便捷。
            
          
            
          
                  
            
          
            
          
                二  移動端設計規范之平臺設計語言 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                優秀設計來自世界互聯網公司，前沿的設計理念和完善的設計語言是我們設計師的學習目標。了解和學習后，更好的進行產品設計。
            
          
            
          
                  
            
          
            
          
                前沿平臺 
            
          
            
          
                1、谷歌設計語言  Google Design    
            
          
            
          
                http://design.google
            
          
            
          
                谷歌設計中心，展示了谷歌的設計工作和概念，包括了 Material Design 在內的所有關于產品、體驗、設計、品牌等互聯網領域的設計思考。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                2 、蘋果 IOS 設計規范 
            
          
            
          
                蘋方人機界面設計指南，含有IOS設計規范，指導界面設計。蘋果人機界面設計指南，詳細介紹了蘋果公司最新的移動設備和系統，設計屏幕分辨率、圖標設計規范、色彩搭配、文字等設計語言，同時還提供了 UI 設計資源可供大家使用。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                3、Ant Design 
            
          
            
          
                螞蟻金服設計平臺是國內互聯網公司之一，基于螞蟻金服生態系統的跨設計與開發的體驗設計方案，包含了網頁端的顏色、字體、圖標、組件等頁面設計布局等設計指導網站。
            
          
            
          
                螞蟻集團的企業級產品是一個龐大且復雜的系統，數量多且功能復雜，而且變動和并發頻繁，常常需要設計者與開發者能快速做出響應。同時這類產品中有存在很多類似的頁面以及組件，可以通過抽象得到一些穩定且高復用性的內容。
            
          
            
          
                隨著商業化的趨勢，越來越多的企業級產品對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，我們（螞蟻集團體驗技術部）經過大量項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 —— Ant Design?；凇缸匀弧埂ⅰ复_定性」、「意義感」、「生長性」四大設計價值觀，通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                4、Fluent Design System 
            
          
            
          
                微軟基于Windows 10 的設計指南，它可以幫助開發者設計和構建流暢、精美的應用程序，包括人機界面布局、樣式、控件和設計工具包下載。
            
          
            
          
                微軟將這套全新的設計語言名為 Fluent Design System（流暢設計體系），該體系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動畫）、Material（材質）和 Scale（縮放）。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                5、WeUI 
            
          
            
          
                WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，包含表單、基礎組件、操作反饋、導航等各種各樣的設計元素。它由微信官方設計團隊為微信內網頁和微信小程序量身設計，使得用戶的使用感知更加統一。
            
          
            
          
                具體看下面的內容，有詳細介紹。
            
          
            
          
                  
            
          
            
          
                6、Airbnb Design  
            
          
            
          
                Airbnb 是一家享譽全球的民宿服務公司。同時，這背后有一個他們自己強大的設計團隊，為Airbnb提供著設計方面工作。我日常工作使用到的（動效方面）Lottie 也是他們設計開發的產物（感謝）。他們擁有自己的設計網站Airbnb Design。其中一些文章介紹 DSL， 正如在《設計體系》一書介紹，他們嚴格遵守著自己的設計規范和原則。保證著Airbnb的產品在設計上的一致性，可用性等，目的是為不同國家的用戶提供好的用戶體驗。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                界面設計中的字體思考 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                文字是 App 中最核心的元素之一，產品傳達給用戶的內容。字體有無襯線字體和襯線字體。無論iOS 還是 Android 系統，它們都有內置的默認字體可供設計師使用。用心處理好字號大小、字體顏色與字體間距的處理上。
            
          
            
          
                用戶界面設計中，字體是界面設計中的基本元素。設計師要設計好界面中的字體顏色、字體間距、字號的大小、
            
          
            
          
                字重等思考。
            
          
            
          
                蘋果系統中默認的字體是：蘋方字體。英文字體和數字字體是：舊金山字體，San Francisco 字體。
            
          
            
          
                其中數字字體比較好的字體可以用：Dinner 字體。
            
          
            
          
                安卓系統默認的中文字體是：思源黑體。  英文字體是：Roboto 字體。
            
          
            
          
                界面設計中的字體設計規范，如下圖所示。
            
          
            
          
                
          
           
            
          
            
          
                  
            
          
            
          
                介紹幾款西文字體： 
            
          
            
          
                無襯線字體，在字的筆畫開始和結束的地方，沒有額外裝飾，筆畫粗細均勻，適合于主題設計的屏幕展示，給人一種自然舒適感。例如：無裝飾性的易識別的代表字體：Helvetica 英文字體、San Francisco 英文字體、
            
          
            
          
                Roboto 英文字體、Arial 英文字體。
            
          
            
          
                襯線字體是字的筆畫開始和結尾處的位置有額外裝飾，同時筆畫的粗細有所不同，一般適用于印刷排版，具有較高的可讀性。例如：具有裝飾性的代表字體：Times New Roman。
            
          
            
          
                DIN 字體 
            
          
            
          
                DIN 字體是效力于德國交通標識和公共空間的經典字體，是一種很好的數字字體。
            
          
            
          
                Futura 字體 
            
          
            
          
                Futura 字體 ，這個字體現代、時尚具有幾何特征，是很多雜志和時尚品牌的常用字體，例如：時尚氣質的品牌 LV 的商標字體就是這種英文字體。
            
          
            
          
                Roboto 字體 
            
          
            
          
                Roboto 字體，是谷歌公司為 Android 操作系統開發的默認英文字體，具有“現代感”、“親和力” 的設計感。
            
          
            
          
                San Francisco 字體 
            
          
            
          
                San Francisco 字體 ，蘋果公司設計的，蘋果公司推出的 Apple Watch 和 iOS 移動端等系統的英文字體。
            
          
            
          
                Didot 字體 
            
          
            
          
                Didot 字體， 是世界上最著名的英文字體之一，美感，可以用在 英文標題、產品設計、廣告使用的一款字體。
            
          
            
          
                例如：時尚雜志 VOGUE 標題字 就是運用了這個字體。
            
          
            
          
                  
            
          
            
          
                三 移動端設計規范之設計主題、設計原則、屏幕的設計尺寸： 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                iOS 設計主題 
            
          
            
          
                iOS的三個主要主題將其與其他平臺區分開來：
            
          
            
            
                
          • 
                    明晰。在整個系統中，各種大小的文字都清晰易讀，圖標精確而清晰，裝飾物微妙而恰當，對功能的高度關注激發了設計的靈感。負空間，顏色，字體，圖形和界面元素巧妙地突出了重要內容并傳達了交互性。
                
            • 
                
          • 
                    尊敬 流暢的動作和清晰美觀的界面可幫助人們理解內容并與之互動，而從未與之競爭。內容通常會填滿整個屏幕，而半透明和模糊通常會暗示更多內容。最少使用邊框，漸變色和陰影可以保持界面明亮通風，同時確保內容至關重要。
                
            • 
                
          • 
                    深度。獨特的視覺層和逼真的動作傳達層次感，賦予生命力并促進理解。觸摸和可發現性提高了人們的愉悅感，使他們能夠訪問功能和其他內容而不會丟失上下文。當您瀏覽內容時，過渡會提供一種深度感。
                
            • 
            
          
            
          
                 
            
          
            
          
                設計原則 
            
          
            
          
                為了最大限度地提高影響力和影響范圍，請在想象應用程序的身份時牢記以下原則。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                 
            
          
            
          
                審美完整性 
            
          
            
          
                審美完整性表示應用程序的外觀和行為與其功能的集成程度。例如，一個可以幫助人們執行重要任務的應用程序可以通過使用微妙，醒目的圖形，標準控件和可預測的行為來使他們專注。另一方面，沉浸式應用程序（例如游戲）可以提供引人入勝的外觀，帶來樂趣和刺激，同時鼓勵發現。
            
          
            
          
                 
            
          
            
          
                一致性 
            
          
            
          
                一致的應用程序通過使用系統提供的界面元素，知名的圖標，標準的文本樣式和統一的術語來實現熟悉的標準和范例。該應用程序以人們期望的方式結合了功能和行為。
            
          
            
          
                 
            
          
            
          
                直接操縱 
            
          
            
          
                屏幕內容的直接操作可以吸引人們并促進理解。用戶在旋轉設備或使用手勢來影響屏幕內容時會經歷直接的操縱。通過直接操作，他們可以看到其操作的直接可見結果。
            
          
            
          
                 
            
          
            
          
                反饋 
            
          
            
          
                反饋確認行動并顯示結果，以使人們了解情況。內置的iOS應用程序可響應每個用戶操作提供可感知的反饋。輕觸時，交互元素將突出顯示，進度指示器傳達長時間運行的操作的狀態，動畫和聲音有助于闡明操作的結果。
            
          
            
          
                 
            
          
            
          
                隱喻 
            
          
            
          
                當應用程序的虛擬對象和動作是扎根于現實世界或數字世界的隱喻時，人們會更快地學習。隱喻在iOS中可以很好地工作，因為人們可以與屏幕進行物理交互。他們將視圖移開以隱藏下面的內容。他們拖動和滑動內容。他們切換開關，移動滑塊并滾動選擇器值。他們甚至瀏覽書籍和雜志的頁面。
            
          
            
          
                  
            
          
            
          
                互聯網產品設計的尺寸規范和分辨率的認識，是進行線上界面設計的第一步。然而，市面上的型號有很多，咋辦？
            
          
            
          
                作為設計師，要掌握常見的尺寸和距離，理解并做好設計的適配，才能解決不同手機屏幕之間的布局規范和換算關系。
            
          
            
          
                 
            
          
            
          
                常見的移動端手機屏幕的設計尺寸如下： 
            
          
            
          
                DPI和PPI的定義（來自百度百科） 
            
          
            
          
                DPI原來是印刷上的記量單位，意思是每英寸上，所能印刷的網點數（Dot Per Inch）。但隨著數字輸入，輸出設備快速發展，大多數的人也將數字影像的解析度用DPI表示，但較為嚴謹的人可能注意到，印刷時計算的網點（Dot）和電腦顯示器的顯示像素（Pixel）并非相同，所以較專業的人士，會用PPI(Pixel Per Inch)表示數字影像的解析度，以區分二者。
            
          
            
          
                我們通常講的打印機分辨率是多少DPI，指的是”在該打印機最高分辨率模式下,每英寸所能打印的最多”理論”墨點數”。
            
          
            
          
                Pixels Per Inch也叫像素密度，所表示的是每英寸所擁有的像素數量。因此PPI數值越高，即代表顯示屏能夠以越高的密度顯示圖像。當然，顯示的密度越高，擬真度就越高。
            
          
            
          
                Pixels Per Inch是像素的密度單位，就像PPI值越高，畫面的細節就會越豐富，所以數碼相機拍出來的圖片因品牌或生產時間不同可能有所不同，常見的有72PPI，180PPI和300PPI,默認出來就是這么多(A710拍出的是180PPI)。
            
          
            
          
                DPI(Dots Per Inch)是指輸出分辨，針對于輸出設備而言的，一般的激光打印機的輸出分辨率是300PPI-600PPI，印刷的照排機達到1200PPI-2400PPI，常見的沖印一般在150PPI到300PPI之間。
            
          
            
          
                例如，iPhone 6、7、8 的屏幕物理尺寸是4.7 英寸。RetinaHD高清顯示屏，移動端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB標準。
            
          
            
          
                iPhone 6 Plus,5.5英寸(對角線)LED背光寬Multi?Touch顯示屏，具有IPS技術,1920×1080像素分辨率，401ppi.全sRGB標準,如下圖所示。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                分辨率、像素和屏幕物理尺寸 
            
          
            
          
                iPhone X 尺寸 是 5.8英寸，手機主屏幕分辨率是750乘1624 PX，整個屏幕的像素尺寸,一倍圖：375 乘 812  。
            
          
            
          
                關于 iPhone 6，一倍圖下：375 乘 667  。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                pc端網頁設計的尺寸是：1920乘1080px。
            
          
            
          
                像素密度，即每英寸屏幕所擁有的像素數，像素密度越大，顯示畫面細節就越豐富。
            
          
            
          
                像素密度=√{（長度像素數^2+寬度像素數^2）}/ 屏幕尺寸。
            
          
            
          
                屏幕分辨率是指縱橫向上的像素點數，單位是px。屏幕分辨率確定計算機屏幕上顯示多少信息的設置，以水平和垂直像素來衡量。就相同大小的屏幕而言，當屏幕分辨率低時（例如 640 x 480），在屏幕上顯示的像素少，單個像素尺寸比較大。屏幕分辨率高時（例如 1600 x 1200），在屏幕上顯示的像素多，單個像素尺寸比較小。
            
          
            
          
                顯示分辨率就是屏幕上顯示的像素個數，分辨率160×128的意思是水平方向含有像素數為160個，垂直方向像素數128個。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細和細膩。
            
          
            
          
                比例 ：4：3、5：4、16:10、16:9、21:9
            
          
            
          
                4:3 是最常見屏幕比例。16:10 就是常見的「寬屏幕」比例。16:9 主要是HD電視在用的比例。
            
          
            
          
                常聽到的720p、1080p 都是這個比例。
            
          
            
          
                  
            
          
            
          
                邏輯大小和像素大小 
            
          
            
          
                對于人類的視覺對于對象尺寸的判斷是由邏輯大小來決定的。以一個圖形為例，無論這個圖形距離我們多遠，用戶的認知中，大小是直徑為25mm 。 也就是說，這是它的真實的大小，所以我們把人對于物體真實尺寸的認知成為邏輯大小。
            
          
            
          
                 
            
          
            
          
                屏幕像素數量不同，在相同像素大小的情況下，圖形顯示的大小，就會不一樣。
            
          
            
          
                IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基礎上乘以 1.5 ，才能以平常的物理尺寸顯示元素的大小。
            
          
            
          
                  
            
          
            
          
                邏輯像素與實際像素 
            
          
            
          
                Ipone 手機屏幕常見的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。
            
          
            
          
                同樣一個圓，高分辨率的屏幕顯示更清晰，視覺體驗會更好。
            
          
            
          
                設計時，優先保證高分辨率的屏幕效果。
            
          
            
          
                一倍圖字樣的切圖則應用在普通屏幕上，帶 @2x字樣的切圖通常用于 Retina 屏幕上，帶@3x 字樣的切圖則應用在 IPONE Plus 系列手機的屏幕上。設計者只需把這 3 個尺寸的切圖給技術人員，技術人員可以將合適的尺寸的圖片適配到各個機型了。實際像素除以倍率，就得到邏輯像素尺寸。
            
          
            
          
                  
            
          
            
          
                所謂“Retina”是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。由摩托羅拉公司研發。最初該技術是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素。也被稱為視網膜顯示屏。
            
          
            
          
                為了適配，是為了實現視覺的統一感，讓相同大小的物體在不同像素密度的屏幕上看起來大小是相同的感覺。邏輯像素是pt，普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。開發項目中，一倍圖機型上是100px乘100px,在iPhone 6s 中顯示出來的是200px乘200px，在 iPhone 8 plus 中顯示出來的是 300px乘300px 。在視覺上，這三個尺寸看起來是一樣的。下圖是 ipone 手機界面詳細的適配尺寸規范。
            
          
            
          
                針對以上規范，設計師的尺寸為 375乘667 pt、導出格式為 @2x 的設計稿可以應用在ipone 6、ipone 7、ipone 8 手機中。
            
          
            
          
                  
            
          
            
          
                安卓系統把各種設備的像素密度劃分成幾個范圍區間，并且給不同范圍的設備定義了不同的倍率，保證顯示效果的相近。安卓系統的邏輯像素單位是 dp 。
            
          
            
          
                 安卓系統的手機屏幕都可以找到自己密度值、代表分辨率、倍率、邏輯分辨率等。
            
          
            
          
                密度為xxxhdpi(1080px乘1920px) 的手機目前市場份額占比較大；目前密度為 xhdpi、xxdpi 和 xxxdpi 的手機產品占絕大多數的市場份額，而正好他們的邏輯像素是 360dp 乘 640dp, 根據這樣的分辨率標準導出 @2x、@3x、@4x 這三種格式的切圖，基本就可以適配市面上絕大部分的Andriod 系統的機型了。
            
          
            
          
                  
            
          
            
          
                全局邊距 
            
          
            
          
                在UI界面設計中，以(750px乘1334px)全局邊距一般是30PX，整個產品設計的邊距都是30px，保持一致性。
            
          
            
          
                或者 32px 的全局邊距也是不錯的選擇，比如：Booking 就用了這個尺寸。  
            
          
            
          
                24px 全局邊距 
            
          
            
          
                Facebook ，它們不但距離屏幕邊緣距離一致，就連邊緣距離一致，就連頭像與文字的距離也相同，都是 16px。
            
          
            
          
                 40px 全局邊距 
            
          
            
          
                40px 屬于較大的大邊距，留白開始變多，界面呼吸感好，閱讀體驗好。例如：36kr。大邊距適合單一的應用，不需要復雜信息和交互層級。
            
          
            
          
                50px 全局邊距 
            
          
            
          
                50px 可以算最大邊距，它讓界面變得干凈整潔，用戶在瀏覽時極為輕松。
          
           
            
          
            
          
                  
            
          
            
          
                豎向間距 
            
          
            
          
                定義卡片和卡片間的間距一般是：20px、24px、30px，最大間距不超過40px。間距的背景色可以與你分割線一致，也可以淺一些，界面柔和一點。
            
          
            
          
                88px 
            
          
            
          
                ios 中最小點擊區域是 88px，因為蘋果在縱向尺寸上把 22px 作為一個基礎單元，物理尺寸最小空間的高度為 22乘4等于88px，為手指觸摸最小的高度。因此導航欄、標簽欄、列表、搜索欄和按鈕的高度都是 88px，導航欄和標簽欄圖標為 44px，元素與元素之間的最小間距是 22px。
            
          
            
          
                  
            
          
            
          
                四 iPhone X的適配方案 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                針對前面所講的ios 系統的常用機型，幾乎一種邏輯尺寸為375pt乘667pt 就可以完成設計的適配。而相對來說，ipone X 的適配處理稍微多一些細節。異形的 iPhone X 的屏幕部分的高度增加了145pt，如下圖所示。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                先說一下頂部劉海區域的適配方式。如圖 所示，對于常規的 iPhone 8 屏幕來說，屏幕內基本都是安全顯示區域，安全顯示區域就是要把重要元素放在上面做好設計。iPhone X 上由于多了劉海 的設計和四周的圓角設計，意味著也多了兩個不可顯示內容的非安全區域。蘋果官方給出的非安全區域為屏幕上方 44 pt ，屏幕下方是 34 pt ，并且下方 34 pt 的非安全區域一定不可以放置可點擊的按鈕，否則會與虛擬的 Home 鍵發生交互上的沖突。
            
          
            
          
                空間里利用率角度思考，與 IOS 界面的整體效果保持一致的感覺。如下圖所示，豎版和橫版。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                而具體的適配方法要從這兩塊非安全區域去用心思考。由于頂部的非安全區域內不可以出現狀態欄之外的內容，因此從前的狀態條由20pt加長到44pt, 則意味著增加了 24 pt 。這時候導航欄的尺寸保持不變，只需整體向下移動24pt 。 這時候導航欄的尺寸保持不變，只需整體向下移動 24pt 即可。同時，狀態欄背景的顏色需要與導航欄背景的顏色保持一致。
            
          
            
          
                 
            
          
            
          
                當界面頂部帶有圖片背景時，最簡單的處理方式將頂部圖片元素的高度增加 24pt。如果有 Banner 貫穿到頂部，一般有以下兩種處理方式。
            
          
            
          
                第一種方式是為 iPhone X 單獨做一套 Banner 尺寸，拉長 24pt，并且頂部 24pt  不可放置有效的閱讀消息，設計兩套圖，一種是正常的 IPONE 6、7、8 等尺寸，一種是 ipone X 的尺寸 下需要的設計廣告圖。如下圖所示。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                第二種方式是顯示導航欄，并且 Banner 不再貫穿到 頂部顯示，而是移動到導航欄下方。
            
          
            
          
                顯示效果缺少沉浸式的設計體驗感。
            
          
            
          
                說完劉海區域的適配方式之后，再來說一下底部非安全區域的適配方式。置于屏幕底部的 Home Indicator 集成了原有實體 Home 鍵退出與切換系統應用的功能。在適配過程中，可以更換此區域內背景的顏色、透明度與高度。底部的33pt 的非安全區域內禁止出現可操作按鈕。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                第1種情況，當界面底部有按鈕，按鈕依附在底部 34pt 的非安全區域的上方即可，非安全區域的背景色一般與操作按鈕的背景色保持一致。如下圖所示。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                第2種情況，當界面底部沒有按鈕，只需讓列表正常顯示就可以了，無須遮擋，如下圖所示。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                第3種情況：在廣告引導頁等呈現全屏樣式時，需要做兩套設計稿的間距和大小的設計適配，保證好的視覺內容的展示，背景色延伸的方法就好。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                界面設計中的間距思考 
            
          
            
          
                界面所留出的固定邊距是最基礎的柵格系統。如下圖所示。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                界面的分割規范應用在品類區的功能圖標，四等分的設計，符合柵格系統的設計。規范的設計，有利于開發對設計稿的還原設計。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                柵格系統中的8px 的原則 
            
          
            
          
                8px 原則，就是界面設計中所有元素的長度除以寬度和間距都可以被 8 整除。這里的 8px 是基于@2x 倍圖格式下的切圖使用的。以320dp乘480dp為@1x 邏輯尺寸，安卓系統屏幕下的部分適配尺寸。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                五  常見的移動端設計布局和適用場景 
            
          
            
          
                信息的設計優先級，布局合理性，提升信息的傳達效率。
            
          
            
          
                  
            
          
            
          
                核心功能的布局 
            
          
            
          
                核心功能的各模塊的布局之間保持相對獨立，標簽橫向數量盡量不要超過5個，超過5個可以采用左右滑的交互方式來實現，來自于設計心理學。
            
          
            
          
                標簽樣式的布局優點是各入口清晰呈現，方便用戶快速查找信息；標題一定要精簡。對于要突出的核心功能，可以做信息層級的大小、是否有設計背板的處理，主次關系分明。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                列表式布局 
            
          
            
          
                列表式布局適用于信息類的產品。
            
          
            
          
                列表式布局優點信息展示較直觀，節省界面空間，瀏覽效率高，字段長度不受限制，并且可以錯行展示。單純看文字會視覺疲勞，所以圖文混排，富有變化。突出主題，優質配圖，有利于用戶更好的閱讀信息。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                卡片式布局 
            
          
            
          
                卡片式布局就是把不同大小、不同形式的內容放在一個容器里進行組合展示。較常見的是圖文混排，既要做到視覺上的一致性感覺，又要平衡圖片和主題內容的關系。分組展示，讓用戶更好的理解各模塊的內容。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                瀑布流布局 
            
          
            
          
                瀑布流布局適用于圖片、視頻等更好的沉浸式的瀏覽內容。移動端的瀑布流布局一般是兩列信息并行，錯位展示，可以極大的提升交互效率，可以制造豐富的視覺體驗，適用于花瓣等圖片類的界面布局設計。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                六  APP組建化設計規范 
            
          
            
          
                （具體看我站酷前面寫的組件化思維的文章） 
            
          
            
          
                Ios系統和安卓系統都提供了一些固定的官方組件規范。遵循其官方組件規范，可以極大提高設計和開發效率，同時降低用戶的學習成本。其中最常見的規范化組件包括頂部的狀態欄、導航欄、底部標簽欄和工具欄。
            
          
            
          
                狀態欄 
            
          
            
          
                ios 是 20pt, 安卓是24dp.
            
          
            
          
                導航欄 
            
          
            
          
                ios 是 44pt, 安卓是56dp.
            
          
            
          
                標簽欄 
            
          
            
          
                ios 的高度是 49pt, 安卓標簽欄的高度是48dp.
            
          
            
          
                工具欄 
            
          
            
          
                工具欄的高度是 44pt,安卓是 48dp .
            
          
            
          
                字體是蘋方字體；英文是SF英文字體。思源黑體，roboto 英文字體。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                IOS設計是 11pt到29pt 左右，一級主題是24pt 以上,二級標題是20pt左右。
            
          
            
          
                內容，導航欄標題是 18pt。    三級標題是16pt。 文字內容一般是 14pt
            
          
            
          
                品類區圖標內容：12pt 。 底部TAB 圖標文字：10pt到11pt
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                七 微信小程序設計 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                基于微信小程序輕快的特點，我們擬定了小程序界面設計指南和建議。 設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內，建立友好、高效、一致的用戶體驗，同時最大程度適應和支持不同需求，實現用戶與小程序服務方的共贏。
            
          
            
          
                  
            
          
            
          
                友好禮貌 
            
          
            
          
                為了避免用戶在微信中使用小程序服務時，注意力被周圍復雜環境干擾，小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務，友好地引導用戶進行操作。
            
          
            
          
                  
            
          
            
          
                重點突出 
            
          
            
          
                每個頁面都應有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下，應盡量避免頁面上出現其它與用戶的決策和操作無關的干擾因素。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                避免誤操作 
            
          
            
          
                換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標準組件庫中，各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標準控件尺寸進行設計。
            
          
            
          
                小程序是在微信開放平臺上運行的一種不需要下載安裝即可使用的應用，它提供了一種快速體驗的方式，用戶通過掃一掃或搜一搜即可打開應用，實現了“觸手可及”、“用完即走”的高效操作。對于開發者而言，小程序開發門檻相對較低，能滿足簡單的基礎應用。基于小程序輕快的特點，我們在進行小程序界面設計時，友好、高效、一致的用戶體驗，友好的引導用戶操作。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                小程序菜單 
            
          
            
          
                小程序的界面，包括小程序內嵌網頁和插件，微信都會在其右上角放置菜單。菜單包括兩個圖標，左邊是更多，點開分別是轉發、關于和取消；右邊是主頁，點擊后回到小程序列表。小程序菜單和狀態欄之外的區域是開發者控制區域，可設計。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                微信提供深淺兩種配色，適配不同風格，元素設計的辨識度。小程序在IOS和Android 的標注尺寸，如下圖所示。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                開發者不可對小程序菜單自定義，但可選擇深淺兩種基本配色以適應頁面設計風格。為了讓小程序菜單清晰可見，在深色背景上使用淺色菜單，在淺色背景上使用深色菜單。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                減少輸入 
            
          
            
          
                由于手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程序頁面時因盡量減少用戶輸入，利用現有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
            
          
            
          
                例如下圖中，在添加銀行卡時，采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優化體驗。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                在用戶搜索時提供搜索歷史快捷選項將幫助用戶快速進行搜索，而減少或避免不必要的鍵盤輸入。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                上面部分用圖，來自微信小程序設計指南，具體細節設計規范可以看-微信小程序設計指南。
            
          
            
          
                  
            
          
            
          
                頁面導航 
            
          
            
          
                頂部標簽分頁欄，顏色和樣式都可以自定義。
            
          
            
          
                最常見的設計方式是將選中態填充品牌主色，未選態有清晰的對比和可操作性。最常見的設計方式是將選中態填充品牌主色，未選態填充灰色，標簽之間保持足夠的空間，避免引起誤操作。
            
          
            
          
                標簽分頁分頁欄的樣式可根據App的 視覺風格進行設計，以保證兩個平臺擁有一致的視覺體驗。例如騰訊視頻，在App中，它的標簽欄分頁欄是無框式設計風格，選中態和未選態以文字大小和色彩的對比進行區分；在小程序中，同樣使用無框式設計風格，色彩不變，樣式上字號大小，精致的線條輔助展示當前狀態的設計。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                開發者可為小程序頁面添加標簽分頁導航，標簽分頁欄可固定在頁面頂部或底部，便于用戶在不同在不同的分頁間做切換。標簽數量不得少于2個，最多不超過 5個，為確保足夠的點擊區域，建議標簽數量不超過4個。
            
          
            
          
                小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。設計時可自定義圖標樣式、標簽文案及顏色等，以750乘1334px 的分辨率，標簽文案字號是 20px，圖標尺寸為 50px乘50px、標簽欄高 98px，與 ios 蘋果的設計規范保持一致性。
            
          
            
          
                微信小程序的設計和開發，可根據產品需要選擇或不選擇底部標簽分頁欄，例如騰訊視頻小程序使用4個標簽承載功能不同的頁面內容，為用戶提供清晰、快速的瀏覽體驗；而窮游行程助手的內容較為單一，只需一個頁面就能清晰呈現所有內容，因此不需要標簽分頁欄。如下圖所示。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                啟動頁加載 
            
          
            
          
                在小程序列表點擊小程序后進入小程序后進入啟動頁，它是小程序在微信內一定程度上展現品牌特征的頁面之一，
            
          
            
          
                本頁面將突出展示小程序品牌特征和加載狀態。啟動頁除品牌Logo 展示外，頁面上的其他所有元素如，加載進度指示，均由微信統一提供且不能更改，無須開發者開發。品牌Logo 尺寸為 80乘80px，間距標注如下圖所示。
            
          
            
          
                頁面過長時間的等待會引起用戶的負面情緒，應盡量使用微信小程序項目提供的技術縮短等待時間。優先顯示預設的本地數據，告知用戶正在加載頁面中。
            
          
            
          
                全局加載反饋是在小程序名稱左側顯示加載狀態的圖標，提示加載小程序內容的過程。同時，模態的加載樣式將覆蓋整個頁面，它是由加載圖標、文字提示和半透明圓角矩形組成，由于無法明確告知具體加載的位置將可能引起用戶的焦慮情緒，因此應謹慎使用。
            
          
            
          
                  
            
          
            
          
                設計案例 
            
          
            
          
                小程序設計是基于微信內部運行的應用，因此在視覺上要輕盈、干凈、簡潔，保持扁平化設計風格；在交互上要結構簡單、層級清晰、跳轉少，保證產品高效的瀏覽體驗。微信小程序，在設計時應精簡控件和高效、實用。
            
          
            
          
                旅游產品為例：
            
          
            
          
                1、 小程序頁面的右上角固定小程序菜單。
            
          
            
          
                2、為確保足夠的點擊區域，小程序底部的標簽分頁欄建議最多4項。收件箱在很多 App 中不會獨立作為一個標簽，可以考慮移除；個人資料 承載了許多用戶自己的重要信息，保留在標簽欄比較合適。最后確定四個底部標簽欄的功能設計-分別是：首頁，收藏，消息，我的，四個標簽。
            
          
            
          
                3、開始進行設計，保持與App 同樣的白色背景，標題欄上 Airbnb 居左對齊。
            
          
            
          
                4、我們必須對原來的樣式進行優化，做減法是小程序設計的關鍵。在App中，Airbnb 的設計輕盈、干凈、簡潔，因此可以直接復用到小程序中，無須重新設計。小程序延續了輕量化陰影的視覺特征，因此優化后的界面設計依然保持與App一致的設計風格。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                八  網頁的設計規范 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                1、網頁設計是什么？ 
            
          
            
          
                網頁設計也被稱為 Web Design、網站設計、Website design、WUI 等。它的本質就是網站的圖形界面設計。 
            
          
            
          
                  
            
          
            
          
                2. 設計規范 
            
          
            
          
                一個產品的設計規范應該有：字體規范、主體色規范、圖表規范、圖片規范等。
            
          
            
          
                 
            
          
            
          
                3、網站種類 
            
          
            
          
                網站的分類按對象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費者，例如、企業網站、產品網站、電商網站、移動端H5 等，均是面向用戶的產品。以用戶為中心考慮體驗設計。
            
          
            
          
                To B端作為一個需求量很大的類別，比如電商后臺、Dashboard、企業級OA、網站統計后臺等這些面向商家和專業人士的網站就是 To B 類網站項目了。To B 類項目最重要的是效率，因為說白了我們在設計使用者工作的工具，我們在設計時必須首先要使用者可以高效工作使用。
            
          
            
          
                企業網站 
            
          
            
          
                每個企業都需要有一個網站來對外展示自己的能力、介紹自己的產品等。企業網站設計時通常會有網站首頁、公司介紹、產品中心、公司團隊、在線商城、聯系我們等這幾個模塊，企業網站會展示很多諸如公司環境、團隊成員、企業文化等實際的照片，配合一些資料進行設計。企業網站通常也追求所謂「高端」、「大氣」、「上檔次」的風格，也就是為了達到讓消費者認同品牌這個要求。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                產品網站 
            
          
            
          
                從蘋果公司的 iPhone 介紹頁到小米手機8的介紹頁，我們會發現一種新鮮的產品營銷模式，就是產品網站。設計這類網站的內容主要是該產品的工藝、技術、設計、特點、構造、使用場景等。這樣的產品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，產品設計必須精致、有品質感。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                后臺網站（數據可視化） 
            
          
            
          
                后臺網站 Dashborad-儀表盤。其含義就是有一大堆數據與統計信息。后臺網站是 To B 類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數據。可是數據非?？菰?，我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現這些繁瑣的數據，這種圖形表達數據的方式也叫做數據可視化。
            
          
            
          
                可以參考的網站有： 百度的 ECHARTS ，如下圖所示。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                CRM系統（簡單拆解網頁B端的設計規范） 
            
          
            
          
                CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統。CRM 是企業對客戶進行信息化管理的一種形式，用互聯網技術實現對客戶信息進行收集、管理、分析，對企業的銷售、服務、售后進行監控。常見的功能有員工日程管理、訂單管理、發票管理等。
            
          
            
          
                在PC端建議采用： 1440×900的設計尺寸
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                SaaS 
            
          
            
          
                如果我們服務于為企業搭建 CRM、ERP 或者 OA 等系統的第三方公司，那么我們可能會老聽到 SaaS 這個詞。SaaS 是(Software-as-a-Service)，即軟件就是服務。
            
          
            
          
                有贊軟件即SaaS服務,包括有贊微商城、有贊零售、有贊教育、有贊美業、有贊小程序。如下圖所示。
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                企業OA 
            
          
            
          
                企業OA，即(Office Automation)，也就是辦公自動化系統。
            
          
            
          
                通過企業OA 可以完成請假、調休、離職、查詢公司規章制度、請示、匯報等工作。這樣減少了很多窗口成本和員工的時間成本，增強了公司辦事效率。
            
          
            
          
                設計師在設計此類項目時同樣要以操作者的體驗和效率為重，讓操作者輕易可以找到在當前頁面中最重要的功能。
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                4、B端系統的設計原則 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                一致 
            
          
            
          
                與現實生活一致 ， 用戶使用習慣
            
          
            
          
                界面中一致，設計圖標、文字、元素等保持一致性。
            
          
            
          
                反饋  
            
          
            
          
                控制反饋，清晰的知道自己的操作。
            
          
            
          
                清晰認知頁面的主題和交互狀態。
            
          
            
          
                效率 
            
          
            
          
                簡化流程。清晰明確的含義  界面快速認知和理解。
            
          
            
          
                結果可控 
            
          
            
          
                用戶可自由操作，包括撤銷、回退、終止當前操作等。
            
          
            
          
                  
            
          
            
          
                設計規范（具體可以參考 ANT DESIGN 網站設計規范，去制作本公司的網頁端的設計規范） 
            
          
            
          
                從原子：色彩、字體、間距、圓角、分割線。
            
          
            
          
                分子：輸入框、選擇器、開關、上傳、時間日期選擇
            
          
            
          
                組件：導航、表單、列表、 數據可視化圖表、 篩選
            
          
            
          
                  
            
          
            
          
                通用層面思考 
            
          
            
          
                色彩 、文字、 邊距和圓角、 按鈕 、間距、 柵格
            
          
            
          
                主色：B端建議盡量選擇冷色系 避免太高亮 
            
          
            
          
                建議關鍵主色與白色對比度大于4.5 
            
          
            
          
                附：對比度檢測 https://webaim.org/resources/contrastchecker/
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                按鈕： 實心按鈕、 空心按鈕 、文字按鈕
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                PC端后臺：不推薦用大圓角 
            
          
            
          
                間距 
            
          
            
          
                一般選用8的倍數
            
          
            
          
                8、16、24、32、40、48、56、64、72……
            
          
            
          
                網頁柵格，一般選用24柵格布局
            
          
            
          
                24欄+23水槽+2頁邊距
            
          
            
          
                柵格應用在內容層，如下圖所示。 
            
          
            
          
                 
            
          
            
          
                頂部導航的使用場景： 
            
          
            
          
                適用于一級導航數量較少，內容較為簡單的系統
            
          
            
          
                追求沉浸式閱讀的系統
            
          
            
          
                多用于官網首頁
            
          
            
          
                 頂部導航的優點： 
            
          
            
          
                占用屏幕空間小，為內容區留出更多空間
            
          
            
          
                對視覺的干擾小，符合從上到下的閱讀習慣
            
          
            
          
                一般采用固定版心的方式，更容易適配
            
          
            
          
                隨著業務的發展，拓展性變差
            
          
            
          
                三三級導航點擊后隱藏，不利于用戶記憶和查找
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                側邊導航的優點： 
            
          
            
          
                適用于更專注功能和快速操作的系統，有贊為例，如下圖所示。
            
          
            
          
                多用于較為復雜的后臺系統
            
          
            
          
                拓展性強，一級導航的數目可以展示更多
            
          
            
          
                層級清晰，一二三級導航都可以流暢展示
            
          
            
          
                操作效率高，用戶在操作和瀏覽中快速定位和切換當前位置
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                面包屑導航 
            
          
            
          
                使用場景：兩級及以上層級，最多不超過5級
            
          
            
          
                作用：告知用戶你在哪里，且可以迅速回到上幾級導航
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                九  設計師的自我修養 
            
          
            
          
                 
            
          
            
          
                  
            
          
            
          
                我們對設計充滿興趣和激情。 
            
          
            
          
                1 用心積累優秀的設計案例?？梢愿鶕镜男袠I競品，同類直接競品，跨界競品做好收集。
            
          
            
          
                2 每日記錄設計靈感。比如：站酷收藏夾，按照主題收藏；花瓣靈感，分組命名。
            
          
            
          
                3 執行力強，遇到設計問題，換位思考。
            
          
            
          
                4 超出預期，做好需求的設計方案，同時關注設計細節，超出需求方的預期和用戶的預期。
            
          
            
          
                5 有上進心，工作做好后，做好設計的總結和作品整理，發到站酷設計平臺，與其他設計師一起交流設計。
            
          
            
          
                6 眼界開闊，知識面廣：一個優秀的設計師，不僅懂設計，還懂產品、運營、 推廣、開發思維等方面的相關知識的學習和研究。有利于和上下游人士的溝通順暢。做到互相理解，團隊更好的完成項目的設計提案。
            
          
            
          
                最后，讓自己保持著朝氣蓬勃的精神，保持著朝氣蓬勃而富有創造力的心態。 
            
          
            
          
                  
            
          
            
          
                參考文獻如下： 
            
          
            
          
                1、《規律與邏輯》 
            
          
            
          
                2、《CCtalk B端產品設計課》by 美芳老師 
            
          
            
          
                3、《高級UI設計師》 
            
          
            
          
                4、《ANT-DESIGN 螞蟻金服》 
            
          
            
          
                5、《蘋果官網等設計網站》 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                 
            
          
            
          
                原文地址：站酷
            
          
            
          
                作者：峻溪POINTVISION
            
          
            
          
                 轉載請注明：學UI網》設計規范和適配
          

          
          
            
          
            
          
                藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 
            
          
            
          
                
          
           
            
          
            
          
                分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          

          
           
            
          
            
          
                藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 
            
          
            
          
                
          
           
            
          

          
           
            
          
                
          
            
          
        
          
    
          

          

          
    
          

          

          
    
          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(4051)
              
                          
          
          
          
                      
          
            
            
          Web產品的適配設計選型
          
            
          
               seo達人                                            
          
            
          

          
    
          

          

          

          
    圖片 

          

          
     

          

          
    歷史長廊 

          

          
    在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（StaticLayout），也有叫固定布局（Fixed Layout）。

          

          
    后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。

          

          
    在當時，大多指的就是寬度自適應布局。在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

          

          
    在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞–漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。

          

          
    qqmail就是css hack的完美體現，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。

          

          
    互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結合自適應的思想，出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

          

          
    描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。

          

          
    圖片 

          

          
    現如今，為何需要考慮多設備的兼顧呢，依然是因為時代發展與生活方式的變遷：

          

            
    
          • 
        即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
    
            • 
    
          • 
        臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；
    
            • 
    
          • 
        屏幕分辨率正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別。結合自身產品用戶訪問瀏覽器分辨率
    
            • 
    
          • 
        鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。
    
            • 

          

          
    因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。

          

          
     

          

          
    布局方式對比 

          

          
    靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下：

          

          
    靜態式布局： 

          

          
    窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。

          

          
    圖片 

          

          
     

          

          
    自適應布局： 

          

          
    用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。

          

          
    分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集，每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現橫向滾動條，UI，圖片，文字會自動縮放，元素內容、布局、交互方式基本不變。

          

          
    圖片 

          

          
     

          

          
    彈性布局： 

          

          
    以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。

          

          
    圖片 

          

          
     

          

          
    流體式布局： 

          

          
    屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小，不同于百分比自適應的是隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。

          

          
    圖片 

          

          
     

          

          
    響應式布局： 

          

          
    如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活的去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。

          

          
    頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、css media query的使用等。

          

          
    狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

          

          
    圖片 

          

          
     

          

          
    A+R混合模型布局 

          

            
    
          • 
        R和A上的區別 
    
            • 

          

          
    當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。

          

          
    他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。

          

          
    R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。

          

          
    A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優化，在斷點之間的自動過渡比較少。A采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。

          

          
    圖片 

          

          
    兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。

          

          
    兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？

          

          
     

          

            
    
          • 
        A+R模型結合了基于單個主要臨界點的自適應和響應式方法。 
    
            • 

          

          
    混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。

          

          
    圖片 

          

          
    自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。

          

          
    很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。

          

          
    否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。

          

          
     

          

          
    選型 

          

          
    如何考慮實踐過程中的判斷呢。一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類?，F在的CSS框架基本都具備響應性。

          

          
    但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。

          

          
    當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層app化。

          

          
    根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題?？傊鶕鼍绊憫娇梢詮母鞣N層面，各種粒度上做。這是現代web開發的特點。

          

          
    建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）

          

          
    響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應各種布局。

          

          
    大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。

          

          
    圖片 

          

          
     

          

          
    實踐與技巧 

          

          
    首先，我們需要了解幾種分辨率的差別。

          

          
    圖片 

          

          
    ps：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率

          

          
    以一個SaaS類后臺產品為例，對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：

          

          
    圖片 

          

          
    如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。

          

          
    自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：

          

            
    
          • 
        左側的可視區代表整個屏幕小于960px時的具體布局和內容
    
            • 
    
          • 
        右側的可視區代表整個屏幕大于等于960px時的另一種布局
    
            • 

          

          
    圖片 

          

          
    在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。

          

          
    圖片 

          

          
    通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。

          

          
    圖片 

          

          
    這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。

          

          
    因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。

          

          
     

          

          
    其他輔助手段 

          

          
    刪格 

          

          
    柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。

          

          
    1. 列和槽（Columns and Gutters） 

          

          
    列（Column）用于對齊內容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內容。

          

          
    圖片 

          

          
     

          

          
    2. 頁面邊距（Side Margins） 

          

          
    頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。

          

          
    圖片 

          

          
     

          

          
    3. 用于組成柵格的列數稱為列結構。 

          

          
    8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D

          

          
    圖片 

          

          
     

          

          
    4. 斷點 

          

          
    是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。

          

          
    如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。

          

          
    圖片 

          

          
     

          

          
    5. 網格規則 

          

          
    列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位，“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。

          

          
    產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。

          

          
    圖片 

          

          
     

          

          
    6. 流體柵格與混合刪格 

          

          
    流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。

          

          
    混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。

          

          
    如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。

          

          
    圖片 

          

          
     

          

          
    結語 

          

          
    設計需在技術方案前介入，根據你的產品特點，進行設計方案評估，可借助的手段有刪格，網格規則等，設計斷點規則時，需關注設備的常見系統分辨率。

          

          
    移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。

          

          
    但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。

          

          
    A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。

          

          
    
          

          

          
    作者：神樂

          

          
    配圖：沙拉

          

          
    轉載請注明：學UI網》Web產品的適配設計選型
          

          
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

          

          
    
          
           

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          

          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1117)
              
                          
          
          
          
                      
          
            
            
          讓我一個沒有美術基礎的人畫插圖，太難為我了吧！
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          

          

          

          
    圖片 

          

          
    這是一個科技類網頁的小插圖，這樣看是OK的，但第一版的圖就一言難盡了，如下：

          

          
    圖片 

          

          
    做完設計之后，我往回看看了，發現第一稿真讓人頭皮發麻呀～
          
最后的呈現效果比之前做的都要強太多了。

          

          
    不管是顏色方向、質感、細節上都甩前者一大截，原因是什么呢？我總結了以下幾點：

          

          
     

          

          
    一、層次關系 

          

          
    客戶就說“畫面視覺太平了，沒有層次，黑白灰關系沒有拉開！細節也沒有！顏色不好看！自己回去再想想吧！”……

          

          
    黑白灰關系什么意思呢？我的理解就是先把設計稿去色不就能看到黑白灰了嗎？

          

          
    圖片 

          

          
    很多同學在做設計時不會考慮黑白灰這個問題，但其實顏色也是有變化的；在顏色中黑白灰的關系就是色彩的明度關系，明度越高就越白。
          
正常情況下畫面中的黑白灰關系拉得越開，就越有空間感、層次感。

          

          
    如果畫面中黑白灰關系沒有拉開，就會使畫面飄飄的，很奇怪、不接地氣。

          

          
    圖片 

          

          
    如上圖就是一個正常的黑白灰關系，每一層都區分的很開，它就會有空間層次感。

          

          
    而且我們也需要保持畫面的平衡感，黑色多了就會使得畫面沉，白色多了就會使畫面飄，灰色多了就會使畫面悶。

          

          
    所以我們得把握一個度，把握黑白灰在畫面中的節奏感！

          

          
    我們再把黑白灰關系運用到實際工作中：

          

          
    圖片 

          

          
    整個背景采用暗灰色調，主體底板用亮灰色，內容就用亮色系，陰影及厚度用暗色調。這樣一來畫面的層次拉開了。

          

          
    那么客戶說的細節該怎么去加呢？

          

          
     

          

          
    二、細節 

          

          
    沒有細節、太平了，我就想到把它做成立體的感覺，讓畫面豐富起來，也可以加一些點綴的小元素來修飾畫面。

          

          
    圖片 

          

          
    從平面二維到立體三維畫面的細節就豐富多了,而且三維空間更加容易出效果。

          

          
    圖片 

          

          
    在加細節的過程中，我感覺到了畫面中有點太過于規規矩矩了，全是方方正正形狀，就很呆板的感覺，特別是左下角的矩形框，與整個畫面之間沒有聯系、不協調。

          

          
    這就是構圖出了問題。

          

          
    解決的方法很簡單，只要讓圖形與圖形之間互相穿插、疊加，讓它們你中有我我中中有你；甚至可以把圖形加以旋轉，讓圖形產生“正”與“斜”的對比。

          

          
    這種方法就可以解決畫面死板的問題。

          

          
    圖片 

          

          
    但是我覺得不能夠加矩形了，畫面中方形形狀已經很多了，那么我們是不是可以考慮一下用圓去增加畫面節奏感。

          

          
    方的對比是圓，也是一個對比關系，但圓的占比面積太大了，咱們就可以用弧線去代替。

          

          
    這不，弧線把方正的矩形打破了，畫面就更加生動有節奏。

          

          
    還有一個細節：

          

          
    圖片 

          

          
    如圖所示，這里就涉及到一個識別度的問題，我們在做設計的時候，一定要把形體交代清楚；

          

          
    我做了一個銀幣的效果，但是形體邊緣輪廓沒有交代清楚，整個銀幣糊在一堆了，看不清里面的字符是什么，這樣的感覺不是很好，整個元素是虛的。

          

          
    圖片 

          

          
    還有上升的線條取消發光效果是不是去掉會更好呢？

          

          
    這樣是不是畫面會更加的完整呢，這點很重要呀，我們得把物體交代清楚，不能模棱兩可就糊弄過去了！物體虛虛的給人感覺很飄，不穩。

          

          
    其實還有中間的一稿，但是顏色一不小心就弄臟了：

          

          
     

          

          
    三、顏色臟的小技巧 

          

          
    圖片 

          

          
    經過嘗試，我總算明白為什么顏色漸變會偏臟了；我總結了以下幾點：

          

          
    1、飽和度低的顏色占比不要太多，多了顏色就容易顯得臟。

          

          
    圖片 

          

          
    如圖，右邊的顏色飽和度偏低，這類顏色就會發灰，灰色多了能不臟嗎？

          

          
    2、盡量不要用對比色去拉漸變，對比色漸變對于新手來說不太友好，“紅配綠賽狗屁”就是這種說法。

          

          
    圖片 

          

          
    只要注意到這兩點就基本可以避開顏色太臟的情況

          

          
     

          

          
    總結 

          

          
    以上就是這次小案例帶給我的啟發和思考，希望當遇到類似我這種問題的時候能夠給你點啟發，能夠幫助到你！

          

          
    
          

          

          作者：橙汁

          
    轉載請注明：學UI網》讓我一個沒有美術基礎的人畫插圖，太難為我了吧！
          

          
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

          

          
    
          
           

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          

          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1087)
              
                          
          
          
          
                      
          
            
            
          從構思講起，手把手帶你繪制一套彩鉛噪點人物插畫！
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          
    
          
        圖片 
    
          

          

          

          
    怎么樣，是不是很耐思~有沒有想動筆的沖動！那接下來把話筒交給青燈，讓他開始他的表演吧！

          

          
     

          

          
    YoYo，大家好！我是最近畫到手痛的青燈，這次是我第一次做插畫教程，做的不夠好的地方就請大家多多指教啦！

          

          
    圖片 

          

          知識重點：構圖分析和構思、人物轉化、肌理筆刷疊加、不同材質表現操作工具：數位板 | Photoshop

          
    操作難度：★★★☆☆ 

          

          

          
     

          

          

          
    圖片 

          

          
    這期的彩鉛顆粒風格主要是用扁平人物和元素+方型構圖+彩鉛肌理刻畫的結合。

          

          
    圖片 

          

          
    構圖靈感來源自法國藝術家 Gasp art 的插畫作品，這個系列作品以扁平人物為主，用演奏樂器的方式結合了植物的生長，可以很直觀的感受到每個人物的動作和元素都是框在一個正方形里，給人一種規整又舒適的感覺。

          

          
    圖片 

          

          
    藝術家 Gasp art 的插畫作品，僅供賞析 

          

          
    總結一下 Gasp art 的插畫構圖，其實主要就是人物加元素組成方型構圖，可以用植物和道具元素或者是人物動作彎折的形式構成方形邊框。

          

          
    圖片 

          

          
    這次的刻畫方式我們選擇了兩種風格：一種是偏粗糙的鉛筆肌理風格，第二種是偏柔和的細膩噪點風格，讓我們來欣賞一下圖片：

          

          
    圖片 

          

          
    藝術家 Nadiia Zhelieznova 的插畫作品，僅供賞析 

          

          
    圖片 

          

          
    藝術家 Wnjing Yang 的插畫作品，僅供賞析 

          

          
    我們截取第一種風格的局部，放大觀察并總結一下：

          

          
    1. 噪點顆粒明顯，并且噪點的間隙會把底部的顏色透出來。

          

          
    2. 疊加肌理時會透出上一層肌理，但是疊加的越重就會越實。

          

          
    3. 在結構轉折處和邊緣有描邊。

          

          
    圖片 

          

          
    再總結一下第二種風格的插畫特點：

          

          
    1. 顏色和噪點的過渡柔和

          

          
    2. 邊緣用亮色或重色拉開對比，輪廓清晰

          

          
    3. 在最亮處有高光點

          

          
    圖片 

          

          
    把這 6 點結合起來就是我們這次的刻畫風格啦~

          

          
    圖片 

          

          
      

          

          
      

          

          
    圖片 

          

          
    1. 確定主題收集圖片素材： 

          

          
    在開始之前，要先想想畫啥。咱們列個思維導圖，把場景分成室內室外都在干啥，可以多想一些好玩的事。這里我選了做瑜伽，躺著玩手機，路上踩到了口香糖和快樂逛街這 4 個。

          

          
    圖片 

          

          
    現在關鍵的來了，根據這 4 個小場景來找合適的人物動作參考和一些道具參考，一定要多找參考！??！多找參考?。。≌覅⒖迹。?！重要的事情說三遍！ 

          

          
     

          

            
    
          • 
        瑜伽篇： 
    
            • 

          

          
    瑜伽這張我找了個動作接近框型的一個動作，然后根據瑜伽休閑愜意的感覺，我找了個室內植物還有小鳥和紙飛機，想代表她隨著身體的放松，精神也慢慢飛向了遠方。

          

          
    圖片 

          

          
    在動筆之前我們先分析一下人物的比例和特點。

          

          
     

          

          
    人物風格分析： 

          

          
    ① 人物頭身比特點：人物比例在 11 頭身左右，因為人物動作有折疊，頭占畫面七分之一左右。

          

          
    圖片 

          

          
    人物上半身在 4 頭左右，腿長 7 個頭左右，手長 6 頭左右。

          

          
    圖片 

          

          
    ② 人物四肢特點：四肢偏粗方，可以想象是多個矩形和梯形相接，銜接的時候注意關節弧度。

          

          
    圖片 

          

          
      

          

          
    2. 畫草圖 

          

          
    ① 先提取動作框架，根據我們分析好的頭身比例調整放在框里使得四肢貼邊呈方形。  

          

          
    圖片 

          

          
    ② 給框架加肉，根據之前的四肢分析，多用方形和圓矩形概括，這里我把女生的頭發換成了大波浪，增加了飄逸的感覺。同時曲線也會方便后期刻畫。

          

          
    圖片 

          

          
    ③ 同理，植物直接用一個彎的水滴型概括葉片和葉莖，鳥用半圓形概括身子加上小半圓的頭和四邊形的尾巴就概括出來了啦~

          

          
    圖片 

          

          
    ④ 最后整合一下元素開了個“天窗腦洞”，紙飛機飛進這個天窗。然后在植物邊上用黃色的線條加了一些靈動的水滴，這張瑜伽就做好了。

          

          
    圖片 

          

          
     

          

            
    
          • 
        快樂逛街篇： 
    
            • 

          

          
    第二張購物的也是同理先找參考，大部分逛街的動作都是比較平緩的走路類的姿勢，這里我特意找了一個幅度較大的舞蹈動作，再找了一些服裝參考。另外我打算用水加上金幣流入黑洞的方式表現“花錢如流水”的概念。

          

          
    圖片 

          

          
    步驟和之前的都是一樣的，這里加入一個水流小 tip：

          

          
    圖片  

          

          
     

          

            
    
          • 
        踩到口香糖篇： 
    
            • 

          

          
    第三張我想的是男生在趕去上班的路上踩口香糖，草圖同樣是從動態提取入手，我想讓手和腳上的口香糖有個互動，就把原動作的腳抬起來了一點，讓手靠近鞋子去抓口香糖。另外我把左邊的手大臂伸平小臂轉過來做一個看手表的動作，表示他要遲到的焦急。

          

          
    圖片 

          

          
     

          

            
    
          • 
        躺著玩手機篇： 
    
            • 

          

          
    第四張我這邊提取的是一個躺著翹腿的人物動態，為了讓整個人物能符合方形構圖，我把人物左手抵著地把人物上半身撐起來了點，頭發用大小不一的泡泡在邊緣處排列，接著我夸張了翹起來的腿使得整個動作幅度更大，同時也讓整個構圖更充實。最后我在手機前面加入了一個大泡泡的元素，暗示我們時常沉浸在手機信息帶來的巨大泡影里。

          

          
    圖片 

          

          
      

          

          
       

          

          
    圖片 

          

          
    鋪色可以用鋼筆勾閉合形狀，也可以用 ps 自帶的硬邊緣筆刷畫。

          

          
    配色以補色為主，在色輪上呈 180 度的變化，以這張瑜伽舉例，能看到比較明顯的橙色和藍色，在這對顏色基礎上再加入了它們的相鄰色作為點綴色，在色輪上呈 30 度左右變化。

          

          
    圖片 

          

          
    圖片 

          

          
    圖片 

          

          
    圖片 

          

          
    圖片 

          

          
     

          

          
     

          

          
    圖片 

          

            
    
          • 
        筆刷介紹 
    
            • 

          

          
    終于到了激動人心的刻畫環節了，這次給大家準備了村口高質量彩鉛噪點筆刷~~我這邊已經按照繪畫順序和效果類別整理好了~~（后臺回復【插畫046】領取）

          

          
    這里重點介紹一下這幾個筆刷！

          

          
    圖片 

          

          
     

          

            
    
          • 
        皮膚刻畫 
    
            • 

          

          
    給皮膚增加色素，首先我們要增加的區域分為：

          

          
    1. 五官例如：鼻子，眼睛，腮紅，耳朵

          

          
    2. 陰影例如：脖子，腋下，衣服的陰影，以及身體轉折處來加重

          

          
    圖片 

          

          
    以人物面部舉例，選一個比皮膚更深一點的顏色用【軟底紋筆刷】由重到輕地上色素，顏色就會自然的過渡過去。

          

          
    圖片 

          

          
    接著用【點狀排線筆】再加重一遍。

          

          
    圖片 

          

          TIPS：在身體轉折的地方可以用套索工具圈出區域上色。
          

          
    圖片 

          

          
    用一樣的方法把身體部分畫完，最后可以在邊緣處（比如手腳接觸的地方，手指縫）加重線用于區分色塊

          

          
    圖片 

          

          
      

          

            
    
          • 
        服裝道具刻畫： 
    
            • 

          

          
    畫衣服和道具這類面積比較大元素時，第一步先把顏色提亮，第二步再鋪排線紋理（選一個你喜歡的方向）并在關節處加重。

          

          
    圖片 

          

          TIPS：畫重色色塊上色時先把顏色提亮以便后續加肌理效果明顯，同時把底色透出來會更有通透感。
          

          
    圖片 

          

          
    第三步用【軟底紋筆刷】根據光源加重褲子陰影，腿彎折處用套索工具勾出來鋪色加重，第四步用【點狀排線筆刷】加重陰影處，顏色越重面積越小。

          

          
    圖片 

          

          
    最后在轉折處勾勒更深的邊線就 ok 了~

          

          
    圖片 

          

          
     

          

            
    
          • 
        背景元素刻畫： 
    
            • 

          

          
    用【軟底紋筆刷】加肌理，【速寫鉛筆】加裝飾線的方式把其他的植物和小鳥元素刻畫完。

          

          
    圖片 

          

          
    暗色背景的星星第一步在星星里鋪上背景色，然后用亮色把中間提亮，第二步給星星中間用白色畫個細十字線，星星底部順著四個角畫延長線條再復制一層縮小旋轉 45 度，最后用【高光筆】點底部點一個亮光，亮色背景的星星不用刻畫直接做延長線和提亮高光就可以。

          

          
    圖片 

          

          TIPS：飛機后面的拖尾可以通過【后悔藥筆刷】擦除呈現半透明狀態，然后再用【軟底紋筆刷】加入其他顏色。
          

          
    圖片 

          

          
    圖片 

          

          
      

          

            
    
          • 
        頭發刻畫： 
    
            • 

          

          
    首先第一步也是把頭發底色提亮，第二步用波浪線把頭發分成中間粗兩邊細的葉片形式，然后第三步在葉片里加線條，線條遵循兩側密中間疏的原則向焦點聚攏。

          

          
    圖片 

          

          TIPS：在把頭發區分成葉片的時候同時區分一下葉片的大小會讓頭發更自然哦~
          

          
    第四步在線條密集的地方用使用【軟底紋筆刷】加重，中間輕輕帶過，頭發體積感就出來了。

          

          
    圖片 

          

          
    最后再在頭發亮的地方用線性減淡的圖層模式用【高光筆刷】提亮一下，邊緣用【速寫鉛筆】輕輕勾勒一條淺色邊緣就ok了~

          

          
    圖片 

          

          
     

          

            
    
          • 
        背景肌理： 
    
            • 

          

          
    第一步先把背景提亮至白色，第二步用【軟底紋筆刷】用力的涂色，這樣鋪完色后就會有些白色的點點透出來了。

          

          
    圖片 

          

          
    第三步用【點狀排線筆刷】加重物體下方讓他們看起來有點投影的狀態就 ok 了！

          

          
    圖片 

          

          
       

          

            
    
          • 
        材質和質感表現： 
    
            • 

          

          
    1. 水滴材質：

          

          
    來到了我們畫面的點睛之筆的部分了，在畫這種半透明狀的物件東西是可以吸環境色涂在中間，讓水滴兩側保持亮色就會有透明的質感呈現出來，最后點上高光水滴的透明質感就做出來了。

          

          
    圖片 

          

          
    圖片 

          

          
    2. 泡泡材質：  

          

          
    在這張躺著看手機里有一個泡泡的材質，它的繪制邏輯其實跟紙飛機拖尾是一樣的，但是泡泡的顏色會更復雜一點，所以我們先來分析一下泡泡的顏色怎么畫。

          

          
    圖片 

          

          
    拿泡泡的一個小弧度邊舉例，從左到右的顏色就是從黃→紅→粉→紫→藍→綠這樣的顏色變化。

          

          
    圖片 

          

          
    所以我們照葫蘆畫瓢，先畫出一個一樣的形狀，用【后悔藥】橡皮擦，擦出透明漸變，擦的時候在弧度凸的地方多保留一點，凹的地方輕輕擦。

          

          
    圖片 

          

          
    接著用【軟底紋筆刷】畫出顏色，注意顏色的位置和占比也一樣參考照片。在顏色銜接的地方用筆刷輕輕的覆蓋上去就會比較自然，在光源位置畫出白色的高光。

          

          
    圖片 

          

          
    繼續把完整的泡泡畫出來，再加上一點線條裝飾一個泡泡就畫好了！

          

          
    圖片 

          

          
    3. 畫面光澤：

          

          
    用【高光筆刷】把圖層模式調成線性減淡模式在光源方向提亮，再用【速寫鉛筆】在最亮處點一個小高光，整張就畫完啦~

          

          
    圖片 

          

          
    圖片 

          

          
    掌握了這些刻畫方式，再加一點耐心和時間這 4 張就畫好啦~~

          

          
    圖片 

          

          
    圖片 

          

          
    圖片 

          

          
    圖片 

          

          
      

          

          
      

          

          
    圖片 

          

          
    1. 人物動作轉化和道具的分配要貼合方形構圖。

          

          
    2. 加入主色的鄰近色豐富畫面。

          

          
    3. 刻畫顏色遵循陰影顏色越重面積越小，高光越亮面積越小的邏輯，讓重的更重，亮的更亮，拉開對比。

          

          
    4. 你永遠可以相信后悔藥橡皮擦，畫多了就擦掉所以大膽畫吧~

          

          
    
          

          

          
    作者：藍貴蓮

          

          
    轉載請注明：學UI網》從構思講起，手把手帶你繪制一套彩鉛噪點人物插畫！
          

          
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

          

          
    
          
           

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          

          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1501)
              
                          
          
          
          
                      
          
            
            
          當互聯網遇上線下門店，設計師能做些什么？
          
            
          
               seo達人                                            
          
            
          

          
    
          
        
          
    
          

          

          

          
    圖片 

          

          
    從根兒上捋一捋，人類社會經濟最根本的是“互通有無，各取所需”這八個字。更高效的生產力決定了更好的交換能力。只要制造業的生產線還能繼續開足馬力，源源不斷的生產出生活必需品，那么就有相應的“場景”去交換它們。這個“場景”最終的末端形式就是“店”。有了互聯網交易這個場景之后，門店（門市）就成了“線下店”?！熬€上店”就啥都好嗎？

          

          
    顯然不是。人跟人之間隔著一個“網線”，我們對小物件或者低價值的小商品或許還有很大的容忍度。但是，對于你的家庭服務需求，你要找的是一位共同在家里生活朝夕相處、帶娃、護老的阿姨，不見一見，放心嗎？所以就需要這么“一個專業的家庭服務門店”來提供面對面的咨詢，以及培訓出優秀的阿姨來提供令你和你的家人滿意的服務。

          

          
    圖片 

          

          
    不得不說，在這個領域里，還沒有一個“一統天下”的品牌和絕對“統治力”的產品。而順應趨勢來看，開放生育和老齡化，這確實是一個“有發展空間”的行業，需要這么一個“門店”。有的行業在沒落，有的，則在生長。

          

          
     

          

          
    圖片 

          

          
    門店標準化背后有怎樣的運作邏輯？它的本質是什么？后疫情時代如何做門店形象標準化？ 

          

          
    門店做標準化當然不僅是說品牌露出好、有助于打開潛在客戶心智、顧客選擇偏向這些理由。標準化本身除了品牌、效率之外的比較重要一點，就是這套運營標準能使加盟老板、乃至員工都能夠迅速進入“經營”的狀態，并逐步迭代總結，再通過標準化把經驗傳遞下去。標準化這套法子能使老板少走彎路，早盈利。老板盈利賺到錢了，品牌方就有了更大的話語權，實現更大的商業企圖。

          

          
    圖片 

          

          
    在后疫情時代，人們的錢袋子緊了，老板在經營投入上謹慎了，設計上的發揮空間狹窄了。門店的裝修標準化不妨從“設計形式上比友商好一點，材料便宜點，執行容易點”上入手。

          

          
    設計形式好一點 

          

          
    往大了說是“差異化”。從材料、顏色、鋪貼方式三個角度去探索，任何一個角度提上一個LEVEL就可以。

          

          
    如果只差一點，等友商迭代升級怎么辦？

          

          
    不同于“線上店”，線下門店的裝修周期有比較明確的規律。三年小裝，五年大裝，裝修早了不賺錢，裝修晚了不符合當下品牌發展階段了，保持小步迭代的策略即可。

          

          
    材料便宜點 

          

          
    裝修材料水深，不探討材料的品牌和產地。這里的便宜體現在品牌商的標準化管理成本，就是加盟商對材料的采購難易程度。如果買不到或者總缺貨，加盟商的免租期是有限的，很可能導致“平替”的事情發生，但這個“平替”不是真的能平，很可能是向下“平”。從而出現失控的設計落地結果。同時，對品牌元素應保持絕對的掌控力，統一采購配發（路邊廣告店自由發揮的結果超乎想象）。

          

          
    圖片 

          

          
    上面提到的裝修周期，這也決定了在選材上要選擇符合盈利模型的材料。不要追求極致的耐用而導致成本提升。

          

          
    執行容易點 

          

          
    讓施工的人能明白標準化的設計意圖。不同的施工師傅對同樣的設計圖紙理解而施工出來的結果可能是不同的。所以做出明確設計意圖、圖紙、以往項目中的錯誤做法。并不是說，寫得越多越詳細越好。我恰恰在這上面深有體會，忽略了施工師傅的辦公環境和項目節奏。我們管這叫“由于缺少用戶習慣調研導致產品無法觸達用戶心智?！?
          

          
    要知道，用戶面對，洋洋灑灑幾大篇的描述，往往不愿意去閱讀，所以盡量采用短視頻的形式去說明效果會更好。

          

          
     

          

          
    圖片 

          

          
    在弱矩陣組織中設計的影響力邊界在哪？受控環境下的設計管理如何發揮最大效能？ 

          

          
    說到這，終于到了正題。似乎設計師往往都是弱勢群體，很大程度上取決于組織架構的形式。大多數品牌公司的設計組織都是依托于產品側的訴求。例外的是乙方設計公司，因為設計本身對公司來說就是產品。

          

          
    弱矩陣的組織更像是臨時抽調人力組成的作戰小組，平時各職能人員都在自己組織內處理常規業務需求發揮職能。這個組織形式上，也影響了參與者在項目中的投入精力。設計師在有限投入的情況下，需要更好的把設計流程和設計落地規則以及檢驗標準沉淀，以供其他各個環節的職能人員查閱和重復利用。

          

          
    上面所說的，經驗豐富的設計師可能已經駕輕就熟了。再說說另外的思考。

          

          
    我想，還可以做進一步完善審批流程、輔助工具、權重區分、沉淀文檔四個部分。

          

          
    審批流程 

          

          
    提到審批流程，十幾年前新興的互聯網行業熱衷于“扁平化”，對傳統行業的審批流程嗤之以鼻。時至今日，當年的新興的互聯網也演化成了傳統互聯網，組織架構越發龐大，職能劃分也越來越細，業務也趨近于穩定?，F在再看扁平化，不過是企業或者行業在發展初期無法形成穩定的流程體系和組織結構。審批流程在高并發、時效性強的項目中，可以為你分擔更多的監督節點。各個職能去監督各自擅長領域，識別和規避風險。

          

          
    輔助工具 

          

          
    這一年最大的感觸就是資源同步問題。從以郵件分發演進到網盤云端下載，都沒能很好的解決這個問題。家庭服務行業之前從未真正有過的品牌化的運營。加盟商對品牌的理解力和協同力是非常初步的。并不像隔壁的3C數碼行業駕輕就熟，隔壁的加盟商甚至形成了自己的一套品牌管理組織架構，主動去擁抱品牌。品牌標準化的落地不要局限于“手冊”，讓“手冊”靈活起來并不是一件難事。嘗試通過線上智能客服的方式，使加盟商通過關鍵字獲得資源同步，或常見疑問解答。要保證溝通平臺不能跳躍，比如常用微信群溝通，就不要一竿子支到公眾號，這反而增加了理解成本。好的工具可以事半功倍，將設計師從重復的溝通中解放出來，將其精力投入到設計當中。

          

          
    權重區分 

          

          
    加盟商開店和裝修項目是一個高并發的項目。往往集中在行業淡季，這就導致在有限時間和有限資源配置下，做出權重區分。厘清各個項目條件的輕重緩急，比如說：搬家新址的項目權重是最高的，因為他面臨舊址無法繼續運營的情況。翻新升級的可以稍等一段時間，不影響他的正常運營。

          

          
    沉淀經驗 

          

          
    不總結不沉淀，就跟人失憶是一樣的。好的經驗要沉淀，失敗的經驗也要沉淀。甚至說，失敗的經驗比正確的經驗更有用。這說明它有盲區，也許是管理上的盲區，也許是執行上的盲區，它可能是系統性的問題。這在跨部門溝通和團隊擴張的過程中會幫助業務變得更加穩定，為項目增加抗體。

          

          
     

          

          
    圖片 

          

          
    以上就是我分享的內容。當然，我并不是都做到了盡如人意，也有還在進行和改進中的事項。如果整套搬運項目管理體系會與項目的“土壤”不匹配。做好流程裁剪，因地制宜吧。

          

          
    設計更多的是事前去思考和謀劃如何去實現，這其中少不了去理解行業和落地流程，深入思考和理清邏輯。設計師的認知邊界在哪里，影響力的邊界就在哪里。

          

          
    逆水行舟，不進則退。

          

          
    
          

          

          
    作者：環鐵藝術家

          

          
    轉載請注明：學UI網》當互聯網遇上線下門店，設計師能做些什么？
          

          
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

          

          
    
          
           

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
          

          

          
           

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

          

          
    
          
           

          

          
    
          

          

          
            
          
              
                評論(0)
                瀏覽(1370)
              
                          
          
          
          
              
          

  

          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合