設計理念如何指導設計落地

來自專欄菜心設計鋪

在做項目改版升級時，我們需要做兩件大事，一是提煉核心設計理念，二是由理念推動設計執行。

如果你想進階高級、專家或者帶團隊，這兩件事你必須要透徹的理解，並加以實踐。

今天，菜心希望用自己的設計經驗幫大家敲開一扇進階的大門！

敲開大門的步驟如下：

1.提取設計理念

2.推動設計落地

1.提取設計理念

1.1 設計理念是什麼？

簡單來說就是給你的設計提煉一個核心詞語，比較高逼格的，讓人一聽起來就「哇，好屌」這樣的感覺，當然也不能只是聽起來屌，還必須真實的依託於你的設計方向，如果只是浮於表面，後期是很難落地的。

舉個例子，是我自己帶隊經歷過的手機系統優化的項目（經過後期調整簡化的），設計理念叫做——破界！

後面我們講圍繞「破界」這個設計理念來展開討論。

1.2 設計理念如何提取？

你的理念需要綜合很多維度的深入研究與挖掘，例如品牌探索、用戶調研、產品賣點、目標人群甚至是競品和流行趨勢。

回到剛才那個「破界」的設計理念，怎麼來的？

它有三個維度的支撐點，產品賣點、目標用戶、競品與趨勢：

我來依次解釋一下：

產品賣點：當時全面屏的概念還沒有現在這麼爛大街，所以算是我們的一個主要賣點，而全面屏的無邊界、大視野就是「破界「理念最大的支撐。

目標用戶：我們的定位人群為個性、獨立的年輕人，而年輕人敢於突破界限的精神便是「破界」理念的第二個支撐點。

競品與趨勢：我們做了很多的競品與流行趨勢的分析，發現整個市場和行業都在一次又一次的完成技術突破與設計創新，而對於我們這樣一個具有創新精神的公司，突破原有瓶頸，大膽創新當然也是我們應該做的，也就是「破界」的第三個支撐。

我們在前期所做的一切搜集和研究其實都是為了提取以及支撐這個核心理念，這樣後期才會有明確的設計方向！

2.推動設計落地

有了理念，如何推動設計落地就是最關鍵的事情了。

其實說實話，在你提出這個理念前，尤其是項目把控者，應該已經有了大概的延展方向，甚至已經想好了一個明確的設計語言（風格）。

接下來，我從造型、色彩、布局、三個層面，來解密一下「破界」是如何推動設計落地的。

2.1 造型

在造型層，破界是指打破原有邊界束縛，比如：

這樣的做法首先是符合我們「破界」的設計理念，其次是讓結構更加簡潔清晰，也符合目前的流行趨勢——簡約扁平。

具體場景怎麼應用呢？

例如1.0的時候，我們的部分桌面圖標如下：

在剛剛分析的「破界」理念之下，我們將原有的複雜造型做減法，破開邊界，優化結果如下：

這就是「破界」在造型層面給予的設計指導。

2.2 色彩

在色彩層，破界是指打破顏色生硬的拼接，使用透明度漸變和疊加的設計技法來創造新穎的設計語言：

如何應用？

例如功能圖標的設計：

再例如聯繫人界面的字母形象：

都採用了這一套設計語言。

2.3 布局

在布局層，破界是指突破原有邊界使屏幕更加飽滿通透，這裡舉兩個例子：

一個是通過視覺引導的方法讓界面的邊界看起來更窄，如何做到呢？

例如在做設置頁面的時候，我們將1.0的頁面與競品進行對比：

可以發現，競品的視覺重心在圖標上，因為圖標比文字要重一些，而我們的視覺重心在文字上，因為文字比圖標重，這樣的話我們的邊框就會看起來很寬，而競品的就很窄：

在這樣的背景下，我們需要做的就是加重圖標視覺重量，我的方法就是讓圖標由線性變成面性，並且使用「破界」的設計語言：

這樣的話，由於視覺重心更加靠邊，界面邊界就會看起來細很多，整個頁面也就飽滿了：

以上是「破界」在布局層的第一處個應用。

第二處是將1.0分割式布局變成通屏式設計，破開分割界限，使整個屏幕渾然一起，飽滿通透：

例如在我們的天氣界面：

除了這些，「破界」還可以指導一些細節上的設計，例如去除列表之間的分割線，在當時也比較流行，總之可以找到很多既符合自己理念又符合流行趨勢的設計切入點，也只有這樣，我們所產出的設計才是有理有據，經得住考驗的！

總結

好了，這兩件事情就差不多講完了，在做項目的時候我們一定要時刻保持清晰的思路，知道自己在做什麼，以及做到了哪裡，實在做不下去就多問問別人建議和想法，阻力遲早會過去，而過去之後等待的就是你的進階與成長。

我希望大家可以通過我講的內容結合實際項目運用起來，取其精華去其糟粕，千萬不要「看了就過了」！

更多乾貨歡迎關注微信公眾號：菜心設計鋪

推薦閱讀：