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寫法即可,行動裝置跟電腦的瀏覽器不同,請忘記電腦給的限制!

2013/12/12

設計手機App UI大問哉

綜合這幾年的觀察與心得,小結



什麼情況下要做App?什麼情況做行動版網頁(Mobile Web)?




服務跟原本網站一樣的話,做行動版網頁即可,下載app對user的門檻來說太高了。
 


App要做哪幾套系統?
從幾個面向來評估:
Android:開發較難,軟體上架審核快
iOS:開發較易(前提要有Mac電腦),軟體上架審核慢
芒果:使用量較小,暫不考慮



UI元件出圖要怎出什麼尺寸?



http://developer.android.com/guide/practices/screens_support.html


http://hivoid19.blogspot.tw/2013/09/android-ui.html


http://screencast.com/t/a8jflVBI

2013/02/03

使用者偏好:2012年1月到2013年1月,瀏覽器與解析度使用分佈情況

這一兩年瀏覽器的使用偏好變動很大,現行網站的使用者,不再是只用IE配1024x768了,
 特別是網頁設計人員痛恨的IE6佔比已經越來越少了,
螢幕解析度也不再只是1024x768,主流解析寬度已經超過1024px。

瀏覽器進入三國鼎立階段, 大家在設計、製作、調整時,各瀏覽器都得檢查測試之外,同時看看不同解析度下會不會有跑版情形、設計是否適用。

雖然解析度種類繁多,簡單版的作法是,未來在設計的時候,高度仍然維持for 768px即可, 主要內容仍然保持在950px寬度(for 1024),但視覺的設計上可以做些加分的東西到1280px寬。


台灣地區瀏覽器使用分佈情況統計: