如何優雅的定義 App 的介面設計

2021-08-28 01:38:52 字數 2534 閱讀 8942

使用者體驗設計的概念非常廣泛,包含了使用者、挖掘使用者潛在動機和實用性、視覺沒感體驗等等,通俗來講,如何讓你乙個產品給使用者很爽的感覺,其中包含的知識和方法都是使用者體驗的一部分。

1,擬定你的設計範圍

2,整理你的資訊架構

3,考慮資訊的不同狀態

4,考慮資訊的多樣性

5,考慮產品的視覺美感

下面還是用我們程式設計師客棧的例子來給大家參考:

以下我們的開發團隊開發過程中, jane對產品的使用者體驗分析,加上歡哥對於整體產品的視覺美感體驗設計,以下這張圖是我們的註冊登入介面,看到這張圖以後如果是你會怎麼重新設計它呢?

看起來不知道從**下手嗎?來看看我們是怎麼做的吧!

框定設計範圍

動手設計之前,我們會反問自己「我們可以設計的範圍在**?」,有些專案可以從前期調查開始挖掘需求、有些專案已經定下了商業目標得從互動設計上發揮……,每次設計都要先了解清楚這次設計可以發揮的限制在**,避免自己一頭熱最後設計出開發上來不及、無法融入現有產品的產品。

而在這次介面設計案例中,無法重新定義需求、無法定義使用者與產品的互動方式以及產品設計語言等等,我們能做的是最基礎的介面設計。在這個階段,我們的設計目標是要確保介面表達出適當及適合的資訊,讓使用者清楚理解最初介面互動的方式。

整理你的資訊構架

在拿起你的鉛筆開始畫介面之前,先思考你的介面上需要呈現什麼資訊。

首先是整理你的產品資訊構架(information architecture),也就是在你的產品中裡頭的資訊彼此的關連性、階層關係,進而去設計這些資訊以什麼方式組織呈現給使用者。

在我們的案例中,是乙個註冊登入找回密碼的基本功能設計,我們需要先思考每一張上架的**呈現哪些資訊,並且同時思考這些資訊彼此的關係。雖然這只是乙個簡單的功能設計,也可以把它分類出來,方便之後介面上設計。

但是以上最重要的兩點必須要知道,為什麼要知道這兩點呢?因為了解了需要呈現哪些資訊,你才知道介面上要放什麼資訊;了解了這些資訊的分類關係,你才知道資訊要怎麼放在介面上。

在介面上,我們會傾向會把同類的內容與互動元件放在一起,讓使用者更容易理解元素之間的關係。那為什麼放在一起會讓使用者更容易理解呢?那是因為在原因是在完形心理學裡頭有所謂的接近法則(law of proximity),如果兩個元素緊密地放在一起,人類會將這兩個東西建立關聯,即使是不相似的事物也可能因為距離相近,而在視覺上產生群組效果,比如說下圖左右兩邊都有圓形,但你不會把這兩個圓形當做同乙個群組的元素。

考慮資訊的不同狀態

這些狀態會隨著使用者的互動而變,並且也是需要呈現在介面上讓使用者看見,由這些狀態變化的資訊,使用者才能感受到自己與系統正在互動,並且理解自己的操作狀態。

考慮資訊的流動性

除了介面的不同狀態外,介面設計與平面設計的差別還有在於資訊是流動的,也就是介面上的資訊並不是固定長度的,比如說每個人的id名字長度不一樣、資訊敘述的長度也不一樣、剩下的倒數時間不一樣、評價數也是不一樣的,而這些不同長度的文字有可能會在畫面上與其他ui元素碰撞,例如:說底下這個購買介面,當商品名過長時會覆蓋到付款的按鈕。

這個問題有以下三種處理方式:

限制長度

限制長度可以分為輸入限制以及顯示限制,輸入限制是指使用者在輸入資訊時,限制他可以輸入的字元長度;顯示限制則是當首席資訊官度超過顯示範圍時,則隱藏過長的資訊,最常使用的是截斷資訊後加上刪節號(ellipsis)。

動態調整大小

根據不同的文字長度,在不失可讀性範圍內去動態縮小文字。讓文字根據長度自適應大小。

動態調整顯示形式

有些資訊有不只一種的表達方式,當資訊過長時可以使用比較簡短的表達方式,比如說november換成nov、1200換成1.2k、1分10秒換成70秒……等等。

對於介面上要呈現的資訊都思考過以後,你就可以在紙上打草圖或是使用axure、魔刀等原型工具畫出原型。

然後需要發揮你的美感以及對使用者美感度的認知。當草圖畫完,檢查確認後沒有問題後,設計師會像刷油漆一般畫出漂亮的視覺稿!

20190722 優雅的介面設計

哪些能夠落實到自己的 裡面?介面設計應該考慮哪些問題或者說考慮到哪些方面?你設計的介面,夠優雅嗎?在設計介面時,有很多因素要考慮 一 規範性建議 1.職責原則 在設計介面時,必須明確介面的職責,即介面型別,介面應解決什麼業務問題等,當前介面是解決什麼業務問題的?2.單一性原則 單一職責原則 在明確介...

APP介面設計規範 如何定義視覺規範

時間 2015 09 10 16 38 34 devstore 原文 墨刀 axure after effect 用來製作互動複雜的產品原型。第一階段 概念設計和原型設計 包括腦圖設計 線框圖的設計等等。第二階段 視覺定義階段。確定了使用哪些字型 顏色 布局 形狀等元素。主要頁面的布局與視覺風格需要...

app介面設計之signature簽名的php實現

1 首先說一句什麼是介面 介面簡單來說就是伺服器端用來返回給其他程式或者客戶端資料的橋梁 2 介面的作用 根據固定引數返回固定資料,比如客戶端傳a 1,那麼伺服器端返回a的姓名,客戶端傳a 2,伺服器端返回a的性別,而不會返回其他資料。3 signature簽名的作用 保證介面與資料的安全 4 to...