從6個(gè)部分來看,APP表現(xiàn)層設(shè)計(jì)方法
本文主要是從設(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)格、排版、控件、圖片、色彩、字體。
- 設(shè)計(jì)風(fēng)格:主要是界面設(shè)計(jì)的風(fēng)格,常說的就是整體視覺的統(tǒng)一風(fēng)格調(diào)性。
- 排版:排版,把文字、表格、圖形、圖片等進(jìn)行合理的排列調(diào)整,使版面達(dá)到美觀的視覺效果。板塊的間距會給頁面的透氣感、空間感帶來影響。
- 控件:應(yīng)用于計(jì)算機(jī)軟件方面,包括:程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示等。對于控件的比例協(xié)調(diào)性、形狀弧度等統(tǒng)一性、ICON風(fēng)格一致性。
- 圖片:圖片的高清、風(fēng)格等的把控統(tǒng)一、品牌調(diào)性的識別等。
- 色彩:色彩的風(fēng)格、頁面整體色彩風(fēng)格的統(tǒng)一、品牌風(fēng)格一致。
- 字體:字體是信息表達(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é)議
色彩——比例關(guān)系——6:3:1 指的什么意思~
主色(6)-輔助色(3)-灰色輔助(1)