Download - Let's talk about Web Design
Application !Design
Graphic!Design
Web Design
20150413 Abby Chiu
Let’s talk about
邱靖瑄 Abby Chiu
三年以上 UI/UX、網⾴頁與應⽤用程式設計經驗。!現職聯發科技 UI/UX Designer,負責物聯網及⼤大數據相關設計。
Mobile app design Package designillustration
Web design Infographic designProduct design
Graphic design User experience
Web Design
Abby Chiu
Slideshare
去年 F2E 社群分享
今天程式研究社的分享現場聽眾組成
分享內容
1. Web 設計過程!
2. 實務經驗分享!
3. 如何踏⼊入未知領域
分享⺫⽬目的!(終⾝身志向?)
+ HTML & CSS + javascript
Photoshop illustrator sketch …
HTML & CSS javascript …
Designer Front-end
+ Sense of beauty
New Tab
Web Design
在分享 Web 設計過程前
理想中⼀一個完整的設計團隊會有
UI Designer!使⽤用者介⾯面設計師
Visual Designer!視覺設計師
UX Researcher!使⽤用者經驗研究員
UI Designer!使⽤用者介⾯面設計師
Visual Designer!視覺設計師
UX Researcher!使⽤用者經驗研究員
or
但現實常常是
別怕,我們來談談
⼀一個⼈人怎麼做 Web 設計?
Web 設計過程!之⼀一個⼈人怎麼做 Web 設計?
⼀一個⼈人怎麼做 Web 設計?
a. 前期研究!
b. 實作
1. Web 設計過程
a. 前期研究!
b. 實作
1. Web 設計過程
(1). 了解 Web 設計趨勢( Web Design Trends )!!(2). 使⽤用者經驗研究( User Experience )
⼀一個⼈人怎麼做 Web 設計?
了解 Web 設計趨勢
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
1. Longer scrolling sites 2. Storytelling and interaction 3. Absence of large header background images 4. Removing non-essential design elements in favor of simplicity 5. Fix width centered site layout 6. Professional high quality custom photography 7. Flyout/slideout app-like menus 8. Hidden main menus 9. Very large typography 10. Performance and speed
10 Web design trends you can expect to see in 2015
資料來源:thenextweb
了解 Web 設計趨勢Longer scrolling + Parallax scrolling
53Sony
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢
1. Focus on typography 2. Card-based design 3. Almost-Flat Design 4. Big Photographic Elements 5. Decrease In Page Height 6. Storytelling and interaction 7. Use of high-resolution moving images 8. Responsive 9. Fix width centered site layout 10. Personalized User Experiences
Top 10 Web Design Trends that Boom in 2015- 2016
資料來源:perceptionsystem
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢Focus on typography
Google Fonts
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢Use of high-resolution moving images (Cinemagraphs)
Cinemagraphs examples
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢Responsive design
2010 年 5 ⽉月,Ethan Marcotte 在「A List Apart」寫了⼀一篇開創性的⽂文章:Responsive Web Design。 !利⽤用:流動佈局 fluid grids、 媒介查詢 media queries 、 彈性圖⽚片 scalable images !創建了⼀一個在不同分辨率屏幕下都能漂亮地顯⽰示的網站。
圖⽚片來源
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢Responsive design:根據不同裝置做 navigation bar 的優化
Skinnyties
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢Responsive design:根據不同裝置做 navigation bar 的優化
Skinnyties
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢Responsive design:根據不同裝置做版⾯面的調整
Foodsense
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢⺫⽬目前我們談到的都只是 layout 上的調整
圖⽚片來源
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
了解 Web 設計趨勢⺫⽬目前我們談到的都只是 layout 上的調整
未來我們應該思考,在不同使⽤用時機、不同裝置上、 應該提供使⽤用者什麼內容?
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
⼩小結論了解 Web 設計趨勢是每天的功課
了解趨勢不是⼀一味跟進, 因應不同需求提出最好的 設計⽅方式。
前端技術⽇日新⽉月異,隨時 讓⾃自⼰己準備好武器。
Designer Front-end
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
⼀一個⼈人怎麼做 Web 設計?
a. 前期研究!
b. 實作
(1). 了解Web設計趨勢( Web Design Trends )!!(2). 使⽤用者經驗研究( User Experience )
1. Web 設計過程
使⽤用者經驗研究( User Experience )什麼是使⽤用者經驗?
⼈人對於產品或系統或服務, 使⽤用前到使⽤用後產⽣生的認知與反應。
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
使⽤用者經驗研究( User Experience )什麼是使⽤用者經驗?
圖⽚片來源
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
使⽤用者經驗研究( User Experience )這是番茄醬,你看到哪些設計?
圖⽚片來源
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
使⽤用者經驗研究( User Experience )了解使⽤用者,你可以提供更好體驗
圖⽚片來源
Design the product Design the experience
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
使⽤用者經驗研究( User Experience )使⽤用者經驗研究影響設計
From Yahoo!’s Eye tracking studies: !• People scan the main sections of a page to determine what it’s
about and whether they want to stay longer. !• They make decisions about the page in as little as three seconds. !• If they decide to stay, they pay the most attention to the content
in the top part of the screen.
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
使⽤用者經驗研究( User Experience )例如:Z - Layout : Z 型佈局
研究轉化成
參考資料:Understanding the Split Layout in Web Design
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
使⽤用者經驗研究( User Experience )
不⽌止因為排版好看,更利⽤用巧妙的佈局,讓使⽤用者不知不覺瀏覽更多的訊息,增加使⽤用者繼續瀏覽的意願。 !Web 設計不是藝術,著重在於信息結構關係的整理,以及互動關係。
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
⼩小結論整理 Web 設計基本原則
1. 清楚提供網⾴頁導覽功能 !2. 簡單清楚的內容 !3. ⼀一致性的版⾯面設計 !4. 易懂的簡單圖⽰示
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
清楚提供網⾴頁導覽功能永遠讓使⽤用者知道他在哪裡,要往哪去
Youtube Pinterest
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
簡單清楚的內容廢話不多說,著重在核⼼心內容的呈現
DropboxGoogle
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
⼀一致性的版⾯面設計減少視覺上的干擾,提升品牌或服務的專業度
Codecademy
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
易懂的簡單圖⽰示⼈人都是懶散的
Spotify
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
⼀一個⼈人怎麼做Web設計?
a. 前期研究!
b. 實作
1. Web 設計過程
(1). 釐清需求!!(2). 設計過程! (繪製草圖、繪製 Wireframe 製作 Prototype、視覺定稿)
釐清需求
1. Web 設計過程 > 實作 > 釐清需求
我們要表達什麼訊息給接收者(使⽤用者)?
圖⽚片來源
釐清需求
1. Web 設計過程 > 實作 > 釐清需求
我們要表達什麼訊息給接收者(使⽤用者)?
圖⽚片來源
釐清需求我們要表達什麼訊息給接收者(使⽤用者)?
圖⽚片來源
1. Web 設計過程 > 實作 > 釐清需求
釐清需求Web 設計開始前,先畫出 Sitemap
圖⽚片來源
1. Web 設計過程 > 實作 > 釐清需求
釐清需求使⽤用 Sitemap 的好處
參考資料:Why You Should Build A Sitemap Before Designing Your Site
1. Clarify Your Site’s Purpose and Goals 2. Avoid Duplicate Content 3. Streamline Your Conversion Funnel 4. Get Everyone On the Same Page
1. Web 設計過程 > 實作 > 釐清需求
釐清需求利⽤用 Sitemap 勾勒網站的整體架構,顯⽰示網站所有的⾴頁⾯面連結資訊。
1. Web 設計過程 > 實作 > 釐清需求
⼩小結論做任何事情的第⼀一步是先釐清需求
1. 地基打穩了才能蓋房⼦子 !2. 專注在最重要的事情上
1. Web 設計過程 > 實作 > 釐清需求
⼀一個⼈人怎麼做Web設計?
a. 前期研究!
b. 實作
1. Web 設計過程
(1). 釐清需求!!(2). 設計過程! (繪製草圖、繪製 Wireframe 製作 Prototype、視覺定稿)
設計過程
1. Web 設計過程 > 實作 > 設計過程
⼀一切從草圖開始,先畫 Wireframe
Wireframe 是低擬真度的設計原型。去除所有花俏的視覺元素,利⽤用線條、⾊色塊、⽂文字,規劃⾴頁⾯面的結構與功能。
設計過程⼀一切從草圖開始,先畫 Wireframe
任何跟產品有關的⼈人都應該使⽤用!!優點: 1. 快速實現腦中的想法。! 2. 討論可⾏行性,快速修改。! 3. 減少開發前期的成本。
1. Web 設計過程 > 實作 > 設計過程
設計過程針對不同裝置做規劃
.K8'$4K%-5лȞ˖Ө ʖˠўω Žؾ Ԕāĵ
лȞ˖Ө
лȞॏ��
лȞॏ��
.K8'$4K%-5
лȞ˖Ө
лȞॏ��
Desktop Pad Mobile
1. Web 設計過程 > 實作 > 設計過程
設計過程提醒:善⽤用 Grid system 排版,與⼯工程師討論如何切圖
1. Web 設計過程 > 實作 > 設計過程
設計過程利⽤用 Grid system 排版的好處
圖⽚片來源
1. 讓元素與元素照著⼀一定的規則排列,提升閱讀的舒適感。!
!2. 減少與⼯工程師溝通的負擔。!!3. 確保⾃自⼰己設計的可⾏行性。
1. Web 設計過程 > 實作 > 設計過程
設計過程接下來談設計常⾒見的⼯工具
Photoshop illustrator sketch3
uiweek
教學資源:sketch 中⽂文網
1. Web 設計過程 > 實作 > 設計過程
設計過程但今天不談設計(那是天坑),我們談溝通
請畫⼀一個蘋果,寬20px ⾼高25px。像這樣!
Designer Front-end
好了!
寬20px
⾼高25px
1. Web 設計過程 > 實作 > 設計過程
設計過程但今天不談設計(那是天坑),我們談溝通
整體寬20px、總⾼高25px ,蘋果的顏⾊色是#ec571d,葉⼦子顏⾊色是#1e771d,蘋果左右要對稱...
Designer Front-end
好了!
寬20px
⾼高15px ⾼高25px
1. Web 設計過程 > 實作 > 設計過程
設計過程
圖⽚片來源
1. Web 設計過程 > 實作 > 設計過程
設計過程
圖⽚片來源
1. Web 設計過程 > 實作 > 設計過程
設計過程與⼯工程師溝通的演化過程
1. ⽤用畫的!2. ⽤用⼿手寫!3. 請⼯工程師先寫出⼤大致上的版型,! 細節部分⾃自⼰己微調。!4. ⾃自⼰己寫出來...
1. Web 設計過程 > 實作 > 設計過程
設計過程與⼯工程師溝通的演化過程
跟寫程式⼀一樣,能重複利⽤用的部分就重複利⽤用。!!設計師希望⼯工程師:!!1. 先將標題的字型、字體⼤大⼩小、顏⾊色統⼀一 ; 內⽂文與⾏行距也是。!
!2. 能先對⿑齊就對⿑齊,設計師會謝! 謝你。
Ԇʛ
ʮNJ
ʮNJ
ʮNJ
ʮNJ
Ԇʛ
ʮNJ
ʮNJ
ʮNJ
ʮNJ
1. Web 設計過程 > 實作 > 設計過程
⼩小結論保持開放的⼼心態,學習不同事物並尊重彼此的專業。 術業有專攻,設計的部分還是交給設計師吧
Designer Front-end
1. Web 設計過程 > 實作 > 設計過程
分享內容
1. Web設計過程!
2. 實務經驗分享!
3. 如何踏⼊入未知領域
實務經驗分享
2. 實務經驗分享
MediaTek Cloud Sandbox:為 Maker 打造的物聯網平台
MediaTek Cloud Sandbox
實務經驗分享
2. 實務經驗分享
從 Sitemap 開始,成為主管與⼯工程師間溝通的橋樑
MCS home page
news and updatespersonal dashboard
navigation bar ( fix )
profilelogo
lab.com
landing page
brief introductionnews
sign up / in
FAQs
API resource
API sandboxAPI referenceAPI error code
KL]LSVWLY
prototype detail
user privileges notificationfirmware
data channels
prototype information
edit
add / deleteprioritytitle / description / type template
prototype profile
prototype photoprototype statechip
title
create test device
prototype list
prototype profile
prototype photoprototype statechip
title
development
log in / outedit profile
readcreate prototype ( first time )
add / delete useradd notificationupload firmware
edit
prototype photoselect chip
title
create / delete prototype edit
prototype photoselect chip
title
圖⽚片來源:MCS Sitemap
實務經驗分享利⽤用 Wireframe 呈現完整的 UI flow ,是下⼀一步視覺設計的基礎
圖⽚片來源:MCS web UI flow
MCS 2.0 Flowchart 2014 / 11 / 07
Sign in page
sign in
forgot password
sign in with fb
create an account
input emailinput passwordremember me
Development
create product
prototype photo
edit
prototype name / description / state / chip
detail
prototype profile
prototype list
prototype detail
edit
prototype photo
prototype profile
prototype name / description / state / chip
data channel
user privileges notificationfirmware
data channel
prototype information ( tab )
add component
data channel template
edit
data channel description
show data record
data channel name
test device photo
edit
test device name / description / state / chip
detail
My devices
test device profile
test device list
My devices
edit
test device photo
test device profile
test device name / description / state / chip
data channel
notificationfirmware
data channel
test device information ( tab )
data channel template
data channel description
show data record
data channel name
MCS home page
navigation bar ( fix )
personal dashboardnews and updates
side menu ( fix )
recent activity
top navigation bar
logo profile
log in / outedit profile
side menu
home page
development
my devices
API resources
FAQs
personal dashboard
landing page1 2 3
4
5
2. 實務經驗分享
實務經驗分享不斷地修正、不斷地修正、不斷地修正
圖⽚片來源:MCS web design
Home page
News from Mediatek Cloud Sandbox
MCS 2.0 is ready now !2014/10/16 15:30
Welcome to join Mediatek Cloud Sandbox !2014/10/16 15:30
Hi makers , we have release the MCS 2.0 already. We add a lot of new features on it as following :
Feather 1 : MT7681 integrationWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek .
Feather 2 : Remote controller appWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek ...
Title2014/10/16 15:30
You can post something news to makers.
We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek .
We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are ...
More
More
More
You just join Cloud Sandbox.just now
Recent Activity
Create new
Abby [email protected]
Product
0
Management
My Devices
Development
Home page
FAQs
API Resources
Abby Chiu
Dashboard
News from Mediatek Cloud Sandbox
MCS 2.0 is ready now !2014/10/16 15:30
Welcome to join Mediatek Cloud Sandbox !2014/10/16 15:30
Hi makers , we have release the MCS 2.0 already. We add a lot of new features on it as following :
Feather 1 : MT7681 integrationWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek .
Feather 2 : Remote controller appWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek ...
Title2014/10/16 15:30
You can post something news to makers.
We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek .
More
More
You just join Cloud Sandbox.just now
Recent Activity
Create new
Abby [email protected]
Product
0
Cloud Sandbox BETA Abby Chiu
Development
Dashboard
My Devices
Support
API Resources
You just join Cloud Sandbox.just now
Recent Activity
Create new
Abby [email protected]
Prototype
0
News from Mediatek Cloud Sandbox
What’s New for MCS 2.0 ? 2014/10/16 15:30
With supports for nine data types it's easy to create your prototype. And to better support the MediaTek LinkIt Con-nect 7681 development platform you've access to data types for GPIO and PWM.
More data type
The new LinkIt Connect 7681 development board is now available for you to use.ces such as smart lighting, and door
LinkIt Connect 7681 Development Board Support
Welcome to MediaTek Cloud Sandbox 2.0 beta. We've enhanced our platform from the 1.0 closed test environment and added several new features:
Cloud Sandbox Abby ChiuDevelopment My Devices HelpResources
2. 實務經驗分享
實務經驗分享通常我的桌⾯面是這樣⼦子的
圖⽚片來源:MCS web design
2. 實務經驗分享
實務經驗分享與⼯工程師們溝通時,利⽤用 Guideline ⽂文件
圖⽚片來源:MCS web design
2. 實務經驗分享
實務經驗分享
圖⽚片來源:MCS web design
2. 實務經驗分享
與⼯工程師們溝通時,利⽤用 Guideline ⽂文件
實務經驗分享
2. 實務經驗分享
利⽤用 Guideline ⽂文件的優點
1. 團隊合作時,確保輸出的品質⼀一致 !2. 檢視⾃自⼰己的設計是否⼀一致、合理 !3. 當有爭執時,有憑有據?
實務經驗分享
2. 實務經驗分享
產品上線了,設計還未結束
定義問題 探討需求 概念設計 設計實作 收集反饋
分析數據
分享內容
1. Web 設計過程!
2. 實務經驗分享!
3. 如何踏⼊入未知領域
如何踏⼊入未知領域
3. 如何踏⼊入未知領域
1. 勇敢探索 ( 其實我是⼯工業設計背景的 :D ) !2. 如何培養美感?
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 勇敢探索
Industrial Design
概念設計UI / UX Design
第⼀一步總是最難的
如何踏⼊入未知領域
Q.L.L LiVEBRiCKS ⽣生活磚
MediaTek 聯發科技
Startup 百⼈人企業 萬⼈人企業
接下來的路,其實也不容易
3. 如何踏⼊入未知領域 > 勇敢探索
如何踏⼊入未知領域整段路程,看起來像是⼀一條向上的曲線
3. 如何踏⼊入未知領域 > 勇敢探索
如何踏⼊入未知領域包含
1. 合作夥伴的增加 !2. 專案的困難度、複雜度 !3. 其他⼈人對你的期待 !4. ⽣生活⽔水準與薪資福利
3. 如何踏⼊入未知領域 > 勇敢探索
如何踏⼊入未知領域怎麼做?
1. 看書 ( 實體書、線上書) !2. 上課、線上課程 !3. 參加相關活動、讀書會、研討會 !4. 學習⽤用關鍵字 !5. 持續加強英⽂文能⼒力
3. 如何踏⼊入未知領域 > 勇敢探索
如何踏⼊入未知領域看書 ( 實體書、線上書)
Donald A. Norman 歐萊禮出版社 (設計師也愛逛天瓏書局)
3. 如何踏⼊入未知領域 > 勇敢探索
如何踏⼊入未知領域線上電⼦子書的資源⾮非常多
UXPin UIweek
3. 如何踏⼊入未知領域 > 勇敢探索
如何踏⼊入未知領域上課、線上課程
Coursera Codecademy
3. 如何踏⼊入未知領域 > 勇敢探索
如何踏⼊入未知領域參加相關活動、讀書會、研討會
HPX IxDA
3. 如何踏⼊入未知領域 > 勇敢探索
UiGathering
如何踏⼊入未知領域
3. 如何踏⼊入未知領域
1. 勇敢探索 ( 其實我是⼯工業設計背景的 ) !2. 如何培養美感?
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
上帝製造⼯工程師時
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
⼈人各有志嘛...
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
好啦其實有補救的⽅方法...
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
平⾯面設計基本原則
重複與交錯 節奏與韻律 對稱與均衡 對⽐比與調和 ⽐比例與適度 變異與秩序 虛實與留⽩白 變化與統⼀一
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
常常關注時事,打架也可以是⼀一種美
圖⽚片來源
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
圖⽚片來源
對稱與均衡,來看武媚娘
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
圖⽚片來源
對稱與均衡,來看武媚娘
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
⼦子姓網友推薦:design-seeds.com
觀察⽣生活中的美景,得到配⾊色的美感
如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感?
Siteinspire
其他⼩小⼯工具
Page Ruler
Adobe Kuler Page Ruler
Thank U all !
Abby [email protected]