起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識3步極速制定頁面設計風格
如何快速設定頁面設計風格的思路？本文筆者認為：在制定頁面風格之前，要按照模塊化來搜集素材，再合理借鑒成功案例的一些設計細節。
無論是概念稿還是實際落地的項目設計，我想最困難的就是前期的界面風格的定義。常常開始的時候雄心壯志要做出一個優秀的設計，但往往真正開始著手設計的時候卻卡在沒靈感、找不到合適的參考的階段，又或者做到某個模塊的時候被細節卡住，怎么調整細節都覺得與整個頁面的風格不搭。
面對這些問題，我分享一下我是如何快速設定頁面設計風格的思路。
目錄
一、常見的困難
二、頁面的構成
三、按照模塊化搜集素材
四、合理借鑒細節
五、劃重點
一、常見的困難
在開始之前我們先將常見的問題羅列出來，將問題點落實到細節，越細越好！因為往往從大的問題著手的話很容易得出空翻而無用的結論，而小的問題則更加實際且難度更小，最終我將通過出現的問題作為思路來思考解決方案。
我們可以先羅列出我們常遇到的問題，例如：
- 找不到合適的參考
- 沒靈感&沒想法
- 遇到一個模塊怎么設計都不理想
- 界面模塊之間風格不搭
- 自己找的字體不好看
- 配圖風格不統一
- Banner 運營設計把握不好
- 自己的無法把空間距
- ……
以上是我們可能出現的問題，當我們把這些問題羅列出來以后，可以先規劃優先級，以優先級最高的2～3問題作為當前的主要問題，以點擊破。
同樣我們如果已經列出問題以后，依然感覺無從下手，那可能這個問題的維度還是比較大，你可以進一步將問題拆解。例如：“找不到合適的參考”，可以拆解成“找不到頂部導航欄、Banner、金剛區、瓷片區、底部導航欄的參考等等……”直至拆解到你認為足夠簡單。
二、頁面的構成
1. 有目的的找參考
在眾多問題中大家可能最開始遇到的就是“沒靈感&找不到合適的參考”，在這里我希望大家不要急于立馬找參考，盲目的瀏覽設計網站。大家一開始找不到合適的參考的很大原因是不知道自己在做什么！這樣盲目的搜集參考很容易消耗大家有限的精力，挫敗自信心。
大家出現這個問題的原因很簡單，那就是大家不知道自己的真正想要什么，找什么樣子的參考。整個搜集參考的過程中沒有明確的“目的性”，把找參考變成了一種隨機行為，能不能找到合適的參考全靠運氣。這種隨機找參考的方法實不可取的。為了避免這種狀況的出現，我們必須深入了解頁面的結構構成。
2. 頁面的結構分析
頁面是由若干個模塊組成，同理也可以我們可以將一個頁面拆解成若干的模塊。
我們在做界面設計的時候也是在做一個由若干個模塊的集合體，回想在做設計時候相信大家都是按照模塊推動設計工作的。
例如：UC瀏覽器，我們通過將頁面拆分，可以看到頁面是由頂部狀態欄、搜索欄、標簽欄、圖標功能區、內容區、底部導航欄等若干個模塊組成。
為了能夠更好的理解頁面的構成，我可以將模塊進一步進行拆分各個小模塊，例如： UC 瀏覽器中的內容區域也可以拆分成各個小的內容信息模塊，模塊內我們還可以把把它們分成“單一標題信息”和“標題信息+圖片”兩種樣式。
我們再以其中的信息模塊為例進一步拆分，一個信息模塊是由“標題信息+圖片+注釋信息”三個元素組成。
通過上述對頁面的拆分，我們能更清楚的認識頁面的構成。我們再找參考的時候的目的性會更加明確，將原本一件目的性很松散的事情變得更加聚焦，提高搜集素材的效率。
三、按照模塊化搜集素材
1. 搜索參考的“兩大”誤區
當我們對自己所要設計頁面結構有了充分的了解，做到胸有成竹的時候我們就可以開始找參考了。
但是，大家在找參考的時候往往存在“兩大”誤區：
- 總是收集同類型的設計
- 一定要找一張可以完全直接借鑒的參考
有的同學在找參考的時候總是只找一個類型的參考，例如：在設計產品詳情頁的時候只找產品詳情頁類型的參考，找參考本身就是我們找尋靈感的一個過程。如果我們只是在范圍內尋找，這樣很容易把我們的思維禁錮。
為了避免禁錮我們的思維，所以在找參考我們要擴大自己的搜集范圍，并非只找特定的界面參考，即使在做詳情頁我們同樣可以參考其他類型的頁面。
例如：之前興盛的擬物化設計也是借鑒于生活中的各種場景和物件；
例如：攝影 APP 頻繁使用相機作為桌面圖標使用，即使大家都使用相機作為桌面圖標，但是細節依然存在千差萬別。
其次，大家在找參考的時候還存在另一個很大的誤區，就是一定要找一張可以完全直接借鑒的參考。
這種一步到位、一口吃成胖子的想法是不可取的，本身我們找參考的意義就是在于借鑒他人優秀的設計細節，找一張完全可以借鑒其實不是變成了“抄襲”。
在之前我們了解到的頁面的構成，這里我建議大家在找參考的時候按照模塊去搜集，從點出發，逐步解決問題，而不是一直停留在面上，思考一些空翻無法落實的想法。
2. 多模塊搜集參考
大家在找參考的時候可以先找一些目標性相對明確的模塊，例如：金剛區，形式同對統一，難度較低。
再其次，大家在搜索素材的時候可以同時搜集多模塊的參考，在瀏覽的諸多設計網站參考的時候廣泛借鑒。
多模塊找參考的好處在于：
- 在收集素材的時候我們可以兼顧多個模塊進行收集，能夠提高搜集素材的效率。
- 搜集的時候可以兼顧多個類型的設計風格，激發靈感，避免思維固化。
* 拼搭頁面
這里給大家介紹一個小技巧，當我們搜集到足夠多的頁面的時候，大家可以嘗試將各個模塊裁切出來拼搭到一起看一下整體的感覺。
這里我們可以把頁面想象成一個穿搭博主，在分享自己的傳達技巧之需要多次嘗試不用的服飾，不斷的調整細節，確定一套最優方案。
同理，這里我們也是反復審視自己找的參考是否符合我們的需求，風格上是否顯得突兀，如果出現問題我們可以及時調整。例如：下圖是筆者剪切各個參考拼接成的簡易頁面。
頁面拼搭組合的好處在于：可以在設計之前找一下大致的風格界定，避免一些符合個人喜好的組件設計在頁面中不符合整體設計的情況的出現，減少不必要的設計成本付出。拼搭組合的過程中能夠激發更多靈感，為頁面設計提供多種可能性，有力日常工作的提案。
四、合理借鑒細節
1. 創意的概念
面對借鑒可能有很多同學認為是直接照搬，這種行為缺乏自身的思考即使是無意的但也很容易被扣上“抄襲”的頭銜。
借鑒本身就是一個思考的過程，倘若沒有思考，那跟抄襲無疑。大家總是想原創，發揮自己的“創意”，但大家對創意的概念又一個清晰的認識嗎？
這里我們再次重申一下關于創意的概念：
創意是什么?
創意是要超越界限，跳離現有框架，重新定義事物和事物之間的關系。也就是找出事物間的相關性，或是相反特質，將既有的元素打破、拆解、增刪后，重新組合，以呈現新的風貌，功能或是意圖。（百科）
從上述概念中我們摘取重要的關鍵詞：“創意是將現有元素打破、拆解，增刪后，重新組合的過程”。我們可以理解為創意真正的關系是“破”“立”的過程，將現有元素“打破”，再通過拆解、增刪，重新組合（立），以新的形式或樣貌展現出來。
既然創意是打破現有重新組合的關系，那么我們在借鑒參考的時候也可以遵循同樣的方法，在借鑒的過程中我們可以先進行模仿、拆解，思考、組合、最后再進行突破以新的形式展現出來。
2. 創新的程度
當我們對創意的概念有了一定的了解，那么我們還要注意一點的是“創意的程度”，首先我們要反問自己一個問題：“創新一定是翻天覆地的嗎？”
如果真的是這樣，那么sketch、Adobe Illustrator 、AdobePhotoshop等軟件每次更新都做出“翻天覆地”的變化，那么我們每次都要面對一個陌生的操作界面，重新學習操作，增加了繁重的學習成本。
面對這種“翻天覆地”創新你會作何感想？即使對方有驚天的創意，但面對繁重的學習成本你也會心生厭惡。
反觀現在的 APP 都是高頻的微創新，除了大版本的迭代，日常的迭代更新都只進行局部功能的更新，幾乎不會出現翻天覆地的改變。
例如：淘寶的卡片設計的應用也并非是一下子全部完成設計更新，而是一點點去“試水”，逐步去在每個小的應用模塊去做更新。
例如：淘寶詳情頁中底部的加入購物車和立即購買的按鈕樣式由原來的矩形邊框到圓角按鈕的應用，只是細節的改動，并不影響用戶的操作習慣。
因為現在的界面的布局設計是用戶多年使用養成的習慣，貿然在界面布局上進行創新很容易適得其反，用戶的使用習慣已經養成多年，強行改掉只會引來用戶的反感，所以在細節上進行突破最大的優勢就在于成本低、風險小、收益大。
3. 細節的借鑒
優秀的設計作品是設計師對頁面中的每一個模塊和組件，都是經過設計師反復思考再進行精心設計排版的結果。
在當前頁面結構同質化嚴重的情況下，我們所要借鑒的正是優秀設計師對每一個模塊和組件細節的思考，其中的細節正是我們所要參考和學習的。
所以，在借鑒參考的時候我們要把我們的觀察點要逐步縮小，從借鑒“頁面布局”到借鑒“模塊”再到“組件細節”。
4. 如何借鑒細節
在借鑒的細節的時候，建議大家先對參考進行模仿和拆解，試著站在對方角度思考為什么要這樣設計，這樣設計的優點是什么？通過反復思考的過程去尋找突破口，尋找適合自己設計最優方案。
在做細節的修改的時候，可能許多同學一開始沒有明確的思路，這是正常的。
面對這種情況最簡單的方式就是“列清單”。我們可以先將可改動的細節點進行一一羅列，面對具體的細節，將問題具象化，逐步尋求解決方案。
以下是我羅列的一些細節點，大家可作參考。例如圖形、色彩、尺寸、圓角弧度、漸變、透明度、線的粗細、投影、位置、字體、字號、字重、裝飾圖形……
如果我們只是在腦子想象的話存在兩個缺點：一則是無法將問題具像化，二則是容易忽略細節，在思維上限制自己。
這里我們以卡片的頭像設計為例進行圖形細節的調整，三種卡片的形式都是相同的，我們通過對頭像框圖形細節上進行添加圓角、改變線的弧度等細節進行改變會發現，三者之間在不改變的布局的同時有著明顯的風格變化。
大家可以仔細回憶優秀的設計，能給大家帶來深刻記憶的都是設計中那些驚人的細節，例如：著名產品設計師深澤直人先生設計的雨傘，只是在手柄頂部增加了一個凹槽的設計，方便人們在站立時掛靠購物袋，減少人們手提購物袋所帶了不適感，為人們日常購物提供了極大的便利。
五、劃重點
我們再回顧一下一下剛才所講的內容：
- 找參考是一件具有明確目的性的行為，在此之前我們需要深刻的了解“頁面”的構成，明確自己的需求再去尋找。
- 在搜集素材的時候我們可以將“頁面”拆分成“模塊”，甚至是“設計組件”，縮小的搜索的范圍，避免只找同類型的設計作品。
- 我們可以通過拼接參考圖來審視頁面的整體風格，并通過不同參考的混搭拼接為頁面設計創造更多可能性。
- 創意是：將既有的元素打破，拆解，增刪后，重新組合，以呈現新的風貌，功能或是意圖。注重細節表達，而非“天翻地覆”的改變。
- 我們在借鑒修改細節的時候可以將所有細節點全部羅列出來，以便于將問題具像化和避免細節點的遺漏。
參考文獻：《最好的UI設計師》
本文由 @ 姜正 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
太棒了，為了給你評論點贊專門登錄了
道理都懂，但是看到被人總結出來的內容。還是很可貴。