讓從0-1的設計更有方向

摘要： -- 前言 近期有一位朋友問我“什麼是設計風格？”，在溝通了解之下，原來是他承接了一款全新的移動端專案，不知該從何設計。這位朋友是剛入行的新人，從0-1的設計對他來說是很難把控的，但是對他卻是一次不錯的經歷。 正好我承擔的主要專案是從0-1的過程，今年3月份還經歷了一次2.0設計大...

-- 前言

近期有一位朋友問我“什麼是設計風格？”，在溝通了解之下，原來是他承接了一款全新的移動端專案，不知該從何設計。這位朋友是剛入行的新人，從0-1的設計對他來說是很難把控的，但是對他卻是一次不錯的經歷。

正好我承擔的主要專案是從0-1的過程，今年3月份還經歷了一次2.0設計大改版。這款產品是我獨立設計，基本是全棧負責，所以對整個設計過程的把控和坑點都總結出來分享出來，一起學習一起共勉。

-- 進入流程

l 瞭解業務

在設計之前，一定要給自己爭取時間進行設計準備工作，而不是一拿到互動就上手設計，沒有思考的設計是沒有靈魂的。

在接到任務後就要立馬瞭解業務，知曉產品方向，熟悉使用者畫像等相關資訊，瞭解這些資訊後，在後來的設計中，更能站在使用者的角度去看待和總結設計問題。

能最快了解到業務的是競品和產品經理，當產品經理和互動對接需求的時候，設計師儘量參與到討論當中，而不要等到互動設計師評審的時候才去瞭解業務。

如果你的專案有競品，那這個資源真的是得天獨厚，它能夠讓你迅速瞭解產品的商業規劃。當然，最好對競品進行分析，不光從設計，也要從它的體驗和頁面之間的跳轉進行思考。這些過程的積累，能夠幫助你更好的瞭解互動的內容，在互動中發現問題，提出自己的觀點。(這裡不是說讓你去找互動的茬，而是在設計過程中，你能夠對互動的設計有疑問，多與互動進行討論，這樣能夠擴充套件設計思維，聯想更多的使用者使用場景)。

l 設計思考

設計的操作，不僅侷限於介面的內容，在設計的前期準備中，結合前期對業務的瞭解，在現有不足的需求內容裡，可以先進行風暴式設計(前期飛機稿)，有準備的設計，在進入到正式設計後，能夠有備無患，更快的進行調整。

設計的前期準備可以從3個點入手：

一、顏色

顏色是整個產品的靈魂，是與使用者最直接的溝通物件，恰當的使用顏色，能夠更準確的引導使用者的操作，與使用者之間建立起信任感。

在制定顏色的時候，首先考慮的是品牌色，就是產品最主要的代表色。內容色或者其他輔助色，可以在首頁或其他tab頁設計時，進行新增或者調整。

-- 有品牌色

已有品牌色，是可以直接運用到設計中，除了原有的品牌色，還可以根據頁面的整體視覺需求，制定合適的輔助色，輔助色一般是用於區分不同標籤、icon、內容等。

-- 無品牌色

品牌色是被賦予意義的，一期制定後，將會被長期沿用，運用到所以與企業相關的衍生內容，基本是不會有很大跨色系變化的，所以在制定品牌色要很慎重。每個顏色代表的意義是不一樣的，有些顏色也是某些行業的代表色，所以 品牌色可以根據行業型別去制定 ：

也可以根據使用者型別制定品牌色 ，OFO小黃車就是典型的例子，打造年輕陽光時尚的騎行平臺，而黃色就是給人輕快，充滿希望和活力的感覺。

還可以 根據平臺自己想給使用者帶去什麼樣的感覺 制定，這種方式最好是能夠有很多使用者進行體驗驗證，因為顏色是最直接的視覺體驗傳達，所以這種方式制定，要更為嚴謹。

我在專案中遇到的用色問題和思路：

問題：

品牌logo的代表色來自某戒網比賽提供，品牌調性不規範，無衍生產品，個人對專案瞭解不透徹，根據自我喜好，定下深紅色。

思路：

我遇到這種型別的問題，當時就考慮了平面方面的知識，顏色是否適合該產品，未來的線下物料是否適合承載物。

我的專案使用者是卡車司機，為了平臺宣傳，卡車上會貼一些車貼，卡車的顏色有很多，深紅色和藍色是很常見的。但是第一版的專案代表色是深紅色，所以在後來中，同是紅色系的衝突下，則需要調整多種車色同時適用的代表色，所以在專案1-2的設計改版中，我調整了品牌色。

有人會有疑問，為什麼定個品牌色還需要考慮線下使用場景？前蘋果設計總監曾舉過一個列子：當初他在黑莓任職，需要開始建立一個新的手機作業系統，從他們最開始的第一天就把工業設計、包裝設計、使用者介面以及市場等全部的核心整合在一起，來創造一套全新的使用者體驗。這是一個很好的例子，要永遠將設計看作企業品牌的一部分。

我們在著手介面設計的時候，需要考慮你所能想到一切的使用場景，顏色是影響使用者第一元素，形成的產品形象是一直影響品牌形象的，所以在制定代表色一定要考慮的更全面。

-- 內容色

我一般把字型、背景、分割線等用色分為一類，這類顏色用的比較多的是白-黑色之間的灰色。我定義的顏色都是100%純色，直接使用顏色的數值。

也有設計師喜歡從#000000純黑色，調整不同的透明度使用，有透明度的顏色在不同顏色背景上會有不同的視覺效果，所以色值在提供給前端人員的時候，還需要進行調整。

內容色的制定方法就看設計師的個人習慣來調整了，只要能正常進行開發，視覺效果保持一致即可。

在根據互動設計稿設計頁面的時候，要理解內容的層級，合理的使用顏色。標題／主要內容／提示文字／icon等用色，都會對使用者產生不同的視覺指引，我找了幾家社群的介面設計，可以看到不同內容的顏色深淺都是不一樣的，整個視覺是有層次的，所表達的內容也清晰明瞭，突出重點，弱化次要內容。

二、 風格

近年來，大量留白的極簡平面風格流行於各大網際網路平臺，我們需要在趨於一致的風格中找到自己的設計風格，可以從這幾個點進行思考：

-- 圖示

介面設計中的icon的設計會提高整個介面的視覺和使用者好感度，iocn的風格有剪影圖示、輕擬物圖示、輕質感圖示、文字圖示、疊加圖示、插畫圖示、擬物化圖示。

其中， 剪影圖示、輕質感圖示、插畫圖示比較常見 ，插畫圖示多用於節日型別的宣傳、遊戲類app。擬物化、輕擬物圖示的流行趨勢比較早年了，個人認為輕質感是擬物簡化的樣式。疊加類圖示，實際屬於一種創新類樣式設計，不同顏色、線條、或透明度疊加的視覺樣式。

icon設計的風格最終還是由設計師自己最終決定的，如果在時間充裕的情況下，設計師可以運用常用的圖示樣式結合產品特點設計出2-3版的飛機稿和團隊人員進行討論，圖示的設計風格上要保持統一性原則。

舉例：

三大外賣美食類產品的設計都具備自己的設計風格，從產品的首頁的功能區域就很好能區分出來，專案的功能區是核心區域，通常佔據螢幕的22%~25%，該板塊是各類子板塊的入口，為子板塊引導流量，從使用者的視覺來講，該位置是黃金區域，所以業內也有稱為“金剛區”。

三款產品的用色總體都是鮮豔明亮的，餓了麼用2.5D的設計，貼近擬物設計，增加了細節，能影響著使用者的潛意識，聯想到實際的畫面。

大眾點評的設計是後來新改版的，第一感覺就是時尚，年輕。當時首頁剛出來的時候，在某網有人說過，首頁的設計顏色豔麗過於喧賓奪主，其實從首頁的每塊內容區域去分析，現有的圖片尺寸是750*1334的尺寸，金剛區、運營區、推薦區基本平均佔有內容區的1/3，在大螢幕的情況下，推薦區可視內容會變大，並且大眾的使用者使用目的性很強(檢視推薦內容、搜尋店鋪付款等），所以金剛區需要新穎的視覺為其他子功能引流。
美團的icon設計個人認為是比較普遍的了，設計穩妥，相對於其他兩款設計，圖示記憶和識別度上相對較弱。

對於從0-1的設計過程，金剛區的設計可以先使用普遍的設計方式，因為金剛區一般都是可配置的(icon可換)，上線後，可以再更深入的思考優化。

-- 規範

設計介面時，一定要量化設計規範，瞭解所承擔的產品適合哪種設計風格。在設計過程中，可以利用網格系統科學的設計介面，很多設計師都會忽略網格的使用，網格系統是設計的骨架，將介面中的元素有序的組織，使整個頁面的設計更加的規範、視覺一致，提高了工作效率。

網格參考學習文獻

ofollow,noindex" target="_blank"> https://mp.weixin.qq.com/s?__biz=MjM5NjA3MTQ5Ng==∣=2651747078&idx

為了便於組織設計元件規範，在設計過程中，逐步把字型、圖片、icon等顏色尺寸，內容之間的距離，列表的高度等設計樣式單獨列出來，如果一開始就製作規範，後續的頁面很容易無法沿用。設計圖可以用 1@的圖設計(375*667)，匯出的圖示是2@、3@ ，當然 也可以使用2@圖設計 ，這個看設計師的習慣和團隊的設計規則。

制定規範不僅是讓設計師使用，它更大的作用是方便整個設計團隊和開發團隊之間的溝通，協助開發人員撰寫統一的元件庫，未來開發的時候能夠直接呼叫。現在UI設計師設計介面的軟體大多都用sketch了，sketch中的symbol的功能能夠方便元件的呼叫，提高使用的效率。

symbol參考學習文獻  

https://www.uisdc.com/use-symbol-in-sketch

安裝步驟：

1、將元件都分類命名，間隔的符號都用 “ / ”  (如list/...)  ， sketch對其他符號可能會無法識別。

2、將元件庫檔案放在一個固定的位置，桌面或者其他資料夾中，點選“ Add Library ”找到元件庫檔案，千萬 不要刪除 ，每一次元件庫檔案更新都需要重新再安裝一次。

元件之間的距離大小，給使用者的感覺是不一樣的，距離大，留白多的介面，給人的感覺會很高階簡潔，但是整個頁面的內容展示相對就會減少。

這兩 款產品都屬於資訊類，資訊類設計在我們的印象裡是一個頁面儘可能多展示幾條內容。第一款產品輕芒雜誌使用卡片式的設計，卡片內的標題、內容、操作的距離都是比較大的，整個設計風格比較高階，除去頂部狀態和底部導航，在1334px寬度裡，展示內容不滿3條。

網易新聞加上頂部狀態、導航和底部導航，整個整個可視內容還能達到三條半。網易的多內容展示，讓使用者感覺到資訊內容豐富，更有閱讀和翻閱的慾望。

輕芒的視覺很有自己的風格，設計很小眾，與同類產品形成明顯的對比，它的設計風格也是根據使用者特性去定製的。輕芒雜誌以興趣來組織內容，而你看到的內容都是經過有品位的人挑選出來的，所以輕芒的大部分使用者是高階有品位人群，然而這類人群對性冷淡風格很是care。

我們在設計的時候，不能一味的為了好看而好看，單也不能因為使用者接地氣就做的很low，我們應該在他們的審美中找到平衡，在未來改版中，逐漸的加入更多的美學元素，冷不丁的提高著他們的審美。

-- 情感

建議APP內的插畫部分在功能頁面設計完成後設計，先提供設計流程稿，讓前端人員更早的進入開發。

插畫部分有金剛區、引導頁、啟動頁、空白頁提示、底部tab等，啟動頁、引導頁、空白頁提示則是能加入更多情感元素設計的頁面。有很多UI設計師的視覺插畫能力是不足的，作為設計師，我們更應該在視覺設計層面重視，視覺的表現也是產品體驗中重要的一部分。
啟動頁 是APP啟動過程中第一個見到的頁面，這是啟動過程中必然存在的一個頁面，所以需要放一張圖替代啟動中的空白。作為與使用者第一個照面的內容，最好就是宣傳企業文化，logo和宣傳標語，就是給使用者最好的自我介紹。

企鵝FM和鹹魚將吉祥物運用到設計當中，擬人化的動作表情和可愛的模樣，使人印象深刻。吉祥物是企業品牌的化身和象徵，被賦予美好的意義，在資訊傳播中不僅吸引使用者的目光，也拉近與使用者的距離，更有助於企業品牌文化的宣傳。
百度閱讀則用一盞燈的形象，一句貼心的話，很是應景；百度閱讀的啟動頁還有其他的場景，每一次啟動都讓人眼前一亮，使人內心平靜。

引導頁 的內容一般是整個專案的簡介或重要功能的描述，頁數在3-5張，用在引導頁上文案要簡單易懂，每頁的文案都要取其精髓。引導頁的設計樣式是很自由的，那我們該如何加入情感化內容？

文字

好的文字是能戳人內心帶來情感的，百度閱讀的文案，讓我覺得讀書是一件文藝舒心，能夠改變生活的事，配合清新的插圖，很有代入感，讓人產生共鳴。

但並不是所有的專案都是這種高大尚走心的產品，比如金融類、教育類、醫療類等，引導頁的文字基本從使用者痛點出發，擊中癢點，告訴使用者你在這裡能解決什麼問題，平臺能給你帶來什麼。

文案不是設計師提供，但是設計師也要對文案有所理解，也需要站在使用者的角度體驗文案能否讓你產生共鳴。在時間充足的情況下，可以協助產品，與團隊一起腦暴。

設計

如何設計？設計什麼風格？這些問題就跟設計師的個人經驗和能力有關了。設計的元素要與所提供的文案環境一致，這樣更便於使用者的理解，即使不用看文字，觀看畫面就知道所要表達的內容，要讓你的設計會講話。 

我們從一款金融APP去解析設計師給使用者帶來的話，從第一張引導圖設計中，有 秒鐘、儲蓄罐、錢幣 ，它告訴我們在該平臺投資能夠更快的賺錢。第二張圖有上升的 標尺、錢幣、保險櫃 ，它告訴我們在該平臺投資是安全的，他們有嚴謹的安保功能。第三章圖，就是 暢想生活安逸的畫面 。圖的含義跟文字的含義也很貼近，很清晰給使用者表達了想要表達的意思。

空白頁提示是在頁面沒有內容的情況下，所展示的提示內容。該頁可以單純的文字提示(易缺少情感)，也可以插圖配文字。

空白頁的插圖風格需要保持視覺一致性，若有吉祥物，我建議多使用吉祥物作為插畫元素，不僅達到情感化目的，也宣傳了品牌文化。若沒有吉祥物，設計中則可以加一些人物元素，同樣也能夠達到目的。

小結

底部tab的幾個主要頁面基本設計出來以後，整個APP的視覺風格就出來了，圖示樣式也是整個視覺的影響因素。從iphone6介面恢復圓角設計以來，很多APP的設計風格就開始改版成圓角風，擁有大量級使用者的淘寶，是最快發現樣式改變的。

當然，總會有些產品是特立獨行的，百度錢包就是最好的例子，直角橫行，它屬於金融類產品，使用直角的設計樣式，給使用者嚴謹、認真的感受，當然涉及到金錢的行業，給使用者正面的感受，還是挺讚的！

三、 體驗

這一步是輔助思考，當然這也是成為優秀UI設計師的必經之路。

我們在看競品或其他產品時，建議體驗流程性的使用，體驗每個介面的視覺影響，思考為什麼有些元素會引導你點選？為什麼主要功能模組要按該種方式排版？作為使用者，你覺得有哪些不合理的地方？為什麼同類產品，在業務發展上會有所不同？...

多面的疑問和自行解決的鍛鍊，在未來自己的設計想法上會更專業，也能更好的描述自己的設計想法。

前面的情感設計中，有提到“ 讓設計會說話 ”，其實介面設計也是與使用者對話的過程，只不過介面要說的太多，那我們就是讓這些話排隊，重先弱後。

（很多剛入門的UI設計師不知道該體驗哪些產品，沒有方向，我推薦大家，可以在設計網站看優秀設計師的UI類分享，對應文章中的其他產品例子學習）

總結

學習是日積月累的事情，從0-1是很好的歷程。在上述的分享中，我是以全站的設計思維思考的，全站設計師已成為主流，深處網際網路行業的我們，不能只低頭看到自己的一兩畝小田，要多研究資料和使用者的真實場景，當然也要研究跟自己未來發展息息相關的行業變化 。

從0-1的設計，因為第一次經歷，設計中也有過很多問題，因為經歷了2.0的設計改版，所以結合兩次經歷，得出自己的設計思路。

第一次寫那麼長的文章，會有很多不足，希望我的分享能夠對大家有所幫助