Author: Decill Chang

Decill Chang

No biographical info yet ...

iOS 無邊框按鈕設計的優缺點

導覽列對於多數手機 APP 而言是個很重要的元素,它不但可以讓使用者明確的了解目前所開啟的功能名稱,在許多時候還同時是個放置導航與重點功能的一個區域。 在以往,當導航列上出現可以點擊的按鈕時,設計師在視覺表現上都力求讓用戶知道是個按鈕,直至 iOS7 的設計去材質化設計理念,將這些地方的按鈕的形態去掉、僅剩下符號與文字告知使用者該「按鈕」的功能。 傳統上,大多數的按鈕外觀都被設計成擁有具體的形狀範 ... READ MORE
Comments Off on iOS 無邊框按鈕設計的優缺點

讓設計跟著指尖走:觸控設備上的互動效果

對於網頁瀏覽者來說,按鈕元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時最容易感受到的有 Normal、Hover 以及 Archive 這三種效果,分別為按鈕平時的狀態、滑鼠游標移到上方的效果、以及點擊按鈕時的效果。 而另外還有一個我們稱為 Focus 的效果,Focus 主要是指使用鍵盤的 Tab 按鍵來「瞄準」網頁上的元件時、被瞄準的那一個元件所顯示的狀態。雖然現在滑鼠已經是 ... READ MORE
Comments Off on 讓設計跟著指尖走:觸控設備上的互動效果

我和你有點不一樣:針對色盲使用者的體貼設計

世界上大約有 8% 的男性人口擁有某種形式的色盲,女性約 0.5%。以這比例去推算,臺灣的色盲者將近 116 萬人。可以說是一個相當龐大的族群。 這些人不只在網路上、光是在日常生活上就常遭到不公平的待遇;就拿考取駕照來說好了,色盲者通常都是不被允許駕車上路的,雖然是基於交通安全的考量,但這卻是是相當不公平的待遇。其實,真正的原因在於我們日常生活中的設計缺乏同理心,未曾貼近這個族群的角度去思考與看待 ... READ MORE
Comments Off on 我和你有點不一樣:針對色盲使用者的體貼設計

我們的工作為何複雜:視覺設計師該決定什麼?

視覺設計在產品組成中佔了極為重要的成分,它直接影響了使用者對於該產品最初的觀感、使用時的體驗以及最後留下的印象等等。甚至在許多時候,產品的成敗與否,往往就取決於成功的視覺設計經驗上。 然而,一個設計的最終定案註定要受到來自四面八方的挑戰:有來自客戶的、來自專案管理的、來自工程師的,甚至來自使用者體驗的。視覺的問題很麻煩,整體環節裡的每個人都很有可能對你的設計發表意見與需求,但又不可能一一給予相對應 ... READ MORE
Comments Off on 我們的工作為何複雜:視覺設計師該決定什麼?

關於直式中英文排版的幾種可能性

因為中文的方塊組成在排列上具有非常優秀的彈性,因此不論是直書或是橫式的書寫方向都可以很好的適應。在近代為了推行電腦化、讓文字與資訊帶來普及化,橫式書寫的排版方式被廣泛地應用。但其實在許多場合,例如較為著重中文文字表達性的書籍,依舊會使用直式書寫來做排版,在閱讀上具有完全不同的閱讀體驗: 直書跟橫書大不同 中文字使用直式書寫的來由,其實有很多說法,一個最普遍的解釋就是由竹簡發展而來。以比例占較多數的 ... READ MORE
Comments Off on 關於直式中英文排版的幾種可能性

完美的像素:字體渲染那點事

字體是視覺設計中很重要的一個部分,各種繪圖軟體如 Photoshop 以及 Illustrator 都提供了相當強大的文字編輯工具,可以隨心所欲的製作出各種文字編排。而當我們在使用文字輸入工具時會注意到有一個文字反鋸齒的選項: 針對這個功能,Adobe 原廠對於 Photoshop 的文字反鋸齒說明如下:「消除鋸齒可經由將邊緣像素部分填滿,製造出邊緣平滑的文字,如此一來,文字的邊緣就可以與背景混合 ... READ MORE
Comments Off on 完美的像素:字體渲染那點事

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

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

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

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

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

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

淺談色彩學:同一色系能怎麼變化

色彩的世界多采多姿,不同的色彩計畫常常左右了產品最終給人的感覺,而色彩並不會單獨存在,良好的色彩搭配常常可以讓你的色彩計畫更加吸引人的目光。 在〈淺談色彩學:對比色配色〉中,我們曾提到色彩比例分配的原則,透過一些公式化的配色技巧讓大家在搭配色彩的時候有所依據而發展,不致於手足無措不知該從何開始。 以 70% 底色、25% 主色與 5% 強調色的配色原則為例,由於底色與主色都是屬於同一個色相的色彩( ... 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 阻擋機器人的神奇驗證碼系統

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

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

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