亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

金剛區(qū)的交互設計思考

2021-10-9    資深UI設計者

金剛區(qū)是什么,想必大家都有所了解。

沒有的話看這張圖就懂了:

不止畫圖標!5 個金剛區(qū)的交互設計思考

圖片來源:淘寶首頁

我在微信上搜了一下,發(fā)現(xiàn)大部分討論金剛區(qū)設計的文章,都是在講怎么畫圖標。

但是我自己在使用各大 APP 的過程中,發(fā)現(xiàn)很多金剛區(qū)并不是那么好用,而且這跟圖標好不好看無關。

金剛區(qū)設計不好,會對我的使用造成直接影響:

  1. 不夠清晰易懂根本不想去看
  2. 首次使用找不到需要的內容
  3. 下次使用記不住圖標的樣子
  4. 圖標設計得怪怪的不好理解

我今天就來總結一下,對于金剛區(qū)設計的交互/體驗思考:

  • 數(shù)量
  • 順序
  • 顏色
  • 樣式

數(shù)量

金剛區(qū)里有多少項比較合適?

這其實是米勒法則(Miller’s Role)的典型運用了。

如果你還不太了解米勒法則,看看下面這張圖里的詞語:

不止畫圖標!5 個金剛區(qū)的交互設計思考

現(xiàn)在,半分鐘回憶一下,你記住了多少個?

……

大部分人能記住 5~9 個。

米勒的研究發(fā)現(xiàn),普通人的工作記憶(Working Memory)只有 7±2 個信息塊。

如果給的信息超出了這個數(shù)字,大部分人也只能記住這么多。

所以說,金剛區(qū)里的圖標數(shù)量,最好也維持在這個數(shù),否則就是對用戶的記憶能力要求過高了。

通常來,4 個圖標很輕松,說 6 個圖標是比較理想的,8~9 個就有點吃力了,10 個就超綱了。

例如支付寶這個就過分了,好在這只是工具類產品,復雜一點也沒辦法:

不止畫圖標!5 個金剛區(qū)的交互設計思考

順序

人們在看閱讀文字時,視線軌跡是之字形:

不止畫圖標!5 個金剛區(qū)的交互設計思考

人們在閱讀表格時,視線軌跡是除草機形:

不止畫圖標!5 個金剛區(qū)的交互設計思考

上圖來源:這樣設計表格,看著真難受!

雖然金剛區(qū)的眼動圖我沒有,但第一步肯定是從左上角開始往右掃。

不止畫圖標!5 個金剛區(qū)的交互設計思考

所以,用戶最有可能使用的圖標,應該從左到右排在最上面一行,最不常用的可以排在右下角。

例如美團外賣這個設計,看著就挺合理。不但把重要內容放在第一行,而且還做了很大的視覺區(qū)分:

不止畫圖標!5 個金剛區(qū)的交互設計思考

不過一些不愁流量的 APP 會選擇把黃金位置用做商業(yè)宣傳,難免損失點易用性。

顏色

1. 仿真圖標

如果追求質感,多半會使用物品本身的顏色,例如每日優(yōu)鮮這個:

不止畫圖標!5 個金剛區(qū)的交互設計思考

這種圖標就沒什么顏色好討論了,注意一下整體和諧就好。

2. 數(shù)量較少

如果圖標數(shù)量不多可以使用一個顏色,那么顏色上,同樣沒什么好討論的。

例如 QQ 音樂:

不止畫圖標!5 個金剛區(qū)的交互設計思考

3. 數(shù)量適中

如果圖標數(shù)量在 7 個左右或以內,那么可以每種顏色的圖標都來一個,這樣用戶也能記住大概什么顏色代表什么。

例如京東這樣:

不止畫圖標!5 個金剛區(qū)的交互設計思考

4. 數(shù)量很多

圖標數(shù)量遠超過 7 時,就不可能每種顏色來一個了,否則顏色都不夠用了。

如果還是想要劃分顏色,可以將類型作為依據(jù),這樣用戶在尋找圖標時會比較有方向。

當然,其實也可以簡單點,干脆都一個顏色,例如聯(lián)通手機營業(yè)廳:

不止畫圖標!5 個金剛區(qū)的交互設計思考

樣式

1. 底框

一些產品為了統(tǒng)一感,會用圓圈或者圓角矩形,把所有圖標都框起來。

這樣視覺上是好處理了,但交互上很不推薦,因為會大大降低圖標的識別度,乍眼一看都長一樣。

這種底框在主流產品里已經很少見了,不過這么做的設計師還是不少:

不止畫圖標!5 個金剛區(qū)的交互設計思考

這種圖標數(shù)量少,有顏色區(qū)分還好,如果數(shù)量多又一個顏色,那就很難辨認了。

風格

縱觀常見的金剛區(qū)圖標,通常不外乎四種樣式:線條、形狀、2D、3D、仿真。

不止畫圖標!5 個金剛區(qū)的交互設計思考

聯(lián)通手機營業(yè)廳

不止畫圖標!5 個金剛區(qū)的交互設計思考

QQ 音樂

不止畫圖標!5 個金剛區(qū)的交互設計思考

京東

不止畫圖標!5 個金剛區(qū)的交互設計思考

美團外賣

不止畫圖標!5 個金剛區(qū)的交互設計思考

每日優(yōu)鮮

任何樣式都能讓用戶識別和記憶,但是不同的樣式給人的感官不同。

真實性越高的視覺樣式,就越容易給人高級的感覺;相反真實性越低的視覺樣式,越容易給人簡單邊界的感覺。

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

文章來源:優(yōu)設  作者:ZoeYZ

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計www.chinatradebeam.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



日歷

鏈接

個人資料

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

存檔

亚洲色欲色欲大片www无码| 无码av动漫精品一区二区免费| 无码精品人妻一区二区三区人妻斩 | 亚洲一区二区三区写真| 被夫の上司に犯波多野结衣| 亚洲精品久久7777777| 亚洲av无码片一区二区三区| 欧洲美熟女乱又伦av影片| 亚洲精品国产精品乱码不99| 在车里被弄了h野战| 熟妇人妻VA精品中文字幕| 无码人妻aⅤ一区二区三区 | 嫩模超大胆大尺度人体写真 | 国偷自产av一区二区三区123 | 新狼窝色AV性久久久久久| 午夜精品久久久久久久| 凹凸精品熟女在线观看| 欧美日本精品一区二区三区| 亚洲乱码av中文一区二区| 藏精阁av无码亚洲av| 97人妻天天摸天天爽天天| 天天做天天爱天天综合网2021| 国产精品人人妻人色五月| 亚洲最大的成人网站| 中文人妻熟女乱又乱精品| 在厨房抱住岳丰满大屁股| 久久国产精品久久久久久| 国产成A人亚洲精V品无码| 国产免费无码一区二区视频| 青春草在线视频观看| 国产激情一区二区三区| 亚洲精品久久久口爆吞精| 精产国品一二三产区区别 | 被夫の上司持久侵犯耻辱在线| 免费网站看v片在线18禁无码| 肉大捧一进一出免费视频| 亚洲熟妇色xxxxx欧美老妇y| 亚洲gv猛男gv无码男同网站| 88国产精品欧美一区二区三区| 妈妈的朋友在线观看| 美国色情巜肉欲横流|