火星網(wǎng)校
每個UX/UI設(shè)計師都必須考慮的8種移動端設(shè)計方式
發(fā)布時間：2024-03-05 14:23:23 瀏覽量：201次
寫在前面的廢話
聲明：如果你是一個完全沒有接觸過ui的設(shè)計師，可以看一看這篇文章，如果不是就不用浪費時間了，勿謂言之不預(yù)。我真的很蛋疼，不信往下翻翻看。
如今越來越多的用戶依賴移動端的產(chǎn)品，而各種類型的移動端產(chǎn)品更是百花齊放，如曲面屏，全面屏，對于ui設(shè)計來說，挑戰(zhàn)難度不可謂不高，但是也不用為此擔心，這其中還是有一些基本的原則技巧可以幫助你越過這些難點的。
01
保持最大范圍的可操作性
這句話的意思是讓用戶在使用產(chǎn)品時，無明顯的障礙感，我們要保證不同的人以及不同的操作方式都能做到最大化的便利。
用戶實際拿手機的方式主要有以下三種（如下圖所示），我們的目標即是讓用戶需要操作的元素位于這些區(qū)域內(nèi)。
02
考慮可讀性
與PC端相比，移動端屏幕更小，因此怎么在這樣小的屏幕上合理容納更多的信息，是不得不考慮的問題，一個可讀性強的頁面，會給用戶帶來更佳的體驗。
左側(cè)圖雖然在內(nèi)容上做了進度分頁，但每個進度數(shù)字下方都有相應(yīng)的名稱，導(dǎo)致文字過多，增加了用戶閱讀負擔，而右側(cè)則在進度設(shè)計方式上進一步壓縮，把整個進度狀態(tài)放在左側(cè)，在右側(cè)實時更新每一步的信息，可讀性大大增加了不少。
03
避免長頁面滾動
長頁面的滾動，對用戶閱讀資訊或書籍時，保持專注的一個好方法，但是在某些情況下，（例如，當用戶需要按照提示完成任務(wù)時），有研究表明，滾動越多，用戶就越容易滾開，呸，離開頁面。
在這種情況下，設(shè)計師可以嘗試用操作擴展的方式（如滑動卡片）將任務(wù)分解為多屏，這樣在用戶看來，任務(wù)的數(shù)量就說可以接受的了。（子曰：賤人就是矯情，不服就是不行）
04
字體類型大小
不同的字體可以給用戶帶來不同的情感體驗，同時也可以增加頁面的可讀性，以下是有關(guān)字體選擇的一些建議。
1，字體：選擇一種在多種尺寸和重量下均可正常使用的字體，以保持每種尺寸的可讀性和可用性。
2，字體大?。禾O果和谷歌建議至少22-24px，這樣用戶就可以在不縮放的情況下正常閱讀觀看。
3,顏色對比度，在使用字體時要避免字體顏色與背景色發(fā)生沖突，這里可以參考色彩的6：3：1法則，即主要顏色應(yīng)用于頁面的60％，輔助顏色應(yīng)用于另外30％，最后10％作為與兩種主要顏色形成對比的強調(diào)顏色。
05
留出足夠的間距和填充
小屏幕不代表一定要用小文字，反而要更大放一些，留出更多的行間距來，如今科技日新月異，設(shè)計師需要保持隨時更新自己的狀態(tài)，例如曲面屏的出現(xiàn)，需要在做設(shè)計時，增加相應(yīng)的元素尺寸，以適應(yīng)新的屏幕，避免誤操作。
06
按鈕要大
如果按鈕較小，則很可能經(jīng)常誤觸，所以按鈕尺寸一般至少在40pt以上，所以你現(xiàn)在知道某些無良商家為什么把啟動頁上的跳過按鈕做這么小了吧，就這么湊表臉。下方圖中的px有誤，應(yīng)該是pt。
07
標簽欄的注意事項
每個app基本都會有標簽欄，但是設(shè)計的時候卻應(yīng)該謹慎一點，如果一個圖標無法準確表達功能含義的時候，最好是用文字補充，而在標簽欄標簽過多時，則建議只用文字，總之標簽欄設(shè)計的唯一標準就是要保持整潔精確。
08
使用已有的控件
對于移動端ui來說，用戶已經(jīng)習慣固定的控件操作模式，所以設(shè)計師沒必要重新造輪子，例如tab或者抽屜導(dǎo)航。
09
寫在最后的廢話
越往后翻譯越覺得不對勁，這都是哪年的理論了，都2020年了還發(fā)這樣的文章，說好的國外的月亮比較圓呢，這是被狗啃過的月亮吧！
公眾號：知圖設(shè)計院
每天分享一篇國外優(yōu)質(zhì)翻譯文章以及設(shè)計視頻，歡迎關(guān)注。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學習UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學:淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
10. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學費價格以及學習內(nèi)容。
最新文章
