星期一, 2月 13, 2017

Sketch 習作 / Auto Layout


將 PS 的個人 Profiles 轉到 Sketch 上,同時嘗試 Auto Layout 的功能,快速產生不同的 RWD 的視覺版本。
製作當中,個人認為要注意幾個點:

  1. 置入圖片的尺寸大小要同步縮放的設定
  2. 物件模組要先建立(群組)
  3. 在確認第一個主視覺後,記得建立相關的 Symbol ,以利後續的調整與修改。


可以參考 Youtube 上的教學介紹,其實還蠻好直覺上手的。





星期三, 10月 05, 2016

為何不要使用旋轉木馬 Carousel

如果有以下現象,請儘量不要使用旋轉木馬 Carousel

  • 旋轉木馬 Carousel 的內容讓人認為是一個廣告,導致閱讀者忽略。
  • 移動的UI元件對可用性容易產生負面影響時。
  • 大量的閱讀內容無法在有限的時間內閱讀或理解時。
如果真的確定應使用旋轉木馬 Carousel,確保幾點注意事項:
  • 不要設定自動播放。
  • 讓用戶可控制。
  • 確保文案簡單扼要。
  • 避免使用H1標籤,不利於SEO。
  • 確保對移動裝置是友善的。

星期日, 8月 14, 2016

學習 Axure RP 的 100 天:Day13. Sekect Group

圖片縮圖在Axure也可利用按鈕群組的功能,達到選取一個圖像,也同時取消了原先選取的項目。


  • 將所以有的縮圖命名(ex:snap01)。
  • 設定滑鼠移過及被選取的狀態。
  • 將所有的縮圖在Selection Group,選取群組的名稱(或自訂一個群組的名稱)。


  • 最後,設定互動行為。






    • Demo:http://faagx0.axshare.com/#g=1&p=day_13__selectgroup






      星期二, 8月 09, 2016

      學習 Axure RP 的 100 天:Day12. Verification

      表單驗證,包含:

      • E-Mail格式的正確與否
      • 欄位字數的限制判斷
      • 密碼輸入及再次的確認判斷
      • 驗證碼的判斷


      Demo:http://faagx0.axshare.com