莫著急... 美好的東西往往來的都比較慢!

08 Mar, 2020

APP開發中表現層設計的6個細節

APP的設計在表現層把控上,大家或多或少的都有過迷茫,當我們整體來看,仔細剖解就會發現大概有這個幾個部分:設計風格、排版、控件、圖片、色彩、字體。

  1. 設計風格:主要是界面設計的風格,常說的就是整體視覺的統一風格調性。

  2. 排版:排版,把文字、表格、圖形、圖片等進行合理的排列調整,使版面達到美觀的視覺效果。板塊的間距會給頁面的透氣感、空間感帶來影響。

  3. 控件:應用于計算機軟件方面,包括:程序標識、數據標識、命令選擇、模式信號或切換開關、狀態指示等。對于控件的比例協調性、形狀弧度等統一性、ICON風格一致性。

  4. 圖片:圖片的高清、風格等的把控統一、品牌調性的識別等。

  5. 色彩:色彩的風格、頁面整體色彩風格的統一、品牌風格一致。

  6. 字體:字體是信息表達的中心

一、設計風格

產品的設計風格其實就是跟產品的整體品牌形象保持一致,好的設計風格能在紅海市場的同質化情況下保持差異化的,做到別具一格,增加用戶對產品的識別度。

簡單的說幾種常見的實際風格:

1. 偽扁平

在繼承了扁平化設計的最大特點,以及優點的基礎上對于視覺設計加入輕微的擬物化效果,實現對于界面豐富達到情感共鳴。在當前的設計優點為:信息傳遞性好、界面美觀、開發成本小、情感共鳴。

APP開發中表現層設計的6個細節

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

這個設計風格是從16年開始至今一直比較經常使用的設計手法,不過隨著時間的轉化,設計風格逐漸的趨于年輕化,色彩漸變的明亮,輕度的投影。更加的細膩、朝氣、富有活力,在設計時一般兩個顏色漸變最大,在同一色調的基礎上調整。

APP開發中表現層設計的6個細節

3. 大的卡片布局設計,交替宮格、列表等

這個設計風格是IOS11更加流行起來,大的卡片設計比較高端,有大留白,良好的透氣感,節奏感,展示內容比較清晰用戶一目了然。當信息層級較多時則是輔助,與宮格列表一起多樣性的表現視覺設計風格。

APP開發中表現層設計的6個細節

APP開發中表現層設計的6個細節

APP開發中表現層設計的6個細節

二、排版

產品的排版設計關系著頁面的信息表達、節奏度和空間透氣感,在移動端應用中因載體較小。因此排版中心其實是讓用戶有個好的瀏覽體驗,以及你所要傳達的視覺重心在哪里傳遞給用戶,引導其完成產品體驗路徑。避免操作失誤、學習成本較大等問題。

1. 視覺的焦點

這個是整體的把控,先整體看頁面重心,在每個模塊看視覺重心,最后設計完檢查看有沒有影響到整體的視覺焦點。在總分總的設計方法下進行設計,表現頁面的視覺焦點。

APP開發中表現層設計的6個細節

2. 層次節奏

節奏型其實就是在頁面設計中呈現排版的節奏韻律感,不要波蕩起伏沒有節奏,那頁面自然就不好看了。常規見到的節奏大部分為3-5塊等,太多了也不好,當然視產品的信息程度決定的。有個簡單方法就是成倍數關系去設計,問題就迎刃而解了。

APP開發中表現層設計的6個細節

三、控件

對于控件的比例協調性、形狀弧度等統一性、ICON風格一致性。控件的一致性其實就是操作的一致性,在表現層連接產品時。

1. 比例弧度等統一性

比例其實就是在頁面不同位置同比例的保持統一,在視覺上給人統一的感覺,也是規范性的標志。

弧度形狀一致性,就是同等形狀下弧度肉眼視覺保持統一,這個統一有區別與物理統一,這個大家可以多練習就知道了。因為考慮的載體是手機,對象是用戶。

APP開發中表現層設計的6個細節

2. ICON風格一致性

統一的風格就是線性關系、斷點方式、輔助圖形、疊加方式、面性關系、弧度等的統一設計。具體的設計方法可以百度,網上有很多ICON設計的教學、規范等的資源,這個我就不具體介紹了。

APP開發中表現層設計的6個細節

APP開發中表現層設計的6個細節

APP開發中表現層設計的6個細節

四、圖片

這里的圖片主要是產品介紹等圖片,以及產品的輔助圖形等的設計方法。圖片一般要保持高清度而且要與畫面的風格保持一致性,以主色為主輔色、相鄰色系為輔助。圖片主要是可以保持氣氛渲染一致性、品牌拓展的一致性。

APP開發中表現層設計的6個細節

五、色彩

色彩的設計方法我們可以根據情緒版等進行把控,好的色彩會有好的表現力。

1. 情緒版

產品定位而來的情緒版設計中選取色彩,符合產品風格。

APP開發中表現層設計的6個細節

2. 比例關系

色彩比例關系6:3:1。

APP開發中表現層設計的6個細節

六、字體設計

字體主要是字體的大小、字重等的對比,突出層級關系,以及字體的風格。

1. 字體風格

襯線體、無襯線體,細分圓體、纖細的字體、厚重的字體等根據產品風格選取適合自己產品的字體。

APP開發中表現層設計的6個細節

2. 字體層級關系

根據比例重量等設計層級,例如18-24-30-40(說明文-正文小標題-大標題),顏色999-666-333-222不同的頁面風格層級不同根據自己的產層級設計,這樣字體也有自己的節奏調性。

APP開發中表現層設計的6個細節

以上是實際工作中的經驗總結,移動平臺、硬件設備、字體本身都在不斷變化,相應的設計方法也不會永遠一成不變,但總的原則是不變的,那就是讓用戶更友好的體驗。


  • 上一篇:拍一張照片,就能設計成一幅海報,這種技能要不要?
  • 下一篇:沒有了
  • 029-68787028,4000-613-001 & [email protected]

    西安市高新區灃惠南路與科技七路交匯處西南角, 西水·水岸陽光1號樓1-604號

    重庆时时彩是正规的吗?