介面 Interface

[轉貼] 十二月份的UI Gathering報名活動開始囉！

這次我們找到了一個可以容納更多人的場地，預計這次可以接受65個人的報名喔！

報名網址：http://registrano.com/events/uigathering120708
報名截止日期：2008.12.04
活動主題：UI Gathering 歲末聚會 – 經驗開麥拉~
活動地點： China White (臺北市敦化南路二段97-101號2F, http://www.chinawhite.com.tw )
活動時間：2008. 12. 07 (星期日) 13:30 - 17:30
活動費用：NT 500元 (場地費加點心、飲料)

活動流程：
1:30 – 2:00 活動報到
2:00 – 2:10 開場
2:10 – 3:00 閒話家常
3:00 – 5:00 八位設計師經驗分享
5:00 – 5:10 活動總結

活動內容：
著重業界的人際交流以及UI相關資訊分享。我們將會邀請八位好朋友，每位有十分鐘的時間介紹自己、並與我們分享他們在UI產品開發或者使用者經驗設計的想法和一些成功案例的介紹。

這次的活動我們別出心裁的規劃兩個區域，一個是可以專心聽講的地方，另外一個是可以針對有興趣的議題進行私下討論的沙發區。另外，爲了讓業界更了解 UI以及User Experience的重要性，我們也將邀請業界的高階主管 (PM, 研發經理, 副總等)來參加我們的聚會。

如果您想要邀請您的高階主管或者發表您個人在UI方面的想法，甚至於是希望大家幫您解決一些特定的UI問題，歡迎寫信到 uigathering@gmail.com ，或者到我們的群組留言 http://groups.google.com/group/upatw 報名。

(N)：阿，我答應毓修要去的，可是忘了當天中午已經要參加同學婚禮阿… 糗。

一些淺見，和大家分享，有錯歡迎指正。

先單就字面上來解釋，顧名思義：

• GUID (Graphic User Interface Design)，圖像介面設計。
• UID (User Interface Design)，介面設計。
• UED (User Experience Design)，使用經驗設計。
• UEM (User Experience Design)，使用經驗管理。

GUID 即是最廣為熟之的圖像設計，設計 Icon 與整體 Layout 等和視覺相關的主要工作。UID 則是所謂的介面設計，一般牽涉到的層面較廣，包含任務分析、概念、流程設計、架構等。UED 就更偏向使用者導向，除了前述的部份外 (並不包含 GUI)，還需要進行使用性評估、測試以及 Review。最後關於 UEM，我並不確定在業界有沒有這樣的說法存在，但在小弟任職的公司裡是有的，而且剛好就是我 現在的 上一個部門 (還真巧阿 ~_~ )，和 UED 大同小異，但更著重在 End-user 的使用經驗管理，而在實作設計上涵蓋較少，只能偶爾飆幾個想法出來。

UI 和 UE (也有一說為 UX) 在基本上是有差異性存在，有興趣往此領域發展的青年才俊們，可別搞混了！

ThinkMac Software 的開發人員 Rory Prior 分享了他這幾年來替其各個應用程式所製作的插圖與圖像，若您有興趣的話，可以下載他整理好的 PDF 檔。挺有趣的！

原文連結 http://www.thinkmac.co.uk/blog/2008/08/thinkmac-art-design.html

《本文轉錄自 Applewoods, ThinkMac Art 與 Design》

teehan+lax 在其部落格上提供了 iPhone 操作界面的 Photoshop PSD 圖檔，文件為 160ppi，裡頭包含了 iPhone 上的按鈕、數字與符號鍵盤、滑桿、界面文字…等等，這些內容都可供編輯，若您需要製作一些 iPhone 相關的影像，應該派得上用場。

原文連結 http://www.teehanlax.com/blog/?p=447

《本文轉錄自 Applewoods, iPhone 操作界面 Photoshop 圖檔》

友人 小P 發表該篇文章 (UI Designer 不容錯過的 15 本中文好書) 已經許久，但我卻遲遲沒有動手買下，前幾天總算一股作氣博客來上訂購，昨晚收到，還真是好大一箱…

有些在清單上的書已經無法於網路上訂購，所以除了 小P 所推薦的之外，我另外挑選了幾本，以下是本次購買的清單：

[ 小P 推薦 ]

1. 簡單的法則
2. 設計的文法-忍不住想動手的平面設計書
3. 不只是發明：科技改變人性？
4. 日常設計經典100
5. 見樹又見林
6. Peopleware： 腦力密集產業的人才管理之道
7. 人月神話：軟體專案管理之道（20週年紀念版）
8. 設計日常生活：如何選擇安全好用的日常生活用品
9. 情感設計：我們為何喜歡(或討厭)日常用品
10. 從需求到設計：如何設計出客戶想要的產品

[ Nick 不負責任推薦]

1. 設計的法則：100個影響認知、增加美感，讓設計更好的關鍵法則
2. 不為設計而設計=最好的設計：生態學的設計論
3. 設計東京
4. 思考的技術：培養具有競爭力的思考途徑

最後另外推薦一本絕版經典好書《設計心理學 - 以使用者為中心、安全易用的日常生活用品設計原理》，同樣好像也已經無法在網路上購得，若有人肯割愛，小弟願意購買！ 天哪，原來該本書即是前述所推薦的《設計日常生活：如何選擇安全好用的日常生活用品》，只是換了名子而已！

閱讀分享：

10 Major Usability Issues in Designing A Mobile Phone Application
10 個在設計手機軟體時常見的使用性議題

節錄自 Comparative Analysis of High- and Low-fidelity Prototypes for More Valid Usability Evaluations of Mobile Devices, NordiCHI 2006.

作者：Youn-kyung Lim, Apurva Pangam, Subashini Periyasami, Shweta Aneja

1. 意義標示不清的標簽 (Labels)。
2. 圖示 (Icon / Symbol / Graphical) 代表的意義。
3. 介面中各元件擺放的位置。
4. 誤解原始設計的心智模型 (Mental Model)。
5. 產品的造型 / 外觀設計。
6. 實體造型掌握時的舒適度。
7. 實際操作時的舒適度。
8. 原始設計的概念。
9. 和其他類似產品比較。
10. 效能。

* 以上內容版權均屬於原作者。

(註：暗！剛打好的一整篇文章在按下送出後，消失得無影無蹤…現在只好重打一遍。不是有自動儲存的功能嗎！)

上圖是 Skype 的視窗截圖，貼心地 (?) 顯示出對方目前的訊息輸入，有「正在輸入」與「刪除已輸入」兩種狀態。Skpye 以圖示 (icon) 來表示，不需額外的文字輔助，便可一目瞭然，算是成功的設計。 

而相對 MSN 就較為遜色，仍採用純文字顯示。

兩者除了分別以「圖示」與「文字」表示外，最大的差異在於 Skype 多了「刪除」的狀態。乍看之下似乎 Skype 略勝一籌，但多了提示「我現在正在刪除我打的東西喔！」這樣的訊息，是否會讓對方覺得：你剛剛打了什麼？為什麼又不想讓我看到？這樣的負面感受。

但不論何者，我認為都已在某種程度上造成使用者隱私的侵犯，以自己為例：當有訊息傳來時，我會 (1) 看看是誰？ (2) 若正好是現在不想聊的朋友，就會把視窗關掉。 (ㄜ，這個狀況不常發生，所以朋友們，千萬不要誤會我不想跟你們打屁！) 而這時我就會擔心，是否在切換視窗的當下，IM 就已經很雞婆的告訴對方「我正在輸入訊息…」，但卻不然。

鄉親阿，這樣不就破梗了嘛！

[ 補 ]

不小心又發現了一個點，萬一我不想讓其他人知道我有多少朋友呢？要是我只有 2 個朋友，豈不很糗？

閱讀分享：

Usability of Adaptable and Adaptive Menus.

作者：Jungchul Park, Sung H. Han, Yong S. Park, and Youngseok Cho.

本文探討桌上型裝置中各種選單類型對於使用性的影響。作者採實驗比對傳統選單 (traditional menu) 與使用者可自訂順序選單 (adaptable menu)、系統自動調整順序選單 (adaptive split menu)、系統自動調整粗體選單 (adaptive highlight menu) 之間差異。

• Menu types: (a) adaptable menu (changing positions) ; (b) adaptive split menu ; (c) adaptive highlight menu.

實驗結果顯示，在使用效率與滿意度上：Adaptable menu >> Adaptive split menu ≒ Adaptive highlight menu >> Traditional menu。

其中各選單的優缺點比較如下：

• (a) Adaptable menu：使用者可自訂排列順序、操作速度快、容易搜尋到最常用的選項、根據記憶位置來幫助找到選項；但須額外增加關於選項位置的記憶負擔。
• (b) Adaptive split menu：當選單中有特別常使用的選項時，操作速度明顯提升、選項排列順序較為穩定；但選項位置容易隨著使用頻率而改變、空間連續性不佳。
• (c) Adaptive highlight menu：選項位置從不改變，空間連續性佳、粗體顯示 (high-light) 選項容易被找到。
• (d) Traditional menu：容易使用與學習；但在熟悉選項位置前不易使用。

結論，Adaptable menu 雖然在使用前須額外花費心力調整，但在整體表現中最受到使用者青睞；而 Adaptive split menu 並非如同其理論般實用；Adaptive highlight menu 是一種新型態的選單類型，保持一致的空間連續性為其優點。可將 Adaptive highlight menu 與 Adaptable menu 整合，取其優點而改進缺點。

* 以上內容與圖片版權均屬於原作者。

閱讀分享：

Eye Movement Study of Reading Text on a Mobile Phone using Paging, Scrolling, Leading, and RSVP.

作者：Gustav Öquist, Kristin Lundin.

本文試圖探討在可視範圍狹小的手持裝置上，何種閱讀行為較佳。作者採取四種不同方式進行實驗並追蹤眼動。四種方式分別為：

• Paging (分頁)

每次按鈕翻動一頁，螢幕中有資訊提示目前頁數與總頁數。

• Scrolling (捲動/捲軸)

目前使用最為普遍的閱讀方式，每次捲動一行。

• Leading (前導)

內容以跑馬燈形式呈現，速度可由使用者自行調整。

• Rapid Serial Visual Presentation (快速序列視覺呈現)

內容以視覺上的序列搜尋方式，每次以字詞為單位出現於畫面，速度可調。

研究結果發現，以分頁 (paging) 所呈現的內容，最容易被閱讀者接受，而目前最為普遍使用的捲軸 (scrolling) 則並非為最適當的呈現方式，其閱讀速度較分頁 (paging) 與前導式 (leading) 慢。前導式 (leading) 雖然在閱讀速度與理解效率與上有顯著提升，但不自然的眼動 (eye movement) 較容易造成閱讀時生理上的壓力。

* 以上內容與圖片版權均屬於原作者。

年後的第一個工作天，收到封話題圍繞著 “Haptic” 的信，順手找了些資料，和大家分享。

[ haptic ]
adj : of or relating to or proceeding from the sense of touch;
        “haptic data”; “a tactile reflex” [syn: {tactile}, {tactual}]

大體來說，Haptic 翻譯為 “觸覺”。

觸覺回饋來自於使用者接收到透過裝置所傳回的力量、震動和(或)動作，以上稱之為力學上的回饋。典型的觸覺回饋被應用於 Virtual Reality 虛擬實境、遊戲環境或醫療領域，以模擬對於特定物件在虛擬空間中的感覺回饋，給予使用者在官能上的感受使其確定他們正在和一個物件進行互動。

跳轉連結後可以看到在 Wikipedia 上對 Haptic 的解釋：
http://en.wikipedia.org/wiki/Haptic