在做 UI/UX 設計的過程中,我們常常會聽到「設計規範」、「設計系統」,還有「設計指引」。 前兩者比較具體,像是按鈕高度多少、字體行距多少,這些能被明確量化。...
今天是基礎概念篇的最後一篇了!來講講文字如何影響介面體驗。 上一篇說到顏色和 icon 是 UI 的「外觀語言」,那文字就是最直接的資訊語言。 介面裡大多數訊息...
顏色是介面中最直覺、最能瞬間影響使用者感受的元素。它能傳達情緒、建立品牌記憶,也能直接左右操作的效率。而在實際體驗中,顏色與 icon 往往搭配使用,成為「訊息...
在設計元件時,大家第一直覺可能會是定義樣式:按鈕長什麼樣、表單欄位的圓角多少、icon 要實心還是空心 …。 這些確實重要,但元件不單只是為了「好看」,而是為了...
在上一篇文章中,我們談了設計系統的重要性:它是一套團隊共同語言,讓設計與開發可以對齊、確保介面一致性。這一篇則更往下聊 設計規範 和 介面元件,告訴你設計系統如...
在 UI/UX 設計中,設計系統已經從「選擇性工具」變成現代產品團隊不可或缺的核心資源。很多新人設計師可能覺得,反正只要畫出漂亮介面、按顏色與字體規則就好,何必...
在 UI/UX 設計流程裡,介面設計不是一開始就畫精緻的畫面🙅♀️。 我們通常會先做 Wireframe、Lo-Fi Prototype、Hi-Fi Prot...
在 Day03 的設計流程有介紹到『 資訊架構就像蓋房子前的藍圖,這步驟決定資訊要怎麼被整理和放置,使用者進來時才知道要去哪裡找東西。』 當使用者打開一個網站或...
在 UI/UX 設計流程裡,「使用者研究」是一個承上啟下的關鍵步驟。 上一步的需求訪談會蒐集大量資訊,但這些資料如果只是散落在筆記裡,團隊會很難吸收和運用。 這...
在 UI/UX 設計流程中,「需求訪談」幾乎是最前面的工作。很多設計師一開始會忍不住打開 Figma 開畫面開始設計,但如果沒有先理解需求,很容易設計到一半就被...
今天來介紹 UI/UX 的設計流程,上篇有提到 UI/UX 設計不只是「設計畫面」,其實背後是一個有脈絡的流程的喔!一般來說,我自己會把它拆成幾個步驟: 1️⃣...
第4章: 實作簡單的計算機App 介面設計 本章與第1章計算機最大的差異即是使用Designer設計,實作一個簡單的計算機應用程式,並透過此專案來學習如何設計介...
今天來了解Flo在介面上不同功能的設計原則與之前的改版設計,如果提出的重新規劃不能沿襲之前訂定的設計原則,會讓整個app變得更加模糊、混亂,而且鐵人賽目前是我自...
前言 大家好!我是Dolly,今年第一次參加IThome鐵人賽,大學的背景是資管系,在學期間也輔系設計系,與UIUX的初次接觸是在學校的兩門課上: 第一次是大學...
昨天講完架構面,今天不那麼技術,來講界面設計。 畫面設計上由於介面是設計給長者使用,因此字型較大。 首頁,使用者可以先選擇要問哪類問題。點選後進入對話頁面。...
大家好,我是YIYI,今天我要來製做設定頁面。 從哪裡可以進入設定頁面呢? 點擊LIST的設定~如下圖 設定頁面 這邊我設計的上一頁是預設跳回HOMEPAGE,...
大家好,我是YIYI,今天我要來製作記帳和報表的頁面。 記帳頁面 和製作前面的頁面一樣,先將BACKGROUND放入WHIMSICAL中,並拉ICON到手機框裡...
大家好,我是YIYI,今天我要來製作到目前為止所有頁面放入MARVEL APP做DEMO。 進入MARVELAPP 首先,進入登入好的APP頁面,將所有頁面放入...
大家好,我是YIYI,今天我要來製作日記-LIST以及個人資料頁面。 日記LIST 日記LIST是在昨天製作的日記頁面的基礎上增加LIST的頁面。製作完成後如下...
大家好,我是YIYI,今天我要來製作日記部分的介面。 如何進入日記頁面? 日記的部分是點選像是筆的icon來進入畫面,分別有三個地方可以進入這個頁面。第一個是H...
大家好,我是YIYI,今天要來公開設計好的封面,還有修正、增加一些前面沒想到的東西。 APP一點開的介面 底色一樣使用前面設定好的App底色,字使用E8B6A5...
大家好,我是YIYI,今天我要來製作HOMEPAGE中MONTH與TODAY的切換以及右下角的加號點擊後的畫面。 HOMEPAGE的切換 在HOMEPAGE的設...
大家好,我是YIYI,今天我要利用MARVEL將前面三個介面做出連結。 製作介面連結 首先,先進入昨天的介面,並且將滑鼠放在HOMEPAGE的頁面上,就會看到P...
大家好,我是YIYI,今天我要來介紹MARVEL APP。 MARVEL APP是甚麼 MARVEL APP是一款能夠讓設計師在不需要寫任何的程式的情況下讓AP...
大家好,我是YIYI,今天我要來製作左上角點開的清單以及點開右上角相機後的頁面。 清單LIST 考慮到這款APP的功能多樣化,所有的Icon都必須是讓人一眼就知...
大家好,我是YIYI,今天我要製作APP登入後的介面。 先製作登入後介面的原因 因為我畫的封面一直達不到我想要的感覺,於是決定先做裡面,後面再來做封面~ HOM...
大家好,我是YIYI,今天要開始用Whimsical畫架構圖了~ 進入Whimsical 先透過【DAY5】給大家的Whimsical網址進入網站的畫面。點【S...
大家好,我是YIYI,今天要來聊聊我想製作的APP的規格表。 動機與目的 如同【DAY 02】所說,我想製作的是一款多功能的小日曆。因為目前GOOGLE PLA...
大家好,我是YIYI,今天我要來介紹Whimsical。 關於Whimsical 在介紹如何使用前,先來說一下Whimsical是甚麼~Whimsical是一個...
大家好,我是YIYI,今天我要來和大家聊聊為什麼需要規格表簡介架構圖。 為什麼需要規格表? 規格表就像是在讀書時所制定的讀書計畫表,也就是規劃未來要做的事情。有...