如何避免糟糕的app頁面設(shè)計

2022-05-30    分類: 網(wǎng)站建設(shè)

如果你不相信自己能夠做好設(shè)計,那么請記住傳說中的人物David Eric Grohl說過的這段話:

我從不學(xué)習(xí)打鼓課程,從不學(xué)習(xí)吉他課程,我靠自己摸索。我認為倘若你真的對什么東西有所熱誠,你就會有動力,你就會集中注意力,你可以做任何你想做的事情。

——Dave Grohl,噴火戰(zhàn)機樂隊


記著上面那段話,你準備好要開始速成課了嗎?讓我們開始吧(沒有特定順序):

1. 足夠強烈的色彩對比

背景和字體必須有足夠區(qū)分,閱讀起來不傷眼睛。白底黑字是最容易辨認的。最好不要使用淺灰、黃色或綠色。如果別人必須瞇著眼睛才能看清文字,那肯定是有問題的。


圖片來源:UI Design Do’s and Don’ts

2. 深灰比黑色更好

如果可以的話,嘗試使用#333333 RGB(51, 51, 51),而不是黑色,作為文字顏色。黑白對比晃眼睛,讓人更難集中注意力。


3. 重要內(nèi)容放在前面

布局是幫助使用App或網(wǎng)站的重要信息。重要的內(nèi)容應(yīng)該是第一眼可見的,不需要縮放、滾動或點擊。


圖片來源: UI Design Do’s and Don’ts

讓我們看看幾個視覺層級設(shè)計的正面實例。

Instagram(下圖左側(cè))將讓用戶發(fā)布的圖片/視頻作為焦點。

Pinterest(下圖右側(cè))的主要功能是搜索,人們在上面瀏覽翻找信息。


再看兩個例子。

Spotify(下圖左側(cè))顯然把唱片封面和音樂標題放在第一位,將用戶操作放在第二位。盡管操作是第二位,Spotify仍然保證播放暫停按鈕的比重大于前進后退。

Facebook(下圖右側(cè))看起與Instagram非常相似,把好友發(fā)布的內(nèi)容放到前面和中心。


4. 對齊一切

如果你感覺哪里有些不對,最快的解決方式很可能是把不對齊的東西全部對齊。有時設(shè)計師會念叨需要使用“柵格”,這其實是在提醒團隊需要解決對齊的問題。保證元素對齊是改進任何App或網(wǎng)站的最簡單的方法,可以立馬讓視覺效果提升10倍。


圖片來源:UI Design Do’s and Don’ts

讓我們再看看其它對齊案例,這次是Medium。

下面是一個Medium的頁面,你覺得看起來如何?是不是有哪里不對?提示:注意左側(cè)的對齊情況,看起來怎么樣?


下圖我僅僅將內(nèi)容左側(cè)對齊了。


5. 文字尺寸和留白

我們是給人做設(shè)計的,不是給螞蟻做的。增加文字尺寸并多留些空白能夠保證內(nèi)容更加易讀。

好的文字尺寸VS不好的文字尺寸:


圖片來源:UI Design Do’s and Don’ts

好的留白 VS 不好的留白:


圖片來源: UI Design Do’s and Don’ts

6. 如果順序很重要的話,使用列表

大部分移動/網(wǎng)頁App有搜索功能,對于應(yīng)該如何展示搜索結(jié)果,可能有些爭議。

如果順序是很重要的,那么列表是最有效的。

如果順序不重要,并且還鼓勵用戶多瀏覽探索(像是Pinterest或Airbnb),那么網(wǎng)格視圖就可以提供更多的信息,方便用戶瀏覽探索。


來源:《用戶如何查看網(wǎng)格布局的搜索結(jié)果?》

7. 先做灰度設(shè)計,再上色

灰度設(shè)計能夠保證聚焦于關(guān)鍵的用戶體驗。顏色牽扯到較多的情緒反射,并且容易打擾我們所聚焦的關(guān)鍵問題。


8. 讓設(shè)計用起來舒服

手的使用是一個重要的問題,建議參考Luke Wrobluewski的文章《Responsive Navigation: Optimizing for Touch Across Devices》

Luke畫出了手機上最容易使用的部分(對于右手來說)——我挺喜歡哪些可以設(shè)置左右手的App的。

很多高效的手機App保證導(dǎo)航和主要操作在手機的底部。


圖片來源:《Responsive Navigation: Optimizing for Touch Across Devices》

9. 借用色板

色彩是一種難以捉摸的藝術(shù)。我強烈推薦大家去Dribbble搜索“Color Palettes”或者使用色板編輯器,如Coolors或者Color Claim。這樣做可以節(jié)約好幾個小時的爭論、糾結(jié)的時間。


10. 使用Apple和Google的系統(tǒng)設(shè)計規(guī)范

這兩家公司都有很棒的資源幫助任何人搭建Android或iOS的App。

例如,Google的Material里有設(shè)計原則、資源、色彩、圖標和控件,能夠幫助你快速開始App設(shè)計。

Apple則有HIG(Human Interface Guideline),里面羅列了有所有設(shè)計iOS平臺App所需要知道的東西。


圖片來源: Google Material Design和The Apple Human Interface Guidelines

記住,設(shè)計需要練習(xí)

需要一些時間和練習(xí)才能夠訓(xùn)練出一雙辨別設(shè)計的銳眼,但是你會發(fā)現(xiàn)上面的建議會大大提高你的設(shè)計。

網(wǎng)站名稱:如何避免糟糕的app頁面設(shè)計
網(wǎng)頁地址:http://www.bm7419.com/news2/161602.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、云服務(wù)器網(wǎng)站改版、網(wǎng)站策劃網(wǎng)站設(shè)計公司、網(wǎng)站維護

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司