產品經理、專案經理非常初階的課程，基本觀念建立，統⼀口徑可以加速溝通效率與降低誤差 web 基本名稱與概念 移動裝置基本標準 UI IOS Android

1. 1
Ruby Kuan
web基本名稱與概念/裝置標準UI
2014 / 07 / 15
產品經理/專案經理⼼心靈療程
part
2

3. 統⼀一⼝口徑是很重要的事
Why
PM：「這裡可以加⼀一下點點點嗎？」
UI：「什麼點點點？更多的那個點點點？」
PM：「就是會放在圖⽚片下⾯面那個點點點。」
RD：「拜託那個是
Page
Control
好不好...」

5. ▶ 1
▶ 2
▼ 2.1
▼ 2.2
▶ 3
3.1
▼ 3.2
▶ 3.2.1
▶ 3.2.2
▶ 5
▶ 6
▶ 7
tree 樹狀結構

6. breadcrumb
麵包屑/路徑式導航

7. Radio Buttons 單選按鈕
Checkboxes 核取方塊

8. input type＝"text" input text
文字輸入欄位
textarea
文字輸入框

9. input type＝password
密碼輸入欄位
會自動隱藏網友所輸入的內容
input
type＝
text,
search,
url,
telephone,
email

10. input type=“search"
placeholder (hint)
placeholder ＝search for people,place and things
hint =search for people,place and things

11. select 下拉選單 (JS:drop
down
menu)

12. _blank
原本的視窗保留，另外開啟新視窗顯⽰示連結網⾴頁。
!
_self
在
iframe
框架內直接開啟，連結網⾴頁的呈現範圍在
iframe
內。
!
_parent
直接開啟網⾴頁，直接取代原本的網⾴頁。

13. Navigation bar / Menu bar

14. popover

15. POPUP
window
彈跳視窗

16. POPUP/
Lightbox
網⾴頁中開啟⼀一個視窗（⾮非新視窗）
並暗化周圍區塊將重點強調出來
jquery套件...Lightbox
/
FancyBox
/
Lytebox
/
ThickBox

17. 我想要那個滑⿏鼠(捲軸)滾動到
某⼀一位置會⾃自動載⼊入更多的那
個功能～像
Facebook
那樣

18. AJAX
(JavaScript的應⽤用)
Ajax的最⼤大優點，就是能在不更新整個⾴頁⾯面的前提下維護資料
在本質上是⼀一個瀏覽器端的技術

19. Why？使⽤用
UIKit
標準元素
!
如果
iOS
升級時或
apple
針對
IOS
元素重新設
計時，標準化的
UI
元素能夠在系统更新時⾃自
⾏行更新，⽽而⾃自定義(客製化)
的元素則不會隨著
系統更新⾃自⾏行更新，需要由設計重新設計
!
User
學習使⽤用的⾨門檻會降低
!
官⽅方標準
UIkit：http://goo.gl/FxczsS

20. Status Bar 狀態列
⽤用來顯⽰示裝置⺫⽬目前的重要資訊

21. Navigation bar
⽤用來向⽤用户展⽰示當前⾴頁⾯面在架構層級當中所處的位置，
返回按鈕可以帮助⽤用户回到上⼀一層級

22. A back button should appear in the left end of the
bar, and it should be labeled with the previous
level’s title.
!
返回按鈕應該在
bar的左端，並標⽰示上⼀一層級的標題
(中間為當前⾴頁⾯面)
Navigation bar

23. !
•Can automatically change its height when an iPhone
changes orientation. Maintains the same height in all
orientations on iPad
• 在iphone上，當iphone改版⽅方向時可⾃自動改變⾼高度；在ipad上，
直式橫式皆保持相同⾼高度
!
•If you think users might get lost without a multisegment
control that displays a type of breadcrumb path, it
probably means that you should flatten the information
hierarchy.
• 如果你使⽤用了導航路徑(麵包屑)，表⽰示你應該重新整理app的架
構，簡化它！

24. hamburger menu icon
漢堡(非IOS標準元素中，但已通用)
⽤用來向⽤用户說明有收合的
sidebar
menu

25. Search bar
Cancelsearch
Tab Two Tab ThreeTab One
Segmented Control（Scope Bar）
（最多五個）

26. 在外觀上與Navbar很相似，但它不是主要⽤用來做導航⽅方⾯面的
功能。toolbar是為⽤用户提供針對當前⾴頁⾯面中内容的功能操作
Toolbar
Always appears at the bottom edge of a screen or view on iPhone
Can also appear at the top edge of the screen or view on iPad

27. Standard buttons
Share Camera 撰寫 書籤 搜尋 add 刪除
reply 重新整理 設定 ⿆麥克⾵風
移動
back

28. IOS 常用 buttons
⽂文件夾more

29. 有下⼀一層
view
有相關資訊(同⼀一⾴頁)
移動排序
加⼀一排

30. Table view

31. Tab bar
展⽰示整個內容功能，他們彼此之間在架構上是同層級的
（最多六個，但建議是五個）

32. popover
Popovers are available in iPad apps only
最⼩小寬
320
最⼤大不可寬於
600

33. POPUP/Alert view

34. Picker

37. 官⽅方標準
Android
4.4
KitKat
：
http://goo.gl/MaLPc

38. System Bars

39. The Back button also supports a few behaviors not directly
tied to screen-to-screen navigation:
!
Dismisses floating windows (dialogs, popups)
Dismisses contextual action bars, and removes the highlight
from the selected items
Hides the onscreen keyboard (IME)
!
除了屏幕之間的導航，“返回”键還⽀支持⼀一些其他⾏行為動作:
!
“返回”键可以關閉
popup
彈跳視窗
“返回”键可以關閉上下⽂文操作欄，可以清除當前的選擇
“返回”键可以關閉键盘

40. Action Bars

41. NavDrawer View
As the navigation drawer
expands, it overlays the
content but not the
action bar.
!
覆蓋在主畫⾯面內容上，但不覆蓋
action
bar
!
When to Use ？
第⼀一層級的項⺫⽬目超過三個以上時
-­‐
低於三個使⽤用tab(top
bar)
!
架構層級超過三層

43. Spinner
android
上的下拉選單標準
UI

44. POPUP/Alert view

45. POPUP

46. Don’t do that!!!
mimic UI elements from other platforms
誰告訴你不同裝置之間的
icon，⽤用⼾戶都是會理解的？因為你看的
懂，⽤用⼾戶就看得懂？
⽤用⼾戶不是我們，每天研究網路、裝置，⼿手上擁有不同系統我們靈活
運⽤用到忘了在⽤用⼾戶⼼心中
icon
的認知是需要時間的，⽽而認知速度同時
影響了⽤用⼾戶的體驗感受
Android
old
iOS
windows

47. Don’t do that!!!
mimic UI elements from other platforms
Android
iOS
7
windows
Im Ruby

48. Don’t do that!!!
Don't use bottom tab bars
Android iOS
7

49. Most developers want to distribute their apps on
multiple platforms. As you plan your app for
Android, keep in mind that different platforms
play by different rules and conventions. Design
decisions that make perfect sense on one
platform will look and feel misplaced in the
context of a different platform. While a "design
once, ship anywhere" approach might save you
time up-front, you run the very real risk of
creating inconsistent apps that alienate users.
Consider the following guidelines to avoid the
most common traps and pitfalls.
不同裝置有不同的遊戲規則和使⽤用⾏行為
「⼀一次設計，到處運⾏行」設計的時間縮短了，但與使⽤用者的距離增加了
(⽽而且沒有標準化的設計，技術可能花掉更多時間)
遵守
Guidelines
!!
但不要被侷限在框架中