當前位置:編程學習大全網 - 源碼破解 - 設計網站wap端ui需要註意哪些問題

設計網站wap端ui需要註意哪些問題

1、壹屏壹個任務

降低用戶完成任務之時所需耗費的精力。

妳為APP的每壹屏都應當承載壹個對用戶有用、有價值的交互或者任務,壹次完成壹個任務,且只能有壹個任務,其中應該不包含超過1次的行為召喚(CTA)。這樣的設計能讓用戶更輕松地學習,更便捷地使用,在設計上也更容易添加刪減以及構建。

以Uber為例,Uber 清楚地知道用戶的目的是乘坐出租車,所以,應用程序不會壹次給用戶太多的信息,會根據地理信息自動檢測用戶的位置,而Uber 提供給用戶的每壹個界面的交互都是單個的,用戶只需要選取位置,下單即可。

2、隱形的UI

內容即是界面。

專註於內容,並且盡量刪除不必要的元素,這樣可以縮短用戶集中註意力的時間,用戶將會更快地被引導到他們正在搜尋的內容,而內容本身正是壹個隱形的界面。最典型的就是Google 地圖。在重新設計的時候,Google 地圖刪除了所有不必要的面板和按鈕,地圖本身就是最好的界面。

3、呼吸的空間

使用負空間讓重要的內容吸引用戶的註意力。

留白,或者負空間,指的是頁面設計布局中的空白部分,或者空白元素,它們常常被忽略和忽視,雖然許多設計師認為這樣的設計會浪費屏幕的空間,但是留白本身就是設計的基本元素之壹。

“留白常常被認為是壹個活躍的元素,而非被動存在的間隙和背景。”—— Jan Tschichold

留白可以提升可讀性和內容的優先級,在頁面布局中也發揮著重要的作用。因此,它可以合理地簡化UI並提升 用戶體驗 。

遵循“少即是多”的原則。

4、直觀的導航

導航應該是每個APP當中優先級最高的組成部分。移動端APP中導航應當容易被發現,可訪問的,且盡可能少的占用屏幕空間。由於小屏幕的限制以及內容優先級的需要,移動端導航的可訪問性設計壹直是壹個挑戰。

標簽欄和導航欄是非常適合用來展現較少的導航選項的,它們非常適合用來展示主要的導航選項,壹個簡單的點擊就能流暢地切換到不同的頁面。

AppStore 中的標簽導航。

5、單手操作

讓妳的設計兼容更大的屏幕。

iPhone 6和 6p 的發布標誌著移動端設備徹底進入了大屏時代。

關於用戶如何握持手機,下面的圖為妳展現了最常見的三種模式:

通過觀察可以發現,85%的用戶使用單手握持他們的手機,下面的熱圖展示了從2007年壹來,各種不同尺寸的iPhone 的拇指操作區域。毫無疑問,隨著屏幕尺寸的增加,拇指能夠觸及的區域的比例正在逐步降低。

拇指的操作區域

所以,移動端界面的 用戶體驗設計 應當進行調整,嘗試讓妳的APP 能夠在iPhone 7和 7p 上面能夠單手操作,將導航置於用戶的拇指可以觸及的區域之內。

這是iOS版的 Pocket APP。所有的導航控件都集中在頁腳,也就是手指可以輕松觸及的區域,讓妳可以輕松的單手操作。

6、讓APP運行快速

不要讓用戶等待內容呈現

試圖讓程序的響應速度提升起來。許多任務盡量在後臺跑起來,讓前臺的展現速度顯得很快。將壹部分操作打包到後臺運行有兩個好處:讓壹些等待和加載過程不再展現在用戶面前,並且可以讓許多操作在用戶請求之前就發生。壹個很好的例子就是 Instagram 中上傳圖片,當用戶選擇要***享的圖片之時,上傳就已經開始。

Instagram 邀請用戶在上傳圖片的時候添加標簽,當用戶準備按下分享按鈕的時候,上傳基本就完成了,接下來用戶就可以輕松的分享照片了。

7、善用推送通知

在推送信息之前請三思。

每天用戶都會被無數無用的推送通知所轟炸,被分散註意力,這也使得通知常常會顯得頗為惱人。根據調研,超過70%的受訪者表示,令人煩躁的推送信息是促使他們卸載應用的主要原因。

所以,要做好移動端設計,需要用好每壹次的信息推送。不要為了吸引用戶而推送消息,這往往會適得其反。妳需要將對於用戶有價值的信息推送出去,這樣才合適。

小貼士:有效的移動端APP信息推送策略是采用多種類型的信息推送機制,推送通知,電子郵件,應用內通知,新聞Feed等。多樣化的信息推送通過合理的協調,創造良好的 用戶體驗 。

根據內容的緊急性和正確性來選擇通知類型。

結語

在設計移動端APP的時候,最重要的事情還是確保它有用而又直觀。如果APP對於用戶沒有實用價值,又沒有任何理由使用它,那麽它的價值就相當有限了。如果它對於用戶相當有用,但是需要花費大量的時間精力來學習和完成任務,那麽妳需要實用良好的UI和UX來解決設計問題。

Nick Babich 的 用戶體驗設計 經驗之談

輸入框設計: 《講真,妳真的懂得文本輸入框設計的那些潛規則麽?》

表單設計: 《摳細節!設計高效好用表單的10個技巧》

極簡APP UI: 《超贊!幫妳打造極簡風APP UI 的實用設計技巧》

前端開發: 《有法可依!幫妳衡量壹個動效是否合格的六個核心因素》

面包屑: 《並不簡單!網頁中為妳指路的面包屑到底應當怎麽使用?》

移動端頁面: 《跟著建議走!這樣的移動端網站設計才對頭》

  • 上一篇:落地請開手機女主角叫什麽
  • 下一篇:mean是什麽意思
  • copyright 2024編程學習大全網