# UI/UX 學習筆記
>編輯/作者: Jung
>參考來源: [UX四神湯](https://medium.com/uxeastmeetswest)、[嫁給 RD 的 UI Designer](https://blog.akanelee.me/posts/317035-ui-ux-designer-scope/)、[設計開發流程](https://www.deartet.com/29760/%E8%A8%AD%E8%A8%88%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B-design-phase-1-what-is-the-relationship-between-functional-map-ui-flow-user-flow-wireframe-sitemap-and-mi)
>---
>

### 開發流程
1.User Story
2.Functional Map
3.Flow Chart
4.UI Flow
5.Wireframe
6.Mockup
7.Prototype
[開發流程](https://blog.akanelee.me/posts/686437-ui-design-process/)
[UI入門課程筆記](https://medium.com/@renetakiwi)
### 敏捷式開發
[敏捷式開發](https://zh.wikipedia.org/wiki/%E6%95%8F%E6%8D%B7%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91)

### 十大易用性原則
[十大易用性原則](https://blog.akanelee.me/posts/160115-top-ten-usability-principles/)
[十項使用者體驗設計優化原則-四神湯](https://medium.com/uxeastmeetswest/%E5%8D%81%E9%A0%85%E4%BD%BF%E7%94%A8%E8%80%85%E9%AB%94%E9%A9%97%E8%A8%AD%E8%A8%88%E5%84%AA%E5%8C%96%E5%8E%9F%E5%89%87-eb3fa01999e6)
### persona
[{ UX 雞蛋糕 } 人物誌 Persona](https://medium.com/@minaliou/ux-%E9%9B%9E%E8%9B%8B%E7%B3%95-%E4%BA%BA%E7%89%A9%E8%AA%8C-persona-5f9cc09f6d1e)

### 實踐與自我練習 SiteMap 、Functional Map、UI Flow
>- 問卷調查
>版權所有、嚴禁轉載

>---

### UI 規範/規則
1.Google的 [material design](https://material.io/design)
2.Apple [Guideline](https://developer.apple.com/design/human-interface-guidelines/)
:::info
在過去的開發經踩雷中，IOS App上架需要符合蘋果的Guideline。不然沒辦法上架。所以知識的閱讀量不能少、算是基本功。
:::

### 配色
[ NIPPON COLORS](https://nipponcolors.com/#ro)
[grabient](https://www.grabient.com/)

### 常用產出工具
1.Functional Map 、Site Map(UI Flow) 。常使用工具XMind(心智圖)、Adobe XD
2.Wireframe 我通常用的是 Adobe XD。可以快速的做出你要的low-fi prototype。
3.當需要話Icon 的時候Illustrator、Photoshop是你的好幫手。
至少須具備軟體使用能力。以下為個人使用經歷，可以使用符合你需求的軟體。
[XMind ZEN](https://www.xmind.net/xmind2020/)
[Adobe XD](https://www.adobe.com/tw/products/xd.html)
[Illustrator](https://www.adobe.com/tw/products/illustrator/free-trial-download.html)
[Photoshop](https://www.adobe.com/tw/products/photoshop/free-trial-download.html)
### 推薦網站
[What do You Want To See In My UX Design Portfolio?](https://uxplanet.org/what-do-you-want-to-see-in-my-ux-design-portfolio-fc98dc48c01)
[Running a Usability Test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
[UX 設計資源總整理 (転転 UX Team 持續更新)](https://share.tenten.co/ux-%E4%BD%BF%E7%94%A8%E8%80%85%E7%B6%93%E9%A9%97%E8%A8%AD%E8%A8%88%E5%AD%B8%E7%BF%92%E8%B3%87%E6%BA%90-8d1b1b805262)

[这种切图方式你会吗？简单6步帮UI设计师高效完成切图](https://www.uisdc.com/ui-design-efficiency-slice)
[你可能不知道的 —關於 iOS切圖那點事](https://medium.com/as-a-product-designer/%E5%AF%AB%E7%B5%A6%E4%B8%8D%E6%98%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84-ios%E5%88%87%E5%9C%96-2c6e9dc8abb)

[UI設計工具實用整理
](https://heywesley.wordpress.com/tag/ui-design/page/2/)