亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

首頁

UI 界面底部彈出框設(shè)計指南

博博

底部彈出框控件,在移動端設(shè)備上呈現(xiàn)出來的時候,對于設(shè)計師而言,是一個不小的挑戰(zhàn)。在小屏幕上設(shè)計這類控件,需要做合理的取舍。

底部彈出框是一種部分覆蓋式的控件,特別適合移動端設(shè)備,它適合呈現(xiàn)臨時但是重要的信息。

定義:底部彈出控件,或者說底部彈出框/表單,是固定在屏幕底部邊緣的控件,它提供貼合上下文環(huán)境的詳細信息,或者疊加于頁面之上的交互。

底部彈出框是一種漸進式的信息呈現(xiàn)方式,它們通常由用戶交互觸發(fā),提供額外的詳細信息,它們通常會遮蓋掉部分屏幕內(nèi)容,因此不適合顯示始終都很重要的信息。

另一方面,它適合用來呈現(xiàn)額外的信息,對上下文環(huán)境進行控制,或者兼顧兩者。底部彈出框的優(yōu)點在于,它無需跳轉(zhuǎn)到新的單獨頁面,讓用戶停留在當(dāng)前環(huán)境下進行交互,用戶不會失去交互和獲取信息的語境。

底部彈出框和其他的彈出框控件類似,然而和其他的彈出框相比,他保留了更強的信息可見性,因此用戶在和底部彈出框呈現(xiàn)的信息進行交互的時候,可能需要參考背景里的基礎(chǔ)信息,而兩者的呼應(yīng)也更加貼合用戶當(dāng)下的需求。

使用底部彈出框的一個常見的理由是,它們提高了移動端設(shè)備上用戶的交互可觸達性(也就是大家常說的,用戶更容易點擊到屏幕底部的內(nèi)容和控件)。不幸的是,在實際的測試當(dāng)中,由于用戶握持移動端設(shè)備的方式不同(單手、雙手以及握持位置上下差異),屏幕底部目前也不一定是最容易觸達的區(qū)域(屏幕中間一般才是用戶最容易點擊到的位置)。

模態(tài)和非模態(tài)底部彈出框
位于底部的彈出框可以是模態(tài)的,也可以是非模態(tài)的。

和經(jīng)典的模態(tài)控件設(shè)計類似,底部彈出框可以迫使用戶在采取其他交互之前,強制和底部彈出框交互,點擊其中的控件或者關(guān)閉它。即使背景的內(nèi)容可見,彈出框依然會阻止用戶與之進行交互。通常,在底部彈出框出現(xiàn)的時候,通常背景內(nèi)容會被半透明的疊加層蓋住,作為背景內(nèi)容「不可交互」的視覺標識。

高手總結(jié)!UI 界面底部彈出框設(shè)計指南

網(wǎng)絡(luò)管理工具 UniFi 的彈出框設(shè)計,當(dāng)用戶的手機未能正確連接到網(wǎng)絡(luò)上的時候,會彈出一個底部表單,背景內(nèi)容通常顯示的是一些可供識別的基本界面細節(jié),以及頁面骨架布局。用戶需要解決網(wǎng)絡(luò)問題,才能接入網(wǎng)絡(luò)顯示背景的內(nèi)容,因此這一交互是合理的。

非模態(tài)的底部彈出框則不同,它們位于頁面的底部,用戶可以和背景內(nèi)容進行交互,也能和彈出內(nèi)容交互。這個時候的底部彈出框控件適合呈現(xiàn)此時背景內(nèi)容相關(guān)的詳細信息。

高手總結(jié)!UI 界面底部彈出框設(shè)計指南

在 Google 地圖的 APP 當(dāng)中,非模態(tài)的底部彈出框會顯示和當(dāng)前選中地理區(qū)域相關(guān)的導(dǎo)航操作、圖片信息,同時,用戶可以和背景中的地圖進行交互,詳細了解大致的環(huán)境信息。

有一些底部彈出框是可以展開的。用戶可以通過點擊或者上滑彈出框,將其擴展為全屏模式(有時候是接近全屏)。通常,底部彈出框在最小化模式下,開始為非模態(tài),展開后變?yōu)槟B(tài)。

高手總結(jié)!UI 界面底部彈出框設(shè)計指南

Apple 播客:底部彈出框可以顯示當(dāng)前播放內(nèi)容的相關(guān)信息(左),可以點擊或者拖動它至完整全屏尺寸,而點擊或者向下滑動頂部的把手控件,則可以將其縮小折疊起來。

底部彈出框的可用性指南
在我們的研究當(dāng)中,我們觀察到用戶在使用底部彈出框的時候,遭遇的困難和使用別的彈出框的時候是類似的,這些通常是由以下原因造成的:

缺少明確的關(guān)閉底部彈出框的指引
多個底部彈出框界面疊加在一起
底層相關(guān)的背景內(nèi)容被模糊了
下面我們針對性地來解決一下這些問題。

允許使用「返回」按鈕來關(guān)閉底部彈出框
底部彈出框所存在的一個常見問題,就是它看起來像是一個普通的界面控件,尤其當(dāng)他們擴展為全屏的時候,一部分用戶可能還沒意識到他們所處的界面,其實是擴展后的底部彈出框控件,而它通常是不遵循通常的交互邏輯的。用戶這個時候可能希望使用「后退」手勢或者按鈕來進行交互,但是用戶這個時候點擊可能是不會得到預(yù)期中的反饋。

因此,在用戶歷程當(dāng)中,當(dāng)頁面當(dāng)中出現(xiàn)底部彈出框控件的時候,整個流程的交互模式可能會因此被破壞。但是,如果讓底部彈出框控件支持「后退」的按鈕和手勢,則可以規(guī)避這一問題,讓用戶無縫回到上一界面。

在控件中包含「關(guān)閉」按鈕
盡管絕大多數(shù)的底部彈出框可以通過向下滑動,或者點擊頂部手柄來關(guān)閉,但是這個組件本身就很容易被忽略。此外,還有一部分用戶壓根就不知道這個功能。而且,垂直滑動關(guān)閉本身就具備某種模糊性,在交互過程中,用戶可能會關(guān)閉面板,也可能不小心打開通知欄,或者打開手機的控制中心等。

Pocket 的底部彈出框控件非常高,需要向下滑動才能關(guān)閉,而因為控件的手柄位置在操作的時候很容易打開手機的通知欄或控制中心。即使用戶從正確的位置觸發(fā)關(guān)閉控件的手柄,也可能需要多次嘗試才能真正關(guān)閉這一面板。這種靈活性挑戰(zhàn)對于操作精度要求過高,對于多數(shù)用戶而言都是挑戰(zhàn)。

為了確保用戶可以快速關(guān)閉底部彈出框控件,最好在控件內(nèi)添加常見的「關(guān)閉」按鈕,或者「X」按鈕。我們建議將這個按鈕放置在在底部彈出框的右上方之類的位置,使用這一按鈕的另外一個好處是方便有視力障礙的用戶,使用屏幕閱讀器來關(guān)閉它。

高手總結(jié)!UI 界面底部彈出框設(shè)計指南

蘋果的備忘錄當(dāng)中的底部彈出框控件,就使用了「X」按鈕來方便用戶關(guān)閉它。

不要將多個底部彈出框堆疊起來
當(dāng) APP 內(nèi)將多個彈出框堆疊起來的時候,最大的麻煩就出現(xiàn)了。

當(dāng)多個底部彈出框堆疊在一起的時候,用戶不可避免會開始迷惑自己到底處于流程的哪個位置,并且可能還需要了解到底哪個是第一個彈出框,而哪個是最后一個。就像下面的案例。

我們強烈建議不要使用底部彈出框控件來替代用戶流程中應(yīng)有的頁面。底部彈出框是一個臨時的 UI 控件,它并不是穩(wěn)定的位置,它的存在旨在打斷用戶流程,告知用戶重要的信息和重要的操作,它本身并不是帶來愉悅感的「快樂路徑」。

高手總結(jié)!UI 界面底部彈出框設(shè)計指南

沃爾瑪?shù)?APP 當(dāng)中,產(chǎn)品詳情頁是用底部彈出框控件來承載的,而非單獨的頁面,而其中任何一個鏈接都會觸發(fā)另外一個底部彈出框,比如用戶評價。而用戶想要關(guān)閉退出則需要一層一層關(guān)閉。而頂上的返回和關(guān)閉按鈕兩者也同樣可能會讓人迷惑,有時候是后退,有時候是直接關(guān)閉彈出框,交互過程中可能會超出用戶原有的預(yù)期。

使用底部彈出框承載簡短交互
最后,當(dāng)用戶可能會花費大量的時間查看底部彈出框所承載的信息時,我們建議不要使用底部彈出框來承載這類信息。它本質(zhì)上是一個瞬間狀態(tài)下的 UI 控件,快速交互是它存在的意義,而非承載復(fù)雜的內(nèi)容。

高手總結(jié)!UI 界面底部彈出框設(shè)計指南

這個名為 Soundbrenner 的 APP 會在頁面「1」 的 Learn 中打開「2」中的音樂教學(xué)列表,選擇特定課程時,會以底部彈出框的方式打開詳細課程信息,隨后,向下滾動「3」的時候,會意外將用戶帶回主頁「4」。這個 APP 的問題和之前沃爾瑪?shù)那闆r類似,存在多個底部彈出框交疊的問題。

總結(jié)
底部彈出框控件在 UI 設(shè)計當(dāng)中其實比較常見,它需要在保持上下文環(huán)境的情況下,提供額外的關(guān)鍵交互和信息說明,但是它不應(yīng)該承載復(fù)雜的交互和過多的內(nèi)容。

作者:陳子木
來源:優(yōu)設(shè)

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。

彈窗/抽屜使用指南

博博

一、什么是彈窗?
彈窗是在保留當(dāng)前頁面狀態(tài)的情況下,告知用戶并承載相關(guān)操作。

思考:彈窗里面哪些構(gòu)成原件可以根據(jù)業(yè)務(wù)屬性可以有可以沒有呢?
答案:標題區(qū)和操作區(qū)。

二、彈窗的規(guī)范如何定義?

1、定義彈窗的大小規(guī)范
彈窗的的大小有兩種定義方式。一種是固定大小,一種是自定義大小。需要根據(jù)自己的業(yè)務(wù)場景二選一。

彈窗寬度一般定義為三種。分別為560px,720px,960px,都是8的倍數(shù)方便記憶。尺寸并不是定死的,可以根據(jù)自身業(yè)務(wù)場景調(diào)節(jié)。

彈框固定高度會有一個最小高度200px,一個最大高度560px。在其之間的高度是由內(nèi)容區(qū)的內(nèi)容決定,超過最大高度560px時出滾動條。

彈窗自定義高度,只定義最大高度,隨著頁面拉升縮小,彈窗邊距不變。

2、定義彈窗內(nèi)容規(guī)范
定義:標題欄操作欄高度,內(nèi)容區(qū)邊距。

3、彈窗類型
彈框類型是根據(jù)使用場景區(qū)分提示彈窗,自定義彈窗兩種

彈窗優(yōu)點:沒有跳出父級頁面,彈窗任務(wù)完成后仍然會留在父頁面進行操作,減少用戶操作中步驟體感
彈窗缺點:信息承載量少,信息內(nèi)容過多的時候會出現(xiàn)上下左右滾動條,彈窗會降低用戶操作效率

三、彈窗使用規(guī)則是什么?

1、不超過兩種操作選項
假如承載的操作項比較多,建議新跳轉(zhuǎn)一個落地頁。

2、多步驟操作,選擇用頁面承載

3、盡量避免彈窗疊彈窗
第一個彈窗的內(nèi)容考慮用頁面承載或者第二個彈窗是否可以用氣泡或者下拉來承載。
假設(shè)一定要疊,二級彈窗的復(fù)雜度要低于一級彈窗,滿足形式上的平衡,遵循從大到小的邏輯或者是覆蓋上級,完成任務(wù)后點“返回”返回。

四、什么是抽屜?和彈窗相比優(yōu)缺點是什么?
抽屜是信息承載量和頁面比肩,又兼具彈窗的優(yōu)點。

作者:鯤sky
來源:站酷

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。

B端-表單設(shè)計指南

博博

一、什么是表單頁

1.1表單頁滿足的核心場景
1、采集/錄入數(shù)據(jù)信息。2、編輯數(shù)據(jù)信息。3、特殊的條件設(shè)置。后臺產(chǎn)品的本質(zhì)是針對數(shù)據(jù)的增、刪、改、查。而增、改、查都可以用表單完成。

1.2常見的應(yīng)用場景
OA系統(tǒng)里面的請假申請,報銷申請,錄入員工,新建會議。教育類的創(chuàng)建課程。HRM系統(tǒng)里面發(fā)布職位以及物聯(lián)網(wǎng)管理系統(tǒng)新建設(shè)備等等。

二、表單頁設(shè)計原則

2.1明確
用戶快速定位重要信息和目標選項同時文案和組件能夠準確傳達相應(yīng)含義

2.2高效
整體表單排布有合理的交互形式;科學(xué)的信息布局和組織形式;盡可能“少操作一步”用戶在面對50和表單和500個表單的心理壓力是不一樣的。

2.3安全
操作前:提示和防錯。
操作中:實時反饋與糾錯
操作后:合理的保存、清空、取消、撤銷機制。

三、表單的構(gòu)成
表單通常由表單標簽、表單域、提示提示、操作按鈕四部分構(gòu)成。

3.1表單標簽

左標簽
優(yōu)點:表意明確,節(jié)約縱向空間,多用于web端
缺點:不太適用于移動端等狹長空間

頂標簽
優(yōu)點:對齊舒適,節(jié)約橫向空間,多用于移動端及英文場景下。
缺點:縱向空間利用率不高

行內(nèi)標簽
優(yōu)點:最節(jié)省空間,多用于注冊登錄
缺點:輸入狀態(tài)標簽消失,用戶陷入迷茫

左對齊標簽
視線從標簽移動到表單域時間為500ms,這比右對齊標簽所用的時間長的多,所以更適合閱讀,用于詳情的陳列。
特點:閱讀效率高,操作效率較低;

右對齊標簽
視覺動線參差不齊,不適合高效閱讀,但適合高效操作,更適合表單填寫。
特點:閱讀效率不高,標簽指向明確,操作效率高

3.2表單域

如何定義輸入框/選擇框大小?
步驟一:根據(jù)業(yè)務(wù)已經(jīng)有的字段長度定義4-5種寬度規(guī)范,建議寬度可以是8或者是40的倍數(shù)。

步驟二:根據(jù)你要搭建的表單,選用合適的規(guī)范,長度與輸入預(yù)期成正比。有人會說排出來的表單左邊沒對齊,右邊也沒對齊,其實這就是B端產(chǎn)品特征那就是是好用大于好看,就要給用戶一種心智那就是給你的這個長度那就是要輸入一個這么長的內(nèi)容。

3.3提示信息

避免“正確的廢話”:給不到用戶任何的幫助還增加了用戶的閱讀成本。

提示信息用哪種展示方式?

3.4操作按鈕
按鈕常見位置:一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
按鈕閱讀順序:按鈕出現(xiàn)頁面右上角或右下角時,閱讀順序是從右往左,這符合pc端操作習(xí)慣以及人閱讀習(xí)慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時,閱讀順序為從左往右,這符合人的填寫順序從上往下,從左往右。

底部按鈕右對齊:一般用在彈框,因為彈框頁面比較小,右對齊比較符合操作習(xí)慣。
底部按鈕居中:一般用在頁面中,因為右下角操作距離會有點遠,所以表單用頁面承載的話按鈕建議居中。

3.5字體和間距規(guī)范
表單中字體全部統(tǒng)一采用14px。表單上下間距一般有三種,1.內(nèi)容與內(nèi)容間距為24px。2.內(nèi)容與說明文案間距為4px。3.內(nèi)容與子內(nèi)容間距以及及子內(nèi)容之間的間距為8px。

四、表單交互

表單交互方式有四種。1.原位編輯;2.氣泡卡片;3.彈窗/抽屜;4.頁面跳轉(zhuǎn)。

原位編輯
編輯內(nèi)容即為展示內(nèi)容,容量低于5個時使用。

氣泡卡片
設(shè)置項與看板內(nèi)容緊密相關(guān)時使用氣泡卡片,建議設(shè)置項低于5個。

彈窗/抽屜
設(shè)置項與看板內(nèi)容可以有關(guān)聯(lián)也不可以沒有,大于三個以上的錄入項使用。

如果錄入項較多,用彈框承載出現(xiàn)翻頁的情況下可考慮使用抽屜。

頁面跳轉(zhuǎn)如果容量超出了彈框/抽屜的承載量并且錄入項與看板沒有那么強的關(guān)聯(lián)性可采用頁面跳轉(zhuǎn)的方式。
五、頁面布局

頁面布局方式有四種。1.分組;2.錨點定位;3.標簽頁;4.分步驟

5.1分組

5.1.1標題分組
設(shè)置項超過7個;彼此間的關(guān)聯(lián)性較弱且可以分類去歸納

5.1.2卡片分組有多個設(shè)置項,多個分類;彼此之間的關(guān)聯(lián)性更弱,分類明確

5.2錨點定位
有多個分類的情況可通過錨點定位迅速找到相關(guān)信息

5.3標簽頁
彼此之間沒有特定的相關(guān)性,可以獨立設(shè)置。每個設(shè)置包含了多個錄入項且使用了標題分組。

小結(jié)當(dāng)錄入項少于7個時使用基礎(chǔ)布局;當(dāng)錄入項在7-15個時可采用標題分組,卡片分組、錨點定位布局;當(dāng)錄入項大于15個時需采用標簽頁布局。
5.4分步驟
利用步驟條將大型,復(fù)雜任務(wù)拆解為多個部分,并按照相關(guān)性分組。

建議3種分組依據(jù)1.采用必填項劃分,把必填的選項分在一起;2.采用相關(guān)性劃分;3.以操作成本劃分。把好填的簡單的表單放在前面,復(fù)雜的放在后面。

六、提升表單易用性
提升表單易用性方式有5種。1.信息降噪;2.清晰易讀;3.高效智能;4.防錯糾錯;5.所見即所得

6.1信息降噪
場景一:當(dāng)表單中大多數(shù)都是必填只有極少數(shù)非必填時

場景二:表單項非必填項比較多,可將低頻的非必填項收起

6.2視覺清晰
場景一:盡量采用單列布局,視覺動線流暢,不容易遺漏信息;按enter鍵換行。

場景二:如果出于業(yè)務(wù)方需要,必須在橫向添加內(nèi)容,那最好有一定的分組依據(jù)。但這樣就不應(yīng)該出現(xiàn)豎向分組,以免遺漏信息。

6.3高效智能

6.3.1根據(jù)上下文信息可以自動獲取的,無需用戶再次填寫。
例如根據(jù)手機號帶出用戶姓名;根據(jù)地址帶出郵政編碼;根據(jù)身份信息帶出生日。

6.3.2提供合適的“默認項”。
例如根據(jù)行業(yè)現(xiàn)狀提供常規(guī)的比例分配;根據(jù)定位把地區(qū)做默認的填充。

6.3.3提供搜索、聯(lián)想,自動顯示匹配的信息
用戶在進行輸入等操作時可以提供智能輔助,例如表單填寫時對需要錄入信息的區(qū)域提供輔助提示,通過自動補全或聯(lián)想詞來幫助用戶快速錄入信息,在保持用戶的操作自由度的情況下提效。

6.3.4 OCR識別文件內(nèi)容
對于一些標準證件信息的錄入,可以通過OCR識別文件內(nèi)容。當(dāng)用戶上傳圖片后,運用圖像識別技術(shù)提取關(guān)鍵信息并自動填入結(jié)果。

6.4防錯糾錯

6.4.1對于長數(shù)字,四位一空格,用來分段
例如輸入銀行卡號;充值場景下輸入手機號等

6.4.2為用戶封閉不正確道路
將超出時間選擇范圍的日期置灰。電話號、身份證錄入時只允許輸入數(shù)字同時設(shè)置字數(shù)上限。

6.4.3告訴用戶哪里錯了,而非簡單粗暴的錯誤提示

6.5所見即所得
表單頁對填寫的物料內(nèi)容進行映射,展示真實效果預(yù)覽,降低用戶心理的不確定性。適合對移動端、小程序、H5頁面的設(shè)置。

七、體驗衡量指標
體驗衡量指標有4種。1.任務(wù)完成率;2.任務(wù)完成時長;3.必填項目數(shù);4.易用度評分

7.1任務(wù)完成率

7.2任務(wù)完成時長

7.3必填項目數(shù)
結(jié)合業(yè)務(wù)場景給出最適合的必填項設(shè)定,提高用戶填寫效率。

7.4易用度評分(用戶完成某項任務(wù)的難易程度)
易用度可通過調(diào)研問卷和評分量表獲取。

作者:鯤sky
來源:站酷

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。

如何提升ui設(shè)計能力

資深UI設(shè)計者

作者:大啵少女
鏈接:https://www.zhihu.com/question/454091157/answer/1850120473
來源:知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

一、了解自己

1.我有什么優(yōu)勢:第一步一定是了解自己的優(yōu)勢,哪怕是一點技能或見識,要把優(yōu)勢變成更優(yōu)勢,一定要突出自己的優(yōu)勢,掩蓋劣勢。

2.我想要什么:這就是目標,例如3年內(nèi)我想成為專家,要升到P8,又或者3年內(nèi)我要成為管理者。把這些都一一記錄下來,逐一去做分析怎樣才可以達到目的。

3.我要怎么做:接下來就是要規(guī)劃自己。短可以計劃三五天,長則可以一兩年,把自己的計劃寫下來。然后按著 STAR 原則:Situation(情景),Task(任務(wù)),Action(行動),Result (結(jié)果)去執(zhí)行。

二、了解行業(yè)趨勢同樣是設(shè)計師,一個在短視頻行業(yè),一個在傳統(tǒng)行業(yè),最簡單的來說,收入差距就可想而知了。比如現(xiàn)在很多大廠已經(jīng)沒有純 UI 崗位了,你這個時候還義無反顧的深耕純 UI,那最后就會面臨失業(yè)的風(fēng)險。

三、打造個人 IP設(shè)計師都是獨一無二的,如果要問打造個人 IP 最佳開始時間,就是現(xiàn)在。

這個是很重要的,尤其是在高級崗位以后,你要在細分行業(yè)有一定的影響力,他是可以給你簡歷加很多分的。打造 IP 的行動項有很多,比如定期各大設(shè)計網(wǎng)站發(fā)表作品集、在信息類網(wǎng)站上發(fā)表自己的文章等等… 當(dāng)然了,這個是需要長期堅持的才有明顯收益的。你可以給自己制定一些獎勵計劃,激勵自己堅持輸出?;蛘哒乙恍┲就篮系脑O(shè)計師一起互相督促,去找那些比你厲害的人,慢慢超過他們。 行業(yè)內(nèi)深耕,不要蜻蜓點水:有的設(shè)計師覺得設(shè)計不分行業(yè),只要另外一個行業(yè)給的薪資足夠,就義無反顧的換行業(yè)。這樣長期下來,你在每個行業(yè)都只是蜻蜓點水,做不到足夠深入的了解行業(yè)相關(guān)知識,很難在一個高級職位上立住腳。只有充分具備了某個行業(yè)相關(guān)的知識背景,才能勝任更高級的職位,而不只是做一個只懂表面的設(shè)計師。四、提升自己

  1. 交互能力:不必多說,交互能力的重要性大家也都知道了。隨著行業(yè)的發(fā)展,現(xiàn)在很多公司的 UI 崗已經(jīng)不是單純的 UI 崗了,更多的是一種多元化的職位,交互能力是必不可缺的一種能力。

  2. 眼界:對于設(shè)計師來說,眼界決定高度,眼界低是做不出好設(shè)計的。想要提升設(shè)計能力,首先提高自己的眼界。多看、多看、多看……

  3. 審美能力:這個也是設(shè)計師的基本功,你要能看出別人作品的好與壞。練習(xí)方法就是多看多思考,多去參加一些設(shè)計展。

  4. 視覺表現(xiàn)力:創(chuàng)意、軟件技能:作為設(shè)計師,視覺表現(xiàn)力是最基礎(chǔ)的,也是最重要的。這里我把它分為兩個方面:創(chuàng)意和軟件技能。創(chuàng)意:設(shè)計重在想法和創(chuàng)意,且要不斷的通過學(xué)習(xí)去給自己的大腦輸入靈感。讓大腦一直處于活躍狀態(tài);軟件技能:一切的設(shè)計實現(xiàn)都要由軟件來實現(xiàn)。在自己時間允許的情況下,多學(xué)習(xí)一些軟件技能,現(xiàn)在軟件更新非常之快,前些年還用 PS / AI 來做界面呢,現(xiàn)在你還會用嗎?

  5. 產(chǎn)品把控力產(chǎn)品:一是對設(shè)計方案的設(shè)計把控,保證設(shè)計效果做到最好;二是對設(shè)計進度的把控,按時把控設(shè)計方案的上線;三是對實際開發(fā)結(jié)果的把控,保證上線后的設(shè)計還原度最大化。

  6. 溝通演講能力:設(shè)計師有一個好的溝通能力可以讓團隊更好的運作,提升工作效率。好的演講能力體現(xiàn)在設(shè)計評審的討論時,能夠更好的 hold 場面,讓整個溝通更加順暢。

  7. 管理能力:對內(nèi)-設(shè)計團隊的管理、人員的分工、任務(wù)分配、發(fā)展部門內(nèi)學(xué)習(xí)氛圍、與團隊人員溝通等等;對外-與其他部門的溝通協(xié)作、工作銜接,保證整個業(yè)務(wù)線的工作有條不紊的進行。

  8. 調(diào)研能力:調(diào)研能力可以考驗人的信息搜索、整理、分析的能力。他可以在設(shè)計前期找到設(shè)計的切入點,在設(shè)計中期提供有力的理論觀點。同時調(diào)研結(jié)果也可以作為評判自己產(chǎn)品評分的一個標準。如果沒做過設(shè)計調(diào)研的話,前期可以去看一些大神做的完整的調(diào)研報告,分析他們的邏輯、寫作手法等,需要多看多分析。

  9. 規(guī)范意識:近些年大家對規(guī)范意識都有了明顯的提升,規(guī)范可以提升工作效率以及降低溝通成本,同時也可以避免一些低級錯誤。如果你在團隊中沒有團隊意識的話,工作就會很吃力。

  10. 學(xué)習(xí)能力:畢業(yè)后,提升能力有兩個方面:從項目中學(xué)習(xí)和自學(xué)。從項目中學(xué)習(xí):每次做完項目及時做設(shè)計復(fù)盤,把從項目中學(xué)到的知識再熟悉一遍,做好知識沉淀;走過的坑再溫習(xí)一遍,避免之后再犯;自學(xué):這部分做的好與不好,幾年后的差距是非常之大的,每個人的工作時間基本是差不多的,區(qū)別大的就是業(yè)余時間。最怕的就是比你厲害的人比你還努力。

  11. 知識沉淀:俗話說好記性不如爛筆頭。你有沒有看到一個好的東西趕緊保存下來的習(xí)慣,但是從來也不看?這是大部分人的通病,覺得我保存了就是我學(xué)到了。知識沉淀指的是通過自己的整理,不斷對項目進行復(fù)盤,把自己真正需要的東西保存下來,用的時候可以即時拿出來查閱。找到自己的職業(yè)定位,想清楚自己要往哪個方向發(fā)展,不斷的學(xué)習(xí)技能點就對了,加油吧,設(shè)計人!

藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

讓用戶輸密碼的正確姿勢!簡化密碼設(shè)計的三個小秘籍

資深UI設(shè)計者

讓用戶輸密碼的正確姿勢!簡化密碼設(shè)計的三個小秘籍

2023-06-28 15:50北京北京蘭亭妙微科技有限公司官方帳號

隨著互聯(lián)網(wǎng)的普及和數(shù)字化時代的來臨,密碼的重要性不言而喻。然而,很多人在設(shè)計密碼時往往面臨記憶難題和安全性問題。為了幫助用戶設(shè)計更簡化且安全的密碼,本文將介紹三個小秘籍。

一、使用密碼管理工具

密碼管理工具是一種方便且安全的方式來管理和存儲密碼。它們通常提供加密的存儲空間,可以儲存各種賬戶的用戶名和密碼。用戶只需記住一個主密碼,就能夠訪問和管理所有其他密碼。這樣,用戶可以選擇更復(fù)雜、更安全的密碼,而不必擔(dān)心記憶的問題。此外,密碼管理工具通常還提供自動生成密碼的功能,確保密碼的隨機性和安全性。一些常見的密碼管理工具包括LastPass、1Password和Keepass等。

二、使用短語或句子作為密碼

傳統(tǒng)的密碼通常由字符、數(shù)字和特殊符號組成,很難記憶且容易被猜測。相比之下,使用短語或句子作為密碼可以更容易記住且更安全。選擇一個有意義的短語或句子,并將其轉(zhuǎn)化為密碼。例如,"ILoveToTravelTheWorld!",這個短語可以轉(zhuǎn)化為密碼"Ilv2ttw!"。這樣的密碼不僅容易記憶,而且由于包含了大小寫字母、數(shù)字和特殊符號,具備了一定的安全性。

三、使用多因素身份驗證

多因素身份驗證是一種提高賬戶安全性的重要方式。除了使用密碼外,多因素身份驗證要求用戶提供第二個驗證因素,如手機驗證碼、指紋識別或硬件安全密鑰等。這樣,即使密碼被泄露,黑客也無法輕易訪問賬戶。許多在線服務(wù)提供了多因素身份驗證選項,用戶應(yīng)該積極開啟并使用這個功能。

綜上所述,設(shè)計簡化且安全的密碼并不是一件困難的事情。通過使用密碼管理工具、使用短語或句子作為密碼以及使用多因素身份驗證,用戶可以更好地保護自己的賬戶安全。重要的是,用戶應(yīng)該時刻保持警惕,定期更換密碼,并避免在多個賬戶中使用相同的密碼,以確保個人信息的安全。

今日分享這篇文章是藍藍設(shè)計的原創(chuàng)文章,未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),添加vx藍小助ben_lanlan,報下信息,藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

打造動人心弦的網(wǎng)頁設(shè)計:巧用色彩來吸引配色弱的用戶

博博

本文將深入探討如何巧用色彩來打造動人心弦的網(wǎng)頁設(shè)計,并特別關(guān)注如何考慮配色弱的用戶。我們將介紹色彩對用戶體驗的影響,解釋配色弱的類型,提供一些適合配色弱用戶的配色方案,并分享一些巧妙利用色彩的技巧,以提高網(wǎng)頁設(shè)計的吸引力和可訪問性。

第一部分:色彩與用戶體驗1.1 色彩在網(wǎng)頁設(shè)計中的重要性1.2 色彩對用戶情感和認知的影響1.3 配色弱用戶的挑戰(zhàn)與需求

第二部分:了解配色弱類型2.1 紅綠色盲2.2 藍黃色盲2.3 全色盲和其他色覺異常條件

第三部分:配色方案適應(yīng)配色弱用戶3.1 使用對比度來增強可讀性3.2 避免過于依賴顏色的傳遞信息3.3 選擇易區(qū)分的色調(diào)和明亮度3.4 采用色相和亮度對比來強調(diào)重要元素

第四部分:巧妙利用色彩的技巧4.1 利用色彩心理學(xué)原理引導(dǎo)用戶行為4.2 創(chuàng)造溫暖或冷靜的氛圍與情感4.3 使用配色工具和調(diào)色板來提高效率4.4 探索大膽與獨特的顏色組合

第五部分:實踐與測試5.1 設(shè)計前期的研究與用戶調(diào)研5.2 可用性測試和反饋收集5.3 不斷優(yōu)化和改進設(shè)計

第六部分:案例研究與實際應(yīng)用6.1 成功案例分析:色彩對用戶體驗的影響6.2 實際應(yīng)用建議:考慮配色弱用戶的網(wǎng)頁設(shè)計實踐

第七部分:結(jié)論7.1 色彩對網(wǎng)頁設(shè)計的重要性再強調(diào)7.2 巧用色彩打造動人心弦的網(wǎng)頁設(shè)計的關(guān)鍵要點總結(jié)7.3 呼吁更加關(guān)注配色弱用戶并提高設(shè)計的可訪問性

本文將詳細介紹每個部分的內(nèi)容,包括配色原則、配色方案、色彩心理學(xué)原理和實際案例。通過遵循這些指導(dǎo)和運用巧妙的色彩技巧,你可以打造出動人心弦的網(wǎng)頁設(shè)計,并確保配色弱用戶也能夠享受到優(yōu)質(zhì)的用戶體驗。建議讀者在實踐過程中注重測試和反饋,不斷改進和完善設(shè)計。通過共同努力,我們可以為所有用戶提供更加可訪問且令人滿意的網(wǎng)頁設(shè)計體驗。

今日分享這篇文章是藍藍設(shè)計的原創(chuàng)文章,未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),添加vx藍小助ben_lanlan,報下信息,藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

通俗易懂!超全面的移動端尺寸基礎(chǔ)知識科普指南

博博

隨著移動設(shè)備的普及和移動應(yīng)用的快速發(fā)展,了解移動端尺寸基礎(chǔ)知識成為了設(shè)計師和開發(fā)人員的必備技能。本文將為您提供超全面的移動端尺寸基礎(chǔ)知識科普指南,幫助您更好地理解和應(yīng)用移動端尺寸。

一、移動設(shè)備屏幕尺寸概述

移動設(shè)備的屏幕尺寸通常以對角線長度來表示,單位為英寸。常見的移動設(shè)備屏幕尺寸包括4英寸、4.7英寸、5.5英寸等。屏幕尺寸的大小直接影響到用戶在設(shè)備上的視覺體驗和操作方式。

二、屏幕分辨率和像素密度

屏幕分辨率是指屏幕上的像素數(shù)量,通常以水平像素數(shù)和垂直像素數(shù)來表示,如1920x1080。像素密度是指每英寸上的像素數(shù)量,單位為PPI(Pixels Per Inch)。高分辨率和高像素密度的屏幕可以呈現(xiàn)更清晰、更細膩的圖像和文本。

三、常見的移動設(shè)備屏幕分辨率

不同的移動設(shè)備具有不同的屏幕分辨率,設(shè)計師和開發(fā)人員需要根據(jù)目標設(shè)備的屏幕分辨率來進行設(shè)計和開發(fā)。以下是一些常見的移動設(shè)備屏幕分辨率:

iPhone系列:

iPhone 4/4S:640x960

iPhone 5/5S/SE:640x1136

iPhone 6/6S/7/8:750x1334

iPhone 6 Plus/6S Plus/7 Plus/8 Plus:1080x1920

iPhone X/XS/11 Pro:1125x2436

iPhone XR/11:828x1792

iPhone XS Max/11 Pro Max:1242x2688

iPad系列:

iPad 2/Mini 1/Mini 2:768x1024

iPad 3/4/Air/Mini 3/Mini 4:1536x2048

iPad Air 2/Air 3/Pro 9.7:1536x2048

iPad Pro 10.5:1668x2224

iPad Pro 11:1668x2388

iPad Pro 12.9:2048x2732

Android手機:

720p:720x1280

1080p:1080x1920

2K:1440x2560

4K:2160x3840

Android平板:

7寸:600x1024

10寸:800x1280

四、適配和響應(yīng)式設(shè)計

移動設(shè)備的屏幕尺寸和分辨率各異,為了確保應(yīng)用在不同設(shè)備上的良好顯示,設(shè)計師和開發(fā)人員需要進行適配和響應(yīng)式設(shè)計。適配是指根據(jù)目標設(shè)備的屏幕尺寸和分辨率進行布局和元素調(diào)整,以適應(yīng)不同屏幕大小。響應(yīng)式設(shè)計是指根據(jù)屏幕尺寸和分辨率的變化,動態(tài)調(diào)整布局和元素大小,以提供更好的用戶體驗。

五、設(shè)計和開發(fā)工具

為了更高效地進行移動端設(shè)計和開發(fā),設(shè)計師和開發(fā)人員可以使用一些專業(yè)的工具。常見的移動端設(shè)計工具包括Adobe XD、Sketch、Figma等,這些工具提供了豐富的設(shè)計資源和交互功能。開發(fā)人員可以使用Android Studio、Xcode等工具進行應(yīng)用開發(fā)和調(diào)試。

六、設(shè)計原則和最佳實踐

在進行移動端設(shè)計時,設(shè)計師需要遵循一些設(shè)計原則和最佳實踐,以提供更好的用戶體驗。以下是一些常見的設(shè)計原則和最佳實踐:

簡潔明了的界面:精簡和清晰的界面設(shè)計可以提高用戶的易用性和操作效率。

易讀的文本和圖標:選擇合適的字體和字號,確保文本和圖標在不同屏幕上都能清晰可讀。

合理的交互設(shè)計:考慮用戶的習(xí)慣和操作方式,設(shè)計合理的交互和導(dǎo)航方式,提供良好的用戶體驗。

圖片和圖形的優(yōu)化:為了提高應(yīng)用的加載速度和性能,設(shè)計師需要對圖片和圖形進行優(yōu)化,包括壓縮、裁剪和使用矢量圖形等。

色彩和視覺效果的選擇:選擇合適的色彩和視覺效果,以提升應(yīng)用的整體美感和吸引力。

七、測試和優(yōu)化

在設(shè)計和開發(fā)完成后,測試和優(yōu)化是確保移動應(yīng)用質(zhì)量的重要環(huán)節(jié)。設(shè)計師和開發(fā)人員需要進行功能測試、兼容性測試和性能測試,以確保應(yīng)用在不同設(shè)備上的穩(wěn)定運行和良好性能。根據(jù)測試結(jié)果,進行相應(yīng)的優(yōu)化和調(diào)整,以提升應(yīng)用的用戶體驗和滿意度。

總結(jié):

移動端尺寸基礎(chǔ)知識對于設(shè)計師和開發(fā)人員來說是至關(guān)重要的。了解移動設(shè)備的屏幕尺寸、分辨率和像素密度,掌握適配和響應(yīng)式設(shè)計的原理,遵循設(shè)計原則和最佳實踐,以及進行測試和優(yōu)化,都能夠幫助我們設(shè)計出更好的移動應(yīng)用。希望本文提供的超全面的移動端尺寸基礎(chǔ)知識科普指南能夠?qū)δ兴鶐椭?,并在移動?yīng)用設(shè)計和開發(fā)中起到指導(dǎo)作用。

今日分享這篇文章是藍藍設(shè)計的原創(chuàng)文章,未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),添加vx藍小助ben_lanlan,報下信息,藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

UI設(shè)計的20個原則,明確你的設(shè)計思路

資深UI設(shè)計者

UI設(shè)計的概念側(cè)重在“交互”設(shè)計。優(yōu)秀的UI設(shè)計界面,不光是各種元素設(shè)計技巧的展現(xiàn),更重要的是能表現(xiàn)出用戶角度的完美“體驗感”。

1、明確你的用戶群

首先要明確一個方向:誰是你的用戶群?不同階層、不同年齡的用戶偏重的主題設(shè)定和設(shè)計元素都不相同,所以UI設(shè)計必須是有針對性地設(shè)計。

2、界面要清晰

清晰度是界面設(shè)計中,第一步也是最重要的工作。要想你設(shè)計的界面有效并被人喜歡,首先必須讓用戶能夠識別出它,讓用戶知道為什么會使用它。當(dāng)用戶使用時,要能夠預(yù)料到發(fā)生什么,并成功的與之交互,只有清晰的界面能夠吸引用戶不斷地重復(fù)使用。

3、交互性

界面的存在,促進了用戶和我們的世界之間的互動。優(yōu)秀的界面不但能夠讓我們做事有效率,還能夠激發(fā)、喚起和加強我們與這個世界的聯(lián)系。

4、保持用戶的注意力

在進行界面設(shè)計的時候,能夠吸引用戶的注意力是很關(guān)鍵的,所以千萬不要將你應(yīng)用的周圍設(shè)計得亂七八糟分散人的注意力,謹記屏幕整潔能夠吸引注意力的重要性。如果你非要顯示廣告,那么請在用戶閱讀完畢之后再顯示。尊重用戶的注意力,不僅讓用戶更快樂,而且你的廣告效果也會更佳。因此要想設(shè)計好的界面,保持用戶的注意力是先決條件。

5、讓用戶掌控界面

人都喜歡對事物完全掌控,而不考慮用戶感受的軟件往往不會給客戶掌控的感覺,迫使用戶不得不進入計劃外的交互,這會讓用戶很不舒服。保證界面處在用戶的掌控之中,讓用戶自己決定系統(tǒng)狀態(tài),稍加引導(dǎo),這樣會更容易達成目標。

6、每個屏幕需要一個主題

我們設(shè)計的每一個畫面都應(yīng)該有單一的主題,這樣不僅能夠讓用戶使用到它真正的價值,也使得上手容易,使用起來也更方便,在必要的時候更容易進行修改。如果一個屏幕支持兩個或兩個以上的主題,整個界面看起來會混亂不堪。正如文章應(yīng)該有一個單一的主題以及強有力的論點,我們的界面設(shè)計也應(yīng)該如此,這也是界面存在的理由。

7、區(qū)分動作主次

每個屏幕包含一個主要動作的同時,可以有多個次要動作,但盡量不要讓它們喧賓奪主!文章的存在是為了讓人們?nèi)ラ喿x它,所以在設(shè)計界面的時候,盡量減弱次要動作的視覺沖擊力,或者在主要動作完成之后再顯示出來。

8、自然過渡

界面的交互都是環(huán)環(huán)相扣的,所以設(shè)計時,要深思熟慮地考慮到交互的下一步??紤]到下一步的交互是怎樣的,并且通過設(shè)計將其實現(xiàn)。這就好比我們的日常談話,要為深入交談提供話由。當(dāng)用戶已經(jīng)完成該做的步驟,不要讓他們不知所措,給他們自然而然繼續(xù)下去的方法,以達成目標。

9、符合用戶期望

人總是對符合期望的行為最感舒適,這也是與人打交道的設(shè)計應(yīng)該做到的。在實踐中,這意味著用戶只要看一眼就可以知道接下來將會有什么的動作發(fā)生,如果它看上去像個按鈕,那么它就應(yīng)該具備按鈕的功能。設(shè)計師不應(yīng)該在基本的交互問題上耍小聰明,要在更高層次的問題上發(fā)揮創(chuàng)造力。

10、強烈的視覺層次感

如果要讓屏幕的視覺元素具有清晰的瀏覽次序,那么應(yīng)該通過強烈的視覺層次感來實現(xiàn)。也就是說,如果用戶每次都按照相同的順序瀏覽同樣的東西,視覺層次感不明顯的話,用戶不知道哪里才是目光應(yīng)當(dāng)停留的重點,最終只會讓用戶感到一團糟。在不斷變更設(shè)計的情況下,很難保持明確的層次關(guān)系,因為所有的元素層次關(guān)系都是相對的:如果所有的元素都突出顯示,最后就相當(dāng)于沒有重點可言。如果要添加一個需要特別突出的元素,為了再次實現(xiàn)明確的視覺層級,設(shè)計師可能需要重新考慮每一個元素的視覺重量。雖然多數(shù)人不會察覺到視覺層次,但這是增強設(shè)計的最簡單的方法。

11、減輕用戶的認知壓力

恰當(dāng)?shù)靥幚硪曈X元素能夠化繁為簡,幫助他人更加快速簡單地理解你的表達。用方位和方向上的組織可以自然地表現(xiàn)元素間的關(guān)系。恰如其分地組織內(nèi)容可以減輕用戶的認知負擔(dān),他們不必再琢磨元素間的關(guān)系,因為你已經(jīng)表現(xiàn)出來了。不要迫使用戶做出分辨,而是設(shè)計者用組織表現(xiàn)出來。

12、色彩不能決定一切

物體的色彩會隨光線改變而改變。艷陽高照與夕陽西沉?xí)r,我們看到的景物會有很大反差。換句話說,色彩很容易被環(huán)境改變,因此,設(shè)計的時候不要將色彩視為決定性因素。色彩可以醒目,作為引導(dǎo),但不應(yīng)該是做區(qū)別的唯一元素。在長篇閱讀或者長時間面對電腦屏幕的情況下,除了要強調(diào)的內(nèi)容,應(yīng)采用相對暗淡或柔和的背景色。當(dāng)然,視讀者而定,也可采用明亮的背景色。

13、恰當(dāng)?shù)恼宫F(xiàn)

每個屏幕只展現(xiàn)必需的內(nèi)容。如果用戶需要作出決定,則展現(xiàn)足夠的信息供其選擇,他們會到在下一屏找到所需細節(jié)。避免過度闡釋或把所有一次展現(xiàn),如果可能,將選擇放在下一屏以有步驟地展示信息。這會使你的界面交互更加清晰。

14、“幫助”選項

在理想的用戶界面,“幫助”選項是不必要出現(xiàn)的,因為用戶界面能夠有效地指引用戶學(xué)習(xí)。類似“下一步”實際上就是在上下文情境中內(nèi)嵌的“幫助”,并且只在用戶需要的時候出現(xiàn)在適當(dāng)?shù)奈恢?,其他時候都是隱藏的。設(shè)計者的任務(wù)是應(yīng)該確保用戶知道如何使用你提供的界面,讓用戶在界面中得到指導(dǎo)并學(xué)習(xí)。

15、引導(dǎo)狀態(tài)

用戶對一個界面的首次體驗是非常重要的,而這常常被設(shè)計師忽略。為了更好的幫助用戶快速適應(yīng)我們的設(shè)計,設(shè)計應(yīng)該處于零狀態(tài),也就是什么都沒有發(fā)生的狀態(tài)。但這個狀態(tài)不是一塊空白的畫布,它應(yīng)該能夠為用戶提供方向和指導(dǎo),以此來幫助用戶快速適應(yīng)設(shè)計。在初始狀態(tài)下的互動過程中會存在一些摩擦,一旦用戶了解了各種規(guī)則,那將會有很高的機會獲得成功。

16、解決看得到的問題

人們總是尋求各種方案去解決已經(jīng)存在的問題,而不是潛在的或者未來的問題。所以,不要為假設(shè)的問題設(shè)計界面,我們應(yīng)該觀察現(xiàn)有的行為和設(shè)計,解決現(xiàn)存的問題。這確實不是件能夠讓人興奮的事情,但卻是最有價值的事情,因為一旦你的用戶界面愈加完善,會有更多的用戶愿意使用你的界面。

17、多涉獵設(shè)計之外的知識

視覺、平面設(shè)計、排版、文案、信息結(jié)構(gòu)以及可視化,所有的這些知識領(lǐng)域都應(yīng)該是界面設(shè)計應(yīng)該包含的內(nèi)容,設(shè)計師對這些知識都應(yīng)該有所涉獵或者比較專長,要從中獲取許多值得學(xué)習(xí)的東西,以此來提高你的工作能力。

18、實用性

在設(shè)計領(lǐng)域,界面設(shè)計成功的要素就是有用戶使用它。雖然精美但用戶不會選擇使用的設(shè)計作品,也就是失敗的作品。因此,界面設(shè)計不僅僅是設(shè)計一個使用環(huán)境,還需要是創(chuàng)造一個值得使用的藝術(shù)品,它僅僅能夠滿足其設(shè)計者的虛榮心是不夠的,首先它必須要實用!

19、檢查錯誤

要盡可能檢查和清除程序中的錯誤和BUG,即便精心地設(shè)計了彈窗來做說明。為了更好的用戶體驗,不要出現(xiàn)讓用戶驚訝的結(jié)果。Beta測試是消減錯誤的最好方法。

20、簡約設(shè)計

簡約設(shè)計不僅僅是一種流行趨勢,從用戶體驗上看,簡約的界面可以去掉很多無關(guān)的干擾信息,使UI更具易用性。好的UI設(shè)計應(yīng)該具備強大的功能,但是畫面要簡約,擁擠的界面,不論功能多么強大,都會給用戶帶來不適感。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( m.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.teruid.com

存檔