延展設計一般是指在已確定的風格基礎上，完成其他的設計。大部分設計師都覺得做延展設計是沒有價值的，但對於初中級設計師來說，實際工作中大部分內容都是follow主風格做延展設計。

既然是不可改變的現狀，不如我們一起研究一下如何把延展設計這件事做出價值。

首先我們要確定一下什麼屬於延展設計？一般來說分成3種：

1、視覺風格已經明確，需要根據主要的界面，做其他2，3級界面；

2、視覺風格及設計規範都已明確，需要完成其他相對獨立模塊的界面；

3、主視覺風格已經明確，需要做周邊產品的視覺設計；

從設計可發揮的空間來說，是逐步遞進的。

第1類、設計師相當於只需要集中20%的精力完成80%的工作量。對這部分的工作要求是效率當先，對創意沒有要求，這需要我們從一致性出發，避免突破風格的限定。如果大部分工作是這一類，可以思考一下如何提升產出效率，以及如何使規範更組件化。從而把更多的精力留給第2類及第3類延展設計。

配圖來自behance

第2類、需要從獨立模塊的產品目標出發，找出設計的側重點，在不違背整體設計風格的情況下，完成相對獨立界面，界面視覺可以具備一定的獨特性。這一類可能是我們最常遇到的情況，如果能找到創新價值，也是很適合放在自己的作品集中。

那如何做好這一類的延展設計呢？

一份完整的風格設定會定義界面的細節。界面的視覺一般包含圖形、色彩、元素、質感、文字、版式、動效這7方面構成。通常產品的設計規範並不會針對版式、圖形和動效做過於嚴苛的規範，而這恰好是我們可以發展的空間。在這裡給大家列舉2類：

1.保持設計風格的前提下，進行細節創新

創新需要成體系化才會比較有價值，例如去定義界面動效規則，將界面中icon、btn等一些控制項的動效曲線，時長，觸發等細節定義清楚。也是細節創新價值的體現。

2、場景化的界面

一致性雖然在產品設計中很重要，但是針對不同的使用場景，其實是可以有一定的創新空間。這樣避免了產品體驗的寡淡，還能給用戶帶來驚喜。

具體可以參考一個案例，滴滴的主界面採用的是白色和橙色的搭配，而會員頁面為了營造尊貴感和品質感，採用深藍和金色的搭配。雖然這兩個界面配色不同，但是細節上看，icon的漸變質感、按鈕的樣式，都是統一的。對於一款產品使用的主流程來說，會員體系都是相對獨立的模塊，設計師可以尋求一些風格特徵的一致來達到統一的目的。

第3類、周邊產品和主產品有一定的從屬關係，因此設計風格上也需要有一定的繼承關係。在已經明確的視覺風格設定中，根據周邊產品的特性做延展。一般繼承的設計風格包括：圖形、色彩、元素。

舉個例子，騰訊文檔的Logo來源於騰訊的主品牌Logo，而騰訊文檔繼承了騰訊Logo的顏色及傾斜元素，定義出其獨特的視覺風格。這個視覺風格經過延展變形，被運用在各個線下物料的設計中。

案例及圖片來源文章：isux.tencent.com/articl

總結

設計環節並不是隻有風格設定纔有價值，特別是在一個大的產品線中，延展頁面往往體現了一款產品的體驗底線，而體驗底線決定了產品的水準。做好延展設計的工作，體現出價值，纔好爭取更重要的任務。

- END -

花火圓桌

花火圓桌是由一羣熱愛設計的BAT設計師發起的分享交流社羣，目前已聚集了近4000來自五湖四海的小夥伴，一起分享、解惑，並常有線上線下活動共同成長進步。

保存下圖掃描二維碼進羣或者微信搜索 "花火圓桌" 公眾號，關注獲得大量資源~

關注公眾號：回復以下關鍵詞，會有海量資源哦

| UI | 手繪 | 交互 | 字體 | 軟體 |

加羣：Fire_Lady9 還能得到更多


推薦閱讀：
相關文章