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

YJ
發佈於UI/UX 個房間
閱讀時間約 5 分鐘


打造最強網頁 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
2會員
21內容數
關於 Html 、 Css 、JS 等相關程式語言的學習筆記或開發紀錄
留言0
查看全部
發表第一個留言支持創作者!
從 Google News 追蹤更多 vocus 的最新精選內容