UI 扯後腿?

更新於 2020/11/25閱讀時間約 2 分鐘
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢?
這是設計師與工程師
今天,設計師畫了一個上傳照片的功能:
設計師如果只提供這張圖會代表什麼呢?
就會變成這樣,總得有人去問神接下來會長什麼樣子:
喔,別忘了,做出來以後設計師如果不滿意。
瞭解了嗎?設計師做了一個很漂亮,但很難用的東西,工程師還有很多其他事要做,饒了他們吧,這還沒到 QA 跟用戶端呢,像是我可以傳一個 200mb 的檔案嗎?可以傳 .exe 嗎?10000x10000 px 的圖片能預覽嗎?你絕對不會想知道用戶們還有什麼創意玩法的!!
所以,身為一個 UI 設計師應該要考慮什麼,讓我們從這個案例攤開基本可能結果吧,這邊有一些最基礎的狀況會發生:
這樣有比較清楚了對嗎?畢竟我們畫的圖得讓其他人看懂才行,你會覺得這是 UX 該做的事嗎?不對喔,這裡面也包含顏色跟使用情境的規劃,不可能單靠 Design Guideline 完成,除非你 Guideline 制定的詳細到每一個使用情境(那跟直接做這些結果差不多),所以客製的工作是少不了的。
那麼不如使用 Prototype 實作測試?這樣其他人才懂要怎麼運作,好,讓我們試試怎麼做:
由於 Prototype 是線性的製程,無法有意圖的觸發個別情境,因此你必須個別製作與測試,之後還得根據結果逐個修改,然後花了一個禮拜終於處理完了,一個禮拜只處理了一個上傳圖片的按鈕,值得嗎?Prototype 在這種場景使用就會做死你自己,尤其是觸發各種結果這樣的事,你可以參考我之前寫的這篇 Prototype 幫倒忙
設計師不該悶著頭在自己的電腦前苦幹實幹,應該讓自己更有彈性的去參與團隊溝通,了解,說服,接納,反思,最後測試,有時你以為實作流程是長那樣,但實際上只是你的想像,與現實早已脫節,技術日新月異,保持開闊心思是必須的。
設計師在最理想的情況下,應該為自己產品的每個角落負責,如果時間上不允許,也應該讓團隊的人知道該怎麼做,這也是設計系統建立的重要性,而不是跟著大家一起畫 UIKit 就結束了,每個產品都有自己的賣點與痛點,找到他們,針對他們去優化。
這不只是為了產品,也是為了你自己。
為什麼會看到廣告
avatar-img
863會員
33內容數
UIUX 基礎到資深完全詳解,文章將詳解現在趨勢,職位解析,軟體教學,職場應對,面試與作品集教學。 Ted Deng,目前在外商擔任 Lead Designer,十年以上設計經驗,2018 德國紅點設計獎。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Ted的沙龍 的其他內容
近年來,隨著軟體開發 SOP 逐漸成熟,分工日趨清晰,Prototype 工具開始像雨後春筍那樣冒出來。但這些工具真的有在幫忙嗎?還是只是在裝逼?這篇將會簡單地分享一下 prototype 在工作中的實戰心得。 這篇將簡單分析各項 prototype 工具,並就其使用方法歸納整理出優點,確定,與現
近年來,隨著軟體開發 SOP 逐漸成熟,分工日趨清晰,Prototype 工具開始像雨後春筍那樣冒出來。但這些工具真的有在幫忙嗎?還是只是在裝逼?這篇將會簡單地分享一下 prototype 在工作中的實戰心得。 這篇將簡單分析各項 prototype 工具,並就其使用方法歸納整理出優點,確定,與現
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
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
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
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與使用者心理學…..八拉八拉  軟體的操作畫面並不是這麼簡單,必須經過研究、觀察使用者,不斷修正才行…八拉八拉 根據我的觀察,他的團隊仍是美工團隊 所以先用部門同仁測試