方格精選

【UI閱讀筆記】UI設計大進擊!

閱讀時間約 2 分鐘
身為UI設計師,我該不該讀「操作介面設計模式」?
身為UI設計師,我該不該讀「操作介面設計模式」?
自學UI設計這條路上,「實體書」一直在自學中擔任至關重要的腳色。儘管書中的資訊更新遠遠不及網路上的更新速度,但比起較為片段的網路文章,統整好各式訊息與知識架構的書籍,總是能讓初出茅廬的初學者能稍微有點頭緒。
初入UI設計這行,因為沒有任何相關知識,必須依賴書本自學,常常在Google搜尋、或仰賴UI/UX社團裡的前輩們推薦的書單做參考。其中,歐萊禮(O’Reilly)所出版的「操作介面設計模式」便常常出現在推薦書單中。
起初在查詢資料時,發現有關於歐萊禮出版的資訊書籍,幾乎都沒有什麼人撰寫書籍評論(?)也因為許多UI設計參考書都已經絕版了,要弄到手需要花費更大的力氣與成本,所以我決定開啟一系列的UI設計書籍閱讀筆記,讓初學者們比較能夠經由我的文章挑選到適合自己的書籍。
「當我們登峰造極,跨過星辰之後,最終抵達的可能是自己。」– 電影《星際救援》

關於「操作介面設計模式」

看書名就能了解本書大綱便是在闡述關於「操作介面」的設計概念,包含各種「可操作」的介面設計,所以也包含Photoshop等軟體介面唷!
本書將每種功能性介面做一個大整理,將相同目地的介面區塊能使用的介面設計方式條列並舉例,並逐條分析該情境下適合的內容。
例如我們最常使用的填入式清單頁面,本書在這個章節就提供了下拉式選擇器、滑桿與spinner等模式,並進一步闡述個個模式適合使用的情境。

我應該如何使用本書?

本書詳盡地列出了對照所有操作介面可使用的設計模式,我覺得可以將這本當成UI介面設計圖鑑,在設計UI介面時遇到瓶頸,可以翻一翻本書當作參考。
不過由於本書出版年代較為久遠,許多設計模式現在幾乎沒有人在使用。書中也較少提到在載體為行動裝置時所相應的解決方法,在這部分還是需要自己多去尋求案例來做參考,至於年代較久遠的介面設計方式,我想我們就看看就好。

本書適合什麼樣的人呢?

適合UI設計初學者、網頁設計師與對介面設計有興趣的人。本書雖然有許多較陌生的專有名詞,但因為有附上了許多案例圖片做參考,相信初學者也不會因此感到吃力。在介面設計的入門方面,也是很不錯的參考書。
如果喜歡我的文章,歡迎幫我點個喜歡。如果想關注我的最新文章,歡迎追蹤我。
也歡迎留言告知我你的想法,感謝您的閱讀!😊
我出沒的地方↓
FB: https://reurl.cc/ZnMzKp
IG: https://www.instagram.com/out_of_design/
為什麼會看到廣告
59會員
20Content count
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
在今天的世界裡,資訊太多了,這讓我們閱讀的方式都改變了。 大家不再是一個字一個字地讀,而是用眼睛快速掃過文字。 這是因為我們的大腦在讀的時候,不是一個字母一個字母地去認,而是把一個單字當成一個整體來看。 單字的開頭和結尾特別重要,中間的字母即使亂了點,大多數人還是看得懂。
Thumbnail
書籍重點以及想解決的問題: 如何抽絲剝繭出客戶要求的本質? 如何做出合乎設計法則的設計? 如何站在使用者立場思考、解決問題?
Thumbnail
從零開始:給0經驗UI/UX轉職者的心靈雞湯與實用乾貨 在本來的行業感到迷惘 我是原白色,本來在一個跟UI/UX八竿子打不著的紡織領域,在人生迷惘非常久之後的2021年,某個可能是覺得「我受夠啦!」的時刻,或是「就要這樣一輩子了嗎?」的低谷心情,我開始了認真有了轉職的念頭,而且不僅止於想像...
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
Thumbnail
這篇文章將會講述 UI 中的Slider,並介紹它的使用方式及應用。
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
我們部門有一個美工團隊,以前稱為媒體設計(MD) 後來改名為UI團隊 某日,來了一位UI專家(空降的主管)。他說 他專研UI與使用者心理學…..八拉八拉  軟體的操作畫面並不是這麼簡單,必須經過研究、觀察使用者,不斷修正才行…八拉八拉 根據我的觀察,他的團隊仍是美工團隊 所以先用部門同仁測試
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
在今天的世界裡,資訊太多了,這讓我們閱讀的方式都改變了。 大家不再是一個字一個字地讀,而是用眼睛快速掃過文字。 這是因為我們的大腦在讀的時候,不是一個字母一個字母地去認,而是把一個單字當成一個整體來看。 單字的開頭和結尾特別重要,中間的字母即使亂了點,大多數人還是看得懂。
Thumbnail
書籍重點以及想解決的問題: 如何抽絲剝繭出客戶要求的本質? 如何做出合乎設計法則的設計? 如何站在使用者立場思考、解決問題?
Thumbnail
從零開始:給0經驗UI/UX轉職者的心靈雞湯與實用乾貨 在本來的行業感到迷惘 我是原白色,本來在一個跟UI/UX八竿子打不著的紡織領域,在人生迷惘非常久之後的2021年,某個可能是覺得「我受夠啦!」的時刻,或是「就要這樣一輩子了嗎?」的低谷心情,我開始了認真有了轉職的念頭,而且不僅止於想像...
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
Thumbnail
這篇文章將會講述 UI 中的Slider,並介紹它的使用方式及應用。
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
我們部門有一個美工團隊,以前稱為媒體設計(MD) 後來改名為UI團隊 某日,來了一位UI專家(空降的主管)。他說 他專研UI與使用者心理學…..八拉八拉  軟體的操作畫面並不是這麼簡單,必須經過研究、觀察使用者,不斷修正才行…八拉八拉 根據我的觀察,他的團隊仍是美工團隊 所以先用部門同仁測試