Author: Wei Fan Chen

Wei Fan Chen

Executive Producer @ Fourdesire. Making games to bring impact to the contemporary society.

介面設計的兩難:問題其實不在「簡單」或「複雜」!

在設計任何一種介面的時候,常常有兩種事情困擾著我們,一種是我們想要設計出最簡單、清爽的介面,另一種則是我們想要設計出最直覺、最容易理解的操作方式。 這兩個設計的方向偶爾會像卡通影片中的小天使與小惡魔,在設計師的腦袋裡面交戰,希望能尋找出同時能夠簡單清爽、又能夠直覺操作的介面。 令人困擾的電視遙控器,功能那麼多按扭該怎麼設計 我們常常會覺得按鈕愈少,愈容易被使用者記憶與理解。例如電視遙控器只要有開關 ... READ MORE
Comments Off on 介面設計的兩難:問題其實不在「簡單」或「複雜」!

從資料出發:分頁還是捲軸?

在設計資料量比較大的網站或是應用程式時,我們常常會遇到的問題是要採用分頁(Pagination),還是移動捲軸(Scrolling)便自動載入、呈現資料。 Facebook 和 Twitter 的頁面在載入新資訊的時候,都是採用移動捲軸自動載入的方式;Pinterest 開始流行之後,許多網站設計都採用這種被暱稱為「瀑布流」的設計。但是我們依然可以看到許多網站,例如搜尋引擎巨擘 Google、和照 ... READ MORE
Comments Off on 從資料出發:分頁還是捲軸?

找到需要的東西!良好的目標與導覽系統

我們在網路上的生活,就像是不停的在尋找答案,上新聞網站獲得最新的資訊、上 YouTube 尋找想聽的音樂或是想看的影片、上 Facebook 找朋友、上購物網站尋找送給家人或是自己的禮物。 網站不能是茫茫大海,要有目標和經脈 我們想要尋找的目標成千上萬,整個網路結構就成為了我們在其中尋找的導覽結構。一般而言,在設計一個網站、或是網路結構的時候,我們會將整個系統分成兩個類別:「目標系統」與「導覽系統 ... READ MORE
Comments Off on 找到需要的東西!良好的目標與導覽系統

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面迷路了。 在現實生活中,許多事情都會像麵包屑一樣留下痕跡,我們的鍵盤上常用的按鍵的字母會被磨掉、車子方向盤會有兩手習慣握的地方的痕跡、常看的書會比較破舊一點、上面會插著書籤、有時候書邊還會寫滿我們的 ... READ MORE
Comments Off on 為使用者撒下「麵包屑」

大家來找碴:淺談視覺搜尋系統

資訊圖表(Infographic)是最近一個非常流行的話題,其主要目的是把大量的資訊,整理成一張好用的圖表,加上有趣的視覺或故事效果,可以讓讀者快速吸收大量資訊。但,在設計資訊圖表的時候,我們常常會遇到一個問題: 到底如何把大量的資訊同時呈現在讀者面前,又可以清楚標示出我們想要強調的重點呢? 人類的視覺搜尋系統其實很有趣,當大量資訊同時呈現在我們面前時,有時候我們會覺得很容易、一下子就可以找出不同 ... READ MORE
Comments Off on 大家來找碴:淺談視覺搜尋系統

資訊和特殊效果的絕妙平衡

「訊息」是為了溝通而產生,而「使用者介面」就是承載著資訊的載體。使用者透過介面,和各式各樣的系統進行五花八門的資訊交換。資訊可能由使用者產生,例如某個人在 Twitter 上發了一則訊息,透過介面上傳到網路系統,然後透過網路傳遞到所有人的螢幕面前,然後再由其他閱讀到這則訊息的使用者所接收。 因此在資訊的生命週期中,包括了「產生」、「傳遞」、「接收」這三個重要的階段,而每個階段都有可能造成資訊的損耗 ... READ MORE
Comments Off on 資訊和特殊效果的絕妙平衡

完形心理學的視覺法則

我們的眼睛和大腦在觀察事物、接收影像刺激的時候,會有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物,有時候也會產生所謂的「錯覺」。完形心理學重要的概念便是「整體不等於個體的總合」,舉例來說:當我們在觀察另一個人的時候,並不是先看到他的手、腳、頭、眼睛、耳朵、鼻子,然後把這些視覺特徵組合成一個稱為「人」的組合。我們是直接的觀察到人這個「整體」,而不是其他器官的「個體的總合」。 完形心理學由心 ... READ MORE
Comments Off on 完形心理學的視覺法則

逐步揭露資訊的設計原則

你一定有看過這種電視遙控器,開關、數字鍵、換台和音量按鍵放在顯而易見的地方,遙控器的下面還有一個蓋子,拉下蓋子之後可以看到更多不常用的按鍵:切換輸入頻道、修正顏色、修正對比等進階功能鍵。 逐步揭露的設計方法 這種遙控器都是採用逐步揭露(Progressive Disclosure)的設計方法,逐步的揭露不同程度的資訊,並且提供不同程度的控制範圍給使用者。當使用者是初學者的時候,他們只需要知道最簡單 ... READ MORE
Comments Off on 逐步揭露資訊的設計原則

幫使用者安排好下一步

設計使用者介面時常常會碰到需要讓使用者來決定下一步的時候,在電腦系統中最常見的就是「確認」以及「取消」按鈕;像是在作業系統中要刪除檔案時,系統會跳出以下的詢問視窗,並且已經預設將選項標記在主要的選項上: 當版面上有複數按鈕時,我們通常將其區分為「主要選項」及「次要選項」等,主要選項按鈕代表你希望使用者使用的功能、進行的步驟等。 以雙按鈕的設計為例,我們簡單舉例幾種不同設計方式的情況: 我們注意到當 ... READ MORE
Comments Off on 幫使用者安排好下一步

關於評分系統:為什麼 Amazon 是給星星,Youtube 是給大拇指?

從什麼都賣的 Amazon 到有成千上萬 App的 iTunes,許多的網站都擁有可以讓使用者對於產品或服務進行評分的評分系統(Rating System)。但,也有許多網站,例如全球最大的影片社群網站 YouTube 和新聞社群 Digg,採用的卻是只能給「好」或「不好」的評價系統;到底採用哪種系統比較好? 在討論到底要不要採用評分系統之前,讓我們先看看下面幾個網路服務主要要評價的到底是什麼內容 ... READ MORE
Comments Off on 關於評分系統:為什麼 Amazon 是給星星,Youtube 是給大拇指?

表單元素的排列組合,向左走還是向右走?

在現代的網站介面中,表單絕對是非常重要的一個人機互動介面元素之一。表單是由許多細小的元素所組合而成的集合體,標題和輸入框的排列方式有著重要的地位。 不過,標題要放在輸入框的左側還是上面?要靠左還是靠右?要怎麼排列才能提高表單的完成率呢? 標題和輸入框常見的排列方式有下列四種: 放在輸入框左邊,而且靠左對齊 放在輸入框左邊,但是靠右對齊 放在輸入框上面 放在輸入框裡面 到底這四種排列方式有什麼不一樣 ... READ MORE
Comments Off on 表單元素的排列組合,向左走還是向右走?

光的三原色與視神經的對比傳遞

在國中的物理課程中,我們學到光是由光的三原色所組成,分別是紅色、綠色和藍色,這三種顏色的光組成了我們五彩繽紛的世界。但是在 1878 年,由 Ewald Hering 所提出的色彩拮抗論則是提出了四色論的論點,這個論點主張色彩的視覺系統主要是由紅、黃、藍、綠四個顏色所組成的。這個論點獲得了許多的支持,例如色彩命名實驗中,把各種在可見光譜上出現的顏色呈現給受測者,要求他們以自己認為最精準的詞彙說出顏 ... READ MORE
Comments Off on 光的三原色與視神經的對比傳遞

評價系統有多重要:激發顧客的想像力吧!

你有在 Amazon 或 Yahoo 拍賣上買過東西嗎?有沒有用 iPhone 或 Android 手機在 App Store 或 Google Play 上買過軟體呢?購買產品的時候我們總是喜歡看看別人的評價再購買,這樣我們會比較有安全感、感覺比較不會買到不好的東西。 模擬理論 其實評價的功用不只是這樣而已,我們的大腦都有一個很奧妙的功用:想像力。這也是我們和其他動物們最不一樣的地方,我們擁有模 ... READ MORE
Comments Off on 評價系統有多重要:激發顧客的想像力吧!

大腦的偷懶小撇步:注意力瞬盲

大家有從厚重的報名資料裡面找到一個報名者的經驗嗎?或是從厚厚一疊文件裡面找出一筆想要的資訊?是不是想要快速的找到資訊,但是看了兩三遍都找不到東西,結果放慢速度,最後卻在已經瀏覽了好幾遍的地方找到想找的東西呢? 大腦的偷懶小撇步:注意力瞬盲 其實這也是一種大腦的限制,我們的注意力其實十分有限,一次只能專注在一兩種我們覺得重要的事物上。還記得我們在不注意盲視:如同保護色般的視覺效應中所提到的大猩猩實驗 ... READ MORE
Comments Off on 大腦的偷懶小撇步:注意力瞬盲

所謂「畫龍點睛」:避開視覺盲點,讓你的設計更引人注目

我們的眼睛其實有許多限制,除了在「低解析度的人類視網膜?」所描述的:眼睛的解析度不像電腦螢幕的解析度每個像素的大小都一樣,而是視網膜正中央的解析度最高,離中央越遠解析度越來越差。我們的眼睛也有著「盲點」,盲點是視神經從視網膜離開的地方,就像是視網膜上破了個洞一樣。如果有東西映照在我們的盲點上,我們其實是完全看不到這個東西的。 要找到自己的盲點有個簡單的方法:把你的右邊眼睛閉起來,用左眼看著右邊的十 ... READ MORE
Comments Off on 所謂「畫龍點睛」:避開視覺盲點,讓你的設計更引人注目

Type on the field below and hit Enter/Return to search