『RWD』用UI/UX思考進行響應式網頁設計

rawpixel-com-340967  

  1. visual route:考量使用者的視覺動線,非所有內容都要放進去
  2. human factor:一行文字內容剛剛好的字數很重要,滿版的文字對於視覺來說負擔太大,太短的行寬對視覺來說換行頻率又太頻繁。RWD依照文字多寡來換成單行或雙行。
  3. finger experience:增加每行的上下padding(44px為佳),以增加使用者手指操作體驗。
  4. less is more:把真正重要的PC端元素放入手機端就好就好。例如:製作響應式網頁時,頁面中的「產品內容」就是重要的,必須留下來。
  5. difference of manipulation:PC時考慮滑鼠hover、mobile時考慮手指touch,依照不同載具做不同考量。
  6. show and hide:考慮不同斷點要出現的元素,以及要隱藏的元素。例如:寬螢幕解析度時漢堡選單需隱藏、窄螢幕解析度時並列水平並列的選項需更改顯示方式。
  7. software assist:用chrome 的 responsive inspector 偵測斷點,搭配mediaqueri.es,來了解斷點設計。
創作者介紹
創作者 READY sharing 的頭像
READY sharing

Ready sharing

READY sharing 發表在 痞客邦 留言(0) 人氣()