Page 1

 

          /   



            


        _

Œ        „      Ž ‹  †    ‚    

_

‚  ƒ      

 _

€      €   ‰              †    € € ‚    

_

„  ­  ‚ Š    …               ‹  †   ‚    

‡_

  …   † †   ‘  †             ’   ‚    

        €        „        …       €  „   ‚    

_

 ­ €  ‚      †    € € €  „   ‡         ­   ˆ  


PARKOUR EDU Parkour Tutorial Mobile App designed for free run experts & amatuers iOS APP Design


User Needs

Parkour, a popular extreme extreme sport sport which which practitioners practitionersfreerun freerun through buildings and obstacles obstacles in in the the urban urban spaces. spaces. However, as an activity that that emerges emerges as as the the trendy trendysports sports recently, there’s not enough enough resources resources or or personal personaltrainers trainersfor for beginners to step inside the the ďŹ eld. ďŹ eld. Therefore, Therefore, aa digital digital platform, Parkour EDU, is the the way way of of getting getting all allparkour parkour lovers ready and started started learning learning more more tricks. tricks.


User Name

Settings

Password

Recent Viewed

Photo

Weekly Reports

Share

Videos

Similar Videos

Favorites

AdvanceVideos

ProďŹ le

Followed

Start

Recommendation

Customized

My Program

In Progress

Explore

Completed Preview

Wireframes

Recent Viewed

Category

Slow Motion

Popular

Space Requirements

Video

Tricks

Start

Tips

Coach

Description

Status

Level

Bookmark

Try

Fundamental

Skip

Advanced

Retry

Spot

Search

Facilities

Locations

Detail

List

Reviews


FUNCTIONS FUNCTIONS


E X PLOR E AI association system helps users ďŹ nd suitable courses. When user fails to accomplish trick, the system will recommend fundimental courses for user to catch on. After ďŹ nishing basic movements, user can get back and move on to other tricks.


C AT E G O RY User can select tutorial lessons based on the level status, the preference tricks or the designated coach.


P RO F ILE Personal training records for practitioner to keep on the track and master more tricks.


S POT Map of the parkour spots, also with detailed information of the practice spaces: address, facilities, experts’ footages and other player’s review.


USER INTERFACE


Design Elements Color Palette

Typography

Icons

Primary Colors

Main Font

Active Mode

#313232

#2df4eb

Secondary Colors

#e11865

#c1c1c1

JoseďŹ n Sans Light, Regular, Semibold

Secondary Font

Uni Sans Light, Regular

Static Mode


Website Design


Access the web platform anywhere, anytime. JETSWEAT is an on-demand, bespoke ďŹ tness platform that provides exclusive access to top boutique studio classes, structured programming personalized to ďŹ t individual goals, and real-time performance tracking that empowers an active lifestyle wherever, whenever.

Web

Mobile

Airplay

Chromecast

HDMI

ABOUT


USER GROUP 21-55 years of age 70% Female, 30% Male Interests: Healthy & Intuitive Eating, Traveling, Fashion, Beauty, Active Adventure, Arts & Culture Always on-the-go with a busy, demanding schedule, often traveling at least once a month.

Located outside of a large U.S. city, without convenient access to boutique ďŹ tness studios.


REAL TIME PERFORMANCE TRACKING Completed workouts, calories burned, minutes worked and weekly and monthly performance are all automatically tracked to easily measure and encourage your progress.

130

2451

346

Completed Workouts

Calories Burned

Minutes Worked

FUNCTIONS


FLOWCHART


WIREFRAME


USER INTERFACE

User Interface_

DASHBOARD & CLASSES_ Personal platform provides daily workout feed, training program schedule and weekly report to motivate users pursuiting their fitness goal. From Cardio Dance to Meditation; Hot Yoga to Pilates, the platform is with thousands of on-line courses, collaborated with first-class fitness studios and personal trainers in NYC.


PROGRAMS_

User Interface_

Members have exclusive access to trendy studio classes, and abundant variety of ďŹ tness programs. Each program includes a serious of training sessions and detailed introduction. Once member selects the program, the system will automatically adds the full sessions into the calendar.


CALENDAR_ Set up your own workout schedule. Arranged courses would display as clear, straight-forward timeline for users to check out. Once uses skip or miss certain courses, they can get back to where they left and catch on.

User Interface_

PROGRESS_ Progress layout shows the results of the workouts: calories burned, completed workouts, and minutes worked. It also reveals the compared results of pervious and recent time periods, and daily performance tracking.


User Interface_

CUSTOMIZATION_ Users can set up their ideal fitness goals and body focus based on different body figures and fitness level. Then the system will suggest related training programs for users to achieve their goals.


DESIGN ELEMENTS

Color Palette

Typography

Coco Gothic Header

#90cfbe

#edf1f4

Coco Gothic Subheader

Design Elements_

Arial Regular

#ffffff

#656565

Text

Icons


 Fitness Interaction


USER NEEDS

Trampoline exercise has gradually become popular daily fitness activity. Cooperated with the leading trampoline company, Bellicon USA, Jumshop is a mobile game platform with rebounder interactive games. The motion sensor system detects and keeps count of the jump. User can be motivated by receiving virtual feedback, and get detailed training report of the exercise session.


BRAINSTORM & SKETCHES


FLOWCHART

       





                

        





       

        

        

       ­

  

     

 

      

       



…  

                

          

      ‚ 

  ƒ   

      

   

   

  ‚

  

  

    

    

      

„   ‚     

  / 

 

     

  

        

     

        

 €

    

     

 

      /Connect

      

     


GAME WIREFRAME

 




Slow

Fast

    

Dancing Machine

Fill Baloon Competition

• Taiko Drum Master • Mochi Pettan Game

Multiple

       Mochi Pettan Game

• Jump Up-stairs • Dancing Machine Beat Racer

• Flappy Bird • Fill Baloon Competition

         

Target Market

  

• Beat Racer

Jump Up-stairs

Taiko Drum Master

Based on the interactive elements of the games: Response and Movements, the chart categorizes precedents and difines the target market of Heli-hopper. Flappy Bird

Simple

MARKET ANALYSIS


MOVEMENT DETECTION

                Camera detects user’s movements and the movement will be transformed by the software. Software applys movement data to the to control the virtual element.


GAME CONTROLL             

     

           

         

           

          According to the motion detection, camera captures the highest and lowest movements and interprets the data to manage the height of the avatar.

         


Heli-Hopper 

Bellicon Interaction Game Design Trampoline workout game for fitness fans


INTERFACE LAYOUT Process Bar Fuel Indicator

Avatar Position

Heliport

Jump Counts

        Overall, the layout of the UI design is with simple and clear line-based elements and blocks to provide better readability. Not only make user understand the status of the avatar instantly, it also make sure user can see things clear while jumping.

Obstacles Avatar

Refill Gas


FEATURES

            Heli-hopper consumes fuel while flying through the city skylines, user needs to refill the fuel tank before it running out of fuel. Otherwise, the Heli-hopper would lose power and crash.


             After dodging from the buidlings and maintaining enough fuel, the final challenge is to land the flying machine on the heliport gently. Users have to manage the height of the aircraft carefully and help it get on the base without any mistake.


Meet by Wework “Meet”, is a personnel information acquisition system designed for Wework. The system provides quick service to collect Wework members’ business data during the community parties or social events, and helps members build better connections and partnerships.


Background Analysis Wework is an American company that designs and builds physical and virtual shared spaces and office services for entrepreneurs and companies. Social events are vital essence of Wework’s culture, the company hosts a variety of programs events and themed workshops on a regular basis. These events help people builds business connections, but there’re limitations for members to explore and acquire connections due to limited time communicating. Therefore, a well-organized information acquisition system can gather participants’ data and help others to find their connections in no time.

kk r r o o w w e e w w


User Needs

• Wework, as the host of the network, helps its members find their needs with the data system efficiently and would bring up more potential users to join the community. • Freelancers could get work through building connections. The vigorous social network also can help them elevate personal brand. • Startups can easily find freelancers through the data system, meanwhile improve coporation image and increase connections.


Design Goals A personnel information acquisition system for Wework community events and gatherings. • Consider the after-office hour, the relaxed and playful style is applied to the interface design. • AI association sofware accelerates the process of collecting info and provides better user experience. • Collect participants’ business info through increasing the interactivity and the delights of the interface.

WHO AR


Association Software Acquisition System applies AI association sofware to identify users’ information while typing, and genrate related options for user to pick. Therefore, the shortcut options can shorten the annoying process.


Avatar Interactivity

What’s your name?

What’s your company?

Different accessories or apperances will applied to avatar, based on the information user provides.

What’s your role?

What’s your Email?


Doneďź Infomation Preview


iOS v.s Android iOS與安卓系統介面系統對比分析


CONTENTS

1 2 3 4 5

iOS_Android_Comparison Analysis

p.03

設計原則 Design Principles

p.05

自適應界面 Adaptivity and Layout

p.07

尺寸

Dimensions

p.09

全局導航模式 Navigation Mode

p.10

導航欄 Navigation Bar/ App Bar

6 7 8 9 10

p.13

p.15

搜索欄

Search Bar

分段控件 Segmented Controls/ Tabs

p.17

標籤欄 Tab Bar/ Bottom Navigation

p.21

彈窗 Popup

p.29

按钮 Button


1 設計原則_

Design Principles Material Design(MD)屬於Google設計的一套設計規範。 MD是一種視覺語言,目的是將經典的設計原則和創新的 科學技術結合起来。MD的設計原則是:

1. Material是一種隱喻(Material is the metaphor)。 它來自于物理世界,是對紙張和墨水的材質和光影體現, 具有長度,寬度,厚度。 2. MD是一種醒目的、圖像化的,設計過的语言。 (Bold, graphic, intentional) 3. MD的運動是有意義的(Motion provides meaning) 運動通過微妙的反饋和連貫的過渡来集中注意力並保持 連續性。

01

設計原則_ 03

4. MD是一種包容的設計語言(Flexible foundation, Cross-platform)。他可以詮釋不同的品牌理念, 也可以跨平台使用。


INSIGHTS_ MD和HIG在注重上有一些不同。 MD注重於規範 軟件的視覺表現效果;而HIG則重於最大化利用 系统原生資源的同时支持設計師原創。

Human Interface Guidelines(HIG)屬於蘋果公司針對iOS 系統設計的一套人機交互準則。 目的是為了使運行在iOS系統的應用都能遵循一套特定的 視覺以及交互特性,從而能在風格上保持一致性。 HIG設計規範包括:

1. 審美的完整性(Aesthetic Integrity)。HIG可以通 過改變app的外觀和行為來達到他的功能性。比如一 個較為嚴肅的app需要使用微妙、不引人注目的圖 形 、標準控件和可預測的行為來讓人們集中注意力。 2. 一致性(Consistency)。通過使用系統提供的界 面元素、通用圖標、標準文本樣式和統一的術語来 實現熟悉的標準和範例。 3. 操作的直接性(Direct Manipulation)。 直接操縱 屏幕内容(比如手势和旋轉屏幕)可以吸引用户的注 意力並方便理解。

设计原则_

6. 用戶行为控制(User Control)。 一款應用可以讓 人們感覺自己掌控著局面,它可以讓互動元素保持熟 悉和可預測,並確認破壞性行为,讓取消操作變得容 易,即使這些操作已經在進行。

01

4. 有反饋(Feedback)。 内置的iOS應用程序對用戶 的每一個動作都提供了可感知的反饋。當點擊交互元 素時,它會簡短地改變亮度,進度顯示器會顯示長時 間運行的操作狀態,動畫和聲音有助於告知用戶操作 结果。

5. 採用隱喻(Metaphors)。 當一个應用程序的虛擬 對象和動作是對熟悉體驗的隱喻時,用戶學得更快 ——無論是根植於真實世界還是數位世界。

04


2 自適應界面_

Adaptivity and Layout

Adaptivity and Layout來自於iOS設計規範,是為了確保App 可以在任何設備和旋轉情況下都可以自動的改變形狀和大小。 Auto Layout可以定義規則(稱為約束)來控制應用程序中的內 容。例如,可以約束一個按鈕,使其始終以水平居中並位於圖 像下方8個點,而不考慮可用的屏幕空間。當檢測到某些環境 變化(稱為特徵)時,自動佈局會根據指定的約束自動調整佈 局。因此,需注意進行佈局以便達到屏幕最佳的可讀性: Consistent Appearance

1. 確保主內容在其默認大小下是清晰的。 (Ensure that primary content is clear at its default size) 人們不需水平滾動來閱讀重要的文本,或者放大來查看 主要的圖像。 02

自適應界面___ 05

2. 在整個應用程序中保持整體一致的外觀。 (Maintain an overall consistent appearance throughout your App)

Auto Layout

https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/TheAdaptiveModel.html https://careerfoundry.com/en/blog/ui-design/the-importance-of-consistency-in-ui-design/

3. 用視覺的重量和平衡來傳達重要性。 (Use visual weight and balance to convey importance) 更大的體積可以吸引眼球增加點擊率;主要內容應放在 屏幕上半部分靠左側(從左向右的閱讀環境中)。


INSIGHTS_ Android 的自適應界面

需要注意的内容基本與iOS的一致

4. 使用對齊來減少瀏覽和傳達組織結構和層級。 (Use alignment to ease scanning and to communicate organization and hierarchy) 5. 如果可能,支持豎屏和橫屏兩種模式。 (If possible, support both portrait and landscape orientations) 6. 考慮文字大小變化的可能性。 (Be prepared for text-size changes)

Ample touch targets

7. 為交互元素提供盡可能多的觸碰範圍。 (Provide ample touch targets for interactive elements) 尽量保持所有控件的最小的触碰范围为44pt x 44pt。 8. 在多個設備上預覽應用程序。 (Preview your app on multiple devices) 可以使用模擬器(包含在Xcode中)預覽應用程序。 02

自適應界面__

Portrait and landscape orientations

9. 在較大的設備上顯示文本時應增加空白邊距,提高可 讀性。 (Apply readability margins when displaying text on larger devices.)。這些邊緣可以減少每行文字 的長度,提高閱讀體驗。

06 https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/


3

尺寸_ Dimensions

pt (POINT) 「pt (point,點)」這個單位,同時出現在 iOS、CSS、還 有傳統的平面設計裡,但他們三者的意義卻是不同的。

pt在iOS中的出現是為了解決不同熒幕上px大小會產生變 化的問題。以1英吋x1英吋中,1 顆 px為基準,這個紅點 的大小,就當成標準尺寸單位:1 pt (point, 點),這個點 不管在任何解析度的顯示器上都是一樣大小。原本左側 上“1 pt”等於“1 px”但到了右側熒幕密度兩倍的地 方,“1pt”的大小就會代表“4 px”。

03

尺寸_ 07 https://medium.com/uxabc/understanding-ui-units-8acdc0575388 https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead

網頁設計裡,螢幕顯示和實體印刷,可以擁有兩份 不同的CSS 來決定樣式;網頁設計師,會特別寫一 份 CSS,在印刷的時候給電腦使用,以節省墨水。 所以其實 CSS 裡的 pt 單位,不可用於熒幕上使用

最早源自於傳統的鉛字印刷,是用來表示 鉛字塊的尺寸在印刷和平面設計的世界 裡,1 pt = 1/72 英寸

Android 的世界裡,手機廠牌型號多樣,熒幕大小和密 度也是一團亂;Google 制訂一套規則來同一各廠手機: 就是製定好幾個“密度等級”(dpi),使用dp作為單 位,基本等同於iOS的pt。 1dp = 1px@1x(160dpi)


DPI/PPI dpi (Density-Independent Pixels)/ppi(Pixels Per Inch) 為像素密度(每inch包含多少像素)。像素密度越高, 代表屏幕顯示效果越精細。 https://medium.com/uxabc/understanding-ui-units-8acdc0575388

iOS

Android 以1倍的mdpi作為基準。像素密度更高或者更低 的設備,只需乘以相應的倍率,就能得到與基準 倍率近似的顯示效果。

03

尺寸_

小 —— @2x:3.5 inch(640*960)、4inch(640*1136) 中 —— @2x:4.7 inch(750*1334) 较多用 大 —— @3x:5.5 inch(1242*2208)

08 https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/


4 全局導航模式_

Navigation Mode

作為常見的操作應用,界面切換模式是Android和iOS系 統之間最明顯的不同。Android 配有全局導航欄,通過導 航欄可以控制不同軟件的返回功能。而在iOS系統內,由 於缺少了全局導航欄,需要在APP內增加一個帶有返回按 鈕的導航欄(大部Android軟件也會自帶返回按鈕)。

“返回键”

如今這些功能逐漸被手勢所替代,(如在iOS內可通過向右 滑動返回,Android向右滑是切換標籤)但大眾的熟悉程 度不高使得返回按鈕仍舊十分重要。 “返回鍵”

iOS

“退至主界面鍵”

“多任务鍵”

Android

04

案例分析

全局导航模式_

IMDb 在設計軟件時對於Android的一些界面沒有 設置返回鍵(有home鍵),但在iOS版本中則在左上 角設置了返回鍵。

09


5

導航欄_ Navigation Bar/ App Bar

用於顯示頁面標題,以及左右有其他功能鍵的部位,有不 同的稱呼。iOS統一叫做Navigation Bar。Android在 Material Design裡面稱之為App Bar(在Android Studio的 開發文件當中稱為Toolbar,而在Android 5.0之前叫做 Action Bar)。

Android App Bar

一般来说iOS的App Bar包括一个返回键(左边)和名称(中 间),需要的时候还有一个功能键(右边)。一般功能键不会超 过一个。如果在App Bar中使用分段控件(Segmented controls)则不需要标注标题,也不需要出现其他除了编辑分 段控件以外的功能键。

iOS Navigation Bar

05

導航欄_

Standard Navigation Bar

Larger Navigation Bar

Segmented Controls

10


Top/ Bottom App Bar 在MD中分有Top App Bar和Bottom App Bar。 Top App Bar位於狀態欄(Status Bar)下方, 用於提示用戶所在 界面。Android會另外包括一些功能按鈕,比如說搜索鍵。 一般按順序包括一個導航鍵(navigation icon),名稱,若 干功能鍵和一個溢出菜單。這些都可以選擇性加減。可以 使用圖片作為導航欄背景(但要突出文字和icon)。當App Bar轉換為contextual action bar時, App Bar應該要改變顏 色來提示人們場景的轉換。 Top App Bar

05

導航欄_

Top app bar specs

Extended top app bar

11 https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/TheAdaptiveModel.html https://careerfoundry.com/en/blog/ui-design/the-importance-of-consistency-in-ui-design/


Bottom app bar位於屏幕最底部, 為MD特有的App Bar。 當有Bottom Navigation Bar的時候不可出現。 可以放置包括drawer和FAB在內3-5個活動按鈕(Drawer和 FAB可根據情況決定是否放置)FAB可以放置在模塊邊緣中 間或者最右邊,不可放置在Bottom app bar之外。 當Bottom app bar因為向下滑動而隱藏時,FAB將從中脫 離並一直顯示在屏幕上。 Drawer一般被放置在最旁邊。 Bottom app bar會被其他彈出窗口(比如keyboard)覆蓋。

Bottom app bar specs

FAB Center cut

1. Container 2. Navigation drawer control 3. Floating action button (FAB) 4. Action icon 5. Overflow menu control

Bottom app bar

FAB End

可以放置2-4个活動按鈕在drawer的另一側

05

導航欄_

No FAB 可以放置2-4个活動按鈕在drawer的另一側

Mobile Landscape

12 https://material.io/design/ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/


6 搜索欄_

Search Bar

Android, iOS的搜尋功能統稱為Search Bar,但互動方 式不太一樣。 MD多使用search icon,放置在導航欄右邊。當用戶 點擊時展開。 Android的Search Bar是點擊App Bar上 的放大鏡之後展開Search Bar,並且顯示過去的搜尋紀 錄。右側的icon可以用語音輸入,開始輸入之後,麥 克風會變成X叉叉,可以一鍵清除內容 。下方同時顯 示即時搜尋結果。點擊返回鍵後離開搜尋功能。

在HIG中,Search Bar通常顯示在上方,以圓角矩形框出現, 位 於導航欄,內容視圖或者另起一欄。官方指導中建議Search Bar後應該要增加clear button或者cancel button。除了 search icon, 可以適當地在Search Bar 中增加提示文字來指 導用戶使用。 往下滑動的時候Search Bar消失,往上滑動的時候出現。開 始輸入時會出現X取消符號,可以一鍵清除輸入內容,在搜尋 框外面右側會顯示Cancel按鈕,點擊離開搜尋功能。在搜尋 時下方也會同時顯示即時搜尋結果。

06

搜索欄_ Android Search Bar

13 https://medium.com/as-a-product-designer/4889fbb541c https://medium.com/as-a-product-designer/4889fbb541c

iOS Search Bar


案例分析

ASOS

Urban Outfitter

Android

iOS

Keep

Android

iOS

Android

iOS

IMDb

06

搜索欄_

Android

iOS

14


7 分段控件_

Segmented Controls/ Tabs

在App Bar / Navigation Bar下方會有個可以切換功能 的按鈕,Android叫做Tab Bar;iOS則依據功能,將專 門定義搜尋範圍、顯示方式的稱為Scope Bar;而切換 功能的叫作Segmented Control。 在MD中稱為標籤頁(Tabs)。使用橫向菜單,通過字體 變色和下劃線來表示激活選項。除了可以用點選切換 之外,Tabs也可以往左往右滑作切換。

Tab Bar原本是Android的設計,但現在iOS也會使用。 在HIG稱為分段控件(Segmented Controls)。使用圓角 框架,通過反向背景和字體顏色來表示激活選項。選項 越少越容易點擊,一般在五個以下。因為不像Android tab bar一樣可以將多餘的選項暫時隱藏起來。 Tab Bar / Scope Bar主要是用來切換不同的顯示方式。 例如從顯示全部的郵件標題,切換到只顯示最近的郵件 標題。或是像Facebook Messenger用來切換顯示全部 訊息、群組訊息、陌生人訊息等等。基本上可視為大功 能下的子功能分類。

07

分段控件_

Android Tabs

15 https://medium.com/as-a-product-designer/4889fbb541c https://material.io/design/

iOS Segmented Control/ Scope Bar


案例分析

Busuu

The Weather Channel

07

iOS

Android

iOS

分段控件_

Android

16


8

標籤欄_ Tab Bar/ Bottom Navigation

Tab Bar/ Bottom Navigation原本是iOS才有的功能,因 Android下方有Android navigation bar(返回/主頁/切 換 三顆虛擬鍵), 如果也把選項放在下方的話容易誤觸。 Android較常把功能藏在Bottom Drawer(俗稱Hamburger Menu)裡, 但是在切換頁面時還要多一個動作, 使用者也 無法一眼得知有哪些功能可以使用。

HIG的Tab Bar(Bottom Navigation)位於屏幕底端。 官方指導表示可放任意數量的tab, 當tab bar 放不下 時可使用more tab隱藏部分tab。實際中大部分App 會放置三到五個tab,一般不會超過五個來避免觸碰 空間不夠而誤觸。

因Bottom Navigation越來越普遍,Material Design也將 之放進了guidelines。

08

標籤欄_ 17

iOS Tab Bar iOS Tab Bar


MD使用Tab Bar同時也會使用Drawer。 Tab Bar用於有 3-5個不相關頁面的功能頁面時使用;而Drawer適合五個 以上,並且越重要常用的功能放在越前面。 Tab Bar與iOS基本相同,Drawer則分為Modal Drawer和 Bottom Drawer。 Modal Drawer用於使用Top App Bar時 的場景。 Icon通常位於App Bar 左邊,所以Drawer以左 邊推出居多。 Bottom Drawer用於使用Bottom App Bar 時的場景。為了配合icon位置,由下往上推出。 Android Modal Drawer

Android Bottom Drawer

Portrait

08

Android Bottom Navigation

標籤欄_

Minimum width

Maximum width

Landscape

18

https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead https://material.io/design/


案例分析

Uber Eats

Instagram

08

標籤欄_

但由於另做Android或iOS系統費時費力,MD 出現時間又較晚,用戶形成使用tab bar習慣後 很難更改,所以雖然Android既有tab bar又有 drawer的存在,很多公司在Android版本中仍 舊偏向於使用Tab Bar : Uber Eats, Instagram, Airbnb 都在兩個版本中都使用了tab bar。

19 Airbnb


Slack將Message 向下移動 到Tab Bar 和導航欄中間, 增加空間避免誤觸Android navigation bar。

08

標籤欄_

Facebook將Tab Bar 向上 移動到了Search Bar下方。

ASOS在Android版本中沒有使用 Tab Bar,改為使用drawer。在 Drawer中ASOS增加了很多原本 隱藏在tab bar裡的功能選項。

20


9

彈窗_ Popup

彈窗的功能是,中斷用戶當前操作並對其作出補充, 或中斷用戶當前操作並對其作出反饋。在使用中應當 慎重,避免過度打斷用戶的操作體驗。 彈窗可以分為模式彈窗和非模式彈窗。他們之間的區 別就在於模式彈窗需要用戶對其做出回應,而非模式 彈窗則以提供信息為主。

模式彈窗包括對話框/警示框(dialog、alert)、操作欄 (action bar包括action sheet, bottom sheet, activity view、(浮層popover)。它的提示作用明顯,可以很好 的吸引用戶的注意力,但是它要求用戶必須做出選擇否 則無法繼續。非模式彈窗包括toast/HUD ,banner和 snackbar。它的出現到消失的時間很短,用戶不需要 對其作出回應。雖然官方沒有說明出現時間,但根據代 碼可以判斷出為1.8s/3s。 iOS和Anroid對於彈窗會有不同的稱呼,但在功能上 大同小異。

09

彈窗_ 21 https://zhuanlan.zhihu.com/p/26386661 https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead

HIG

MD

Dialog Action sheet Activity view HUD

Alert Popover Bottom sheet Toast Snackbar


Alert (iOS)/ Dialog(Android)

Dialog, 或者在iOS中稱為Alert,是一種 用於促使人們做決定或者輸入信息的 彈窗。 在決定使用dialog前,需要考慮是不是 真的需要置入。因為它要求用戶必須 做出反應否則無法繼續使用,會打斷用 戶的產品體驗,所以使用的次數越少越 好。通常會使用在像確認購買或者刪 除等重要場景中。

iOS Calendar

Google Map

09

iOS Setting

彈窗_ 22 https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/ https://www.uisdc.com/ios-android-toast-alarts


Action Sheets (iOS)/ Modal Bottom Sheets(Android)

Action Sheets和Bottom Sheets在功能和展 開方式上都很像。都由下網上一列表形式展 開,展開時表格以外空間需要加設陰影,並且 需要人們進行互動還能繼續。

iOS Safari

iOS Google Photos

兩者之間的區別在於:

09

1. Action Sheets要求必須放置單獨的一個 取消按鈕,而Bottom Sheets則通過觸碰陰 影區域才能消失。

彈窗_

2. 在色彩上,Action Sheets一般使用藍色, 危險操作比如刪除會選擇紅色。而Bottom Sheets 一般使用黑色字體。 iOS Action Sheets

23 https://medium.com/as-a-product-designer/4889fbb541c https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead

Android Bottom Sheets


Activity Views Controller (iOS)/ Modal Bottom Sheets (Android)

Modal Bottom Sheets不止能以列表形式展開,還能 以網格形式展開。這種形式和iOS中的Activity Views 有一些相同,都為icon加文字的網格形式,同時 都存在控制鍵。 Activity Views中提供了很多內置活動,這些活動必 須放置於最前方同時不能改變順序。但可以刪除某 些活動。靠近下端可以顯示一些App內的共享和活 動擴展。而Modal Bottom Sheets是單純的App內 部的活動擴展。

iOS Action Sheets

iOS Line Camera

Android Bottom Sheets

Android Line Camera

另外,在Activity Views Controller中會設置一個單獨 的取消(cancel)按鈕。而在Modal Bottom Sheets中 用戶點擊灰色陰影處即可取消,所以不需要單獨設置 按鈕。 09

彈窗_ 24


HUD (iOS)/ Toast(Android)

Toast(提示框)或者HUD(透明指示層)一般用於傳 達短少而重要的信息。這些信息從出現到消失的 時間很短,不需要用戶互動就可以自動消失,所以不 包含操作按鈕,也不可以滑動關閉。一般出現在屏 幕中央,出現時間為1.8/3s。

iOS HUD

兩者之間的區別為: 1. HUD可包括圖標和文字, toast一般為文字形式。 2. HUD內的內容可以變化(如音量控制)。 toast的 內部內容不可變化。 09

彈窗_

3. HUD的樣式通常為毛玻璃透明,Toast為黑色或灰 黑色半透明。 Android Toast

25


Snackbar (MD)

Snackbar是傳遞app中已經出現或者即將出現的進程的簡 短信息彈窗,可以自動消失。外形為矩形,以灰色不透明為 主要背景。不可放置icon在Snackbar內,文字不能超過兩 行。它和Toast最大的區別就是是否能進行互動。 另外,Snackbar從下往上出現,而Toast則是從屏幕中間浮現。當 Snackbar內需要活動按鈕時,不可使用有底色按鈕,應使用不同 顏色的文字按鈕。一次只能出現一個Snackbar。 在iOS規範中其實是沒有Snackbar的,但由於很難設計出規 範中所說的 "跟隨操作且超輕量"的反饋交互,很多app 在 iOS版本中仍舊使用Snackbar。 iOS Snackbar

Android Snackbar

09

彈窗_

26


Popover

在MD中,Popover對應的控件是菜單(menus)。當打 開菜單時,觸髮菜單的icon將保持不變。 在 HIG中建議在iPhone中盡可能用全部的可用屏幕空 間來展示信息而不使用Popover(但在ipad上可以使 用)。但實際上Popover出現時間早,運用廣泛如今在 很多APP的iOS版本中仍舊比較常用。 溢出菜單 (overflow menu)是常見的Popover的一 種形式。 iOS很多溢出菜單的icon與Andorid 略有不 同。 Google自家產品在iOS版本中最大化的遵循了 MD guidelines,也採用了Popover,但改變了icon。這 一現像出現在大部分Google APP中。另外,很多APP 也遵循了這一原則。 09

彈窗_

27


案例分析

PicsArt

Google Chrome

Google Drive

09

Instagram

彈窗_

Google Sheet

28


10按鈕_

Button

MD版本中的text button在沒有底色的情況下 表示重要程度低的按鈕,通常用於Cards和 Dialog。增加邊框表示是中等重要的按鈕,當有 底色和陰影時表示重要程度高的按鈕。 在英語版本中一般建議使用大寫,如果需要小寫 則需要將按鈕和其他內容區分開來,如使用不同 的顏色。同一行按鈕中不會使用兩個重要程度 相同的按鈕,按鈕之間要產生重要性差異。 A. Text Label B. Container

MD對按鈕的尺寸也有明確的規範,最小高度為 36dp, 可出目標高度不低於48dp, 字體正常為 14pt, 密集時為13p, 邊角弧度一般為2dp. 具體 可參見附圖。

C. Icon (optional)

10

按鈕_

29

Contained Button

https://zhuanlan.zhihu.com/p/26386661 https://material.io/design/

Contained Button with icon

Outlined Button

Text Button


Floating Action Bar (MD) 此外,MD中還有一個HIG中沒有的-FAB(Floating Action Button)。 FAB一般用於最基礎常用的屏 幕活動。外形上FAB一般為一個有icon在中心的 圓形,icon不能替換成文字,在需要添加文字的場合 就需要使用Extended FAB。 Extended FAB在外 形上可以由圓形變為圓角矩形,文字尺寸一般為 15pt。 在一個屏幕中最多能出現兩個FAB,並且只有在必 須的情況下才使用FAB。 FAB不需要出現在一個 App的每一個界面,設計者可以有選擇性地使用。 除了放置在底部,FAB也可以置於App頂部或者一 些模塊的邊界。當FAB可以展開時,裡面的選項要 在3-6個之間。 FAB

Extended FAB

10

Extended FAB Placement

按鈕_

Extended FAB

Two sizes of FAB containers: 1. Default (56 x 56dp) 2. Mini (40 x 40dp)

(用于460dp或者更小的屏幕)

Regular FAB

Mini FAB

FAB Placement

FABs https://material.io/design/

30


iOS在Navigation Bar和Toolbar中選擇使用Text Button。這個使用情境下的按鈕被稱為System Button。目的是能夠明確的告訴用戶在點擊按鈕後會 產生的效果。 一般來說HIG按鈕沒有邊框或底色,只有在必要情況下: 如想突出這個按鈕時才會使用底色。相對來說HIG更注 重按鈕的功能性,在Guidelines中並沒有對按鈕的外觀 做太多規定。 iOS Text Button

案例分析

10

Android 在按鈕上多使用粗體大寫, iOS 則為常規樣式。

按鈕_

31

Busuu


          //              @                     

€     ƒ      „‚              ­ €       ‚    

             _       

劉子瑄


             _       

Profile for 劉子瑄

Tzu_UI_Portfolio  

Tzu_UI_Portfolio  

Profile for 014325
Advertisement