Beer finder UI
Download as pptx, pdf1 like329 views
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.
![Needs
? Main:
C ҪҵԼȵBeerĿǰסĵط(̨)
eu?
C _]Beereȵõ?
C ض, ƏS, , ɫơeȵõ?
Lơ߀Щ?
C W·ϵYӍ÷ɢ, collectKӛ䛺韩
? Other needs:
C ҵ_?
C Ҫϲgľƺ͵Ҽooe](https://image.slidesharecdn.com/beerfinderuiflow2-141109082336-conversion-gate02/85/Beer-finder-UI-3-320.jpg)
![Functions
? Search
C ضQ,,etc.aơ
? Explore
C ]_Ŀ俴Ntry
? List
C _], ҳ, Լ˽
? Tag
C һ֧BeerͬrжN:
? ԭ(,ˮ,ĸ,)ڸСmϴ](https://image.slidesharecdn.com/beerfinderuiflow2-141109082336-conversion-gate02/85/Beer-finder-UI-4-320.jpg)
![Functions m
? Like & Comment
C ʾԼϲ]c
? Favorite
C Լϲ, _˻˵ϲ
? Share
C informationsocial network
? Call & Get Direction
C ҵȥIJ͏d, ҪӆλK](https://image.slidesharecdn.com/beerfinderuiflow2-141109082336-conversion-gate02/85/Beer-finder-UI-5-320.jpg)
![Welcome
Huge Button
Brand, Type, Features
Types
-Ales
-Pils
-IPA
-weizen
Country
-Germany
-United Kingdom
-Taiwan
more
Auto complete and suggestions
a. ]AOԏgй
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](https://image.slidesharecdn.com/beerfinderuiflow2-141109082336-conversion-gate02/85/Beer-finder-UI-9-320.jpg)
![Task scenario 3
? ҪԼղNBeers, ͏d,
follow_
? һfollow_˿]Nơ
c͏d](https://image.slidesharecdn.com/beerfinderuiflow2-141109082336-conversion-gate02/85/Beer-finder-UI-12-320.jpg)
![Task scenario 4
? һT_˿]Nơc
͏d](https://image.slidesharecdn.com/beerfinderuiflow2-141109082336-conversion-gate02/85/Beer-finder-UI-14-320.jpg)
More Related Content
Recently uploaded (20)
Featured (20)
Beer finder UI
- 1. UI Design : Beer Finder
- 2. ? ĵ֪ơưٰٷN, ͬ, ȵҪȥ? ? TA: People like myself C ƷζͬơdȤ, ȫϤT·
- 3. Needs ? Main: C ҪҵԼȵBeerĿǰסĵط(̨) eu? C _]Beereȵõ? C ض, ƏS, , ɫơeȵõ? Lơ߀Щ? C W·ϵYӍ÷ɢ, collectKӛ䛺韩 ? Other needs: C ҵ_? C Ҫϲgľƺ͵Ҽooe
- 4. Functions ? Search C ضQ,,etc.aơ ? Explore C ]_Ŀ俴Ntry ? List C _], ҳ, Լ˽ ? Tag C һ֧BeerͬrжN: ? ԭ(,ˮ,ĸ,)ڸСmϴ
- 5. Functions m ? Like & Comment C ʾԼϲ]c ? Favorite C Լϲ, _˻˵ϲ ? Share C informationsocial network ? Call & Get Direction C ҵȥIJ͏d, ҪӆλK
- 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 ? ijһ֧Beer֪eu?
- 9. Welcome Huge Button Brand, Type, Features Types -Ales -Pils -IPA -weizen Country -Germany -United Kingdom -Taiwan more Auto complete and suggestions a. ]AOԏgй 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 ? ҪijһҵuN, _e C c C Ԓӆλ C Ѳ͏dYӍforwardo
- 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 ? ҪԼղNBeers, ͏d, follow_ ? һfollow_˿]Nơ c͏d
- 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 ? һT_˿]Nơc ͏d
- 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 PSD