那些設計時容易忽略的細節

在設計師與工程師的團隊合作過程中,常會面臨到一個問題,就是規劃好的視覺介面與操作流程,在實際程式實作時才發現許多衝突與不完整的地方,產生許多額外的來回溝通時間與修改調整的成本,這通常是因為沒有事先規劃出完整詳細的操作流程 mockup,在wireframe產生後就著手進行視覺設計與雛形開發的分工,就很容易就發生這樣的狀況。 以個人曾經接觸過的案子為例,下圖為其中的兩個主要的頁面(這裡已將視覺完稿轉成簡單 mockup 表示),它是一個社群類的 App,左方的頁面主要使用者要將自己的個人資訊分享給已選定的其他人,在此頁面可以勾選要分享的資訊項目,也可以透過下方按鈕個別新增額外的資訊,完成後就按下完成按鈕,就會將資訊上傳至伺服器並分享給其他人,完成後就轉場到右邊的成功頁面。 這個案子所提供的資料已經是精美設計完成過後的視覺圖檔,它的色彩風格強烈,所有的控制元件都必須重新客製過,乍看下是個兩個很正常又簡單頁面, »

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

導覽列對於多數手機 APP 而言是個很重要的元素,它不但可以讓使用者明確的了解目前所開啟的功能名稱,在許多時候還同時是個放置導航與重點功能的一個區域。 在以往,當導航列上出現可以點擊的按鈕時,設計師在視覺表現上都力求讓用戶知道是個按鈕,直至 iOS7 的設計去材質化設計理念,將這些地方的按鈕的形態去掉、僅剩下符號與文字告知使用者該「按鈕」的功能。 傳統上,大多數的按鈕外觀都被設計成擁有具體的形狀範圍,除了可以有效的提示使用者這是個「可以被點擊」的按鈕元件之外,還可以有效的讓使用者知道這個按鈕的「作用範圍」在哪裡,以防誤觸到相鄰的按鈕。這點這在許多地方相當有用,尤其是按鈕相當多的螢幕小鍵盤或計算機, »

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

對於網頁瀏覽者來說,按鈕元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時最容易感受到的有 Normal、Hover 以及 Archive 這三種效果,分別為按鈕平時的狀態、滑鼠游標移到上方的效果、以及點擊按鈕時的效果。 而另外還有一個我們稱為 Focus 的效果,Focus 主要是指使用鍵盤的 Tab 按鍵來「瞄準」網頁上的元件時、被瞄準的那一個元件所顯示的狀態。雖然現在滑鼠已經是操作電腦時的主要設備,但在某些情況下,例如填寫表單時,讓使用者直接使用鍵盤的 Tab »

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

世界上大約有 8% 的男性人口擁有某種形式的色盲,女性約 0.5%。以這比例去推算,臺灣的色盲者將近 116 萬人。可以說是一個相當龐大的族群。 這些人不只在網路上、光是在日常生活上就常遭到不公平的待遇;就拿考取駕照來說好了,色盲者通常都是不被允許駕車上路的,雖然是基於交通安全的考量,但這卻是是相當不公平的待遇。其實,真正的原因在於我們日常生活中的設計缺乏同理心,未曾貼近這個族群的角度去思考與看待事情。 有些色盲者所看的的世界和我們不太一樣,設計應該要體貼、細心的照顧這些和我們不太一樣的朋友 :) 為了輔助色盲所設計的交通信號燈(來源): 色盲者眼中所見的世界 »

視覺設計師該決定什麼?

視覺設計在產品組成中佔了極為重要的成分,它直接影響了使用者對於該產品最初的觀感、使用時的體驗以及最後留下的印象等等。甚至在許多時候,產品的成敗與否,往往就取決於成功的視覺設計經驗上。 然而,一個設計的最終定案註定要受到來自四面八方的挑戰:有來自客戶的、來自專案管理的、來自工程師的,甚至來自使用者體驗的。視覺的問題很麻煩,整體環節裡的每個人都很有可能對你的設計發表意見與需求,但又不可能一一給予相對應的回饋。 以一個最簡單的名片為例子來說:可能老闆會要求你必須將名片上的文字放得又大又清楚、同事想要一張又酷又特別的名片,會計可能會要求東西要夠便宜、而專案經理則會要求你用最快速度完成工作。如果你聽從每個人的意見而去調整設計,那麼你每次調整都必須在各種不同要求之間作抉擇。在大多數的情況下,兩種需求是無法同時被滿足的,隨之而來的結果很可能就是不斷提高時間成本或是經過妥協而降低成品的質量。 這是社群網路上很流行一部影片, »

Make Your User a Hero!

你能想像哈利波特、魔戒的佛羅多、鋼鐵人、甚至是許多傳奇英雄,其實都是同一個英雄的化身嗎?神話大師「Joseph Campbell」的著作千面英雄(A Hero with A Thousand Faces)中提及了這個論點,他認為所有的英雄神話都有著一樣的模式、令人著迷的模式,每個英雄都經歷了一樣的旅程,從歷險開始、試煉、逃脫、救贖到返回,每一個傳奇故事都有著類似的劇情,讓人著迷其中。 為什麼這些模式會令人著迷呢? »

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

因為中文的方塊組成在排列上具有非常優秀的彈性,因此不論是直書或是橫式的書寫方向都可以很好的適應。在近代為了推行電腦化、讓文字與資訊帶來普及化,橫式書寫的排版方式被廣泛地應用。但其實在許多場合,例如較為著重中文文字表達性的書籍,依舊會使用直式書寫來做排版,在閱讀上具有完全不同的閱讀體驗: 直書跟橫書大不同 中文字使用直式書寫的來由,其實有很多說法,一個最普遍的解釋就是由竹簡發展而來。以比例占較多數的右撇子為例,當書寫竹簡時,左手持簡、右手書寫。在書寫的時候竹簡握持的方向以及書寫方向便很自然地發展出了直書的寫法,一直到後來雖然書寫載具演變成了紙張,但直書的書寫的習慣亦就這樣被沿襲了下來。 中文字使用直書好還是橫書好,其實各有許多的支持意見。就以書寫的狀況來說,其實就一般文字尺寸的書寫時,直書書寫的流暢度要優於橫書,這是由於我們在書寫時, »

從能用、好用到喜歡用的產品設計

在每天與設計師和工程師們的合作中,最常被拿出來討論的問題往往是「好看」還是「實用」。在專案最一開始的資料調查和整理階段(Survey Phase),大家會分頭收集各式各樣的相關參考資料,來幫助我們快速理解某個特殊領域的細節。例如製作一個閱讀性質的 App,就會從 App Store、Google Play 或其他 App Market 上面尋找相關產品,一邊分析自己專案的核心本質、一邊從他人製作出來的產品中吸取經驗。這時候,最常聽到的問題是:「這東西做好醜, »

為變動的文字內容做準備

顯示資訊的介面設計與平面的視覺與排版設計最大的不同,就在於文字資訊是變動的(Dynamic),它也是最麻煩棘手的部分,尤其是對於可供使用者輸入的內容。即使在有限制文字長度的的條件下,文字的長短仍然會對視覺與版面有絕對的影響力,我們無法預期使用者會想要輸入僅僅一個字還是漏漏長的整句話,即使是固定的操作資訊如按鈕上的文字,也會受到多國語系的支援而改變長短,因此,不論介面還是視覺設計師,在設計這類的資訊顯示介面時,就必須要清楚了解顯示文字控制元件的特性。 因為文字橫式的特性,最安全且沒有問題的就是重直堆疊(stack)的顯示方法,這也是最常見的方法,因為文字元件間只存在著垂直的相對關係,即使搭配一張顯示圖示,也很好排版與實作;針對較長的文字資訊,無論是要完全顯示所有資訊、縮小字型、或是截短( »

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

字體是視覺設計中很重要的一個部分,各種繪圖軟體如 Photoshop 以及 Illustrator 都提供了相當強大的文字編輯工具,可以隨心所欲的製作出各種文字編排。而當我們在使用文字輸入工具時會注意到有一個文字反鋸齒的選項: 針對這個功能,Adobe 原廠對於 Photoshop 的文字反鋸齒說明如下:「消除鋸齒可經由將邊緣像素部分填滿,製造出邊緣平滑的文字,如此一來,文字的邊緣就可以與背景混合。 」 選用不同的設定會直接影響文字的外觀,如下圖: (中文字為黑體 - 繁 - 細字,英文字為 Helvetica »