5S 的設計概念是出自 “ 使用者經驗的要素（The Elements of User Experience）”一書之中，作者是 Jesse James Garrett。
撰寫這篇文章的目的是希望能讓觀看文章的你也能快速的認識 5S，也是再次複習與紀錄自己對於 5S 的了解（希望真的有了解）。在介紹的同時我會用自己課堂上設計過的「找實習 APP」 來講解我是怎麼去使用 5S 執行產品設計練習的。
1. 策略層（Strategy）
在開始製作你的產品時，你應該先問自己這兩個問題。
我們要從這個產品得到什麼？
我們的使用者想要從這個網站獲得什麼？
這兩個問題分別對應了產品目標（product objectives）以及使用者需求（user needs）。
找實習 APP 為例：
產品目標（product objectives）： 提供專門針對學生找實習的平台，協助學生找到自己嚮往的實習。
使用者需求（user needs）: 想進入自己喜歡的企業實習。
2. 範圍層（Scope）
釐清「我們的目標」以及「我們的用戶要什麼」，我們接下來需要的是定義產品規格，決定我們要先做什麼功能，以及功能內要有哪些內容。
功能規格（functional specificati）
舉例：Netflix 要有播放影片的功能
內容需求（content requirement）
舉例：Netflix 播放影片功能中的影片檔案或是文字內容
找實習 APP 為例：
我會先設定出產品第一階段要有的功能規格，以及每個功能的內容需求，圖片中主要是功能規格，內容需求細節比較複雜就不一一放上了。
3. 結構層（Structure）
處理完前兩個層級後，現在我們需要開始更具象化我們的產品。在這個層級有兩個重要的觀念。
互動設計（interaction design）
開發工程師與使用者的思路是不一樣的，通常對科技而言最佳的運行方式，與對使用者最好用的方式，兩者會背道而馳。如何站在使用者的角度去預測與猜想對他最好的使用情境，是在設計產品時需要注意的重點。
資訊結構（information architecture）
如何讓使用者快速理解與使用這些資訊？任何產品上面只要有需要人們理解的資訊，則必須考量其資訊架構。資訊架構又可大致分為「從上到下（ top-down approach）」和「從下到上（bottom-up approach）」，其更詳細的內容改日會再進行學習後分享。
找實習學生社群 APP 為例：
我是根據範圍層定出的功能，繪製出程式的架構圖（architecture diagram）
4. 框架層（Skeleton）
簡單來說就是，根據架構圖（architecture diagram）的內容，繪製每個介面的框線圖（wireframe），其中每個介面的框線圖都包含重要的介面設計、導覽設計、資訊設計，需要較長的時間去學習與觀察，才能畫出設計良好的框線圖（wireframe）。
5. 表面層（Surface）
完成產品設計的最後一步，從框線圖（wireframe）升級成原型（mock-up）。你可以想像是幫框線圖（wireframe）進行著色，把原先設計放置圖文的區塊，放上真正的圖文，變換成使用者看到時會被吸引的完整介面。
找實習 APP 為例：
結語
此書提供了一個設計產品的方法論，每個階層其實都還包含了許多更深的學問，等者你我去進行探索與學習。希望看完這邊淺述的文章後，可以激發你閱讀此書的興趣，並在下次設計產品時，應用在這本書學習到的內容，打造出更好的產品😆。
感謝你閱讀完這篇文章😃有任何問題也歡迎在底下留言或是來信告訴我：poyu90909090@gmail.com 📫如果你覺得文章對你有所幫助，請在下方幫我拍個手(長按最多拍50下)👏👏👏
