[ 閱讀筆記 ] 打造最強網頁 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
avatar-img
3會員
21內容數
一位會切版的 UI 設計師, 以介面設計為錨,朝向 UX 、產品思維、數據思維前進。 喜歡透過書探索世界、看見自己。 著迷文字與內心產生共鳴的瞬間, 喜愛哲學、小說、心理、創造力, 喜愛將所思所想落地變成文字。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章主要討論了行銷人與設計人溝通的重要性,並針對以商業目的為主的設計提出了一些設計風格呈現、視覺重點、露出設計的地點和閱讀者為誰等方面的建議。
Thumbnail
本文章是有關如何將閱讀的知識付諸實踐的實用指南,並提出了五條深具啟發性的核心原則,包括讓顧客主動上門、從顧客的角度溝通、提供驚喜的服務、好好提案以及讓顧客主動推薦你。
Thumbnail
本文講述了設計師進行產品規劃時需要融入商業策略,並深入瞭解用戶需求和使用方式的重要性。同時,透過使用者訪談和對各種競品的研究,設計師可以建立良好的商業策略思維,以實現產品的成長和用戶滿意度。
Thumbnail
這篇文章主要討論了設計的主客觀問題。透過討論設計師必然面對的主客觀問題,幫助讀者更妥善地處理設計衝突及評價,使設計更趨向完整。
Thumbnail
「聯絡我們」頁面,對於許多人來說,可能只是一個填寫表格或放置聯絡資訊的地方。然而,在服務客戶的過程中,我經常被問到:網站真的需要這樣的頁面嗎?事實上,現今的聯絡方式多樣化,可以根據不同的需求和情境進行設計,讓我們來看看具體如何做。 服務性質的考量 考慮服務的性質是第一步。通常,服務性質會涵蓋多個
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在業務取得訂單的過程中,成功地將個人觀點傳達給買方是最重要的,也就是您說的話,客戶要能買單。以下是一些建議的方法和技巧,可以協助您達成業務目標
Thumbnail
在這個以用戶為中心的時代,了解UX設計的本質對於設計師和組織來說是至關重要的。本指南將提供一系列有助於創造無縫且易於存取的用戶體驗的實用技巧、洞見和資源。
Thumbnail
在當今這個以用戶為中心的網頁設計及App設計時代,分析用戶流程已成為提升產品用戶體驗的不可或缺的工具。一個流暢、直觀的用戶流程可以顯著提高用戶滿意度並提升任務完成率。以下是一個簡單的四步驟框架,幫助設計師和產品經理分析並改進用戶流程。
Thumbnail
這篇文章提供了五種方法,協助你確定讀者的痛點以提出產品創意。另外,還包括了一些提升線上服務業務成功的建議。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章主要討論了行銷人與設計人溝通的重要性,並針對以商業目的為主的設計提出了一些設計風格呈現、視覺重點、露出設計的地點和閱讀者為誰等方面的建議。
Thumbnail
本文章是有關如何將閱讀的知識付諸實踐的實用指南,並提出了五條深具啟發性的核心原則,包括讓顧客主動上門、從顧客的角度溝通、提供驚喜的服務、好好提案以及讓顧客主動推薦你。
Thumbnail
本文講述了設計師進行產品規劃時需要融入商業策略,並深入瞭解用戶需求和使用方式的重要性。同時,透過使用者訪談和對各種競品的研究,設計師可以建立良好的商業策略思維,以實現產品的成長和用戶滿意度。
Thumbnail
這篇文章主要討論了設計的主客觀問題。透過討論設計師必然面對的主客觀問題,幫助讀者更妥善地處理設計衝突及評價,使設計更趨向完整。
Thumbnail
「聯絡我們」頁面,對於許多人來說,可能只是一個填寫表格或放置聯絡資訊的地方。然而,在服務客戶的過程中,我經常被問到:網站真的需要這樣的頁面嗎?事實上,現今的聯絡方式多樣化,可以根據不同的需求和情境進行設計,讓我們來看看具體如何做。 服務性質的考量 考慮服務的性質是第一步。通常,服務性質會涵蓋多個
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在業務取得訂單的過程中,成功地將個人觀點傳達給買方是最重要的,也就是您說的話,客戶要能買單。以下是一些建議的方法和技巧,可以協助您達成業務目標
Thumbnail
在這個以用戶為中心的時代,了解UX設計的本質對於設計師和組織來說是至關重要的。本指南將提供一系列有助於創造無縫且易於存取的用戶體驗的實用技巧、洞見和資源。
Thumbnail
在當今這個以用戶為中心的網頁設計及App設計時代,分析用戶流程已成為提升產品用戶體驗的不可或缺的工具。一個流暢、直觀的用戶流程可以顯著提高用戶滿意度並提升任務完成率。以下是一個簡單的四步驟框架,幫助設計師和產品經理分析並改進用戶流程。
Thumbnail
這篇文章提供了五種方法,協助你確定讀者的痛點以提出產品創意。另外,還包括了一些提升線上服務業務成功的建議。