It's a practice of UI design. The example here is to build an app that can quickly find which place is selling the beer you like.

1. UI Design 工作案例練習: Beer
Finder

2. 緣起
• 從德國回來後才知道啤酒百百種, 各有巧妙
不同, 想喝但要上哪去找?
• TA: People like myself
– 對品味不同啤酒有興趣, 但不完全熟悉門路

3. Needs
• Main:
– 想要找到自己想喝的Beer在目前所居住的地方(台灣)
哪裡有賣?
– 達人推薦的Beer哪裡喝得到?
– 特定國家, 酒廠, 牌子, 特色的啤酒哪裡喝得到?類似
風格的啤酒還有哪些?
– 網路上的資訊好分散, 自主collect並記錄好麻煩
• Other needs:
– 如何找到達人?
– 我想要把我喜歡的酒和店家紀錄起來或分享給別人

4. Functions
• Search
– 找特定名稱,類型,國家etc.出產的啤酒
• Explore
– 沒有明確目標想逛逛看有甚麼可以try
• List
– 達人推薦名單, 店家出售名單, 自己私藏名單
• Tag
– 一支Beer可以同時有多種描述:
• 原料(麥,水,酵母,其他)、口感、適合搭配料理

5. Functions 續
• Like & Comment
– 表示自己的喜好推薦與看法
• Favorite
– 保留自己的喜好, 看達人或其他人的喜好
• Share
– 把information分享到social network
• Call & Get Direction
– 找到想去的餐廳, 想要訂位並導航

6. 獲得資訊、保存及分享

7. 主要包含的畫面
Shop List Shop Info
Beer List Beer Info
Person List
Personal
profile
What on sell?
(Beer List)
Who like it?
(Person List)
Who sell it?
(Shop List)
Who like it?
(Person List)
My favorite beers
(Beer List)
My favorite shops
(Beer List)
Bar, restaurant etc
Searching
List
Auto complete
Beers name
Types, Features
My favorite
& following
Setting
Welcome
Main

8. Task scenario 1
• 聽到某一支Beer想知道哪裡有賣?

9. 主畫面
Welcome
Huge Button
Brand, Type, Features
Types
-Ales
-Pils
-IPA
-weizen
Country
-Germany
-United Kingdom
-Taiwan
more
Auto complete and suggestions
a. 若沒有預設可以從中間分類中逛
b. Main function become fixed tool-box
*1
*2
Heineken
Heineken
Heineken 2
Heineken 3
*3
*4
Keypad slide up
*5
有可能只有一個
*6 *6
Distance and area information
help you to design where to go
Irish
country
Favor
*4.5
If there is uncertainty

10. Task scenario 2
• 想要查某一家店有賣甚麼酒, 確定都不錯後
– 看地點
– 打電話訂位
– 把餐廳資訊forward給朋友

11. 主畫面
Welcome
Brand, Type, Features
Types
-Ales
-Pils
-IPA
-weizen
Country
-Germany
-United Kingdom
-Taiwan
more
*1
*2
Type the restaurant's name
Crazybeerheaven
Crazybeerheaven
*3
*4-1
Popover with blur background
*5-1
Beer list
Crazybeerheaven
shop If more than one
with same name
*3.5
*4-2
*5-2
Call out
To map app
*4-3
share *6 Beers that “Shop X” sell
*6
How to share?
Copy link
Share on facebook
Share on Twiter

12. Task scenario 3
• 想要看自己收藏了甚麼Beers, 餐廳, 或
follow的達人
• 找一個follow的達人看他都推薦了甚麼啤酒
與餐廳

13. My collections
Search my collections
Beers
-Ales
-Pils
-IPA more
Shops
-xxxx
-xxxx
-xxxx more
Following
主畫面
*1
*1
Any 畫面
*2-1
My favorite Beers
My favorite shops
*2-3
guy guy guy +
*3-1
Press to follow/unfollow
To Beer List
To Shop List
*3-2
*3-3
*2-2
Select 任一expert

14. Task scenario 4
• 找一個熱門的達人看他都推薦了甚麼啤酒與
餐廳

15. My collections
Search my collections
Beers
-Ales
-Pils
-IPA more
Shops
-xxxx
-xxxx
-xxxx more
Following
主畫面
*1
*1
Any 畫面
guy guy guy +
*2
*4-1
Press to follow/unfollow
To Beer List
To Shop List
*3-2
*3-3
Show most popular guys
Popular guys
*3

16. Beer Info
Picture
Name
Description
＊
＊ : press
Beer Picture
(whole screen)
X
Tag Tag Tag
＊
+add ＊
Beer
List
＊
Keyboard
shows up
New Tag
Who sell this?
guy comments
＊
Shop
Info
300
Beers on sell
guy comments
Personal
Profile
＊
Leave
comment
Keyboard
shows up
＊
Press send
Press
send
Beer A
Beer B
Beer C
＊
Like 152
People
List
1. Numbers of like increase
2. Save this beer as favorite
Shop Picture
(whole screen)
撥電話guy comments
Tel
Direction
Picture
Name
X
＊
call
address
Distance
cancel
Segment control with
blur background
＊
＊
Use apple map
Use google map
cancel
＊
＊
導航
guy comments
Leave
comment
＊
Keyboard
shows up
＊
Press
send
Shop
List
Shop 1
Shop 2
Shop 3
20
7
0
10
22
＊
guy 1
guy 2
guy 3
Favorite Beers
Favorite shops
Following
Follower
Name
Picture
Personal Picture
(whole screen)
X
畫面, elements,
action and effect
關係圖