iT邦幫忙

ui/ux相關文章
共有 107 則文章
鐵人賽 Modern Web DAY 17

技術 30天打造品牌特色電商網站 Day.24 電商必用的各類提示

相信大家使用網站時,一定會遇到大大小小固有或彈出的提示框,這次的主題就是他! 提示框在用戶經驗上會以內容的輕重程度做不同類型的變化,因此不管是建議、推廣,到提醒...

鐵人賽 Mobile Development DAY 9

技術 [Day09 - UI/UX] UI 繪製

在UI出圖之前,我們先確認好目前的 wireframe 是完整的。接下來只要依照 wireframe 來實作UI的部分即可: 以登入為例: 接下來就一張一張把...

鐵人賽 Mobile Development DAY 6

技術 [Day06 - UI/UX] 建立 APP Design Guideline

在開始畫設計稿之前,我們要先確認一下我們的字級以及主色以及輔色等等。這邊我套用去年自製的 Design Guideline Template 來定義簡單的設計規...

鐵人賽 Mobile Development DAY 5

技術 [Day05 - UI/UX] 為APP製作 LOGO

要開始畫一個LOGO之前我習慣先簡單列出一些主題文字。這次要做的是一個旅遊包包整理APP所以我列出下面這些文字。 戶外旅遊 打包行李 確認的 輕巧的 快速的...

鐵人賽 Mobile Development DAY 4

技術 [Day04 - UI/UX] 確認使用的 UI framework

開始畫圖之前,先確認好要使用的UI framework,來確認可以使用什麼元件。才不會有實作畫面很困難的問題。這邊提供幾個元件來給大家參考: 以下是我使用過的:...

鐵人賽 Modern Web DAY 4

技術 30天打造品牌特色電商網站 Day.4 網站設計及Figma介紹

開始打程式前,網頁設計是不可或缺的環節! 網站介面設計,稱為UIUX設計 UI指使用者介面(User Interface)、而UX是使用者經驗(User Exp...

鐵人賽 Modern Web DAY 2

技術 30天打造品牌特色電商網站 Day.2 電商網站比較分析

認識過網站的基礎後,接下來可以多觀察生活中的範例做練習,選擇幾個成效不錯的網站去做比較與分析,以下整理出電商網站比較常見的八個特點,大家可以搭配做參考,規劃出更...

鐵人賽 Mobile Development DAY 13

技術 電子書閱讀器上的瀏覽器 [Day13] 自訂工具列

隨著開發的功能愈來愈多,工具列的空間已不足以將所有的功能都顯示在上面;而且也不是每個功能都是使用者會常用的功能。為了要解決這個問題,我打算改造工具列,讓使用者可...

鐵人賽 自我挑戰組 DAY 29

技術 【Day 29】情境模擬:如何溝通讓工程師在乎設計細節 !? 設計師需要學前端技術面嗎 !?

工程師不在乎設計細節怎麼辦!? 設計師需要學前端技術面嗎!? 專案中如果碰到不在意間格距離、顏色色碼、按鈕大小等設計細節的工程師,我們可以試著透過以下的方式來溝...

鐵人賽 自我挑戰組 DAY 28

技術 【Day 28】情境模擬:如何溝通有互動效果的介面 !?

與工程師溝通有互動效果的介面要注意什麼 !? 互動效果相較靜態的設計稿實作時間比較久、建置成本高,需要考量不同層面的問題,像是效能、支援度等。 建議在設想時:...

鐵人賽 自我挑戰組 DAY 27

技術 【Day 27】情境模擬:該如何協助設計師,提供可以執行的設計稿 !?

要注意什麼,才能更順利地提供可執行的設計稿 !? 一、參考熱門的設計框架、典範大廠的 Web 框架或工程師習慣的框架 例如:boostrap、material...

鐵人賽 自我挑戰組 DAY 26

技術 [Day26] 溝通之術 - 設計師篇

今天是雙十連假的最後一天~也是鐵人賽接近尾聲的倒數第 5 篇~今天就來講講跟設計師的溝通之術吧! 前言 原本是個坐在位置上,每天打開 Jira 檢視今日任務,做...

鐵人賽 自我挑戰組 DAY 26

技術 【Day 26】情境模擬:再好看也沒用 !? 設計稿被工程師說太難做不出來 QQ

接下來,會就六角學院 UI 設計入門 課程中,針對團隊合作時會碰到的情境稍作討論。 設計稿再好看也沒用 !? 工程師說太難做不出來 QQ 團隊的發揮,需要建立、...

鐵人賽 自我挑戰組 DAY 25

技術 【Day 25】鐵人賽 25 天回顧

進行六角學院開設的 UI 設計入門學習第 25 天,稍微從 wireframe 下一個階段開始來做一些回顧。 【Day 07】設計流程:繪製 Mockup 設計...

鐵人賽 自我挑戰組 DAY 24

技術 【Day 24】設計流程:原型設計的種類與技巧

本篇重點 原型設計 ( Prototype ) 種類與技巧 原型設計 ( Prototype ) 原型設計是對產品會如何運作的模擬,能在產品正式...

鐵人賽 自我挑戰組 DAY 23

技術 【Day 23】設計流程:與工程師協作的重要文件

本篇重點: 設計規範製作 切圖 ( Slice ) 的格式與命名 設計標註檔 1、設計規範製作 依內容詳細程度,從精簡到完整分為三種類別:介...

鐵人賽 自我挑戰組 DAY 22

技術 【Day 22】原子設計:頁面 ( Pages、Mockup )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 Modern Web DAY 27

技術 Day 27. 今天不寫程式改來學知識 #5:前端RWD與圖表套件

前言 今天來討論前端RWD的套件、表格的套件、圖表的套件分別有哪些好用的、可以當作參考。 目前js相關的前端套件非常多,使用者可以依據自己的需求進行選擇,有些為...

鐵人賽 自我挑戰組 DAY 21

技術 【Day 21】原子設計:模板 ( UI State 頁面狀態 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 自我挑戰組 DAY 20

技術 【Day 20】原子設計:模板 ( RWD 響應式排版 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 自我挑戰組 DAY 19

技術 【Day 19】原子設計:模板 ( Landing Page 著陸頁 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 自我挑戰組 DAY 18

技術 【Day 18】原子設計:模板 Templates

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 自我挑戰組 DAY 17

技術 【Day 17】原子設計:組織 ( Section 常見版型 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 自我挑戰組 DAY 16

技術 【Day 16】原子設計:組織 ( 頁首、頁尾 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 自我挑戰組 DAY 15

技術 【Day 15】鐵人賽 15 天回顧

進行 UI 設計入門學習第 15 天,慢慢的可以透過結構性思維去觀察事情。 以下重點回顧感受較深刻的章節: 【Day 01】什麼是 UI 設計 使用者介面,目...

鐵人賽 自我挑戰組 DAY 30

技術 UI / UX 設計白皮書 / Material Design 導讀_Day30 Platform guidance 平台指導

昨天我們了解到 Platform guidance 平台指導,子母畫面模式可讓兩個活動同時顯示在螢幕上,執行兩種不同的應用程式活動,也可以調整子母畫面的畫面尺寸...

鐵人賽 Modern Web DAY 14

技術 【Day 14】從事 UI/UX 工作上,常參考的視覺網站整理(持續更新)

延續上一篇 UI/UX 設計師的「設計參考」整理方法! 今天會分享一些,工作三年來時常拿出來參考的視覺網站。 多數會以 耐看、簡約、實用性 為主,單純好看的視覺...

鐵人賽 自我挑戰組 DAY 14

技術 【Day 14】原子設計:分子 ( 表單、CRAP優化界面準則 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

鐵人賽 自我挑戰組 DAY 29

技術 UI / UX 設計白皮書 / Material Design 導讀_Day29 Platform guidance 平台指導

昨天我們了解到 Platform guidance 平台指導,在應用程式中許多的操作需要權限許可,透過入門指南說明權限、或是事先詢問、在消息通知中顯示請求、透過...

鐵人賽 Modern Web DAY 13

技術 【Day 13】UI/UX 設計師的「設計參考」整理方法!

昨天分享的是「網站收集頁」,主要用途在於大範圍的尋找視覺參考網站。 當一個客戶有指定風格,或是老闆認為該客戶的產業性質,也許更適合走某種設計風格時, 我們也會整...