如何快速設(shè)定頁面設(shè)計(jì)風(fēng)格的思路？本文筆者認(rèn)為：在制定頁面風(fēng)格之前，要按照模塊化來搜集素材，再合理借鑒成功案例的一些設(shè)計(jì)細(xì)節(jié)。

無論是概念稿還是實(shí)際落地的項(xiàng)目設(shè)計(jì)，我想最困難的就是前期的界面風(fēng)格的定義。常常開始的時(shí)候雄心壯志要做出一個(gè)優(yōu)秀的設(shè)計(jì)，但往往真正開始著手設(shè)計(jì)的時(shí)候卻卡在沒靈感、找不到合適的參考的階段，又或者做到某個(gè)模塊的時(shí)候被細(xì)節(jié)卡住，怎么調(diào)整細(xì)節(jié)都覺得與整個(gè)頁面的風(fēng)格不搭。

面對這些問題，我分享一下我是如何快速設(shè)定頁面設(shè)計(jì)風(fēng)格的思路。

目錄

一、常見的困難

二、頁面的構(gòu)成

三、按照模塊化搜集素材

四、合理借鑒細(xì)節(jié)

五、劃重點(diǎn)

一、常見的困難

在開始之前我們先將常見的問題羅列出來，將問題點(diǎn)落實(shí)到細(xì)節(jié)，越細(xì)越好！因?yàn)橥鶑拇蟮膯栴}著手的話很容易得出空翻而無用的結(jié)論，而小的問題則更加實(shí)際且難度更小，最終我將通過出現(xiàn)的問題作為思路來思考解決方案。

我們可以先羅列出我們常遇到的問題，例如：

• 找不到合適的參考
• 沒靈感&沒想法
• 遇到一個(gè)模塊怎么設(shè)計(jì)都不理想
• 界面模塊之間風(fēng)格不搭
• 自己找的字體不好看
• 配圖風(fēng)格不統(tǒng)一
• Banner 運(yùn)營設(shè)計(jì)把握不好
• 自己的無法把空間距
• ……

以上是我們可能出現(xiàn)的問題，當(dāng)我們把這些問題羅列出來以后，可以先規(guī)劃優(yōu)先級，以優(yōu)先級最高的2～3問題作為當(dāng)前的主要問題，以點(diǎn)擊破。

同樣我們?nèi)绻呀?jīng)列出問題以后，依然感覺無從下手，那可能這個(gè)問題的維度還是比較大，你可以進(jìn)一步將問題拆解。例如：“找不到合適的參考”，可以拆解成“找不到頂部導(dǎo)航欄、Banner、金剛區(qū)、瓷片區(qū)、底部導(dǎo)航欄的參考等等……”直至拆解到你認(rèn)為足夠簡單。

二、頁面的構(gòu)成

1. 有目的的找參考

在眾多問題中大家可能最開始遇到的就是“沒靈感&找不到合適的參考”，在這里我希望大家不要急于立馬找參考，盲目的瀏覽設(shè)計(jì)網(wǎng)站。大家一開始找不到合適的參考的很大原因是不知道自己在做什么！這樣盲目的搜集參考很容易消耗大家有限的精力，挫敗自信心。

大家出現(xiàn)這個(gè)問題的原因很簡單，那就是大家不知道自己的真正想要什么，找什么樣子的參考。整個(gè)搜集參考的過程中沒有明確的“目的性”，把找參考變成了一種隨機(jī)行為，能不能找到合適的參考全靠運(yùn)氣。這種隨機(jī)找參考的方法實(shí)不可取的。為了避免這種狀況的出現(xiàn)，我們必須深入了解頁面的結(jié)構(gòu)構(gòu)成。

2. 頁面的結(jié)構(gòu)分析

頁面是由若干個(gè)模塊組成，同理也可以我們可以將一個(gè)頁面拆解成若干的模塊。

我們在做界面設(shè)計(jì)的時(shí)候也是在做一個(gè)由若干個(gè)模塊的集合體，回想在做設(shè)計(jì)時(shí)候相信大家都是按照模塊推動設(shè)計(jì)工作的。

例如：UC瀏覽器，我們通過將頁面拆分，可以看到頁面是由頂部狀態(tài)欄、搜索欄、標(biāo)簽欄、圖標(biāo)功能區(qū)、內(nèi)容區(qū)、底部導(dǎo)航欄等若干個(gè)模塊組成。

為了能夠更好的理解頁面的構(gòu)成，我可以將模塊進(jìn)一步進(jìn)行拆分各個(gè)小模塊，例如： UC 瀏覽器中的內(nèi)容區(qū)域也可以拆分成各個(gè)小的內(nèi)容信息模塊，模塊內(nèi)我們還可以把把它們分成“單一標(biāo)題信息”和“標(biāo)題信息+圖片”兩種樣式。

我們再以其中的信息模塊為例進(jìn)一步拆分，一個(gè)信息模塊是由“標(biāo)題信息+圖片+注釋信息”三個(gè)元素組成。

通過上述對頁面的拆分，我們能更清楚的認(rèn)識頁面的構(gòu)成。我們再找參考的時(shí)候的目的性會更加明確，將原本一件目的性很松散的事情變得更加聚焦，提高搜集素材的效率。

三、按照模塊化搜集素材

1. 搜索參考的“兩大”誤區(qū)

當(dāng)我們對自己所要設(shè)計(jì)頁面結(jié)構(gòu)有了充分的了解，做到胸有成竹的時(shí)候我們就可以開始找參考了。

但是，大家在找參考的時(shí)候往往存在“兩大”誤區(qū)：

1. 總是收集同類型的設(shè)計(jì)
2. 一定要找一張可以完全直接借鑒的參考

有的同學(xué)在找參考的時(shí)候總是只找一個(gè)類型的參考，例如：在設(shè)計(jì)產(chǎn)品詳情頁的時(shí)候只找產(chǎn)品詳情頁類型的參考，找參考本身就是我們找尋靈感的一個(gè)過程。如果我們只是在范圍內(nèi)尋找，這樣很容易把我們的思維禁錮。

為了避免禁錮我們的思維，所以在找參考我們要擴(kuò)大自己的搜集范圍，并非只找特定的界面參考，即使在做詳情頁我們同樣可以參考其他類型的頁面。

例如：之前興盛的擬物化設(shè)計(jì)也是借鑒于生活中的各種場景和物件；

例如：攝影 APP 頻繁使用相機(jī)作為桌面圖標(biāo)使用，即使大家都使用相機(jī)作為桌面圖標(biāo)，但是細(xì)節(jié)依然存在千差萬別。

其次，大家在找參考的時(shí)候還存在另一個(gè)很大的誤區(qū)，就是一定要找一張可以完全直接借鑒的參考。

這種一步到位、一口吃成胖子的想法是不可取的，本身我們找參考的意義就是在于借鑒他人優(yōu)秀的設(shè)計(jì)細(xì)節(jié)，找一張完全可以借鑒其實(shí)不是變成了“抄襲”。

在之前我們了解到的頁面的構(gòu)成，這里我建議大家在找參考的時(shí)候按照模塊去搜集，從點(diǎn)出發(fā)，逐步解決問題，而不是一直停留在面上，思考一些空翻無法落實(shí)的想法。

2. 多模塊搜集參考

大家在找參考的時(shí)候可以先找一些目標(biāo)性相對明確的模塊，例如：金剛區(qū)，形式同對統(tǒng)一，難度較低。

再其次，大家在搜索素材的時(shí)候可以同時(shí)搜集多模塊的參考，在瀏覽的諸多設(shè)計(jì)網(wǎng)站參考的時(shí)候廣泛借鑒。

多模塊找參考的好處在于：

1. 在收集素材的時(shí)候我們可以兼顧多個(gè)模塊進(jìn)行收集，能夠提高搜集素材的效率。
2. 搜集的時(shí)候可以兼顧多個(gè)類型的設(shè)計(jì)風(fēng)格，激發(fā)靈感，避免思維固化。

* 拼搭頁面

這里給大家介紹一個(gè)小技巧，當(dāng)我們搜集到足夠多的頁面的時(shí)候，大家可以嘗試將各個(gè)模塊裁切出來拼搭到一起看一下整體的感覺。

這里我們可以把頁面想象成一個(gè)穿搭博主，在分享自己的傳達(dá)技巧之需要多次嘗試不用的服飾，不斷的調(diào)整細(xì)節(jié)，確定一套最優(yōu)方案。

同理，這里我們也是反復(fù)審視自己找的參考是否符合我們的需求，風(fēng)格上是否顯得突兀，如果出現(xiàn)問題我們可以及時(shí)調(diào)整。例如：下圖是筆者剪切各個(gè)參考拼接成的簡易頁面。

頁面拼搭組合的好處在于：可以在設(shè)計(jì)之前找一下大致的風(fēng)格界定，避免一些符合個(gè)人喜好的組件設(shè)計(jì)在頁面中不符合整體設(shè)計(jì)的情況的出現(xiàn)，減少不必要的設(shè)計(jì)成本付出。拼搭組合的過程中能夠激發(fā)更多靈感，為頁面設(shè)計(jì)提供多種可能性，有力日常工作的提案。

四、合理借鑒細(xì)節(jié)

1. 創(chuàng)意的概念

面對借鑒可能有很多同學(xué)認(rèn)為是直接照搬，這種行為缺乏自身的思考即使是無意的但也很容易被扣上“抄襲”的頭銜。

借鑒本身就是一個(gè)思考的過程，倘若沒有思考，那跟抄襲無疑。大家總是想原創(chuàng)，發(fā)揮自己的“創(chuàng)意”，但大家對創(chuàng)意的概念又一個(gè)清晰的認(rèn)識嗎？

這里我們再次重申一下關(guān)于創(chuàng)意的概念：

創(chuàng)意是什么?

創(chuàng)意是要超越界限，跳離現(xiàn)有框架，重新定義事物和事物之間的關(guān)系。也就是找出事物間的相關(guān)性，或是相反特質(zhì)，將既有的元素打破、拆解、增刪后，重新組合，以呈現(xiàn)新的風(fēng)貌，功能或是意圖。（百科）

從上述概念中我們摘取重要的關(guān)鍵詞：“創(chuàng)意是將現(xiàn)有元素打破、拆解，增刪后，重新組合的過程”。我們可以理解為創(chuàng)意真正的關(guān)系是“破”“立”的過程，將現(xiàn)有元素“打破”，再通過拆解、增刪，重新組合（立），以新的形式或樣貌展現(xiàn)出來。

既然創(chuàng)意是打破現(xiàn)有重新組合的關(guān)系，那么我們在借鑒參考的時(shí)候也可以遵循同樣的方法，在借鑒的過程中我們可以先進(jìn)行模仿、拆解，思考、組合、最后再進(jìn)行突破以新的形式展現(xiàn)出來。

2. 創(chuàng)新的程度

當(dāng)我們對創(chuàng)意的概念有了一定的了解，那么我們還要注意一點(diǎn)的是“創(chuàng)意的程度”，首先我們要反問自己一個(gè)問題：“創(chuàng)新一定是翻天覆地的嗎？”

如果真的是這樣，那么sketch、Adobe Illustrator 、AdobePhotoshop等軟件每次更新都做出“翻天覆地”的變化，那么我們每次都要面對一個(gè)陌生的操作界面，重新學(xué)習(xí)操作，增加了繁重的學(xué)習(xí)成本。

面對這種“翻天覆地”創(chuàng)新你會作何感想？即使對方有驚天的創(chuàng)意，但面對繁重的學(xué)習(xí)成本你也會心生厭惡。

反觀現(xiàn)在的 APP 都是高頻的微創(chuàng)新，除了大版本的迭代，日常的迭代更新都只進(jìn)行局部功能的更新，幾乎不會出現(xiàn)翻天覆地的改變。

例如：淘寶的卡片設(shè)計(jì)的應(yīng)用也并非是一下子全部完成設(shè)計(jì)更新，而是一點(diǎn)點(diǎn)去“試水”，逐步去在每個(gè)小的應(yīng)用模塊去做更新。

例如：淘寶詳情頁中底部的加入購物車和立即購買的按鈕樣式由原來的矩形邊框到圓角按鈕的應(yīng)用，只是細(xì)節(jié)的改動，并不影響用戶的操作習(xí)慣。

因?yàn)楝F(xiàn)在的界面的布局設(shè)計(jì)是用戶多年使用養(yǎng)成的習(xí)慣，貿(mào)然在界面布局上進(jìn)行創(chuàng)新很容易適得其反，用戶的使用習(xí)慣已經(jīng)養(yǎng)成多年，強(qiáng)行改掉只會引來用戶的反感，所以在細(xì)節(jié)上進(jìn)行突破最大的優(yōu)勢就在于成本低、風(fēng)險(xiǎn)小、收益大。

3. 細(xì)節(jié)的借鑒

優(yōu)秀的設(shè)計(jì)作品是設(shè)計(jì)師對頁面中的每一個(gè)模塊和組件，都是經(jīng)過設(shè)計(jì)師反復(fù)思考再進(jìn)行精心設(shè)計(jì)排版的結(jié)果。

在當(dāng)前頁面結(jié)構(gòu)同質(zhì)化嚴(yán)重的情況下，我們所要借鑒的正是優(yōu)秀設(shè)計(jì)師對每一個(gè)模塊和組件細(xì)節(jié)的思考，其中的細(xì)節(jié)正是我們所要參考和學(xué)習(xí)的。

所以，在借鑒參考的時(shí)候我們要把我們的觀察點(diǎn)要逐步縮小，從借鑒“頁面布局”到借鑒“模塊”再到“組件細(xì)節(jié)”。

4. 如何借鑒細(xì)節(jié)

在借鑒的細(xì)節(jié)的時(shí)候，建議大家先對參考進(jìn)行模仿和拆解，試著站在對方角度思考為什么要這樣設(shè)計(jì)，這樣設(shè)計(jì)的優(yōu)點(diǎn)是什么？通過反復(fù)思考的過程去尋找突破口，尋找適合自己設(shè)計(jì)最優(yōu)方案。

在做細(xì)節(jié)的修改的時(shí)候，可能許多同學(xué)一開始沒有明確的思路，這是正常的。

面對這種情況最簡單的方式就是“列清單”。我們可以先將可改動的細(xì)節(jié)點(diǎn)進(jìn)行一一羅列，面對具體的細(xì)節(jié)，將問題具象化，逐步尋求解決方案。

以下是我羅列的一些細(xì)節(jié)點(diǎn)，大家可作參考。例如圖形、色彩、尺寸、圓角弧度、漸變、透明度、線的粗細(xì)、投影、位置、字體、字號、字重、裝飾圖形……

如果我們只是在腦子想象的話存在兩個(gè)缺點(diǎn)：一則是無法將問題具像化，二則是容易忽略細(xì)節(jié)，在思維上限制自己。

這里我們以卡片的頭像設(shè)計(jì)為例進(jìn)行圖形細(xì)節(jié)的調(diào)整，三種卡片的形式都是相同的，我們通過對頭像框圖形細(xì)節(jié)上進(jìn)行添加圓角、改變線的弧度等細(xì)節(jié)進(jìn)行改變會發(fā)現(xiàn)，三者之間在不改變的布局的同時(shí)有著明顯的風(fēng)格變化。

大家可以仔細(xì)回憶優(yōu)秀的設(shè)計(jì)，能給大家?guī)砩羁逃洃浀亩际窃O(shè)計(jì)中那些驚人的細(xì)節(jié)，例如：著名產(chǎn)品設(shè)計(jì)師深澤直人先生設(shè)計(jì)的雨傘，只是在手柄頂部增加了一個(gè)凹槽的設(shè)計(jì)，方便人們在站立時(shí)掛靠購物袋，減少人們手提購物袋所帶了不適感，為人們?nèi)粘Ｙ徫锾峁┝藰O大的便利。

五、劃重點(diǎn)

我們再回顧一下一下剛才所講的內(nèi)容：

• 找參考是一件具有明確目的性的行為，在此之前我們需要深刻的了解“頁面”的構(gòu)成，明確自己的需求再去尋找。
• 在搜集素材的時(shí)候我們可以將“頁面”拆分成“模塊”，甚至是“設(shè)計(jì)組件”，縮小的搜索的范圍，避免只找同類型的設(shè)計(jì)作品。
• 我們可以通過拼接參考圖來審視頁面的整體風(fēng)格，并通過不同參考的混搭拼接為頁面設(shè)計(jì)創(chuàng)造更多可能性。
• 創(chuàng)意是：將既有的元素打破，拆解，增刪后，重新組合，以呈現(xiàn)新的風(fēng)貌，功能或是意圖。注重細(xì)節(jié)表達(dá)，而非“天翻地覆”的改變。
• 我們在借鑒修改細(xì)節(jié)的時(shí)候可以將所有細(xì)節(jié)點(diǎn)全部羅列出來，以便于將問題具像化和避免細(xì)節(jié)點(diǎn)的遺漏。

參考文獻(xiàn)：《最好的UI設(shè)計(jì)師》

本文由 @ 姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議