2020-1-8 資深UI設(shè)計者
在我們設(shè)計UI有所疑惑時,可以參照以下標準做法。
這些做法并非一成不變—我只是列舉出這些方法,相信它們可以對你的日常UI設(shè)計工作有所幫助。
我們需要記住一點,設(shè)計其實就是跳出框框思考,這意味著,有些時候我們要打破陳規(guī)。所以,對我的建議也不要全盤接受。
圖中的像素值是密度像素值的三四倍
密度像素是屏幕上每一英寸所包含的像素個數(shù),簡稱PPI(Pixels Per Inch)。dp(density-independent pixel)是密度獨立像素,也寫作dip(也有device-independent pixel之說,設(shè)備獨立像素)。
設(shè)計界面時,建議大家基于設(shè)備的密度像素,而不是像素。這樣可以保證我們設(shè)計出的圖標素材比例適當(dāng),適應(yīng)不同尺寸的設(shè)備。
舉個例子,假如我們以密度獨立像素dp為單位,設(shè)計了一個 200 x 50的按鍵,那么這個按鍵在160ppi的屏幕上的尺寸是200 x 50像素,在320ppi的屏幕上的尺寸則為400 x 100像素,即原尺寸的兩倍。
因為有些屏幕的單位英寸的像素數(shù)量要比其他屏幕多,即ppi分辨率大,為了保證設(shè)計的圖標在不同分辨率的屏幕上都一樣大,設(shè)計師通常只是設(shè)計一個尺寸,導(dǎo)出2x、3x、4x的尺寸。
iPhone XS Max的屏幕尺寸是414 x 896。但這里的單位并不是像素,而是點的個數(shù)。論像素,則是1242 x 2688 px。知道了這些,給iPhone XS Max做設(shè)計時,我會以414 x 896個點為尺寸做設(shè)計,而后導(dǎo)出3x的圖標素材。
為什么UI設(shè)計的間距都是8的倍數(shù)而不是5的倍數(shù)呢?這里有一個簡單的解釋—如果一個設(shè)備是1.5x的分辨率,我們就沒法導(dǎo)出一個奇數(shù)。
另外,現(xiàn)代主流的屏幕尺寸都是以8為單位,以8的倍數(shù)做設(shè)計可以很好地適應(yīng)這些屏幕。
以8的倍數(shù)設(shè)計可以保證設(shè)計的一致性?;谶@種慣例,大家在進行設(shè)計工作時不用再猜測間距的數(shù)值,每個圖標都可以完美地與其他圖標對齊。
有關(guān)這個話題的更全面探討,請參考Bryn Jackson的文章《八像素網(wǎng)格設(shè)計》。
我們在設(shè)計的過程中應(yīng)該時常將自己抽離出來,審視界面中這些作為元素“容器”的線和框是否讓界面顯得過于雜亂,是否應(yīng)該予以保留。通常這些用以區(qū)隔界面內(nèi)容的線和框可以被邊界留白代替。
我們設(shè)計的大部分元素都存在于線框里,簡單清除掉這些“容器”可以讓界面看起來不那么擁擠—給元素更多呼吸的空間。
善用對比度不僅僅是為了讓用戶的注意力集中于重要的信息,更是為了使產(chǎn)品更容易訪問/使用。
設(shè)計產(chǎn)品就好比建設(shè)像圖書館、學(xué)校一類的公共場所,它的適用對象需要涵蓋每一個人,包括失明、色盲和視障用戶。
Web內(nèi)容無障礙指南(WCAG)要求文本或文本圖像的對比度至少為4.5:1。
為了保證設(shè)計達到該標準,我們可以下載Stark這款插件來檢查設(shè)計是否是無障礙的。
為什么有些圖標元素會被公認為標準?原因有多種。
假如你把一個按鈕設(shè)計成圓形,那么當(dāng)我們需要一個(字數(shù)較多的)“Start Free Trial”按鈕時,它就會不必要地占用界面中豎直方向上的空間。
另外,用戶期待的是與其他產(chǎn)品相似的體驗。如果你設(shè)計的網(wǎng)站、APP或軟件與用戶的既有習(xí)慣相悖,那么這樣的體驗是不直觀的,用戶很可能會因此受挫。
故而,在我們發(fā)揮創(chuàng)造力的時候,最好以現(xiàn)有的設(shè)計規(guī)范為基準和前提。不要重新設(shè)計輪子。
每一種顏色都有自己的視覺重量,我們可以通過借助顏色的視覺重量來建立內(nèi)容的視覺層次,用顏色的深淺來呈現(xiàn)內(nèi)容的重要性的層級。
善用顏色視覺重量的秘訣是,一個更為重要的元素,應(yīng)該有更重的視覺顏色,以便用戶快速瀏覽網(wǎng)頁,區(qū)分重要和不重要的信息。
大字號、粗體的信息會首先被用戶注意到,而后他們會關(guān)注其下的輔助性信息。
通常,設(shè)計界面會控制使用的字體數(shù)目,兩種不同的字體就應(yīng)足夠—這不是說你不能使用更多字體,只是你需要充分的理由。通常來講,僅用兩種字體會更好。
設(shè)計界面時要善用字體家族。
使用字體家族意味著我們可以使用同一字體的不同變體。字體家族的存在就是為了字體的不同變體可以更和諧地被放在一起,讓設(shè)計在保持多變性的同時兼顧一致性。
選擇字體時,盡量選擇那些有多種重量(如標準、適中、粗體、特粗)和樣式的(如長體、寬體、斜體)的字體家族(譯者注:作者此處所述選字體經(jīng)驗的適用對象主要為英文字體。)。這樣既會給設(shè)計留出可探索的空間,也不會增加額外的字體種類。
讓用戶去認知產(chǎn)品是產(chǎn)品設(shè)計中所推崇的,因為,我們?yōu)槭裁匆層脩粼谑褂玫倪^程中去思考呢?
結(jié)賬頁面、電子郵箱、搜索歷史、返回按鈕等都是很好的建立了用戶認知的例子。
在好的設(shè)計中,結(jié)賬頁面是不需要讓用戶記住他們所要購買的物品的。用戶應(yīng)該可以清楚地從界面中確認他要購買的物品,而非通過回憶來想起。
在Gmail郵箱中,我瞟一眼就可以知道哪些是已讀郵件,哪些是未讀郵件,這個過程不需要過腦子。同理,我登錄到自己的亞馬遜賬戶后,可以迅速地從上次購物時中斷的地方繼續(xù)開始購物—因為它顯示了我最近瀏覽過的物品。
設(shè)計時,應(yīng)讓元素、功能、選項明顯可見,最小化用戶的記憶負荷。用戶無需自己在操作的步驟中記住信息。系統(tǒng)的操作說明應(yīng)該在需要時很容易看到或查到。
—Nielson Norman Group(尼爾森諾曼集團,人機交互和用戶體驗咨詢公司,唐·諾曼是創(chuàng)始人之一)
作為用戶,速度和效率是最重要的。用戶使用一個應(yīng)用程序,是為了解決某個特定的問題。
我要速度。
— Ricky Bobby(電影《塔拉迪加之夜:瑞奇鮑比的民謠》主角、賽車手)
如果將一張支票通過手機存入銀行賬戶這個體驗是非常讓人享受的,那固然很好,但作為設(shè)計師,千萬不要讓你的創(chuàng)造力阻礙用戶實現(xiàn)他們的目標。
關(guān)于動畫和微交互的一條經(jīng)驗就是,如果某個體驗只是無謂地增加了時間,那么這不是在改善用戶體驗。
如果加入的動畫帶有目的性,則可以改善用戶體驗;但是如果增加的只是不必要的分散注意力的元素或用戶操作,那么用戶體驗不會變得更好。
Dribble上有很多著陸頁的設(shè)計—當(dāng)用戶向下滾動鼠標時,動畫隨之展開。通常,這些設(shè)計展現(xiàn)出過火的動畫效果,每個元素都在淡入淡出,動來動去,而幾乎不關(guān)注體驗本身。當(dāng)太多事情同時在界面上發(fā)生時,用戶很難知道到底哪些信息是應(yīng)該關(guān)注的,這等同于浪費用戶寶貴的時間。
這位Dribble用戶,非常抱歉把你揪了出來:/
無數(shù)研究表明,界面中動畫的最佳時間在200到500毫秒之間,這個數(shù)字是由大腦的特征決定的。任何短于100毫秒的動畫都是一晃而過,人眼根本無法識別;而超過一秒的動畫會帶給人無聊和延遲的感覺。
—《UX微動畫設(shè)計指南》
所以,如果你要在界面中使用動畫,那么給它一個明確的目的,并且不要讓用戶等待超過500毫秒。在2019年的今天,惹惱你的用戶只需要1毫秒。
每次我們想要增加額外的信息到界面中時,例如按鈕、文字、照片、動畫、插圖等等,它們就會跟相關(guān)的信息進行競爭。如果一頁上有太多東西,那么某些元素的重要程度就會被削減。
谷歌搜索首頁就是典范。這個設(shè)計將全部的注意力放在了搜索這個主要功能上,沒有把用戶淹沒在不必要的信息海洋里。
對不起了雅虎,在這必須把你當(dāng)做不好的案例展示
最后,分享給大家一句我最愛的設(shè)計箴言:
臻于完美之時,不是加無可加,而是減無可減。
文章來源:UXRen
藍藍設(shè)計的小編 http://tweetduck.com