使用者介面 Archives | Fourdesire Blog

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

December 11, 2014 10:13 AM

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

Comments Off

立足在擬物與扁平之間

December 11, 2014 10:08 AM

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

Comments Off

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

December 11, 2014 10:04 AM

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

Comments Off

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

December 11, 2014 9:59 AM

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

Comments Off

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

December 11, 2014 9:56 AM

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

Comments Off

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

December 11, 2014 9:49 AM

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

Comments Off

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

December 11, 2014 9:42 AM

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

Comments Off

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

December 11, 2014 9:38 AM

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

Comments Off

Blog 觀點

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

December 11, 2014 9:34 AM

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

Comments Off

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

December 11, 2014 9:32 AM

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

Comments Off

Blog 觀點

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

December 11, 2014 9:30 AM

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

Comments Off

友善的動態更新方式

December 11, 2014 9:24 AM

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

Comments Off

從資料出發：分頁還是捲軸？

December 11, 2014 9:10 AM

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

Comments Off

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