這篇文章我們將詳細介紹 Tenten UX 設計團隊平常最喜歡的 UX 設計思考、使用者經驗設計、設計工具等網站。無論是產品經理、UX/ID設計師、視覺設計師們都適合閱讀。

1. 思考過程與想法

  • Medium UX: 正在崛起的 Medium，上面可找到許多行業內的專家，大家耳熟能詳的 Startups UX director 寫的關於 UX 精闢的文章，每日必讀!
  • iA: iA 這間公司一直都是我們喜愛的 true thinker. 這個位於日本的團隊雖然小，但他們的文章與舉辦的活動一直都受到業界的關注。
  • Boxes and Arrows: 關於設計原則、過程、方法、界面等。
  • A List Apart: 非常有名的 ALA，主要討論網頁設計/ 開發方法與實踐，偶爾也會有 UX 分享。
  • Nielsen Norman Group: 相當專業的 UX 組織，有關使用者經驗設計創新思考研究文章與報告。
  • Usability Geek: 涵蓋 UX 與 UI 介面設計研究
  • Usability Post: 一些優良的使用經驗設計方法文章。

2. UI界面設計

下面這些網站收錄介紹關於 UI 的設計方法、想法與建議以及如何建立有效的使用者界面。無論是軟體 App、移動應用或是網站，這裡的內容都值得 UX 設計師學習。

使用性測試於 Mutli-Devices 對於 UX 的重要性
使用性測試於 Mutli-Devices 對於 UX 的重要性

3. UX（使用者經驗）

UX 發展趨勢、UX 軟體與工具、使用者經驗討論等。

  • UXADAY: 收錄全球關於討論 UX/ UI 相關的網站。”Your daily inspiration and directory of useful resources and tools for User Experience Designers.” 顧名思義 — UX 設計師每日必讀!
  • Stack Exchange UX: 頂頂大名的 Stackoverflow，上面有許多使用者經驗專家問答交流，仔細閱讀總是收穫良多。
  • UX Mag: 老字號的 UX Mag，這是一個專注於 UX 的線上雜誌，我想從事 UX/ IA 的人應該不會沒有看過。
  • UX Booth: 雖然更新較慢，但經典的 UX 思考永不退流行! 裡面將文章完整的分類，可以依照你想閱讀的仔細分類閱讀，讀完一輪你應該就成為半個 UX 大師。適合 UX 設計師和互動設計師閱讀。
  • UXPin Blog: 許多實用的 EBOOK 下載。如《為設計師、產品經理準備的 Wireframe 制作指南》，只要填入 email 即可下載免費 PDF。
  • Johnny Holland: It’s all about interaction - 重度的 UX 文章 — 內容廣泛包括了互動/ 心理學/ 觀察 以及許多學術研究與演講。
  • UX Myths: 結構清楚的文章精闢的解釋了 UX/ UI 包含的範圍與迷思解釋，台灣最大的 UX 社群 HPX 也有中文版供你線上閱讀，讀完包你不在誤會 UX 的精神。
  • Foolproof: 英國的 UX 公司，他們的網站有許多他們實際幫客戶執行專案背後實用的 UX insight 分享，如行為方式、情感化體驗、及他們如何透過 UX 思考解決客戶的問題等不錯的內容。
  • Design + Code: iOS 開發者與設計師必備電子書與服務，裡面有大量的 iOS 開發方法與設計思考。(設計師與 iOS 開發者必備)
How UX can make a difference? 転転負責設計/規劃與開發的 amba hotels 網站 UI 。背後的 UX 思考與數位策略使其成為台灣飯店線上訂房率最高的品牌網站之一
How UX can make a difference? Tenten 負責設計/規劃與開發的 amba hotels 網站 UI 。背後的 UX 思考與數位策略使其成為台灣飯店線上訂房率最高的品牌網站之一

4. 工具 (UI Design, Prototype, Wireframe)

下面的網站主要討論 UI 設計如：怎樣有效地創造 Sitemap、Flow chart、Wireframe、Prototype 等主題。

  • Figma: Figma : 異軍突起的設計協作神器 *(強力推薦!)
  • Sketch: 老牌 UI 設計軟體，其方便設計師用於設計 UI 的思考，廣受設計師社群的喜愛，也是我們熱愛的 UI 設計軟體之一 (#註: 團隊已於 2018 切換改用 Figma)
  • illustrator/ Photoshop/ in Design: Adobe 專業的繪圖工具，設計師必備生存技能，但用於製作 UI 的話，我們較習慣用 illustrator 或 inDesign 繪製處理排版，進而搭配 photoshop 用於精細的視覺處理。(目前我們已漸漸的轉換到搭配 Adobe 與 Sketch 交互使用)
  • POP: 由台灣團隊推出的 Prototype App，讓你可以將手繪的 prototype 拍照後透過 app 製作成可以操作互動式的 prototype 工具，對於要驗證初步的 UX 想法，快速的產出 interaction prototype 溝通，Brief idea 都適合使用，Great team who made a great product! *(上手難度: )
  • Facebook Origami: Facebook 開放原始碼的互動 Prototype 製作工具須與 Quartz Composer 一起使用製作出非常專業且可以體驗互動的 Prototype。**(上手難度: ***)
  • Invision App: 非常好用的設計溝通協同工具。**(上手難度: )
  • Zeplin: Zeplin 是設計人員和開發人員之間的終極協作工具。**(上手難度: )
  • Marvelapp: 線上 Prototype 工具。**(上手難度: )
  • Framerjs: 讓你可以用 JS 製作出心目中理想的互動 Prototype，如果你很擅長 Javascript 的話這套工具應該比 Origami 好用更容易快速產出。(未使用)
  • Proto.io: Prototypes that feel real 。(未使用)
  • Axure: 專業的製作 Wireframe 工具，入門容易可快速產出專業的 Wireframe。Agency 最愛溝通工具 — 適合 PM 與規劃師使用。
  • Balsamiq: 老字號可以繪製出手繪感很強的 Wireframe，讓你跟客戶溝通可以減少溝通的誤會。(心理作用? lol)
網格紙是我們最喜愛的 Wireframe 繪製工具 (via Smashing Magazine)
  • 網格紙與筆/ 筆與白板: 在思考階段，我最常用使用的工具其實是一支筆與網格紙。我是一個視覺化的人，傾向於非常設計與快速為主導的方法來進行我的 UX 工作。在紙張上繪製草圖的想法使我能夠快速可視化和嘗試以不同方式對內容結構，界面佈局的思路和互動交錯思考。至於筆則是越細越好（我習慣精細度於 0.3mm~0.4mm 區間）。對我來說，素描是讓我可以探索 UX 最快，最簡單的方法。當然，如果要跟團隊進行溝通討論 Brain Storm 想法時，沒有什麼比的上一個大的白板跟一堆便利貼更快速有效了。
Tenten brainstorming space
Tenten brainstorming space

5. 設計靈感 （Design Patterns)

分享設計相關的界面、資源 — 這個區塊應該是 UI 設計師喜愛且必收藏!

  • Pttrns: 大量更新很多設計優秀的 Mobile App & Web 設計分享。
  • UXPin Blog: 總是有很多有用的資源….。
  • Wireframes: 找線框圖、原型圖靈感的好地方。
  • Mobile­Patterns: 優秀手機應用界面分享網站。
  • Lovely UI: 大量收錄了有趣、獨特的手機應用設計介面。

Promo

  • 你是 UI Designer 或是 iOS Developer 嗎?  Tenten 現在正在尋找新血加入我們的團隊，想和我們一起打造服務或產品嗎? 請參考以下網址: https://careers.tenten.co/
  • 已經是創業團隊的一份子? 或許你會對我們的新創孵化器有興趣?
  • 仍是學生? 如果你對於技術或設計充滿熱血及想脫離舒適圈挑戰自己的話。何不考慮來 Tenten 實習?
  • 喜愛我們的文章與作品? 我們的 Facebook 會更頻繁的更新產業資訊讓你跟外國的新創與最新的開發技術接軌。
  • 如需任何 UX/ Digital marketing/ 網頁設計/ 或是新創產品開發的服務請洽 Startup Agency Tenten 或 GogoShark
転転是一間專注於做產品/ 打造品牌與提供高端UX與技術諮詢服務的機構

想了解更多 Tenten UX TEAM 的分享?

Finteh Share: 今天我要說的是一個 Betterment 挑戰華爾街的故事
設計師於新創產業生存指南: 資訊架構思考
10 個輕鬆讓用戶成為忠誠顧客的電商設計 Tips

Share this post