那些設計時容易忽略的事情 @front-end developers taiwan party 2

那些設計時容易忽略 的事情

Front-End Developers Taiwan Party - 2 2013/10/29 @Changee中⼭山店

Weihan Hung magic

PhD., Technology Painter @Fourdesire 四合願

Image via centralasian, CC License.

Ideas Make it happen

Image via centralasian, CC License.

Composition

Desiring Clicks Plant Nanny Doggii Grids

Fourdesire 四合願

First Launch Beer Nanny Change Taipei NTU YouTube EDU

2012 Aug - Present

screenshots of bloglovin’ Image via Mike Rohde, CC License.

Application & Web

Page-based Application

Behave like Applications

那些設計時容易忽略的事情 （經驗分享）

哪些?

Before asking what or which, let’s ask WHY.

對於產品本質的了解程度

Graphic Design

Interaction

Form Follow Function

本質的不同

Application Service

Game Branding

⽤用在什麼地⽅方

Side Menu vs Tab Bar

什麼樣的資訊內容

給什麼樣的⼈人⽤用

Image via Kent Want, CC License. Image via Adrian Askew, CC License

製造邏輯與使⽤用材質

Different Platforms

Different Platforms

There is no essential difference between the artist and the craftsman. The artist is an exalted craftsman.

Walter Gropius, “Bauhaus Manifesto and Program” (1919)

Engineer as Designer

Engineers design materials, structures, and systems while considering the limitations imposed by practicality, regulation, safety, and cost.

Bureau of Labor Statistics, U.S. Department of Labor (2006). "Engineers". Occupational Outlook Handbook, 2006-07 Edition. Retrieved 2006-09-21. Ralph, P. and Wand, Y. (2009). A proposal for a formal definition of the design concept. In Lyytinen, K., Loucopoulos, P., Mylopoulos, J., and Robinson, W., editors, Design

Requirements Workshop (LNBIP 14), pp. 103–136. Springer-Verlag, p. 110

A designer is an agent that “specifies the structural properties of a design object.”

最重要的⺫⽬目的在於解決問題

產品必須是要拿來⽤用的

實⽤用是基礎

再來要是⽅方便好⽤用的

良好的體驗

Image via Ronald Sarayudej, CC License.

It means something

http://dribbble.com/shots/584188-Mobile-Coachhttp://dribbble.com/shots/1286277-Dashboard

http://dribbble.com/shots/1059004-close-web?list=searches&tag=web http://dribbble.com/shots/576957-Revised-Coach-Card

視覺上的美感

Attractive Things Work Better

Norman, D. A. (2002)

To be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable.

Norman, D. A. (2002)

設計是⼀一個⼈人的事情嗎？

軟體⼯工程師

視覺設計師

互動設計師

前端⼯工程師後端⼯工程師

不同的⾝身分與關係

軟體⼯工程師

視覺設計師

互動設計師

前端⼯工程師後端⼯工程師

不同的⾝身分與關係

軟體⼯工程師

視覺設計師

互動設計師

前端⼯工程師後端⼯工程師

不同的⾝身分與關係

軟體⼯工程師

視覺設計師

互動設計師

前端⼯工程師後端⼯工程師

不同的⾝身分與關係

了解你的團隊與合作夥伴

http://www.flickr.com/photos/battlecreekcvb/

程式設計師在意的

• 架構乾淨

• 保持彈性

• 模組化

• 減少客製化

• 完整的設計

視覺設計師在意的

• 細節的完美

• 像素戰士 Pixel Fighter

• 色調、風格的一致性

• 視覺上的平衡與協調

• 客製化

我們都不愛變更設計

軟體⼯工程師

視覺設計師

互動設計師

前端⼯工程師後端⼯工程師

Image via qmnonic, CC License.

介⾯面的特性

1) 介⾯面操作是⼀一個連續的過程

Plant Selection Tutorial Flowerpot Selection Tutorial

Tap to switch

Tap to switch

Check if need download resource from server

Input plant’s nameFinish

完整的流程圖

http://dribbble.com/shots/1240564-Wireframes

First Launch

不同的任務與情境

App Launch

購買的流程

購買的流程

Path Premium 購買範例

Path Premium 購買範例

Path Premium 購買範例

Path Premium 購買範例

Path Premium 購買範例

Line 下載貼紙

Droplr

Droplr

2) 可能發⽣生各種狀況

有資訊 沒有資訊

空⽩白

說⼀一句話吧

可以讀取更多資訊

更多資訊

動態資訊的各種狀況

動態資訊的各種狀況

已經沒有更多資訊 沒有網路

你尚未連接到網路

只有這些

沒有網路（刷新時）

無法讀取!你尚未連接到網路

空⽩白狀態的利⽤用 (Blank Slate)

什麼資料將會出現在這裡 What

是什麼讓我想要在這裡做些什麼 Why

要怎麼做 How

空⽩白狀態的利⽤用 (Blank Slate)

空⽩白狀態的利⽤用 (Blank Slate)

空⽩白狀態的利⽤用 (Blank Slate)

網路問題

網路問題

? pt

3) 變動的資訊內容

http://www.behance.net/gallery/NomNom/11351281

http://www.behance.net/gallery/Moti-Concept/10703931

Doggii

Doggii

Doggii

Doggii

What I learned

• 希伯來文是從右到左

• 實作了 Justify、斷字與換行、以及自動縮字型、自動高度調整。

Park Guides

Design by considering normal contents.

資訊內容

資訊內容

堆疊式的⽂文字顯⽰示

資訊內容

截短 縮⼩小字型 換⾏行

我是⼀一個很⻑⾧長很⻑⾧長的地點... 我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地點名稱 我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地! 點名稱

介⾯面⽂文字

介⾯面⽂文字

定義⽂文字資訊的邊界

4) 後端與前端的相互影響

Instagram

成就系統

• Identifier

• Title

• Description

• Identifier

• Completed Percentage

Information

Progress

Is iCloud available?

First launch

Is there data on cloud?

Enable iCloud?

Yes

No

Yes

No Sync with cloud

Overwrite cloud

Local

No

Yes Data available

我們來⽀支援 iCloud 吧

Is iCloud available?

First launch

Is there data on cloud?

Enable iCloud?

Yes

No

Yes

No Sync with cloud

Overwrite cloud

Local

No

Yes Data available

我們來⽀支援 iCloud 吧

5) 視覺與動態效果

昂貴的視覺效果

Transparent Elements

Shadow with Radius

昂貴的視覺效果

Text

昂貴的視覺效果

昂貴的視覺效果

昂貴的視覺效果

昂貴的視覺效果

Text

昂貴的視覺效果

Text Changed

昂貴的視覺效果

Text Changed

昂貴的視覺效果

Text Changed

昂貴的視覺效果

Text Changed

昂貴的視覺效果

Text

opaque = YES

昂貴的視覺效果

Text Changed

opaque = YES

昂貴的視覺效果

1

2

3

4

5

6

7

1

2

3

4

5

6

7

2

3

4

5

6

7

清單視圖的回收機制

初始化

初始化 回收使⽤用

昂貴的視覺效果

Shadow with no radius

動態效果

動態效果

動態效果

動態效果

動態效果

http://www.w3.org/TR/SVGCompositing/

⽤用⼿手思考

Sketching

http://www.flickr.com/photos/purecaffeine/

Learning by doing

http://www.flickr.com/photos/wwworks/

75% Retention Rate

Teaching Others

90% Retention Rate

http://www.flickr.com/photos/bobnrenee/

Enjoy it!

謝謝⼤大家

Email: magic@fourdesire.com Facebook: Weihan Hung