本文主要是從設(shè)計(jì)風(fēng)格、排版、控件、圖片、色彩、字體這六個(gè)部分來看看APP表現(xiàn)層設(shè)計(jì)方法，enjoy~

APP的設(shè)計(jì)在表現(xiàn)層把控上，大家或多或少的都有過迷茫，當(dāng)我們整體來看，仔細(xì)剖解就會發(fā)現(xiàn)大概有這個(gè)幾個(gè)部分：設(shè)計(jì)風(fēng)格、排版、控件、圖片、色彩、字體。

1. 設(shè)計(jì)風(fēng)格：主要是界面設(shè)計(jì)的風(fēng)格，常說的就是整體視覺的統(tǒng)一風(fēng)格調(diào)性。
2. 排版：排版，把文字、表格、圖形、圖片等進(jìn)行合理的排列調(diào)整，使版面達(dá)到美觀的視覺效果。板塊的間距會給頁面的透氣感、空間感帶來影響。
3. 控件：應(yīng)用于計(jì)算機(jī)軟件方面，包括:程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示等。對于控件的比例協(xié)調(diào)性、形狀弧度等統(tǒng)一性、ICON風(fēng)格一致性。
4. 圖片：圖片的高清、風(fēng)格等的把控統(tǒng)一、品牌調(diào)性的識別等。
5. 色彩：色彩的風(fēng)格、頁面整體色彩風(fēng)格的統(tǒng)一、品牌風(fēng)格一致。
6. 字體：字體是信息表達(dá)的中心

一、設(shè)計(jì)風(fēng)格

產(chǎn)品的設(shè)計(jì)風(fēng)格其實(shí)就是跟產(chǎn)品的整體品牌形象保持一致，好的設(shè)計(jì)風(fēng)格能在紅海市場的同質(zhì)化情況下保持差異化的，做到別具一格，增加用戶對產(chǎn)品的識別度。

簡單的說幾種常見的實(shí)際風(fēng)格：

1. 偽扁平

在繼承了扁平化設(shè)計(jì)的最大特點(diǎn)，以及優(yōu)點(diǎn)的基礎(chǔ)上對于視覺設(shè)計(jì)加入輕微的擬物化效果，實(shí)現(xiàn)對于界面豐富達(dá)到情感共鳴。在當(dāng)前的設(shè)計(jì)優(yōu)點(diǎn)為：信息傳遞性好、界面美觀、開發(fā)成本小、情感共鳴。

2. 明亮的漸變、彌散投影

這個(gè)設(shè)計(jì)風(fēng)格是從16年開始至今一直比較經(jīng)常使用的設(shè)計(jì)手法，不過隨著時(shí)間的轉(zhuǎn)化，設(shè)計(jì)風(fēng)格逐漸的趨于年輕化，色彩漸變的明亮，輕度的投影。更加的細(xì)膩、朝氣、富有活力，在設(shè)計(jì)時(shí)一般兩個(gè)顏色漸變最大，在同一色調(diào)的基礎(chǔ)上調(diào)整。

3. 大的卡片布局設(shè)計(jì)，交替宮格、列表等

這個(gè)設(shè)計(jì)風(fēng)格是IOS11更加流行起來，大的卡片設(shè)計(jì)比較高端，有大留白，良好的透氣感，節(jié)奏感，展示內(nèi)容比較清晰用戶一目了然。當(dāng)信息層級較多時(shí)則是輔助，與宮格列表一起多樣性的表現(xiàn)視覺設(shè)計(jì)風(fēng)格。

二、排版

產(chǎn)品的排版設(shè)計(jì)關(guān)系著頁面的信息表達(dá)、節(jié)奏度和空間透氣感，在移動(dòng)端應(yīng)用中因載體較小。因此排版中心其實(shí)是讓用戶有個(gè)好的瀏覽體驗(yàn)，以及你所要傳達(dá)的視覺重心在哪里傳遞給用戶，引導(dǎo)其完成產(chǎn)品體驗(yàn)路徑。避免操作失誤、學(xué)習(xí)成本較大等問題。

1. 視覺的焦點(diǎn)

這個(gè)是整體的把控，先整體看頁面重心，在每個(gè)模塊看視覺重心，最后設(shè)計(jì)完檢查看有沒有影響到整體的視覺焦點(diǎn)。在總分總的設(shè)計(jì)方法下進(jìn)行設(shè)計(jì)，表現(xiàn)頁面的視覺焦點(diǎn)。

2. 層次節(jié)奏

節(jié)奏型其實(shí)就是在頁面設(shè)計(jì)中呈現(xiàn)排版的節(jié)奏韻律感，不要波蕩起伏沒有節(jié)奏，那頁面自然就不好看了。常規(guī)見到的節(jié)奏大部分為3-5塊等，太多了也不好，當(dāng)然視產(chǎn)品的信息程度決定的。有個(gè)簡單方法就是成倍數(shù)關(guān)系去設(shè)計(jì)，問題就迎刃而解了。

三、控件

對于控件的比例協(xié)調(diào)性、形狀弧度等統(tǒng)一性、ICON風(fēng)格一致性。控件的一致性其實(shí)就是操作的一致性，在表現(xiàn)層連接產(chǎn)品時(shí)。

1. 比例弧度等統(tǒng)一性

比例其實(shí)就是在頁面不同位置同比例的保持統(tǒng)一，在視覺上給人統(tǒng)一的感覺，也是規(guī)范性的標(biāo)志。

弧度形狀一致性，就是同等形狀下弧度肉眼視覺保持統(tǒng)一，這個(gè)統(tǒng)一有區(qū)別與物理統(tǒng)一，這個(gè)大家可以多練習(xí)就知道了。因?yàn)榭紤]的載體是手機(jī)，對象是用戶。

2. ICON風(fēng)格一致性

統(tǒng)一的風(fēng)格就是線性關(guān)系、斷點(diǎn)方式、輔助圖形、疊加方式、面性關(guān)系、弧度等的統(tǒng)一設(shè)計(jì)。具體的設(shè)計(jì)方法可以百度，網(wǎng)上有很多ICON設(shè)計(jì)的教學(xué)、規(guī)范等的資源，這個(gè)我就不具體介紹了。

四、圖片

這里的圖片主要是產(chǎn)品介紹等圖片，以及產(chǎn)品的輔助圖形等的設(shè)計(jì)方法。圖片一般要保持高清度而且要與畫面的風(fēng)格保持一致性，以主色為主輔色、相鄰色系為輔助。圖片主要是可以保持氣氛渲染一致性、品牌拓展的一致性。

五、色彩

色彩的設(shè)計(jì)方法我們可以根據(jù)情緒版等進(jìn)行把控，好的色彩會有好的表現(xiàn)力。

1. 情緒版

產(chǎn)品定位而來的情緒版設(shè)計(jì)中選取色彩，符合產(chǎn)品風(fēng)格。

2. 比例關(guān)系

色彩比例關(guān)系6：3：1。

六、字體設(shè)計(jì)

字體主要是字體的大小、字重等的對比，突出層級關(guān)系，以及字體的風(fēng)格。

1. 字體風(fēng)格

襯線體、無襯線體，細(xì)分圓體、纖細(xì)的字體、厚重的字體等根據(jù)產(chǎn)品風(fēng)格選取適合自己產(chǎn)品的字體。

2. 字體層級關(guān)系

根據(jù)比例重量等設(shè)計(jì)層級，例如18-24-30-40（說明文-正文小標(biāo)題-大標(biāo)題），顏色999-666-333-222不同的頁面風(fēng)格層級不同根據(jù)自己的產(chǎn)層級設(shè)計(jì)，這樣字體也有自己的節(jié)奏調(diào)性。

以上是實(shí)際工作中的經(jīng)驗(yàn)總結(jié)，移動(dòng)平臺、硬件設(shè)備、字體本身都在不斷變化，相應(yīng)的設(shè)計(jì)方法也不會永遠(yuǎn)一成不變，但總的原則是不變的，那就是讓用戶更友好的體驗(yàn)。

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

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