2014/03/19

icon輔助提示位置的隱喻

我們常會增加些icon圖示去輔助,暗示並引導使用者更快了解這個功能的用途,
究竟icon圖示在前方跟後方的差異在哪?
比方:














---------------------------------------  不要急著看答案,再想想 ----------------------------





A. 僅僅是暗示這個東西的用途、沒有功能時,請放在物品前方

例如:

裝飾的icon



常跟替代文字搭配的輸入框背景圖案


或是品牌形象連結圖



B. 引導這個物品有功能、可以進一步操作時,請放在物品的後方

例如:

月曆輸入框,點擊後會出現另一個畫面


下拉選項


或是次層導覽,在父層會做引導user他有小孩...




混合型:

主打項目配上有滑過選項的項目。



秘訣:call to action的東西放在屁股後面




FB縮圖設定



Facebook分享、讚,會抓網頁的圖片,但常常會亂抓抓錯






請在頁面header裡指定要給facebook抓取的圖片
語法:





手動請fb快速更新縮圖網址:https://developers.facebook.com/tools/debug




2014/01/17

Mobile Web》兼顧UX與扁平化的UI ~ 前端注意事項



習慣先來個要點

請注意:
  • 扁平化不是為了扁而扁,而是為了UI能更有效率的適用在各種尺寸裝置上!
  • 扁平化的同時,該要引導按鈕跟連結的視覺,還是要保有
    人的使用習慣不是可以這麼快速就改變,同時對於新使用者(小孩/長輩)來說,
    過於缺少具象化的扁平設計,無法感受到它的動作引導,就是失敗的設計。
  • 善用CSS3/html5的支援效果,用標準css3寫法即可,行動裝置(mobile/platform)瀏覽器的支援度遠超過你以為。
    做行動版網頁請忘記IE這東西,我知道它摧殘前端很久了。
    能用css寫的圓角、陰影、背景色、半透明、漸層、動畫...,請盡量使用css處理,圖片用在畫龍點睛的地方即可。
  • 連結點擊時狀態(active)遠遠大過滑過狀態(hover),
    請忘記滑鼠這東西,你在手機/平板絕大部分是沒有使用滑鼠的。
  • iOS桌面縮圖icon:
    很多人會忘記做這個,當把網頁加到桌面捷徑時,iOS會預設找以下路徑,如果沒有提供指定圖片,才會自動擷取該網頁的預覽圖。
    圖檔路徑.png" />


實例開始:

1.  按鈕:
     用a或是botton,只有箭頭用圖片,其他都由css產生

      


未完待續...


2. 陰影與圓角:
    用標準css3寫法即可,行動裝置跟電腦的瀏覽器不同,請忘記電腦給的限制!