發(fā)布時間:2024-03-14 11:51:41 瀏覽量:138次
當(dāng)你在學(xué)習(xí)設(shè)計(jì)過程中有疑問時,不妨看看小編為你準(zhǔn)備的,在UI設(shè)計(jì)中要遵循的標(biāo)準(zhǔn)實(shí)踐法則列表。當(dāng)然,這些法則不是一成不變的,只是我們認(rèn)為可以在日常的UI設(shè)計(jì)工作中為你提供的一系列方法而已。
請記住,設(shè)計(jì)需要跳出固有的思維,這意味著你要打破規(guī)則。因此,這些經(jīng)驗(yàn)法則僅僅作為你的參考即可,而非公式。
01、去除多余的線框和卡片
在設(shè)計(jì)的時候,你應(yīng)該時不時的跳出來看看,感受一下容器是否會讓UI界面顯得混亂。在大多數(shù)情況下,用于分隔內(nèi)容的框和線可以用留白來替代。
我們設(shè)計(jì)的大部分元素其實(shí)都包含在“框”中,因此,只需刪除這些內(nèi)容即可,它可以讓頁面顯得不是那么的密集和繁雜,并為元素提供更多的呼吸空間。
02、注意元素的對比度
良好的對比不僅可以吸引用戶的注意力,而且還能提升產(chǎn)品的可訪問性。
設(shè)計(jì)產(chǎn)品類似于在圖書館或者學(xué)校之類的公共建筑中進(jìn)行設(shè)計(jì),你必須關(guān)注到所有的人群,包括盲人,色盲人群和視力有障礙的用戶。
根據(jù)Web內(nèi)容可訪問性指南,元素需要至少有4.5:1的對比度。
03、尊重用戶已有的使用習(xí)慣
將某些元素視為標(biāo)準(zhǔn)的原因有很多。比如你將“開始免費(fèi)試用”按鈕設(shè)計(jì)為圓形,但是它用在一篇文章的底部時,這就會占用過多不必要的垂直空間。
不僅于此,用戶已經(jīng)習(xí)慣了在大多數(shù)應(yīng)用中獲得類似的使用體驗(yàn)。如果你的網(wǎng)站或者應(yīng)用與用戶的常規(guī)使用習(xí)慣差別太大,那么用戶就會感到沮喪(畢竟學(xué)習(xí)成本太高啦)
因此,建議大家在當(dāng)前設(shè)計(jì)規(guī)范的范疇內(nèi)進(jìn)行創(chuàng)新。
04、使用色彩重量構(gòu)建視覺層次
每種顏色都有視覺重量,它可以幫助我們在內(nèi)容之間建立層次感。通過使用多種淺色,可以為不同的元素分配不同的重要性級別。
這個經(jīng)驗(yàn)法則就是,如果一個元素比另一個元素重要,則它們應(yīng)該有更“重”的視覺重量。這種方式會讓用戶易于快速瀏覽頁面并區(qū)分重要或者次要的信息。
而更大更粗的字體信息會首先吸引用戶的注意,隨后用戶會將注意力集中在這些重要信息的解釋性文字或者內(nèi)容上。
05、避免使用兩種以上字體
我們普遍接受的設(shè)計(jì)準(zhǔn)則就是限制界面中使用的字體數(shù)量。通常,兩種不同的字體就夠了。但這并不意味著你不能用更多字體,除非你有充分的理由,否則最好還是不要那么用。
如果一定要使用多種字體,一種解決辦法就是使用一種字體家族。
通過使用同種字體家族,我們可以在設(shè)計(jì)中使用具有不同變體的相同字體。同種字體家族讓設(shè)計(jì)變得靈活又一致。
另外,在選擇字體時,請找到具有不同字體重量的字體,比如一種字體包含,極細(xì),常規(guī),中,粗體,超粗體,壓縮,或者斜體等樣式。這種字體會為你提供更多的選擇,也無需再去添加其它樣式的字體。
06、不要讓用戶思考
做到迅速識別是設(shè)計(jì)產(chǎn)品中的一個好習(xí)慣,所以,為什么要讓用戶思考呢?
結(jié)賬頁面,電子郵件收件箱,搜索歷史記錄,后退按鈕等等都是很好的例子。
在結(jié)賬頁面中(如果設(shè)計(jì)的當(dāng)?shù)那闆r下),用戶不必記住他要付款的商品。因?yàn)樗苊黠@可以識別出自己要買的商品,而不用再費(fèi)勁去再次記憶。
展示用戶的搜索歷史記錄
在Gmail收件箱中,用戶可以一目了然的確定自己已經(jīng)閱讀和未讀的電子郵件。或者當(dāng)我登錄到Amazon時,網(wǎng)站會告訴用戶最近查看的商品,而不用勞煩用戶再次搜索。
“通過使對象,操作選項(xiàng)可見,可以最大程度的減少用戶的認(rèn)知負(fù)載。用戶不必記住從對話的一部分到另一部分的內(nèi)容。在適當(dāng)時候,系統(tǒng)會及時的告訴他們,或者用一種很方便的方式讓用戶查看到?!?/p>
07、不要放慢交互動畫速度
在UX中正確使用動畫
對于用戶來說,速度和效率是非常重要的東西。用戶要使用一個應(yīng)用程序來完成特定的工作,而不是盯著交互動畫來欣賞。
“我想走的快點(diǎn)”-Ricky Bobby
如果將一筆支票快速兌入我的銀行賬戶的體驗(yàn)令人愉悅,那非常棒。但是,請不要用你的創(chuàng)造力妨礙我快速完成目標(biāo)。這些動畫與我要完成目標(biāo)相比,真的不值一提。
關(guān)于動畫和微交互的一條經(jīng)驗(yàn)法則是,如果體驗(yàn)增加了不必要的時間,那么它并不能改善體驗(yàn)。有目的性的使用動畫可以改善體驗(yàn),請記住,動畫一定是有目的的。
經(jīng)常在Dribbble上看到一些Landing Page,這些設(shè)計(jì)在用戶滾動瀏覽頁面時有動畫效果。大部分頁面的動畫使用淡化,移動等等效果,但是它們太過“動畫化”了,反而忽略了對于體驗(yàn)本身的關(guān)注。作為用戶,當(dāng)屏幕上發(fā)生太多事情的時候,他們很難注意到重點(diǎn)內(nèi)容,而且這種動畫也浪費(fèi)了用戶太多的寶貴時間。
很多研究表明,界面動畫的最佳速度在200到500毫秒之間。這些數(shù)字基于人腦的特殊素質(zhì)。任何短于100毫秒的動畫都是瞬時的,不會被察覺。而動畫時間超過一秒,將會傳達(dá)一種延遲感,從而讓用戶感覺無聊。
因此,如果要使用動畫,請務(wù)必注意,動畫都是有目的性的,不要讓用戶等待超過500ms。在2019年,其實(shí)1ms就可以激怒你的用戶。
08、少即是多
每次我們向頁面添加其他信息的時候:按鈕,文本,圖像,動畫,插圖等,這些內(nèi)容就會與其它相關(guān)信息存在競爭。如果頁面上內(nèi)容過多,元素的重要性則會降低。
注明的Google主頁就是個很好的案例。設(shè)計(jì)師并沒有讓訪客淹沒在不必要的信息中,而只是突出了其中的一點(diǎn),那就是:搜索。
小編最喜歡的設(shè)計(jì)格言是:“所謂的完美設(shè)計(jì),不是在沒有其它東西可添加時,而是在沒有東西可以去掉的時候?!迸c大家共勉。
熱門資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計(jì)師的...
3. 移動端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識
4. 10個免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個:站酷站酷想必是設(shè)計(jì)師都知道的一個網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
5. 移動端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!