Category: 設計

設計產品必須思考的使用者情境

在設計一個數位或網路產品時,我們常常會想替產品增加許多新功能,但這些功能到底能不能貼近使用者所真正想要的行為呢?為了確定我們的設計方向正確,第一個想到的方法可能是從所謂的目標族群著手:「我們的產品目標族群是 25 – 35 歲的上班族,他們每天早出晚歸,回家又很累,可能沒有時間玩 …… 」。 目標族群可以先幫我們縮小範圍,但沒有辦法真正左右我們的設計,那麼真正能 ... READ MORE
Comments Off on 設計產品必須思考的使用者情境

用趣味留住使用者:10 個令人驚喜的 404 頁面設計

我們在網路上瀏覽時,一般都是利用網址來找尋你需要的網頁。而每次當你輸入的網址錯誤、或是原本的網址更改了,就會出現「HTTP 404」找不到網頁的畫面。一般我們看到的畫面會是類似以下的狀況: 看起來很眼熟對吧?有時候光是看到這個畫面就會想嘆嘆氣呢。由於 404 可以說是最常見的一種 HTTP 狀態碼,因此許多網站都會特地為這個 404 的畫面做客製化,讓瀏覽者即使從錯誤的連結來訪你的網站,也不會有「 ... READ MORE
Comments Off on 用趣味留住使用者:10 個令人驚喜的 404 頁面設計

行動裝置的網頁切換模式 PK 賽:Swipe Vs. Scroll

瀏覽器上的標籤(Tab)式分頁功能,讓我們能同時新增很多不同的網頁,並且可以輕鬆又快速的在不同的網頁間切換,而不需要開啟過多的視窗。可惜在螢幕空間狹小的行動裝置中,傳統的標籤分頁是窒礙難行的,所以我們必須發展其他的標籤切換模式,來增進使用性。 Andrew Warr 與 Ed H. Chi 於 2013 年發表的論文中,就針對行動裝置中常見的兩種模式進行了使用者測試與比較,分別是分頁式(Pages ... READ MORE
Comments Off on 行動裝置的網頁切換模式 PK 賽:Swipe Vs. Scroll

立足在擬物與扁平之間

去年微軟發表了 Windows 8 所搭載的 Metro UI 後,就掀起了一陣扁平介面設計(Flat UI Design)的熱潮,許多網站、App、介面設計和互動設計都開始採用了這種風格。Google 在前一陣子的設計革新中也運用了許多扁平設計的元素,就連上星期蘋果 WWDC 上發表的 iOS7 都有著那麼一點點扁平設計的影子。 但到底什麼是扁平設計呢?採用扁平設計就真的放棄了所謂的擬物設計(S ... READ MORE
Comments Off on 立足在擬物與扁平之間

他真的不是我兄弟:像素跟點大不同

產品開發的分工,是一件挑戰團隊合作技巧的事情。以網頁開發來說,由於網頁的特性,單純的網頁視覺設計師很少能夠直接掌握產品最終的外觀,往往是在繪圖軟體裡面將視覺部分定稿,再由前端工程師根據設計來將產品的視覺部分實現出來。舉凡圖片的尺寸、位置,元件的效果、色彩的 RGB 值、文字的尺寸等等,都必須清楚的傳達才能夠完整的重現原本的設計。 而在開發 App 的時候,這些問題一樣存在。在大部分的時候,我們都使 ... READ MORE
Comments Off on 他真的不是我兄弟:像素跟點大不同

互動設計的生命週期與法則

互動與使用者介面設計,是一個與使用者對話的過程,我們設計一個介面、一個互動流程,讓使用者可以遨遊其中不會感受到困擾。我們曾經在〈複雜與簡單?令人困擾的設計平衡〉中探討過容易學習的介面比簡單的介面更重要,但是到底如何設計一個容易學習的介面呢? 互動設計師 David Hogue 在 Interaction Design Fundamentals 中提到的五個重要的互動設計原則,提供了我們一個很棒的參 ... READ MORE
Comments Off on 互動設計的生命週期與法則

介面動畫的微小細節:壓縮與伸展效果

使用者介面中,有很大的一個部分的比例是屬於動畫效果呈現的部份,但是由於在討論的過程中,我們很難僅透過圖片或文字來解釋與描述動畫效果的呈現方式,因此這些細節常常最容易被忽略或是草草了事。 優秀的動畫效果在使用者介面設計中是不可缺少的,除了有趣、好看、增加介面的質感以外,更可以增添介面上的邏輯性。像是在電腦作業系統中,當使用者縮小程式視窗時,都會有一個該視窗縮小的動畫,使用者透過餘光便可以確認視窗被縮 ... READ MORE
Comments Off on 介面動畫的微小細節:壓縮與伸展效果

針對左、右撇子的介面設計

有的人是左撇子,有的人是右撇子,但在螢幕裡面的虛擬世界,同樣的介面之於他們,是否會造成操作的習慣以及效率的不同呢?其實先不管你是左撇子還是右撇子,相對的位置與距離就能夠影響你兩手的操作反應與舒適度,我們可以透過「賽門效應」(Simon Effect)來看看出其中的差異。 賽門效應的簡單實驗如下,假設有個螢幕,會在螢幕中的左右不定時的出現閃爍的光,如果出現紅色的話,我們就必須按下左邊的按鈕,反之如果 ... READ MORE
Comments Off on 針對左、右撇子的介面設計

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

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

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

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

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