<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • APP底部標簽欄設計需要注意哪些問題?我總結了這6點

          2022-10-20    seo達人

          一、標簽欄樣式分析

          底部標簽欄可以是純圖標樣式,或者圖標與文本標簽搭配的樣式。

          圖片

          選中的標簽需要有不同的視覺風格,可以使用按鈕、文字、圓點等樣式來表示選中效果,幫助用戶一目了然地定位當前導航。

          在Apple iOS底部標簽欄中,標簽欄的寬為390px,高為49px。

          圖片

          常規標簽欄的圖標大小為25x25px,緊湊型的標簽欄圖標為18x18px。

          在iOS的底部標簽欄中,文字使用的字體為10px,中等粗細。 

           

           

           二、標簽欄設計6個注意事項

          1、導航數量不超過5個

          底部標簽欄最適合放置3-5個導航選項。移動端屏幕相對較小,使用五個以上的選項會讓導航擠在一起,并影響可用性。

          另外導航選項太多,手指的觸摸面積(紅色圓圈)會比觸摸目標(導航選項)的面積大很多,用戶有可能會意外觸發錯誤的選項。

          圖片

           

          設計解析:

          ① 如果選項很少,只有兩或三個時,可以考慮使用分段控件的設計樣式,將分段控件放在頁面上方作為導航。

          圖片

           如果選項很多,超過五個時,我們需要評估這些導航的優先級,篩選出最重要的導航。如果必須要保留五個以上的導航選項,可以考慮使用類似漢堡菜單這樣的控件。

          圖片

           

          2、不要使用不熟悉的圖標

          底部標簽欄是用戶使用頻率非常高的導航之一,這就需要確保目標受眾應該對標簽欄中的圖標非常清晰,避免讓用戶產生疑惑。

          圖片

          如果在設計的時候,覺得某個圖標的含義或者樣式對用戶來說不是特別明確,那么就需要將圖標與文字標簽一起使用,方便用戶快速準確地理解。 

           

          3、圖標/文字的顏色不能太淺

          圖標的顏色對比度差、導航標簽的字體小是在底部標簽欄設計中兩個最常見問題。

          在底部欄設計過程中,我們不僅要區分已選標簽和未選標簽的狀態,保證已選標簽更突出,還要注意觀察圖標與文字之間、圖標與背景之間的顏色對比度,確保未選狀態的圖標和文字也能夠清晰易讀。

          圖片

           

          4、不要設計可滑動的標簽欄

          可滑動的標簽欄會對導航可見性產生影響,由于并非所有的導航選項都是一次可見,用戶可能很容易錯過后面的選項。

          另外,當用戶左右滑動標簽欄時,前面已選的標簽可能會消失,影響使用體驗。

          圖片

           

          5、不要截斷標簽

          底部標簽欄的空間本身就很小,因此在導航中使用文字時,每個字符都顯得很重要。

          不要截斷標簽,這樣會造成用戶不清楚標簽的含義,可以嘗試使用更簡練的文字來清楚地傳達選項含義。

          圖片

           

          6、不要使用太復雜的切換動畫

          花哨復雜的切換動畫對于初次使用的用戶來說可能看起來很酷,但是一旦用戶熟悉了產品并頻繁使用導航時,這些復雜的切換動畫就會變得很煩人。

          這些切換動畫雖然看起來很復雜,但卻沒有為產品或用戶帶來任何有用的價值或信息,因此這些動畫就會變成一種負擔,讓用戶感到沮喪。

          圖片

          底部標簽欄的切換動畫應該干脆利落,可以使用簡單的微動效作為輔助,切莫太復雜。 

           


          作者: Clippp

          轉載請注明:學UI網》APP底部標簽欄設計需要注意哪些問題?我總結了這6點

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.sdgs6788.com

          存檔

          久久99精品久久久久久动态图| 久久精品久久久久观看99水蜜桃| 99久久国产综合精品麻豆| 99麻豆久久久国产精品免费 | 丁香五月综合久久激情| 狠狠色综合久久久久尤物| 欧美精品国产综合久久| 亚洲国产精品嫩草影院久久| 久久久久亚洲AV成人网人人网站| 精品久久人妻av中文字幕| 久久本道久久综合伊人| 久久永久免费人妻精品下载| 欧美午夜A∨大片久久 | 日韩人妻无码精品久久免费一| 久久成人精品视频| 精品国产乱码久久久久久人妻| 欧美亚洲国产精品久久蜜芽| 日产精品久久久久久久| 久久久久国产一区二区三区| 久久国产精品99精品国产| 伊人久久大香线蕉综合5g| 国产精品成人无码久久久久久| 亚洲精品美女久久久久99| 久久综合偷偷噜噜噜色| 国产福利电影一区二区三区久久老子无码午夜伦不 | 久久亚洲精品国产精品婷婷| 亚洲午夜久久久精品影院| 性欧美丰满熟妇XXXX性久久久| 久久不见久久见免费影院www日本| 激情伊人五月天久久综合| 新狼窝色AV性久久久久久| 亚洲精品WWW久久久久久| 久久精品国产亚洲一区二区三区| 色综合久久中文色婷婷| 久久91精品久久91综合| 久久永久免费人妻精品下载| 久久综合亚洲欧美成人| 亚洲国产精品无码久久久不卡| 中文字幕精品久久久久人妻| 久久久久久久久66精品片| 漂亮人妻被中出中文字幕久久|