[ 閱讀筆記 ] 打造最強網頁 UI/UX 設計腦 - 設計師都該懂得絕佳設計．通用法則

打造最強網頁 UI/UX 設計腦-設計師都該懂得絕佳設計.通用法則

文章目錄

一、書籍重點以及想解決的問題:

1. 如何抽絲剝繭出客戶要求的本質?
2. 如何做出合乎設計法則的設計?
3. 如何站在使用者立場思考、解決問題?

二、學習摘要

1. 將設計當成是一種溝通
2. 如何與使用者建立溝通
3. 資訊的呈現
4. 「書籤」功能的設計重點 (我的最愛、收藏也是相同功能)
5. 「導覽列」的設計重點
6. 「手機板」的設計重點

三、出版資訊

(以下內文開始!)

一、書籍重點以及想解決的問題

1.如何抽絲剝繭出客戶要求的本質?

• 讓客戶理解有終端使用者存在這件事。
• 草率結束討論並非好事，前期會花大量時間在溝通與建立互信關係，這裡最重要的是與客戶一起思考網站。
• 當業主「沒有答案」，提出「給我多提幾個方案」的本質: 概念尚未確定、還沒想到好的方案、希望在數個提案之中應該會出現中意的方案。

但這種情況照著做很容易無法收斂，甚至擴大要求 ( 再多提幾個 )，而無法下決定，因此製作方要判斷是否要依此要求進行作業。在聽從指示提出多個方案之前，應該先花時間與對方溝通磨合。釐清「為甚麼想製作這種服務 / 網站 ?」「希望將這種服務 / 網站提供給誰呢?」

• 釐清背景資訊

情境對話

大部分的客戶通常沒有辦法回答這麼多的問題，這代表客戶也不了解改版的核心背景，但不論是透過詢問或是調查，應該釐清製作的東西為何如此必要的背景資訊，製作的主軸才會變得清晰。

• 問出「想做成這樣」的原因，透過溝通了解「客戶真正的要求」。
• 承認「在該領域自己不是專家」很重要。

承認自己在該領域不是專家很重要

2、如何做出合乎設計法則的設計?

• 格式塔法則 (Gestalt)

人類的視覺會將具有一定規則的編排方式視為「群組」，所以可以透過元素之間的距離、樣式、封閉空間等來將目標元素分組或是獨立出來

• 要讓客戶理解有終端使用者存在這件事 : 但也不是完全站在終端使用者或是客戶任何一方，拿捏程度也許很困難，不過「客戶與製作者能一起將眼光轉向終端使用者，做出使用者能滿意的網站」將會是成功的第一步。
• 「書籤」功能的設計重點、「導覽列」的設計重點、「手機板」的設計重點 (詳細介紹在下方 二、學習摘要)

3.如何站在使用者立場思考、解決問題?

• 思考「使用者方便填寫的表單」:

明確定義【必要項目】、考慮使用者不想輸入本名的設計、時時考慮需不需要詢問性別跟年齡、全形與半形格式的兼容性、電話號碼是使用者心中的敏感資料，錯誤畫面的設計。

二、學習摘要

1. 將設計當成是一種溝通

• 思考使用者是在甚麼情境、帶著甚麼需求、想解決甚麼問題而來到這個產品 / 網頁。
• 思考「使用者現在最需要的資訊是甚麼」，區分資訊層級。 XZ

2.如何與使用者建立溝通

• 可對話的設計 : 當使用者提出「只想看到這個」的要求，立刻就能回應。
• 動態設計 : 答案不只一個，從無限的資訊篩選出需要的結果，再將結果做成動態設計。

3.資訊的呈現

• 一眼就看懂是件重要的事 : 減少人動腦思考與計算。
• 訊息圖表 : 以視覺設計呈現資訊、資料與知識的圖片，將這些無形的資料轉化成視覺設計。目的是讓使用者義眼就看懂要傳遞的訊息，而非要求使用者解讀。
• 案例分享 1 : 交通規劃的 app，如何呈現「轉乘」的資訊，以及那些資訊被強調或縮小? ( 起訖時間? 總搭乘時間? 價格? 顏色的使用?)
• 案例分享 2 : 牙醫診所預約的介面有上次診療日期，但櫃台人員或是患者要先解讀與計算這個日期倒底是多久之前，如果再日期旁新增資訊「七天前」會比較容易看懂。不過，若要提供「下次預約的建議日期」，最好是顯示明確日期。

4.「書籤」功能的設計重點 (我的最愛、收藏也是相同功能)

• 不註冊也能使用 : 使用者只是想輕鬆地保留資訊，但卻要先提供個人資料或是經歷註冊階段。
• 誰都能注意到書籤的存在:同時也要清楚呈現「貼上書籤的資訊，可以從哪裡開啟一覽表?」「按下哪裡的按鈕，可在頁面的資訊貼上書籤?」
• 不需要任何技巧就能貼上書籤 :不需要再訊息確認: 真的要貼上書籤嗎? 讓使用者一鍵就可以完成。因為這類訊息，就算使用者不小心點錯，也不會造成操作的致命傷。
• 可立刻取消書籤 : 設計功能性的使用者介面時，有「ON」的功能，也就同時要有「OFF」的功能。
• 可輕鬆將貼上書籤的物件傳給別人看 : 就算對方沒有相同 app，也要可以透過 mail、LINE或其他服務來完成這個目的。

5.「導覽列」的設計重點

• 設計上不損及「可以按」是視覺暗示
• 不損及「文字的易讀性」

6.「手機板」的設計重點

• 記得「手機可以通話」的特性，在電話號碼可用

 <a href="tel:0212345678">02-12345678</a>

以及可點擊的樣式設計。

• 考慮「單手操作」的使用情境，左撇子?右撇子?
• 沒有 hover 效果
• 內容是否需要摺疊?隱藏?如何讓使用者知道有潛藏內容?

(若展開太多內容，一瞬間看不出內容從哪裡到哪裡，若內容過於龐大詳細，不如直接放在另一個頁面)

• iOS 最小觸控範圍是 44px * 44px，Android 是 48px*48px

三、出版資訊

• 作者: 秋葉秀樹、秋葉ちひろ
• 出版日期：2016/08/01