Tag: 使用者介面

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

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

觸控螢幕的 UI 設計:該選手勢操作還是虛擬按鈕?

手勢操作可說是觸控式行動裝置的一大特色以及優點,使用者可以在空間狹小的螢幕中輕鬆又放肆地揮舞手指,快速執行想要的功能。而比較起螢幕中的虛擬按鈕,到底手勢對於使用性以及效率可以帶來多少效益呢? 研究者 Bragdon 等人做了一個有關手勢操作的探討 [1],比較了 5 種手勢操作流程: 直線式手勢(Bezel marks) 曲線路徑手勢(Bezel paths) 虛擬按鈕(Soft buttons) ... READ MORE
Comments Off on 觸控螢幕的 UI 設計:該選手勢操作還是虛擬按鈕?

為使用者撒下「麵包屑」

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

捕捉使用者注意力:適量的突現動態效果

突現的動態效果在介面中能夠有效的吸引使用者的注意,可引導使用者點擊、並開啟特定功能或訊息,常用於逐步的使用教學與訊息提示中;但當動態效果過多的時候,不但會造成使用者視覺上的打擾,久了還會呈現自動忽略的情形,而失去了使用動態效果傳遞重要訊息的目的。 常見的動態效果的表現方式主要可分為 4 種:突然出現(abrupt onset)、突然消失(abrupt offset)、移動(motion)、和閃爍( ... READ MORE
Comments Off on 捕捉使用者注意力:適量的突現動態效果

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

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

留白是一種美

在手機螢幕上能利用的空間非常有限,我們不想浪費掉任何一個可以展示資訊的空間,試圖將它們透過各種視覺化或是直接顯示的方式表達出來,即使有的時候需要呈現的重要資訊很少,我們卻很沒有安全感的,硬是要將一些不重要的東西擺上來,讓它們能有很豐富、很有內容的感覺。 這其實都是因為開發者恐懼留白(Horror Vacui)的原因,它是一種渴望將空白處,用任何資訊或是視覺元素填滿的傾向,很可惜的是,產生的價值感通 ... READ MORE
Comments Off on 留白是一種美

合適的逃脫方式

方便的逃脫方式在手機應用程式中是不可少的,無論什麼情況下,使用者都會有想要反悔、或是做錯決定的時候,甚至很多時候只是隨便亂按亂玩,一不小心就進入了無法動彈的僵局中,又或者,有時只是想回到上一個畫面或步驟,卻被迫回到首頁。 對使用者來說,這樣的確會在使用上造成困擾,但手機使用的系統不同,其逃脫方式也有著不一樣的特性。 在 iOS 中,由於我們擁有統一的導覽機制,使用者可以透過導覽列(Navigati ... READ MORE
Comments Off on 合適的逃脫方式

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

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

合適的 APP 啟動畫面

當使用者按下你辛苦開發的 App 啟動圖示(Launch icon)時,可能是在紅燈轉換綠燈的短暫時間內、可能是在肚子快餓扁想要趕快找家餐廳時、也可能是急著從聯絡清單中找尋可以幫忙的聯絡人電話,這時候其實他們心裡最想要的,就是能夠越快開始使用這個程式越好! 我們在手機 App 開啟時,總是會看到絢麗的啟動讀取大圖,上面印著 App 的 Logo 或是設計精美的視覺圖像,但為何在 iOS 內建的應用 ... READ MORE
Comments Off on 合適的 APP 啟動畫面

逐步揭露資訊的設計原則

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

幫使用者安排好下一步

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

行動裝置上的按鈕大小設計

本文有部分圖檔遺失,我們正在努力回復資料中。 在茫茫的 APP 海中,總是會有很多小不拉機的按鈕,怎麼點也點不到,使用觸控式行動裝置時最痛苦的事莫過於此,如果上天能夠給我一個重來的機會,我一定不會下載這個 APP! 但,同樣是一些嬌小的內建按鈕,如 iOS 導覽列上的導覽按鈕以及清單列的刪除按鈕,為何它們卻不會造成使用上的困擾呢? 秘訣在於設定按鈕的觸控感應區(Touch area),按鈕其實可以 ... 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 表單元素的排列組合,向左走還是向右走?

轉個角度看看,跳脫習慣與偏見的那把尺

心理學家 Gilovich 針對二戰時期德軍轟炸倫敦中部時,居民的經驗與看法做了一些研究,其中發現了一個有趣的事情,當時倫敦報紙顯示了德軍飛彈落下的位置圖,圖中可見飛彈落下的分佈並非以隨機的方式呈現,當時的居民很擔心,因為這分佈圖似乎代表了德國飛彈開始擁有了較高的精準度,但事實上只要做過了統計分析以後,便可知其實不然。 上圖為當時所呈現的分佈圖,我們猛一看,一定可以馬上看出來飛彈是集中分佈在西北方 ... READ MORE
Comments Off on 轉個角度看看,跳脫習慣與偏見的那把尺

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