視差設計:如何在狹小的手機畫面中製造「空間感」

在行動裝置小小的平面螢幕裡,無論是平面風格(Flat Design)還是仿真介面(Skeuomorphism),我們是否能夠在手指滑動之間,跳脫出二維的空間,為使用者創造出額外的層次與空間感呢? 也許以下影片能夠給你一些想法: 利用人眼視覺,創造遠近層次感 人們在判斷物體的空間關係時,有兩個主要的方式:「雙眼視覺」(Binocular Vision)以及「運動視差」(Motion Parallax ... READ MORE
Comments Off on 視差設計:如何在狹小的手機畫面中製造「空間感」

魔鬼藏在設計細節裡:互動按鈕大小事

當一個產品完成核心部分的需求之後,我們就可以準備開始研究細節的問題。 一個產品幾乎每個層面都可以談論細節,其中還包括表面上看得到的,以及表面上看不到的。表面上看得到的細節很簡單,花時間去做、去嘗試、去犯錯、去修正就好了。 而看不到的細節諸如產品定位、使用者體驗等等,除了依靠長期經驗的累積、研究與使用者反饋外,很難清楚的知道到底該怎麼去製作與修正。 平面、動畫、互動按鈕少了細節就少很多 筆者曾經做過 ... READ MORE
Comments Off on 魔鬼藏在設計細節裡:互動按鈕大小事

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

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

使用者其實都不專心:使用者中心的對話框設計指南

對話框(Dialog)是個好用又方便的工具,通常用來再三確認使用者的操作動作與決策,以避免一時的手誤或誤會操作。因此,對話框常用於重要動作的確認,例如:「你確定要刪除這個聯絡人嗎?」 但若對話框搭配了不適當的回應選項文字,反而可能會造成使用者的困擾與誤解,有時還可能做了錯誤的決定。 對話框最常見的不當設計,就是選項上的文字出現:「是(YES)與否(NO)」。 回想在學生時期考試的時候,O 與 X ... READ MORE
Comments Off on 使用者其實都不專心:使用者中心的對話框設計指南

阻擋機器人的神奇驗證碼系統

常在網路上到處瀏覽的朋友一定對「驗證碼」這種東西不陌生,通常會出現驗證碼的場合不外乎就是為了安全性的考量,為了防止駭客利用自動化程式做暴力式的登入嘗試,防止自動化程式在留言板討論區等的洗版行為,或是頻繁存取導致伺服器崩潰等等情況,而設立的安全性確認措施。 簡單來說,驗證碼的存在只有一個任務:「確認你是真人還是機器人!」 驗證碼的正式名稱叫做「自動區分計算機和人類的圖靈測試」(Completely ... READ MORE
Comments Off on 阻擋機器人的神奇驗證碼系統

友善的動態更新方式

透過智慧型行動裝置,我們每天可以接收到很多新聞、好友的最新動態以及大家分享的新鮮有趣的玩意兒,而很多行動裝置應用程式也會貼心的在我們呼叫出程式的時候,自動的幫我們刷新訊息。 但是當每天更新的訊息越來越多的時候,我們很容易在更新的過程中,迷失於新舊訊息之間,身為貼心的開發者,我們該如何讓使用者能更輕鬆的接收新的訊息與狀態呢? 在手機應用程式中更新訊息時,最簡單方式就是直接刷新並取代現有的訊息列(如下 ... READ MORE
Comments Off on 友善的動態更新方式

別再忽略「音效」了!將聲音結合使用介面的 8 個好處

音效在使用者介面中是一個很特別的角色,在遊戲(Game)之外,它似乎被當做是一個可有可無的配角,甚至可以說,大部分的應用程式中,除了系統的預設音效外,幾乎都沒有針對音效去優化使用的經驗與感覺,但是音效是否真的那麼不重要,或是對提供回饋與傳遞訊息沒有太大的用處呢? 音效在使用者介面具有非常好的點綴以及加值效果,例如作業系統中的垃圾桶刪除檔案音效,少了那個「喳喳」的刪除音效,可是會少了刪除檔案的痛快與 ... READ MORE
Comments Off on 別再忽略「音效」了!將聲音結合使用介面的 8 個好處

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

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

圖示設計:辨識度與使用性

在圖形化使用者介面中,常常可以看到許多各種不同的圖示。即使是我們平常每天瀏覽的網頁中,除了文字、圖片以外,最常見的就是各種標示功能與美觀效果的圖示了。 圖示的功能很多,有的是表示啟動一個程式,或界面上的一個功能;有時候是代表按鈕上的功能,或只是為了單純美觀好看。 2011 年 10 月 Gmail 網頁系統的一次改版,將頁面的按鈕做了很大的變動,一個很顯著的差別就是,原本以「文字」為主的功能列表, ... READ MORE
Comments Off on 圖示設計:辨識度與使用性

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

我們在網路上的生活,就像是不停的在尋找答案,上新聞網站獲得最新的資訊、上 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 留白是一種美

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