design pattern – 這世上 沒有偶然 只有必然 https://wordpress.lokidea.com 幻幽的小小分享區 Tue, 06 Sep 2016 13:21:02 +0000 zh-TW hourly 1 WYSIWYG-即見即所得也是Design Pattern【250/366】 https://wordpress.lokidea.com/1298/wysiwyg-%e5%8d%b3%e8%a6%8b%e5%8d%b3%e6%89%80%e5%be%97%e4%b9%9f%e6%98%afdesign-pattern%e3%80%90250-366%e3%80%91/ https://wordpress.lokidea.com/1298/wysiwyg-%e5%8d%b3%e8%a6%8b%e5%8d%b3%e6%89%80%e5%be%97%e4%b9%9f%e6%98%afdesign-pattern%e3%80%90250-366%e3%80%91/#respond Tue, 06 Sep 2016 13:21:02 +0000 https://wordpress.lokidea.com/?p=1298 閱讀全文 WYSIWYG-即見即所得也是Design Pattern【250/366】]]> 原文參考
網站現在很多功能都會包含這個 Design Pattern
畢竟網站的內容編輯都需要用到
而且直接能夠看到修改的結果，對使用者來說很重要

頁面開發上面可以使用的套件很多
之前寫過一篇介紹 即見即所得編輯器跟語法高亮的文章
大家可以參考一下!!!
這邊就不多對詳細的開發資源作介紹
現在更多的網站除了在 textarea上面做編輯器以外
也有服務提供全版面的拖曳排版
參考文章：
這年頭的內容編輯器已經解決了哪些問題? « 要改的地方太多了，那就改天吧
有不少服務都提供這類的版面編輯，歡迎參考上面那篇文章

]]> https://wordpress.lokidea.com/1298/wysiwyg-%e5%8d%b3%e8%a6%8b%e5%8d%b3%e6%89%80%e5%be%97%e4%b9%9f%e6%98%afdesign-pattern%e3%80%90250-366%e3%80%91/feed/ 0 密碼強度驗證也是Design Patterns【210/366】 https://wordpress.lokidea.com/1127/%e5%af%86%e7%a2%bc%e5%bc%b7%e5%ba%a6%e9%a9%97%e8%ad%89%e4%b9%9f%e6%98%afdesign-patterns%e3%80%90210-366%e3%80%91/ https://wordpress.lokidea.com/1127/%e5%af%86%e7%a2%bc%e5%bc%b7%e5%ba%a6%e9%a9%97%e8%ad%89%e4%b9%9f%e6%98%afdesign-patterns%e3%80%90210-366%e3%80%91/#respond Thu, 28 Jul 2016 13:44:03 +0000 https://wordpress.lokidea.com/?p=1127 閱讀全文 密碼強度驗證也是Design Patterns【210/366】]]> User Interface Design Patterns系列文章第一篇
Password Strength Meter(密碼強度檢測儀)
根據使用者輸入的密碼長度進行檢查
http://ui-patterns.com 上面有寫出五種檢查出的狀態結果

分別為

  1. Too short
  2. Weak
  3. Fair
  4. Good
  5. Strong

五種強度
也定義甚麼密碼是強密碼

  1. 有超過8個字符
  2. 包含小寫和大寫字母
  3. 包含至少一個數字字符
  4. 包含特殊字符
  5. 有超過12個字符

頁面上還有不少的介紹!!
之後慢慢翻譯上來

]]> https://wordpress.lokidea.com/1127/%e5%af%86%e7%a2%bc%e5%bc%b7%e5%ba%a6%e9%a9%97%e8%ad%89%e4%b9%9f%e6%98%afdesign-patterns%e3%80%90210-366%e3%80%91/feed/ 0 使用者介面設計模式大全【208/366】 https://wordpress.lokidea.com/1119/%e4%bd%bf%e7%94%a8%e8%80%85%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88%e6%a8%a1%e5%bc%8f%e5%a4%a7%e5%85%a8%e3%80%90208-366%e3%80%91/ https://wordpress.lokidea.com/1119/%e4%bd%bf%e7%94%a8%e8%80%85%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88%e6%a8%a1%e5%bc%8f%e5%a4%a7%e5%85%a8%e3%80%90208-366%e3%80%91/#respond Tue, 26 Jul 2016 13:41:23 +0000 https://wordpress.lokidea.com/?p=1119 閱讀全文 使用者介面設計模式大全【208/366】]]> UI-Patterns.com 把 User Interface Design Pattern 分成六大類
六大分類下面還有2~4種子分類

  1. Getting input — 28
    1. Forms – 19
    2. Explaining the process – 4
    3. Community driven – 5
  2. Navigation — 25
    1. Tabs – 2
    2. Jumping in hierarchy – 6
    3. Menus – 3
    4. Content – 14
  3. Dealing with data — 11
    1. Tables – 3
    2. Formatting data – 3
    3. Images – 3
    4. Search – 2
  4. Onboarding — 9
    1. Guidance – 6
    2. Registration – 3
  5. Social — 11
    1. Reputation – 3
    2. Social interactions – 8
  6. Miscellaneous — 5
    1. Shopping – 4
    2. Increasing frequency – 1


之後會慢慢介紹每個子類別底下的 User Interface Design Pattern
共有89種使用者介面設計模式
每一篇介紹都會參考UI-Patterns.com裡面的內容
因為是前端學習
所以也會附上已經有的open source專案
或是補上常見或是經典的設計案例圖片
也歡迎大家能夠補充資料!!
這系列文章應該也會同步貼到medium去

]]> https://wordpress.lokidea.com/1119/%e4%bd%bf%e7%94%a8%e8%80%85%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88%e6%a8%a1%e5%bc%8f%e5%a4%a7%e5%85%a8%e3%80%90208-366%e3%80%91/feed/ 0 Slick 的設計模式是 carousel 呢【205/366】 https://wordpress.lokidea.com/1112/slick-%e7%9a%84%e8%a8%ad%e8%a8%88%e6%a8%a1%e5%bc%8f%e6%98%af-carousel-%e5%91%a2%e3%80%90205-366%e3%80%91/ https://wordpress.lokidea.com/1112/slick-%e7%9a%84%e8%a8%ad%e8%a8%88%e6%a8%a1%e5%bc%8f%e6%98%af-carousel-%e5%91%a2%e3%80%90205-366%e3%80%91/#respond Sat, 23 Jul 2016 11:44:56 +0000 https://wordpress.lokidea.com/?p=1112 閱讀全文 Slick 的設計模式是 carousel 呢【205/366】]]> 做前端的畫面就是要使用很多不同的套件
最近一個案子可能會使用類似 slideshow 的效果
就請設計找一下他比較中意的套件範例
就找到了兩個頁面
jQuery支持触摸屏设备的响应式幻灯片插件
slick – the last carousel you’ll ever need

第一個頁面是 中文的介紹
套件名稱是 Slider Pro – Elegant and Professional Sliders、Github
網站上面有五種版面Demo
上面中文的頁面也有詳細的參數與功能說明可以參考

第二個頁面才是這次的重點
Slick
官方的說明是寫

the last carousel you’ll ever need

carousel 也是一種 UI Patterns
跟 slideshow 很像
其實我也沒有很瞭解這兩種 patterns 的差異
所以之後應該會有一系列的 patterns 研究的文章
從 UI Patterns 上面分類出來的 pattern 來整理研究
再寫成各個pattern的文章吧
覺得現在這方面的中文資源滿少的
也剛好整理一下觀念與推廣一下

]]> https://wordpress.lokidea.com/1112/slick-%e7%9a%84%e8%a8%ad%e8%a8%88%e6%a8%a1%e5%bc%8f%e6%98%af-carousel-%e5%91%a2%e3%80%90205-366%e3%80%91/feed/ 0