介面設計精髓 視覺設計精品

2021-06-16 11:30:51 字數 2555 閱讀 4653

設計的本質就是操縱樣式和內容,設計的目的是為了交流

----------記

什麼是使用者介面設計?什麼是有效的使用者介面設計?使用者介面設計並不僅僅是考慮如何擺放按鈕和選單,更為重要的是考慮應用程式或裝置如何與使用者互動;

更多時候,還要考慮產品與多個使用者之間的互動。這就意味著,使用者介面設計不僅要做出好看的產品外觀,還要做出好用的產品。這不僅僅是調整一下按鈕的位置,給他們選選顏色,而是要為完成一項任務而選擇正確的工具。乙個特殊的介面是否需要使用按鈕?如果確實需要,那麼這些按鈕將完成什麼樣的工作?這個按鈕需要如何設計,才能讓使用者了解這個應用程式的工作方式,並且輕鬆達到使用者的目的。

對消費者而言介面就是產品

那麼什麼因素能成就乙個偉大的介面呢?

在我們開始著手設計介面之前,首先應該理解什麼樣的使用者介面才是出色的使用者介面,我們的設計要具備哪些品質才夠得上出色的介面設計。

所有優秀的介面大都具有下面八大特點

1.清晰:使用文字,流程圖,層級圖,圖示等元素,以使介面清晰

2.簡潔:減少頁面展示的內容,只出現必須的,通過減少,隱藏,分組,轉移的手段,使介面簡潔

3.熟悉:使用現實中的隱喻來展現

5.一致:整個程式保持一致的風格布局,顏色等

6.美學:好看,優美

7.高效:通過快捷鍵和良好的設計使使用者提高效率

8.容錯:良好的處理使用者的錯誤,提供處理措施

介面設計內容,總括一句話,是處理頁面所有元素屬性的呈現關係,也即下面的6大元素屬性的處理。

元素屬性

0,主題和視覺隱喻

1,布局(即版式)

.大小:注意元素的比例

.位置:元素的位置

.留白:注意元素的空間

2,顏色

.在淺色的背景上放置深色的物件或反之,介面中最好使用淺色背景(純度低或明亮度低的)

.不要用紅色和綠色區分重要元素,因為紅綠色盲

.對比色在字型是不要採用,如紅橙背景與藍色字型或反之等不要使用

.冷暖色要搭配使用

.元素與背景的對比要合適,不要太大或者太小

.要多採用不飽和色。

3,背景

.應用平緩的做背景

.漸變填充

.細緻的底紋填充

4,質感

.形狀:元素的外形,曲線,角度

.紋理:幾何底紋的應用,底紋平鋪的旋律

.光影.陰影

.畫素化

5,字型

.選用識別性強的字型,小字採用襯線字型,標題選用黑體或微軟雅黑

.調整字型的大小,顏色,位置,疏密,對齊,空間 6,

.謹慎使用,要選擇有關的

.多採用圖示

視覺法則

1,重複:重複使用同樣的顏色,角度,曲線的達到一致,旋律的效果

2.對比:

明暗 形狀  大小 方向 虛實 陰陽 

水平和垂直 方形和圓形  平滑和粗糙  封閉和開放  舊和新  陌生和熟悉   點和線  直線和角線  填充和外形

繪圖和攝影  有序和混亂

字型   顏色

3.對齊

4.鄰近:格式塔原理之接近性,臨近性

5.紋理

6.光影:漸變,外發光,內投影,高光,投影

7.層次

設計原理

1,網格

2.比例:**分割,三分法

3.平衡

4.並置

5.空白:可以構建平衡,定義比例,把元素集中起來以及把他們分開

6.張力

設計理念

1,大道至簡

2.避免裝飾

3.耳目一新

4.並置

ui標誌:凸凹,陰影,漸變

八大變換手段

色相              亮度             飽和度         底紋

形狀              大小            位置對齊     方向

製作有效介面的實用技術

使用空白來建立聯絡:用空白達到分組和層級關係

使用圓角來定義邊界

使用顏色來表達定義

用動畫來引導使用者的人注意力

用陰影或深背景來聚焦

強調核心動作:使用不同按鈕對比如確認和取消

用動詞做標籤

使用浮動控制項進行簡化和解構

動態擴充套件表單

標籤放入輸入框中

使用圖示是介面有吸引力

使用進度條

使用取消操作和還原操作

使用確認對話方塊

UI介面設計 介面設計流程

人類社會逐步向非物質社會邁進,網際網路資訊產業已經走入我們的生活。在這樣乙個非物質社會中,與軟體這些非物質產品再也不象過去那樣緊緊靠技術就能處於不敗之地。工業設計開始關注非物質產品。但是在國內依然普遍存在這樣乙個稱呼 美工 工 的意思就是沒有思想緊緊靠體力工作的人。這是乙個很愚昧的做法,愚昧在於稱呼...

介面設計定理

介面設計定理 模組分解原理探索 模組分解原理與三權分立 介面關係穩定原理探索 前面幾篇文章中講過模組分解原理和介面關係穩定原理,這篇文章中將使用模組分解原理和介面關係穩定原理來推導乙個重要的定理 介面設計定理。在講解介面設計定理前,先看一下robert c.martin著的 敏捷軟體開發 一書中提到...

介面設計定理

介面設計定理 模組分解原理探索 模組分解原理與三權分立 介面關係穩定原理探索 前面幾篇文章中講過模組分解原理和介面關係穩定原理,這篇文章中將使用模組分解原理和介面關係穩定原理來推導乙個重要的定理 介面設計定理。在講解介面設計定理前,先看一下robert c.martin著的 敏捷軟體開發 一書中提到...