Fourdesire Blog

Author: Magic Hung

Magic Hung

Technical Director @ Fourdesire. Create fun and crafts via programming.
I/O

Unity – 用 Shader 打造實用的漸變填色

Share
漸變（Gradient）填色可說是極為常見的視覺表達方式， Jony Ive 更在 iOS 7 的設計中將漸變推到了人生巔峰（咦），而其中最基本的不外乎三種：線性漸變（Linear Gradient）、輻射漸變（Radial Gradient）、以及角度漸變（Angle Gradient），為了能有效在畫面中呈現漸變的美感又不失效能不佔空間不佔記憶體同時滿足首席設計師的最高需求，我們要來應用 Sh ... READ MORE
Comments Off on Unity – 用 Shader 打造實用的漸變填色
I/O

撰寫有效的 Git Commit Message

Share
任何軟體專案都是由至少兩個以上的開發者所共同合作開發的。 這句話非常有意思，哪來的一定有兩個以上的開發者？其實就是： A. 原始開發者 以及 B. 原始開發者經過了幾週或幾個月後。 我想任何一位程式設計師都對這個概念再熟悉不過了，當時間一過，腦中用於暫存當初某段程式碼撰寫的時空背景前因後果等各種思路的記憶體早己清空殆盡，在能夠開始動手修改或撰寫新程式碼前，我們需要在腦中重新建立對某段程式碼的環境背 ... READ MORE
Comments Off on 撰寫有效的 Git Commit Message
I/O

成為 UGUI 的排版大師 – 一次精通 RectTransform

Share
想要成為 Unity Canvas UI (UGUI) 的排版大師，那麼我們就一定要充分了解 UGUI 最基礎的排版類別 RectTransform ，它屬於 Transform 的子類別，用於描述元件如何擺放在二維介面中，既然是在二維介面中元件的 Transform，那麼叫做 Rect 的 Transform 也是很合理的吧！關於 RectTransform 的官方技術文件我們可以在 Unity ... READ MORE
Comments Off on 成為 UGUI 的排版大師 – 一次精通 RectTransform
Blog 使用者介面

設計與工程的相輔相成：如何打造流暢的操作介面

Share
在設計師與工程師的團隊合作過程中，常會面臨到一個問題，就是規劃好的視覺介面與操作流程，在實際程式實作時才發現許多衝突與不完整的地方，產生許多額外的來回溝通時間與修改調整的成本，這通常是因為沒有事先規劃出完整詳細的操作流程 mockup，在wireframe產生後就著手進行視覺設計與雛形開發的分工，就很容易就發生這樣的狀況。 以個人曾經接觸過的案子為例，下圖為其中的兩個主要的頁面（這裡已將視覺完稿轉 ... READ MORE
Comments Off on 設計與工程的相輔相成：如何打造流暢的操作介面
Blog 使用者介面

為變動的文字內容做準備

Share
顯示資訊的介面設計與平面的視覺與排版設計最大的不同，就在於文字資訊是變動的（Dynamic），它也是最麻煩棘手的部分，尤其是對於可供使用者輸入的內容。即使在有限制文字長度的的條件下，文字的長短仍然會對視覺與版面有絕對的影響力，我們無法預期使用者會想要輸入僅僅一個字還是漏漏長的整句話，即使是固定的操作資訊如按鈕上的文字，也會受到多國語系的支援而改變長短，因此，不論介面還是視覺設計師，在設計這類的資訊 ... READ MORE
Comments Off on 為變動的文字內容做準備
Blog 使用者介面

不想讓使用者反感？試試被動式推播吧！

Share
手持裝置中的訊息提醒通知（Mobile Notification）已經是每天使用智慧型手機習以為常的東西，各式各樣的訊息通知每天不斷的 Pop-up 在我們狹小的螢幕中，有些令人期待、有些令人厭煩、有些則令人覺得莫名其妙，那麼到底這些訊息通知是否能夠有效的促使使用者點下去，達到我們想要的目的呢？ Frank Bentley 以及 Konrad Tollmar 就做了一個研究，來探討被動式的提醒通知 ... READ MORE
Comments Off on 不想讓使用者反感？試試被動式推播吧！
Blog 使用者介面

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

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

遊戲化應用：如何掌握 5 種階段的使用者

Share
遊戲化應用透過人們玩樂的天性，幫助提昇使用者對於應用與服務的持續性，在了解考慮到人們不同的玩樂動機後，我們便可以設計出有趣、引人入勝的各種應用與服務。但根據不同涉入程度的使用者，他們之間的需求也是有所差異的。 《Gamification by Design》作者透過 Dreyfus 所提出的技能獲取（Skill Acquisition）模型，依據玩家（使用者，以下皆以玩家代表）使用遊戲（各種遊戲化 ... READ MORE
Comments Off on 遊戲化應用：如何掌握 5 種階段的使用者
Blog 遊戲化

遊戲化應用：發掘 4 大使用者動機

Share
透過遊戲可以幫助人們改變行為、增進學習的效果，甚至可以改善我們的健康。遊戲化將枯燥乏味的事情從消極與負面，轉變為主動自發的玩樂過程。 類似於遊戲化訴求的好朋友「樂趣理論 (The Fun Theory)」也是希望透過人們與生俱來的玩樂天性，發展了許多有趣的公共設施，其中一個著名的例子就是樂透測速照相機（Speed Camera Lottery）。 無論在什麼國家，超速都是一個令人頭痛難以解決的問題 ... READ MORE
Comments Off on 遊戲化應用：發掘 4 大使用者動機
Blog 觀點

習慣這把雙面刃：為什麼老客戶都討厭介面改版

Share
習慣是把雙面刃，它讓我們可以很快速的進入狀況，讓身體在短時間內做出相對應的動作與反應，但有時卻阻礙了自己去接受更好的新設計與方式。 想必大家一定都有過從一個停止運轉的電扶梯由上往下走下去的經驗，那種感覺怪怪的卻又說不上到底是哪裡不對勁，尤其是剛踏下去的前幾個腳步，不論你已經體驗過了幾次，每次遇到時都還有身體上不平衡與不穩定的感覺，需要一點的時間來讓身體適應。這個現象稱作為「壞掉的電扶梯現象（Bro ... READ MORE
Comments Off on 習慣這把雙面刃：為什麼老客戶都討厭介面改版
Blog 使用者介面 觀點

沒創意是一種惡性循環：試著抽離過濾泡泡吧！

Share
「個人化」已成為新興網路服務中不可缺少的元素，聰明的系統必須根據使用者的喜好以及習慣，過濾掉「不必要」的資訊與訊息，讓我們覺得「嗯！這地方真不錯，每次來都覺得值回票價！」臉書會將我較常互動朋友的訊息，排序在比較前面；計師作品交流平台 Behance 也會把我喜愛的設計師所欣賞（Appreciate）的作品，也一併顯示在我的首頁，讓我每天花上好一段時間，沉浸在這些不可思議的鉅作中。 這些聽起來不是非 ... READ MORE
Comments Off on 沒創意是一種惡性循環：試著抽離過濾泡泡吧！
Blog 使用者介面

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

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

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

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

友善的動態更新方式

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

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

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

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