UI/UX相關整理
“Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.” — Donald A. Norman
工具使用
常用軟體
Adobe Photoshop、Illustrator、Sketch、Figma、Adobe XD、Axure RP、Zeplin、
After effects、Premiere
其餘軟體
Dreamweaver、Adobe InDesign、Flash、Unity、AutoCAD、PhotoImpact、CorelDraw、PowerMockup、InVision
程式語言
HTML、CSS、PHP、JavaScript、Bootstrap、jQuery、SASS、SCSS、LESS、Vue.js、Sass
基本觀念
-
Sketch：主要用來設計UI或網頁，再搭配一些第三方工具，即可做出高擬真的原型，但目前只支援mac系統
-
Zeplin：這是配合Sketch的第三方工具，主要用於畫面的溝通使用，而且它會清楚標出很多數值，例如大小、間距、顏色，很方便讓工程師瞭解你的設計稿
-
Adobe XD：一樣用來設計UI或網頁，與Sketch主要差異在於，他可以支援mac、Window系統
-
Axure：製作流程圖、框線圖、簡單的交互流程demo，我常常使用它快速產出想法的結果，然後針對不優的地方再繼續修正和調整（快速原型設計軟體）
● Adobe Photoshop：適用有關圖片像素的編輯，像是修圖、調整圖片亮度對比等等
● Adobe Illustrator：適用於向量物體，製作Logo及花案(patterns)時常使用此軟體
● Adobe InDesign：編輯、排版，雜誌編輯使用此軟體
● Adobe After Effect：動態圖像設計使用此軟體，產生各式特效以及製作動畫
● Cinema 4D：用來製作3D模型以及場景
● Corel Draw：和Adobe Illustrator一樣屬於向量圖形繪製軟體,可以應用在網頁設計及圖像處理
● Sketch：適用於使用者介面設計(UI)以及網頁設計，不同於Illustrator以向量為基礎，此軟體是以像素為基礎
用戶界面（UI） User Interface 使用者介面 看起來的感覺
· 用戶界面設計——以不同的形式建造有創意和感染力的界面。可能是在不同設備，例如iPhone、iPad、安卓，或者僅是不同尺寸的網頁，也很有可能是兩者都包括。
· 主題設計——與前者也有關係，這裡為用戶的記憶感知提供的是統一的主題風格。
· LOGO設計——為產品/服務設計任何需要的LOGO，可能每個LOGO也有不同的形式。
· 素材提供——在用戶界面設計的基礎上，需要給出供開發者使用的素材。
· 網頁設計（可選）——如果這個產品或者服務是網頁產品，一些設計師可能也需要負責一些基礎的原型搭建工作。這能夠在著手開發之前幫助用戶體驗設計師檢查設計方向是否能夠符合預期
用戶體驗（UX） User Experience 使用者體驗 用起來的感覺
· 策劃——調查、訪談潛在用戶，建立商業目標，明確客戶需求、尋找路徑等。
· 規劃——根據客戶和商業列出可行性較高的需求列表。
· 整合——繪製簡單有效的樹狀圖，標明交互與流程中的特殊步驟。
· 構架——交互、導航設計等。
· 界面——將最終的產品或者服務用從視覺上展示出來。其中的核心是視線在屏幕上的關注點在哪，主要通過這個來協助設計師排列信息。
-
專案目標：專案要解決的問題，盡量用數據客觀呈現，例如增加 10% 的轉換率、減少 30% 的 Bounce Rate 等等。
-
執行過程：如何進行 UX 的思考流程，以及在專案中扮演的角色與職責。
-
專案結果：是否順利解決問題、過程中有無重要的新發現。
-
收穫與學習：檢討專案成果以及自己在其中的學習成長，新的洞察如何應用在其他專案、再遇到類似問題該怎麼解決、是否有更適合的分析工具 ... 等等。
Mockup：設計稿
Prototype：設計圖稿製作
wireframe：頁面佈局框線圖
Flow chart：操作流程 通常以流程圖方式呈現，配合當下的操作設計出相對應的反饋
UI flow：頁面流程雛形 則是依據Flow Chart所繪製出的頁面流程雛形
UI Pattern：使用者介面設計模式
Function map或Sitemap：資訊架構的規劃
Responsive Web Design：響應式網頁設計
讀者來信：UI 設計流程 · 嫁給 RD 的 UI Designer (akanelee.me)
UI 設計師應該要會寫的文件 · 嫁給 RD 的 UI Designer (akanelee.me)
UI/UX 相關工作職責參考 · 嫁給 RD 的 UI Designer (akanelee.me)
設計規範
Google Material Design Guideline
iOS Human Interface Guideline
設計目標
-
要達成什麼目的
-
要解決的事情
-
目標使用者模樣
設計的思路
-
功能頁面的規劃（Sitemap / Function）
-
Use flow的操作邏輯
-
Wireframe元素資訊佈局和驗證操作流程
視覺設計
-
色彩的使用，主、副色的選擇及應用
-
字體的選擇
-
重點功能畫面的視覺刻畫
-
Mockup展示
-
Prototype的模擬操作
響應式的排版變化（針對網頁）
-
桌機版
-
平板版
-
手機版
優化比較（針對Redesign部分）
-
修改前/修改後
-
重點功能呈現
總覽 Overview
描述專案目的、目標族群、需求、解方，以及成果效益，並且附上專案時程、團隊配置與擔任的角色、主要職責
簡介 Introduction
包含專案背景、二手資料概述、執行專案的動機與目的、成品概述與影響力
挑戰 Challenge
說明這個專案的難度與限制，後面內容應說明如何克服挑戰
研究 Research
研究規劃、目標、問題、流程、方法、洞察、發現、人物誌、旅程圖、設計策略、行動方案
設計 Design
功能架構、資訊架構、使用者流程、線框圖、互動流程與原型、設計規格
評估 Evaluation
規劃、目標、問題、流程、方法、發現、改善策略、行動方案
迭代改善設計方案 Iteration
同設計，著重闡述改善處
結論 Conclusion
與 Overview 類似，但更強調發現、如何解決，以及產出的影響
自學 UI/UX 各階段心路分享 · 嫁給 RD 的 UI Designer (akanelee.me)
Mike | Creative Mints | Dribbble
px、pt、dp、sp 大混戰 · 嫁給 RD 的 UI Designer (akanelee.me)
內容清單 Content Inventory · 嫁給 RD 的 UI Designer (akanelee.me)
先瞭解使用者操作，還是先畫 Wireframe？ · 嫁給 RD 的 UI Designer (akanelee.me)
UI 設計師與 KPI · 嫁給 RD 的 UI Designer (akanelee.me)
User Story 和 Customer Journey Map · 嫁給 RD 的 UI Designer (akanelee.me)
UI 設計師看 Auto Layout · 嫁給 RD 的 UI Designer (akanelee.me)
讀者來信：UI 設計流程 · 嫁給 RD 的 UI Designer (akanelee.me)
頁面的第 6 種狀態：極限狀態 · 嫁給 RD 的 UI Designer (akanelee.me)
UI 設計師容易忽略的現實 · 嫁給 RD 的 UI Designer (akanelee.me)
設計是解決問題的方法 · 嫁給 RD 的 UI Designer (akanelee.me)
讀者回信：如何轉職做 UI？ · 嫁給 RD 的 UI Designer (akanelee.me)
面試會問的問題 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（1）課綱 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（2）使用者、任務、行為 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（3）使用者測試、使用者訪談 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（4）親和圖 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（5）分析文章 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（6）人物誌 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（7）使用者旅程圖 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（8）UI Flow 介面流程 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（9）練習畫 Wireframe 的方法 · 嫁給 RD 的 UI Designer (akanelee.me)
大學生的 UI 設計選修課（10）Prototype 類型與使用時機 · 嫁給 RD 的 UI Designer (akanelee.me)
Deliver on the Promise of Design (zeplin.io)
Avocode App - Collaborate on Design Files with Anyone
Apple
Android
Design for Android | Android Developers
Material Design
引導性 +世界上最受歡迎的 HTML、CSS 和 JS 圖書館。 (getbootstrap.com)
How to use your own custom templates in draw.io for Atlassian Confluence (Server) - YouTube
Smaply | Online tool for journey maps, personas and more
Customer Journey Map | Customer Experience Mapping Tool – UXPressia
頁面的第 6 種狀態：極限狀態 · 嫁給 RD 的 UI Designer (akanelee.me)
工作清單：Wireframe · 嫁給 RD 的 UI Designer (akanelee.me)
Smart TV - Build | Samsung Developers
Grid 的運用：PS外掛 · 嫁給 RD 的 UI Designer (akanelee.me)
Fixed Grid System 詳解 · 嫁給 RD 的 UI Designer (akanelee.me)
[翻譯] 如何修正壞 UI. 原文：http://scotthurff.com/posts/why-your… | by zonble | Medium
Prototype 大觀園：Prototype 優劣分析步步來 · 嫁給 RD 的 UI Designer (akanelee.me)
16 Prototyping Tools & How Each Can Be Used | by Joe Salowitz | Prototypr
Prototype 大觀園：Prototype 優劣分析步步來 · 嫁給 RD 的 UI Designer (akanelee.me)
[翻譯] 如何修正壞 UI. 原文：http://scotthurff.com/posts/why-your… | by zonble | Medium
HTML/CSS
InVision | Digital product design, workflow & collaboration (invisionapp.com)
Keynote
Android Pixel Calculator (angrytools.com)
Deliver on the Promise of Design (zeplin.io)
Avocode App - Collaborate on Design Files with Anyone
Change Design settings in Avocode | Avocode Help Center
Design Collaboration, Version Control & Handoff | Sympli
徹底理解 UI 及 Web 的尺寸單位：基本觀念. iOS 的 pt、CSS 的 pt、Android 的… | by Taylor | UXabc | Medium
網頁和行動裝置介面設計的尺寸單位(二). 理解不同尺寸單位 pt、px、dpi 之間的定義差別，實際應用的方式以及在… | by Syue Ming Yu | Medium