15. a. 前期研究!
b. 實作
1. Web 設計過程
(1). 了解 Web 設計趨勢( Web Design Trends )!
!
(2). 使⽤用者經驗研究( User Experience )
⼀一個⼈人怎麼做 Web 設計?
16. 了解 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
17. 了解 Web 設計趨勢
Longer scrolling + Parallax scrolling
53Sony
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
18. 了解 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 設計趨勢
19. 了解 Web 設計趨勢
Focus on typography
Google Fonts
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
20. 了解 Web 設計趨勢
Use of high-resolution moving images (Cinemagraphs)
Cinemagraphs examples
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
21. 了解 Web 設計趨勢
Responsive design
2010 年 5 ⽉月,Ethan Marcotte 在
「A List Apart」寫了⼀一篇開創性的
⽂文章:Responsive Web Design。
!
利⽤用:流動佈局 fluid grids、
媒介查詢 media queries 、
彈性圖⽚片 scalable images
!
創建了⼀一個在不同分辨率屏幕下都
能漂亮地顯⽰示的網站。
圖⽚片來源
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢
33. 使⽤用者經驗研究( User Experience )
了解使⽤用者,你可以提供更好體驗
圖⽚片來源
Design the product Design the experience
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
34. 使⽤用者經驗研究( 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 設計過程 > 前期研究 > 使⽤用者經驗研究
35. 使⽤用者經驗研究( User Experience )
例如:Z - Layout : Z 型佈局
研究轉化成
參考資料:Understanding the Split Layout in Web Design
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
36. 使⽤用者經驗研究( User Experience )
不⽌止因為排版好看,更利⽤用巧妙的
佈局,讓使⽤用者不知不覺瀏覽更多
的訊息,增加使⽤用者繼續瀏覽的意
願。
!
Web 設計不是藝術,著重在於信息
結構關係的整理,以及互動關係。
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究
47. 釐清需求
使⽤用 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 設計過程 > 實作 > 釐清需求
70. 實務經驗分享
2. 實務經驗分享
從 Sitemap 開始,成為主管與⼯工程師間溝通的橋樑
MCS home page
news and updates
personal dashboard
navigation bar ( fix )
profile
logo
lab.com
landing page
brief introduction
news
sign up / in
FAQs
API resource
API sandbox
API reference
API error code
prototype detail
user privileges
notification
firmware
data channels
prototype information
edit
add / delete
priority
title / description / type
template
prototype profile
prototype photo
prototype state
chip
title
create test device
prototype list
prototype profile
prototype photo
prototype state
chip
title
development
log in / out
edit profile
read
create prototype ( first time )
add / delete user
add notification
upload firmware
edit
prototype photo
select chip
title
create / delete prototype edit
prototype photo
select chip
title
圖⽚片來源:MCS Sitemap
71. 實務經驗分享
利⽤用 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 email
input password
remember 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
notification
firmware
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
notification
firmware
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 / out
edit profile
side menu
home page
development
my devices
API resources
FAQs
personal dashboard
landing page1 2 3
4
5
2. 實務經驗分享
72. 實務經驗分享
不斷地修正、不斷地修正、不斷地修正
圖⽚片來源: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 integration
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 .
Feather 2 : Remote controller app
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 ...
Title
2014/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 Chiu
abby.chiu@mediatek.com
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 integration
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 .
Feather 2 : Remote controller app
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 ...
Title
2014/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 Chiu
abby.chiu@mediatek.com
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 Chiu
abby.chiu@mediatek.com
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. 實務經驗分享