UI 扯後腿?

更新於 發佈於 閱讀時間約 3 分鐘
raw-image

有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢?

這是設計師與工程師

raw-image

今天,設計師畫了一個上傳照片的功能:

raw-image

設計師如果只提供這張圖會代表什麼呢?

就會變成這樣,總得有人去問神接下來會長什麼樣子:

raw-image

喔,別忘了,做出來以後設計師如果不滿意。

raw-image

瞭解了嗎?設計師做了一個很漂亮,但很難用的東西,工程師還有很多其他事要做,饒了他們吧,這還沒到 QA 跟用戶端呢,像是我可以傳一個 200mb 的檔案嗎?可以傳 .exe 嗎?10000x10000 px 的圖片能預覽嗎?你絕對不會想知道用戶們還有什麼創意玩法的!!

所以,身為一個 UI 設計師應該要考慮什麼,讓我們從這個案例攤開基本可能結果吧,這邊有一些最基礎的狀況會發生:

raw-image

這樣有比較清楚了對嗎?畢竟我們畫的圖得讓其他人看懂才行,你會覺得這是 UX 該做的事嗎?不對喔,這裡面也包含顏色跟使用情境的規劃,不可能單靠 Design Guideline 完成,除非你 Guideline 制定的詳細到每一個使用情境(那跟直接做這些結果差不多),所以客製的工作是少不了的。

那麼不如使用 Prototype 實作測試?這樣其他人才懂要怎麼運作,好,讓我們試試怎麼做:

raw-image

由於 Prototype 是線性的製程,無法有意圖的觸發個別情境,因此你必須個別製作與測試,之後還得根據結果逐個修改,然後花了一個禮拜終於處理完了,一個禮拜只處理了一個上傳圖片的按鈕,值得嗎?Prototype 在這種場景使用就會做死你自己,尤其是觸發各種結果這樣的事,你可以參考我之前寫的這篇 Prototype 幫倒忙

設計師不該悶著頭在自己的電腦前苦幹實幹,應該讓自己更有彈性的去參與團隊溝通,了解,說服,接納,反思,最後測試,有時你以為實作流程是長那樣,但實際上只是你的想像,與現實早已脫節,技術日新月異,保持開闊心思是必須的。

設計師在最理想的情況下,應該為自己產品的每個角落負責,如果時間上不允許,也應該讓團隊的人知道該怎麼做,這也是設計系統建立的重要性,而不是跟著大家一起畫 UIKit 就結束了,每個產品都有自己的賣點與痛點,找到他們,針對他們去優化。

這不只是為了產品,也是為了你自己。

留言
avatar-img
留言分享你的想法!
avatar-img
Ted的沙龍
862會員
33內容數
UIUX 基礎到資深完全詳解,文章將詳解現在趨勢,職位解析,軟體教學,職場應對,面試與作品集教學。 Ted Deng,目前在外商擔任 Lead Designer,十年以上設計經驗,2018 德國紅點設計獎。
Ted的沙龍的其他內容
2023/11/16
在 Facebook 上連載並獲得 2600 次以上分享的網路原創真實系漫畫! 不是設計名校畢業,在學表現也平平,但還是一頭栽進了設計業,參雜真實與虛構的搞笑故事就此展開。
 網友留言: “看著這系列下來還以爲是我的故事” “為什麼我身邊真的有一位一模一樣的例子...???? 也太真實了
Thumbnail
2023/11/16
在 Facebook 上連載並獲得 2600 次以上分享的網路原創真實系漫畫! 不是設計名校畢業,在學表現也平平,但還是一頭栽進了設計業,參雜真實與虛構的搞笑故事就此展開。
 網友留言: “看著這系列下來還以爲是我的故事” “為什麼我身邊真的有一位一模一樣的例子...???? 也太真實了
Thumbnail
2023/08/01
文章更新至 2023 年 12 月底。
Thumbnail
2023/08/01
文章更新至 2023 年 12 月底。
Thumbnail
2023/02/01
內容已更新到 2023 七月底
Thumbnail
2023/02/01
內容已更新到 2023 七月底
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
一個UX設計師在成長過程中,除了設計思維的提升外,對於細節的掌握也需要特別的注意,尤其交付Wireframe和UI Flow時。一個系統化的自查表可以避免許多曾犯的錯誤ㄧ再發生,減少設計稿來回次數,也不用再穿防彈衣跟開發技術人員討論了。
Thumbnail
一個UX設計師在成長過程中,除了設計思維的提升外,對於細節的掌握也需要特別的注意,尤其交付Wireframe和UI Flow時。一個系統化的自查表可以避免許多曾犯的錯誤ㄧ再發生,減少設計稿來回次數,也不用再穿防彈衣跟開發技術人員討論了。
Thumbnail
在台灣雖然越來越多設計師,但還是有很多人不了解這個工作,畢竟這個職位相較於工程師與產品經理比較新,某個角度來看也沒這麼重要(苦笑)。 但在美國,這是個非常受歡迎的職位。有非常多學生,甚至工程師轉來做設計師,為什麼呢?就來透過五個常見的問題來介紹一下我的工作吧!
Thumbnail
在台灣雖然越來越多設計師,但還是有很多人不了解這個工作,畢竟這個職位相較於工程師與產品經理比較新,某個角度來看也沒這麼重要(苦笑)。 但在美國,這是個非常受歡迎的職位。有非常多學生,甚至工程師轉來做設計師,為什麼呢?就來透過五個常見的問題來介紹一下我的工作吧!
Thumbnail
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
不論是哪一種設計師,每一個人找工作時,都絕對需要一份作品集,來向面試官、主管闡述你過去的經驗與能力。但對於非本科系或是轉職的人,並沒有過去學生時期所累積的作品。因此在學習新技能時,同時也要考量如何能夠有產出,以至於未來在尋找工作時,讓公司知道你目前的能力所在。 在製作作品集前,我們必須先要有「作品」
Thumbnail
不論是哪一種設計師,每一個人找工作時,都絕對需要一份作品集,來向面試官、主管闡述你過去的經驗與能力。但對於非本科系或是轉職的人,並沒有過去學生時期所累積的作品。因此在學習新技能時,同時也要考量如何能夠有產出,以至於未來在尋找工作時,讓公司知道你目前的能力所在。 在製作作品集前,我們必須先要有「作品」
Thumbnail
雖然職稱都為設計師,而且好像也是都用工具產出設計圖,要從「前者」轉換至「後者」好像門檻比較低...對嗎? 今天這篇寫給所有正在努力朝向UI / UX邁進的平面設計師們。在思考轉職門檻前,我們先來列一下,這兩者的技能差異有哪些:
Thumbnail
雖然職稱都為設計師,而且好像也是都用工具產出設計圖,要從「前者」轉換至「後者」好像門檻比較低...對嗎? 今天這篇寫給所有正在努力朝向UI / UX邁進的平面設計師們。在思考轉職門檻前,我們先來列一下,這兩者的技能差異有哪些:
Thumbnail
這篇文章我想記錄在 UX 設計工作我在哪些地方大量運用了文字相關的技術,許多習慣源於我在新媒體領域工作時期,除了當 PM外,還兼任社群營運、媒體編輯與採訪記者所磨練出來的文字能力。 我的 UX 專案文件始於文字企劃書 每次 UX 專案開始,我不會先打開設計軟體開始把想法視覺化,而是用文字寫下來所有
Thumbnail
這篇文章我想記錄在 UX 設計工作我在哪些地方大量運用了文字相關的技術,許多習慣源於我在新媒體領域工作時期,除了當 PM外,還兼任社群營運、媒體編輯與採訪記者所磨練出來的文字能力。 我的 UX 專案文件始於文字企劃書 每次 UX 專案開始,我不會先打開設計軟體開始把想法視覺化,而是用文字寫下來所有
Thumbnail
【介面設計師與視覺設計師應該如何分工協作?】 你知道介面設計師與視覺設計師,在共同負責一個專案的時候,都是如何協作的嗎? 即使同樣都是為產品外觀所把關的設計師,但所負責的部分卻是大不相同喔!🧐 想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧!
Thumbnail
【介面設計師與視覺設計師應該如何分工協作?】 你知道介面設計師與視覺設計師,在共同負責一個專案的時候,都是如何協作的嗎? 即使同樣都是為產品外觀所把關的設計師,但所負責的部分卻是大不相同喔!🧐 想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧!
Thumbnail
做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
Thumbnail
做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
Thumbnail
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢? 這是設計師與工程師 今天,設計師畫了一個上傳照片的功能: 設計師如果只提供這張圖會代表什麼呢? 就會變成這樣,
Thumbnail
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢? 這是設計師與工程師 今天,設計師畫了一個上傳照片的功能: 設計師如果只提供這張圖會代表什麼呢? 就會變成這樣,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News