# 《打造最強網頁UI/UX設計腦：設計師都該懂的絕佳設計．溝通法則》

## 0.0-更新的本質
* 主要是因為網站服務或產品理念無法清楚傳達給使用者。
* 並不只限於**外觀**。可能是**服務機制**。
* 包含**服務的機制**在內，去**重新檢視與目標使用者族群的連結點**。
* 常見更新為「GUI改善」，但大部分只改善GUI是無法徹底解決問題的。
* 比起外觀修改，**系統需要改善的情況**還比較多。
###### GUI：graphical user interface，是指圖形使用者介面。

### 0.1-學會不以技術決勝負的技巧
* 將思考**重點放在人類情感上的網頁設計師**才是各界都需要的人才。
* 除了**html+css+javascript**之外，也必須從**合作的各領域專家**(工程師、攝影師等)身上**汲取知識**，並**了解網站與服務機制**。
* **透過設計，找到服務、物件及使用者的連接點**才是最重要的。

### 0.2-瀏覽器與DTP的差異
##### Desktop publishing，桌面出版
* 在瀏覽器與使用者環境內，**網頁區域是變動**的，而手冊等區域卻是固定的。
閱讀習慣：
1-DTP橫排：左至右
2-DTP直排：右至左
3-網頁：上至下
* 與其說是「**閱讀**」網頁，不如說是「**斜著瀏覽**」。
* **功能差異：互動性、對話性**。
網頁是一種使使用者**進行某些操作**後，**取得某些資訊**，就能搜尋與傳回這些資訊的媒體。
讓使用者在操作之後，能詳細瀏覽結果的結構，才是利用瀏覽器功能完成的網頁設計。

## 1.0-了解客戶需求
每個客戶都有想**透過網站完成的目標**。
最好把客戶當成不懂網站的人。
### 1.1-重點步驟
* **目標設定**：製作網站的目的。
* **行銷**：調查市場與對手，可能還需要廣告與行銷。
* **資訊設計**：為了達成目的而收集的必要資訊，並將資訊配置在適當的位置。
* **專業技術**：設計與製作網站。
* **流量分析**：網站發布後進行流量分析

### 1.2-人可以做的事
**「與使用者對話」。**
人與人對話可透過語言、文字以及肢體動作表達。
置換成「**人與網站對話模式**」，本質上是相同的。
使用者在了解網站內容後才會開始行動。

## 2.0-共同參與來解決問題
* **監製群：**
總監、行銷、PM等，通常是指**提出理想的人，也容易陷於「只要提出元素、使用者自然會用」的想法**內。
* **設計師：**
從行銷觀點將東西具體化的人。除了整理的漂漂亮亮之外，還必須思考如何編排內容，才能將訊息清楚的傳遞給使用者。
* **「為什麼這樣設計會很難用」**：
應該是讓監製群理解為何他們的想法具體化後、在使用者使用時會變得很難使用。
* 不管是監製群或設計師，**都應互相了解對方專業**，但不用到非常深入的相關知識，**粗淺的即可。當彼此互相理解的時候，就是「溝通」的開端**。

### 2.1-盡可能不要否定對方
* 交換意見時，避免大放厥詞，**應提出替代方案**說服對方。
* 「為什麼這麼難用？」→委婉「為什麼會變成這樣子」。
以**理解其目的性**，設計師就可以提出「**如果是這樣的話，或許怎樣做會比較好**」。
* **盡量說出自己的想法**。表現出合作的誠意，監製群在某種程度上也會協調。
* 討論過程中，邊繪製簡單的wireframe同時確認雙方理解。
在此階段達成共識，之後的設計也會變得較為順利。
* 使用者內心感受到的不方便是看不到的，而開發新服務的**目的即是在讓原本不方便的事情變得方便**。如果**設計師也能了解服務**的企劃，就能**減少溝通的落差**。
* 並不是說設計師也應該學習企劃或行銷，而是**應該以團隊成員身分參與溝通，並且共同解決問題**。

## 3.0-傳遞訊息
### 3.1-一眼就看懂是件重要的事
* 讓使用者立刻掌握內容，**讓人們減少動腦思考/計算**
* 設計的目的：整理與傳遞資訊
* **軟體操作性非常重要**，軟體分3種：娛樂用(遊戲)、職場工具(excel之類)、業務用(機械操作)。職場工具操作不當可能會失去生意、甚至工作，業務用操作不當則可能攸關生死。
* 操作失當：應用程式設計問題、人為操作不當因素

### 3.2-減輕動腦思考
* 例如按鈕：盡可能以簡單的辭彙顯示。
「使用者閱讀文字→理解文字」的過程是包含了「**動腦思考**」。
了解資訊的優先順序很重要，**使用者非得先讀懂不可**。
* 無形的資料轉化成視覺設計，**不是為了要求使用者解讀圖片**。
目的**是要讓使用者一眼就看懂**。
* **了解使用情境**，並**判斷最重要的資訊**應該最醒目。**不用讀文字，看圖即懂**。
例如交通工具app，出發時間+到達時間>轉乘站+轉乘次數>搭乘路線名稱+車票金額
* **接近理想的妥協方案是必須的。**
必須請工程師告訴你「甚麼部分是做不出來的」、「可以做到甚麼地步」
### 3.3-思考使用者現在最需要的資訊是甚麼
* 將服務落實於設計之中
* 最佳設計不僅一個。
以下為假設一個牙醫預約app之需求

| 重點服務 | 必要的設計 |
| -------- | -------- |
| 想知道患者到院頻率| 與今天的日期做比較，算出患者在多久之前來過醫院|
| 想建議下次預約日期| 到目前為止的治療內容以及詳細到院日期（含星期幾）|

* 想要**一眼看懂**，就**必須掌握服務的全貌**
需要進一步考量使用者的使用情境，並傾聽使用者意見，再決定哪些是必要元素，並透過設計讓重點更搶眼。
如：使用者會在何種情況下使用？最重要的資訊是甚麼？

### 3.4-面對「為何編排出這樣的版面」的疑問時，也能清楚回答
* 設計並非美術品
* **完形心理學(又稱格塔式法則)**：
人類本來就擁有搜尋**集合體**資訊的特性。
不只視覺上，聽覺也會有。
過於瑣碎的資訊無法掌握，但可以**從事物的全貌去找出特徵**，就很容易進入意識之中。
* **距離與關係**：群組
只要有部分資訊**不符合規則(模式)**，則會**被視為例外**的資訊。
* 在網頁設計中，**資訊關聯性必須簡化而清楚**。
* 網頁畫面有捲動的概念，需捲動來閱讀文章，最好**遵守一定的規則來減少使用者閱讀疲勞**。
* 在手機或平板上使用，能**明確規劃出主要內容的區塊**，才能提升使用者的理解度，避免點錯位置。
* 使用**相同的樣式**可以被理解成**同樣的操作方式**。

### 3.5-與使用者建立溝通
**網頁媒體特徵：**
* **互動性設計**：使用者提出「想看這個」就能夠立即回應。
* **動態設計**：從無限的資訊篩選出結果，再作成動態設計。
* 將焦點放在使用者行為的重要性，提出最適合使用者的方案也是網頁設計師被要求的課題之一。
* **電子商務網站與實體店面的溝通相同**：
在實體店面中店員能夠透過傾聽並提醒客戶(提出建議與解套方案)，若網站不能提醒顧客，便無法順利與顧客溝通。
* **網站具體促請客戶體驗**：
透過文字與圖片、影片等，具體告知使用者的具體經驗，可以讓溝通品質大幅提升。
* **進一步讓客戶了解商品魅力**：
1-闡述商品堅持之處。
2-換成人與人面對面的對話模式，思考使用者之間的對話。
3-讓使用者想像擁有這項商品會有哪些好處。
* **如何觸動使用者的心**：
1-標題或文案寫法
2-照片影片的品質與角度
3-次要文案應力求簡潔
讓忙碌的使用者可以快速閱讀文章，看到喜歡的商品可以迅速點選。

### 3.6-扁平化設計誕生的因素
例如：過去的轉盤式黑色電話→現在的手機
* 1-有利生產成本降低
* 2-技術革新
* 3-只要符合機械與人類的需求，該設計就得以普及，即是扁平化設計普及的重點。

扁平化**不只外觀看起來平面**，簡化必要操作的目的是「**讓人與機械的關係變得更加圓融**」。
但在設計時須注意使用者使用之介面為電視、電腦、平板還是手機。

## 4.0-與業主溝通
**溝通落差主因：都只主張自己的意見。**
要業主理解有終端使用者的存在，以此建立互信的橋樑，一起思考網站。

應該向業主**釐清後續製作的東西為何如此必要**的背景資訊，製作的主軸才會清楚。
* 希望製作甚麼樣的網站？為什麼想製作這樣的網站？
* 希望甚麼人來瀏覽網站？希望將這種服務提供給誰？
* 希望周遭的人怎麼看待網站？

與業主之間的討論，草率結束並非好事。
### 4.1-業主「先提三案來討論」
實際上的意思是：
* 概念尚未確定
* 還沒想到好的方案
* 希望數個提案之中出現應該會中意的方案

即使提了三個不同風格的方案，業主可能也會陷入迷惘，不知如何決定。
在聽從指示多個方案之前，應多花時間與對方溝通及磨合。
精簡之後，應快速做出**足夠客戶確認的局部設計**即可。

### 4.2-情境對答
販售健康食品的網站改版情境
> 業主：現在的網站幾年前就開始經營了。
> 因為一直都是同樣的設計，覺得有點老舊。
> 剛好活躍的使用者也逐漸減少，所以想替網站改版。

此時應該反問
> 1-覺得哪部分很老舊呢？
> 2-使用者減少了多少？有了解原因了嗎？(可能不是網站外觀造成，而是服務造成)
> 3-希望是甚麼樣的人使用網站？開著保時捷的大叔？或是吉野家打工工讀生？

**無法了解核心問題，網站即使改版了也毫無作用。**
**不解決「為什麼」，會連目前的問題也無法解決。**

設計LOGO情境
> 業主：我覺得POP字體不錯。

實際上業主可能**只是覺得POP字體所展現的親切感**他很喜歡。
而並非一定要用POP字體。
**目標問出「想做成這樣」的原因很重要。**
* 將**看不見的問題變得更具體，再解決問題**。與客戶對話、引出客戶的想法，正是設計的基本工作之一。
* 設計師的工作是在溝通之後才開始。

面對客戶可以委婉地告知：
> 我們雖然是專業的設計師，但對於您的公司及其服務項目是外行人。
> 既然要製作貴司的網站，就必須徹底了解貴司的商品及工作內容。
> 雖然有點麻煩，但是否可以請您把我們當作甚麼都不了解的客戶，
> 稍微解釋一下貴司的產品內容及服務項目呢？

## 5.0-與團隊溝通
**溝通落差主因：工程師與設計師覺得該重視的東西不同。**
* 在了解對方的立場且進行過討論後，還是無法執行時，就該放棄並尋求備案。
* 理解不可能一次就開發出功能優異且方便的操作軟體，如果可能的話就不需要改版了。
* 設計師的責任就是把**使用者面臨的情況→可視化畫面**。

## 6.0-視覺與設計的實踐
* **按鈕設計重點**：不損及**可以按**的特性、不損及**文字易讀性**，過多的裝飾會讓易讀性下降。
* **字體易讀性**：黑體字>明體字。
* **文字做成圖片**：容易有解析度問題，且維護時不方便維護。
* **文字連結底線**：不要隨意移除。**文字連結有底線已是長期下來的「使用者經驗」。**
* **訪問過(:visited)連結**：設為使人感到「疲憊」顏色，通常是原本顏色再深一些。鮮豔的顏色會讓人有新鮮感，會誤以為還未瀏覽。
* **圖示非萬能**：並非所有使用者皆能看圖示理解該功能。
圖示+簡潔文字說明較佳，且何者為主、何者為輔，也須看使用情境。
> 例如：
> 在輸入框+放大鏡icon，容易讓人理解放大鏡=搜尋。
> 放大鏡icon若是放在圖片旁邊則會讓人聯想到「將圖片放大」的功能。
> 這兩者皆可不用文字輔佐即可以理解該使用情境。
* **思考「如果是我，我想將網站的哪裡做為賣點」**：
掌握「使用者為何而來」、「使用者希望得到什麼」，了解使用者的心情來解決問題。

### 6.1-容易使用的實作方式
**表單設計，減輕填寫負擔：**
* 依照需求只表列必要項目。需不需要寫出真實姓名、年齡等。
* 年紀可以圈選大概範圍即可。
* 電話是使用者心中的敏感資料。
* 輸入框可不限制半形全形。
* 表格輸入錯誤時的錯誤畫面須記得設計。

### 6.2-思考不同裝置的設計
**智慧型手機：**
因為螢幕很小，所以只能**放必要的資訊**，且內容須盡可能放大。
* **沒有hover的概念：**
在手機上可以用別的形式，甚至不用隱藏資訊也無所謂的呈現方式。
* **折疊式內容：**
副選單或導覽列可以，有時候內容過多甚至可以直接換一頁面，不用堅持摺疊在一起。
* 裝飾性過多會影響使用者閱讀。
* **最適合觸控手機的按鈕尺寸：iOS至少44px，Android至少要48px。**
建議視情況設定成不同的尺寸與大小。
* **考慮到loading時間的設計：**
使用者體驗較佳的狀況是設計loading樣式，如百分比、或轉圈圈、沙漏等，至少讓使用者了解網頁有在運行。