UI 扯後腿?

閱讀時間約 2 分鐘
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢?
這是設計師與工程師
今天,設計師畫了一個上傳照片的功能:
設計師如果只提供這張圖會代表什麼呢?
就會變成這樣,總得有人去問神接下來會長什麼樣子:
喔,別忘了,做出來以後設計師如果不滿意。
瞭解了嗎?設計師做了一個很漂亮,但很難用的東西,工程師還有很多其他事要做,饒了他們吧,這還沒到 QA 跟用戶端呢,像是我可以傳一個 200mb 的檔案嗎?可以傳 .exe 嗎?10000x10000 px 的圖片能預覽嗎?你絕對不會想知道用戶們還有什麼創意玩法的!!
所以,身為一個 UI 設計師應該要考慮什麼,讓我們從這個案例攤開基本可能結果吧,這邊有一些最基礎的狀況會發生:
這樣有比較清楚了對嗎?畢竟我們畫的圖得讓其他人看懂才行,你會覺得這是 UX 該做的事嗎?不對喔,這裡面也包含顏色跟使用情境的規劃,不可能單靠 Design Guideline 完成,除非你 Guideline 制定的詳細到每一個使用情境(那跟直接做這些結果差不多),所以客製的工作是少不了的。
那麼不如使用 Prototype 實作測試?這樣其他人才懂要怎麼運作,好,讓我們試試怎麼做:
由於 Prototype 是線性的製程,無法有意圖的觸發個別情境,因此你必須個別製作與測試,之後還得根據結果逐個修改,然後花了一個禮拜終於處理完了,一個禮拜只處理了一個上傳圖片的按鈕,值得嗎?Prototype 在這種場景使用就會做死你自己,尤其是觸發各種結果這樣的事,你可以參考我之前寫的這篇 Prototype 幫倒忙
設計師不該悶著頭在自己的電腦前苦幹實幹,應該讓自己更有彈性的去參與團隊溝通,了解,說服,接納,反思,最後測試,有時你以為實作流程是長那樣,但實際上只是你的想像,與現實早已脫節,技術日新月異,保持開闊心思是必須的。
設計師在最理想的情況下,應該為自己產品的每個角落負責,如果時間上不允許,也應該讓團隊的人知道該怎麼做,這也是設計系統建立的重要性,而不是跟著大家一起畫 UIKit 就結束了,每個產品都有自己的賣點與痛點,找到他們,針對他們去優化。
這不只是為了產品,也是為了你自己。
為什麼會看到廣告
864會員
33內容數
UIUX 基礎到資深完全詳解,文章將詳解現在趨勢,職位解析,軟體教學,職場應對,面試與作品集教學。 Ted Deng,目前在外商擔任 Lead Designer,十年以上設計經驗,2018 德國紅點設計獎。
留言0
查看全部
發表第一個留言支持創作者!
Ted的沙龍 的其他內容
近年來,隨著軟體開發 SOP 逐漸成熟,分工日趨清晰,Prototype 工具開始像雨後春筍那樣冒出來。但這些工具真的有在幫忙嗎?還是只是在裝逼?這篇將會簡單地分享一下 prototype 在工作中的實戰心得。 這篇將簡單分析各項 prototype 工具,並就其使用方法歸納整理出優點,確定,與現
近年來,隨著軟體開發 SOP 逐漸成熟,分工日趨清晰,Prototype 工具開始像雨後春筍那樣冒出來。但這些工具真的有在幫忙嗎?還是只是在裝逼?這篇將會簡單地分享一下 prototype 在工作中的實戰心得。 這篇將簡單分析各項 prototype 工具,並就其使用方法歸納整理出優點,確定,與現
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
產品製作的核心因素有三個重點,分別為:使用者(誰在用)、需求(為什麼用)、場景(在哪裡用)。這些因素對於任何產品的成功都是相當重要的。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎,只是當時沒有像現在這樣重視使用者對產品的使用體驗感受,不過我們還是可以透過回顧歷史,看看UI/UX是怎樣往前發展至現在的模樣,甚至近期有一些新技術已經在某些族群中默默地發展著!
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
最近收到了一封學生的信,詢問在職場中UI Designer是什麼?想在公司建立一套基本的流程,這張圖片應該許多人都看過,裡頭有很多專業的名詞,以及像金字一樣往上堆疊的順序,在討論工作流程前,我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。 Us
Thumbnail
我們部門有一個美工團隊,以前稱為媒體設計(MD) 後來改名為UI團隊 某日,來了一位UI專家(空降的主管)。他說 他專研UI與使用者心理學…..八拉八拉  軟體的操作畫面並不是這麼簡單,必須經過研究、觀察使用者,不斷修正才行…八拉八拉 根據我的觀察,他的團隊仍是美工團隊 所以先用部門同仁測試
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
產品製作的核心因素有三個重點,分別為:使用者(誰在用)、需求(為什麼用)、場景(在哪裡用)。這些因素對於任何產品的成功都是相當重要的。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎,只是當時沒有像現在這樣重視使用者對產品的使用體驗感受,不過我們還是可以透過回顧歷史,看看UI/UX是怎樣往前發展至現在的模樣,甚至近期有一些新技術已經在某些族群中默默地發展著!
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
最近收到了一封學生的信,詢問在職場中UI Designer是什麼?想在公司建立一套基本的流程,這張圖片應該許多人都看過,裡頭有很多專業的名詞,以及像金字一樣往上堆疊的順序,在討論工作流程前,我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。 Us
Thumbnail
我們部門有一個美工團隊,以前稱為媒體設計(MD) 後來改名為UI團隊 某日,來了一位UI專家(空降的主管)。他說 他專研UI與使用者心理學…..八拉八拉  軟體的操作畫面並不是這麼簡單,必須經過研究、觀察使用者,不斷修正才行…八拉八拉 根據我的觀察,他的團隊仍是美工團隊 所以先用部門同仁測試