人除了視覺的記憶以外，也有聽覺的記憶，Day25 我們已經讓方塊有了迷幻的動畫，並且點擊的時候可以發亮，今天我們希望除了發亮之外，點擊的時候也可以發出聲音。 抓...
溝通非常重要，不好的溝通不只沒有效率，也會造成不同領域間的嫌隙。如同設計師跟業者索取素材資源時，業者提供的是低解析度的 word 檔案，也很難解釋什麼叫做更高解...
設計動機 很多人相信眼見為憑，只相信看得到和摸得到的東西是存在的。但是這個世界上很多事物雖然看不到，但是卻確實存在。例如愛，愛不是以物質的形式來存在，看不到，摸...
開發、設計時我們會盡可能站在用戶的導向做思考，當中也會腦補許多行為，如： 字要小才會顯得精緻 輪播 Banner 很吸睛，最新消息放在上面大家都會看 說明要拆...
前情提要 今天我們要來實作記憶方塊的主畫面區塊，在昨天的努力之下，我們已經把區塊都規劃好了，接下來就是要把我們的方塊畫上去。 由於前兩個遊戲 Tic-Tac-T...
規範定義除了元件設計、空間、格線等等外，另外還有經常重複使用的樣式也能夠被預先定義，比要常見的視覺效果如下： 圓角 邊線粗細、邊線色彩 陰影 背景圖樣、裝飾...
繪製頁面草稿 按照慣例，我們先來畫一下我們整個遊戲畫面呈現的草稿，下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊，因為人的視線比起左右移動...
在「Functional map 與 UI flow」篇中，介紹過了應該要給工程師的文件～而在「溝通篇（那些難以啟齒的事）」篇裡，提到了一個在文件篇外的詞--...
定義玩基本要素如文字、色彩、空間等等後，就可以開始定義常用的「元件」，而每一種應用程式、環境都具有固定會不斷出現的 UI 元件，如桌面系統的應用程式會有固定的導...
昨天 Day21 我們已經說明了我們所需要的物件以及規則，為了要實現這些功能及規則，我們要來規劃我們需要哪些參數來幫助我們實現。 跟前面一樣，我們使用 crea...
前面我們已經講過了一些基礎色彩概念～當然其實在視覺上，還有很多其他的概念可以應用例如色彩心理學、錯覺...等這個領域可以說是好玩，但是太過深入又會有點乏味而且繼...
一開始的文章有介紹到格線系統，主要是針對水平欄位空間的介紹，而其實垂直空間也是需要有固定的間距，當然一方面是有一致的美感，另一方面則是讓開發者設定全網站可用間距...
前言 終於到了這次鐵人賽最後一個遊戲，經歷一番東挑西選及天人交戰之後，最後選定了這個遊戲，記憶方塊(Memory Blocks)。 這個遊戲也是很經典的童年回憶...
網頁設計許多概念是受到限制的，因為除了設計外也要同時重視可行性，因此預先定義規範不僅預先了解可執行的限制，對於工程師來說更方便預先建構元件。 但設計規範並不是一...
前情提要及動機 在 Day11 的功能構想中我們有提到，雖然到昨天 Day19 整個貪吃蛇遊戲已經很完整了，但是有一點美中不足的地方，就是透過手機開啟這個遊戲的...
昨天 Day18 我們已經準備好 isGameStart 參數來幫助我們做今天的重新開始按鈕。首先，我們需要先來製作一個按鈕，這個按鈕我想要直接蓋在遊戲地圖的正...
又是週未的日子就純粹聊一聊設計師勇闖前端城 心路歷程吧～ 最近在面對設計稿總有個心得浮上心頭UI設計師真的需要學些網頁技術或如者有時間真的也了解一下前端技能。...
上一篇介紹了版面配置的概念，其中最重要的是「群組」概念，而本篇就透過實際案例來說明各大網站如何運用這些概念，並且看看是否也有運用到交錯、韻律的手法。 這些概念要...
前情提要 昨天 Day17 我們已經讓食物可以隨機產生，食物還會炫砲的發光，蛇也可以順利吃到食物，而且吃到之後身體會變長，速度會變快。 但是讓蛇這樣一直吃下去，...
本篇主要是描述網頁「登入頁」（Landing Page），這個頁面是用戶一開始接觸的畫面，雖然這個頁面沒有固定的設計方法，但其實可以從各大網頁尋找到雷同的跡象，...
想一想，決定食物如何出現 俗話說，吃飯皇帝大，如果不吃東西，貪吃蛇就長不大，也跑不快，所以今天我們要來製作貪吃蛇的另一個重頭戲，就是食物。 首先，我們要來決定食...
網站上總需要圖片來點綴，除了客戶提供解析度不足的圖片外，我們也看從許多素材網站找到不錯的圖片，而選用圖片除了找到合適主題外，也需要花不少時間來比對是否合適於網站...
昨天我們已經讓蛇的頭部可以動起來，並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體，讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...
網站開發加入一些圖示點綴，除了可以增加網頁的豐富度外，同時可以讓用戶從圖示中了解當下的行為為何。過去圖示大多使用 png 來呈現，具有豐富的色彩及尺寸，但隨著設...
有了地圖之後，我們就可以開始讓蛇在上面爬了，今天我們的目標是畫出蛇的頭，並且可以操控他在地圖上跑來跑去。 新增蛇的物件 首先我們先來新增一個蛇的物件 const...
向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片，但在輸出時有些小地方也需要注意一下，避免在本地端看似沒有問題，但用戶卻看到的卻與預期不同。...
昨天 Day13 我們已經把畫面區塊規劃出來了，今天要來把主畫面地圖畫好。 地圖畫面座標系 我們需要一個 xy 軸的二維直角座標系，這邊我的做法是把地圖切成...
了解基本的格式後，接下來設計師還需要「正確的」輸出圖片並壓縮，網頁上輸出圖片雖然沒有印刷中那麼複雜，但依然有許多眉角需要注意，像是用什麼工具壓縮就很常被詢問到，...
隨著裝置解析度越來越高，如果是以 1:1 的尺寸輸出圖示時，都會明顯地看到圖示邊緣出現鋸齒，這樣的情況下無疑是降低設計的品質，為了避免這樣問題，實作中通常會使...
頁面佈局規劃 如同前篇遊戲 Tic Tac Toe 一樣，我們要來規劃一下遊戲的畫面，因為我希望我們貪吃蛇的遊戲在電腦上可以玩，在手機上也可以玩，所以我想要把遊...
Taiming
卡斯伯
Wen Chien
凱特麻麻桑
iThome鐵人賽
看影片追技術