UI設計如何實現品牌定製化？來看方正集團案例

2018年5月9日，谷歌在 I/O 開發者大會上宣布了Material Design的幾點更新。「為創新和品牌表達提供統一靈活的設計規範」作為新增的Material Deign設計目標，非常令人玩味。本文正好以我去年為方正集團設計的傳播專題頁面為例，探討一下這個話題。

一、Material Design的新主張：品牌定製化

在過去，MD強調「遵循規範」和「跨平台統一體驗」，開發者運用其設計語言能夠快速地產出一套易用性強的設計方案，但也難以避免「模板化」的千篇一律。而現如今，人們越來越不滿足於此，強烈地要求界面設計傳達出品牌獨特的氣質——不僅僅是品牌logo、主題色與題圖，那些被認為是功能性的元素，比如導航、按鈕、信息卡片甚至柵格版式，都大有可為，可以在細節之處與品牌特質相互呼應。

比如在這個官方案例里，設計師提取了Crane品牌logo中的「橢圓」元素，並把它融合進了卡片、按鈕、彈框、icon等設計的方方面面。

Crane是一款旅行類app，Google以它為案例介紹圖形設計與品牌的關係

看到Material Design的這次更新，我不禁小激動了一下，因為這套設計思路簡直與我為方正集團提供的設計方案不謀而和。先快速瀏覽一下我的設計方案：

字承一脈：方正集團30年（web端）

下面就以《字承一脈：方正集團30年》這個專題頁的設計經過，簡要說明一下我是如何將UI設計與品牌表達相結合的。

二、設計的起點：了解客戶的需求

恰逢方正集團成立30周年，為此方正需要製作一期整合營銷傳播方案，以線上專題頁作為載體，容納一系列主題文章、H5小遊戲等。而我則負責此次「字成一脈：方正集團30年」專題頁的設計。

這個項目需要分批次上線三個版塊，分別介紹方正集團的過去、現在與未來。

分批次上線的三個板塊

可以說，項目時間周期長（從2016年底到2017年中）、內容主題跨度大（三個板塊各有側重），是這次設計的難點。

三、原型構想：更扁平、更易讀、引流量

考慮到這兩個設計中的難點，在設計Web端原型時，我建議客戶不要按之前的想法，分三頁展示三塊內容，而是將三期內容平鋪在一頁上，當新一期內容上線時，只需讓主頁在打開時直接定位在新內容（而非頭部）即可。

這樣做的優勢是使信息更加外顯，一方面使整個專題看起來內容豐富、可信度高；另一方面，當新內容上線時，也能對上期內容起到一個引流的作用，盤活流量。

H5端則需要針對性的設計，因為手機屏幕展示的信息更加有限，用戶沒有耐心拉到頁面底部瀏覽。因此分頁式的展示是更合理的。

四、方正品牌元素提取與UI設計

在進行UI設計時，我在配色、題圖、形狀、裝飾元素上均考慮到方正品牌自身的視覺表達。主要的設計思路梳理如下：

配色方案

配色方案由方正集團企業標準色衍生，穩重的深藍色與藍調的灰色系相搭配，既確保網頁內容的可讀性，同時突顯方正集團深厚的底蘊。在需要引導讀者視線的位置，以標緻的「方正藍」點綴頁面，起到畫龍點睛的作用。

版式設計

主題文章的排版錯落有致，頁面布局形成」Z」字型的視覺引導，提升用戶的閱讀體驗。

題圖設計

在題圖中，我大量使用三角形，創造「創新」與「銳意進取」的視覺隱喻，而鈍角等腰三角形給人以穩定感，與方正集團根基深厚的企業形象相吻合。三張圖片素材分別為活字印刷（漢字的歷史與傳統）、平板電腦（互聯網時代）、醫生的辦公桌（醫療信息化），配合三個篇章的主題。

裝飾元素

在一些裝飾細節上，我也力圖讓UI與方正的品牌特徵相連。

方正集團的logo，在形狀上接近裁切掉兩個角的正方形

例如，文章配圖增加折角裝飾，增加了頁面的豐富性，同時與方正集團的logo相呼應。一些著重符號也採用了與方正集團logo相同的設計風格。

除了方正品牌形象，設計靈感的另一個來源是作為漢字與傳承象徵的「古籍」。例如題圖和導航中出現的文字著重符號採用手寫風格的，該符號取自古籍中常見的手寫標記，突顯文化底蘊。

來自古籍中的靈感

以上就是我在《方正集團30年》項目中，將UI設計與品牌表達相結合的一些方法。本項目已上線。在線地址：

http://promote.caixin.com/founder2016/

引用資料來源：

Crane設計案例分析：

https://material.io/design/material-studies/crane.html#crane

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！