「時尚潮流.魅力香港」2018 活動簡介 - HKTDC...「時尚潮流.魅力香港」 2018. 活動簡介. 香港貿易發展局將於. 2018. 年9 月在越南胡志明市舉辦「時尚潮流.魅力香港」
符合時代的介面設計潮流
-
Upload
desbear-li -
Category
Design
-
view
903 -
download
0
Transcript of 符合時代的介面設計潮流
![Page 1: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/1.jpg)
Line with the UI DESIGN TREND
1
符合時代的介面設計潮流
叡揚資訊 前端設計部 經理 李宗青
![Page 2: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/2.jpg)
Bear Lee叡揚資訊 前端設計部 經理
臺灣師範大學美術研究所藝術指導組畢業
高雄世界運動會吉祥物原創設計者
2006-2009 臺灣師大首頁設計
60個以上網站系統開發設計
臺北市立大學兼任講師
2
![Page 3: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/3.jpg)
3
UX - 聚焦真正的使用行為
設計的趨勢 - 扁平化設計
內容優先 - 簡單的色彩元素
聚焦互動 - Google設計原則
永續發展 - 網站、系統視覺規範
![Page 4: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/4.jpg)
4
![Page 5: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/5.jpg)
Focus on User
5
聚焦使用者
當我們設計產品介面時,聚焦於使用者與介面交互的過程 從使用者生活中接觸過的經驗與我們設計的產品間連結。
![Page 6: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/6.jpg)
6
![Page 7: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/7.jpg)
7
我們不停吸收來自國際的設計趨勢引進新的概念,
並研究使用上的原則,而非看到的樣子而已
![Page 8: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/8.jpg)
8
In the example above I'm using the one column form (most recommended in UX studies), but with a very long vertical scroll.
http://ux.stackexchange.com/questions/46019/what-is-the-best-way-to-deal-with-very-complex-forms
What is the best way to deal with very complex forms
![Page 9: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/9.jpg)
9
This is the client's favorite one, 4 columns using white space and trying to keep everything above the fold.
客戶 愛! 不用往下捲
![Page 10: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/10.jpg)
10
真正的設計不是看到這個表單的樣子而已,而是填寫它。
![Page 11: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/11.jpg)
11
多欄位的安排打斷使用者填寫的視覺動線。
![Page 12: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/12.jpg)
12
![Page 13: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/13.jpg)
13
根據欄位屬性、邏輯組織同類型的欄位。
![Page 14: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/14.jpg)
14
One useful method I've used on one of my projects some time ago is using 2 panels
分析表單內容,將輸入表單徹底分群
![Page 15: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/15.jpg)
15
單欄垂直輸入內容
![Page 16: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/16.jpg)
16
我不想要使用滑鼠滾動頁面
![Page 17: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/17.jpg)
17
http://uxmyths.com/post/654047943/myth-people-dont-scroll
![Page 18: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/18.jpg)
18
其實使用者不是真的不想滾動滑鼠,
而是再次填寫時,會找不到某個欄位。
![Page 19: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/19.jpg)
19
第一次使用者 每天使用者
單 欄
多 欄
設計開發者
![Page 20: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/20.jpg)
20
回歸到原點,
檢視表單內容本身,資訊間應該怎樣群組與歸納。
透過表單的導航與分群,提昇再次使用表單者的體驗。
![Page 21: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/21.jpg)
21
![Page 22: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/22.jpg)
22
配合標籤分群提示,讓往後表格的尋找加快
![Page 23: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/23.jpg)
2323
當然對我們來說看到的樣子也超重要
符合時代的設計,才有專業感!!!!
因此我們都很愛跟大家分享
想要帶給您當前 新的介面設計風格與趨勢。
23
![Page 24: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/24.jpg)
Flat Design
24
扁平化設計扁平化設計在Windows、Google的倡導與 大量設計師的跟隨下,近幾年大量流行在此 之下也產生許多於扁平設計下的相關風格
![Page 25: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/25.jpg)
25
內容優先的設計Flat Design
減少實體風格的漸層、陰影,讓畫面簡潔,透過物體與間距透露畫面 的元素間的安排,凸顯內容本身。
事實上扁平風格也可以說是從平面設計中所帶入的風格概念。
![Page 26: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/26.jpg)
26
![Page 27: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/27.jpg)
Why Flat Design
27
![Page 28: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/28.jpg)
28
![Page 29: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/29.jpg)
29
適合未來的世界Flat Design
事實上,扁平設計企圖讓使用者接受虛擬,並與現實世界有所區別 對於未來的擴充實境的介面設計來說,是必需使用的視覺策略
![Page 30: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/30.jpg)
30
然而對於現在Flat Design
以往介面設計透過使用者生活經驗中與介面中象徵物的連結達到 指引操作的目的,然而介面元件中,去除實體的一些暗示, 例如陰影、漸層後,事實上會提高一般使用者的學習曲線。
![Page 31: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/31.jpg)
skeuomorphism flat flat-ghost flat-ios & windows8
31
![Page 32: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/32.jpg)
32
![Page 33: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/33.jpg)
33
簡單的色彩元素Simple Color Schemes
扁平設計風在少即是多的原則下,簡單少量的色彩亦是 近介面設計 的趨勢,減少複雜色彩的使用,有利於對於單一系統中,使用者降低 色彩這個面向的記憶複雜度。
![Page 34: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/34.jpg)
34
每一個系統或網站根據其視覺系統 都會統合出一個自有的色彩計畫。
從以下案例就可以分析出各大網站 都會將配色縮減在3個左右,如果 扣除灰階色彩甚至可以說只有1種
Google Twitter Facebook
Microsoft Pinterest
YahooInstagram
Flickr Spotify
Rdio Svbtle Medium
![Page 35: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/35.jpg)
系統介面設計
低彩度大面積區塊
顏色使用謹慎
內容為主
35
![Page 36: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/36.jpg)
35
d
36
![Page 37: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/37.jpg)
37
![Page 38: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/38.jpg)
Office 360 word
38
![Page 39: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/39.jpg)
3938
Adobe Illustrator CC
![Page 40: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/40.jpg)
40
SPEED 3.0
![Page 41: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/41.jpg)
41
SPEED 3.0
![Page 42: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/42.jpg)
42
SPEED 3.0
![Page 43: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/43.jpg)
43
SPEED 3.0
![Page 44: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/44.jpg)
44
SPEED Fitt’s Law
![Page 45: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/45.jpg)
45
Fitt’s Law
![Page 46: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/46.jpg)
46
幾何元素編排Geometric Elements
在極簡的設計中,透過幾何元素的編排,能夠導引出動線的特殊性一方面也替 介面增加其趣味性、藝術性。
![Page 47: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/47.jpg)
47
![Page 48: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/48.jpg)
48
![Page 49: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/49.jpg)
49
![Page 50: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/50.jpg)
50
模糊背景Blurry Background
模糊背景有別於純色背景的使用,透過背景的照片,增添畫面的色彩,卻又能保持內容的呈現,也可以說是未來擴充實境式介面的表現模式體現
![Page 51: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/51.jpg)
51
![Page 52: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/52.jpg)
52
巨大特殊字體Very large typography
由於網路字體技術的興盛,與簡潔風格的推崇,當視覺元素更形回歸到 內容層面,設計師將頭腦動到字體上,透過精挑細選的字體,呈現純粹 具意義個視覺元素
![Page 53: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/53.jpg)
53
![Page 54: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/54.jpg)
54
![Page 55: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/55.jpg)
55
闡述與滾動特效Storytelling and Parallax Scrolling
對於產品或具有故事性的頁面,現今流行以精美的視覺設計 結合動畫效果吸引使用者與內容間有更深刻緊密的互動
![Page 56: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/56.jpg)
56
![Page 57: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/57.jpg)
57
然而現實層面,扁平化有需要更多的調和, 輔助其實用性
![Page 58: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/58.jpg)
Material Design
58
Google的介面設計原則當google於2014 提出此介面設計原則其動態回饋、介面 空間邏輯、動畫加速度等方面,都給予介面設計界一個標 準的原則認識。
![Page 59: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/59.jpg)
59
3D的介面空間Layers and Depth
Material所存在的環境是一個3D空間,這表示所有物件都有x、y和z維度。畫面的物件,透過現實的空間關係,更能夠讓使用者了解操作對象之間的關聯
![Page 60: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/60.jpg)
60
擴散陰影
Diffuse Shadow
從Apple TV OS公開後,其設計更是呼應了Material Design對空間的使用,透過擴散陰影重新將真實世界的空間、光線體驗帶回介面,並凸顯內容
![Page 61: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/61.jpg)
61
![Page 62: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/62.jpg)
62
![Page 63: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/63.jpg)
63
![Page 64: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/64.jpg)
64
動態過程的意義Animation
透過元素反應變形或移動的過程中,引導使用者的注意力,並同時了解物件與畫面間的關係。微互動中”反饋”的部份,常常透過動畫來表現。
![Page 65: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/65.jpg)
65
![Page 66: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/66.jpg)
66
![Page 67: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/67.jpg)
67
![Page 68: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/68.jpg)
68
![Page 69: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/69.jpg)
69
從按鈕型態、顏色的擴展,提示狀態的改變
![Page 70: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/70.jpg)
70
微互動
Micro-Interations
設計者透過設計出操作流程的圈
套,讓使用者成功順暢的達成操
作過程並達到目的。過程中流程
獲取喜悅與學習操作邏輯的概念
即為微互動所強調的。
70
![Page 71: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/71.jpg)
7171
![Page 72: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/72.jpg)
72
透過閃爍提示訊息
利用結構改變提供更多訊息
![Page 73: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/73.jpg)
73
物件操作後 與接下來畫面的過渡揭示畫面與操作間的關係
![Page 74: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/74.jpg)
74
![Page 75: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/75.jpg)
75
![Page 76: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/76.jpg)
Visual Identity & UI Kit
76
視覺系統 與 介面元件
進入網路時代,網站的視覺系統UI規範,抑是當今 一個網站成長茁壯需要被定義與持續更新的體系
![Page 77: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/77.jpg)
77
![Page 78: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/78.jpg)
78
![Page 79: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/79.jpg)
79
![Page 80: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/80.jpg)
![Page 81: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/81.jpg)
![Page 82: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/82.jpg)
![Page 83: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/83.jpg)
83
![Page 84: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/84.jpg)
84
![Page 85: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/85.jpg)
85
![Page 86: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/86.jpg)
86
![Page 87: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/87.jpg)
87
![Page 88: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/88.jpg)
8888
GSS
Domain knowhow
88
![Page 89: 符合時代的介面設計潮流](https://reader031.fdocuments.net/reader031/viewer/2022011721/58a8191e1a28ab4d148b4ec3/html5/thumbnails/89.jpg)
Bear Lee
歡迎提問
89