今天的主題是關于 B 端初級設計師作品集中普遍存在的一個問題 —— 作品中飛機稿濃度過高，這會讓作品集顯得非常的失真、學生氣、不專業(yè)，從而使獲得的評價急劇降低。
更多作品集設計技巧：
所以從一開始認識這個問題，才不會花大量的時間輸出無效的結(jié)果，提高作品的整體質(zhì)量。
飛機稿在過去是對非正式使用的概念稿、練習稿的統(tǒng)稱，是廣告公司比稿中放飛自我的方案，相對來說是一種中性詞。而在今天的 UI 行業(yè)中，飛機稿是指無法被前端實現(xiàn)的外行的、表面的、異想天開的界面設計案例，帶有明顯的貶義。
要牢記一點，飛機稿不是對 “沒有上線的”或 “非真實項目” 的界面稱謂，而是指那些完全就不符合真實項目需求，一看就無法上線的 “外行的” 的設計。
當我們準備作品集項目時，往往都要對原界面做出大量的修改優(yōu)化，所以不管它們原來有沒有上線，都很容易做出“飛機稿”，讓項目的觀感大打折扣。所以，想要避免這個問題，就要先了解飛機稿的主要特征有哪些。
第一個最常見也最顯著的特征，就是大圓角的使用，即界面中的大小模塊都大量使用超過 12px 的大圓角，使得頁面看起來非常的圓潤。
圓角是最容易塑造風格的設計細節(jié)，但問題是 B 端界面多數(shù)應用在比較嚴肅的場景，過大的圓角會讓整個界面的觀感變得“卡通”、“可愛”、“詼諧”，和使用場景格格不入。而且大圓角設計風格需要比較多的留白，自然對信息的承載量是很低的，也非常不適用信息較為密集的管理系統(tǒng)。
在B端設計中，大圓角屬于可以完全避免的設計要素，能用的場景非常少，但是不用就不會出錯。所以推薦吧圓角全部控制在 4px 左右是最安全且理想的。
這個意思就是使用的配色完全和行業(yè)特征脫軌，雖然它們可能看起來視覺效果還不錯，但明顯不適用于相關的場景。
政治正確上來說 UI 設計中色彩是不受限的，但現(xiàn)實世界里B端行業(yè)對配色卻有一種隱性的約束，因為 B 端產(chǎn)品本質(zhì)上是一種商業(yè)工具，而工具就會遵循一定的行業(yè)標準。比如回想螺絲刀、鉗子、扳手等工具，是不是主要的配色就那幾種，我們不會把它和彩虹糖的色彩聯(lián)系到一起。
B 端的配色不能往一種非常個性化、平面品牌化的方向發(fā)展，因為過大的差異對真實的用戶只會帶來困擾（你打開新買的工具箱里出現(xiàn)彩虹糖配色的螺絲刀和鉗子等）而不是驚喜。
就是在 B 端界面中加入了非常顯眼的插畫或者 3D 元素，而它們對產(chǎn)品使用沒有什么實際的加成。
在一些大型 SaaS 項目中，確實會有加入插畫或者 3D 元素的需求，那是因為大型 SaaS 是需要做營銷來刺激用戶消費的，所以設計一些吸引眼球的營銷元素是有客觀要求的。
除此之外，用戶在實際使用 B 端產(chǎn)品的過程是不太想看到和目標不相關的視覺元素的，就像我們在進行 Mac 或 Windows 的操作過程中，彈出大量卡通或 3D 圖形只會讓你覺得厭煩。所以對于非 SaaS 營銷類元素，不要額外添加一些沒有實際作用且非常顯眼的插畫或 3D 元素。
即增加了一些包含豐富視覺樣式的細節(jié)，比如玻璃效果、輕擬物、液態(tài)玻璃等，這些樣式的加入可以讓界面的展示效果看起來更有“設計感”，但它們同樣在實際項目中缺乏正面反饋，除了用戶不感興趣外，還會額外增加開發(fā)成本。
過于復雜的視覺效果都需要前端開發(fā)的技術支持，多數(shù)效果往往無法被實現(xiàn)出來，而另一部分也要在真實項目中有充分的理由才會去設計和實施，如果設計出這類效果，很容易在面試環(huán)節(jié)被問它的實現(xiàn)過程，怎么給前端切圖的，實現(xiàn)的效果如何等。
所以沒有在項目中落地或想得清楚實現(xiàn)方式的效果，就不要輕易添加。
浮夸的圖表就是完全不符合正常樣式多了很多額外裝飾的圖表，反而影響了我們查看圖表的目標和效率。
圖表一直是表盤頁中最重要的部分，但圖表存在的意義不是一個視覺裝飾，而是對數(shù)據(jù)的圖形化展示。做圖表是要想清楚用戶想看到數(shù)據(jù)怎么表現(xiàn)出來，而不是只讓它變得“酷炫”。
同時，多數(shù)項目的圖表都是使用開源庫搭建的，復雜的圖表樣式意味著要獨立開發(fā)，這在正常項目中是基本不可能的。所以還是會出現(xiàn)做了這種設計，在面試環(huán)節(jié)就會被追問，制造不必要的麻煩。
要把圖表當成一個用來查看的對象，而不是欣賞的對象。盡量使用樸實、詳盡一點的設計遠比浮夸的視覺造型看起來更落地更專業(yè)。
這里指的是界面中包含的信息量很少，且關鍵字段信息缺失或使用就完全不符合頁面的實際需要，看起來就像編的。
作為專業(yè)的工具，B 端產(chǎn)品中包含的信息應該都是實際業(yè)務場景中需要的。如果展示的信息都是一些非常基礎、不相關的，那么立馬就會產(chǎn)生不是真實項目的認識。
尤其在表盤頁和表格頁，即使真實項目中填寫的字段信息少，也建議自己多做一些補充。而補充的方式可以從同類型的其它頁面中挖掘。在合理字段應用上投入足夠的時間，遠比扣視覺效果重要。
頁面框架即頁面的布局形式，有一些飛機稿的設計會過度追求差異性，從而設計出完全不同的頁面構造，比如導航欄做在右側(cè)，工具欄做左下角，內(nèi)置頁面標簽做垂直的等的等等。
這種設計可能對外行會有很大的吸引力，但內(nèi)行都會知道主流的框架形式是經(jīng)過驗證行程的，太激進的設計如果沒有實際反饋或數(shù)據(jù)驗證，是無法說服他們的。
部分新人會被一些酷炫的 B 端頁面動效吸引，所以也會自己制作這樣的效果加入在線展示中（PDF 放不了）。
在 B 端開發(fā)特殊的動效是非常奢侈的事情，因為開發(fā)資源非常有效，而復雜的動效做起來又很麻煩。除了麻煩外，還是回到老的問題上，那就是用戶想不想看見這些動效。
當動效作為一個視頻觀看的時候，我們可能覺得很有意思有高大上，但當你真正高頻去操作這些界面，每次加載界面后一堆組件的動效輪番進行轟炸，你就必然會厭惡這些效果。所以網(wǎng)上酷炫的B端頁面特效一大堆，很多特效也不是做不出來，但沒有一個成熟的項目會這么做，原因就是用戶和市場都不需要它們。
所以項目本身設計過程中沒有出現(xiàn)要用動效表達的交互，就不要強行加動效，尤其是表盤頁的組件加載或圖表的加載動效。
以上就是對 B 端界面常見飛機稿設計細節(jié)的解釋，你們可以隨意找個 B 端界面收集比較多的花瓣畫板看一遍，能不能一眼分辨出哪些案例是飛機稿，以及它們?yōu)槭裁词秋w機稿：
產(chǎn)生飛機稿的核心原因，來自于設計師對 B 端界面認知的不足，我們把它們當成拿來 “看” 的平面圖，而不是拿來"用"的可交互軟件界面。
新人先學會識別什么是飛機稿，才不會陷入到這些沒有實際價值的方向去學習或?qū)嵺`。至于該怎么做出專業(yè)、可用的界面，就是我們后面討論的話題。
我們下篇再賤~
歡迎關注作者的微信公眾號：「超人的電話亭」
復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
熱評 識趣