92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

為什么整個亞洲的平面設計師都忽略了它? | 深度

前端達人

點擊查看原圖


平面設計師不可忽視的“數據”

短視頻泛濫的今天,足以證明純文字或者純圖像的輸出已不能滿足人們對信息的攝入??磮D太單調,看文字太枯燥,所以不斷有設計師開始思考怎么重新設計圖文的形式讓信息視覺化效果更佳。

信息設計區別于傳統的平面設計,它更著重于數據的視覺化。目前,全球范圍內的設計師們都在尋求以更創新、更獨特、更有趣的方式來展示數據,信息圖表就是信息設計中的一個子集,它能夠使人們更好的讀懂數據。越來越多的國家和企業已將信息圖表設計運用于各領域的日常工作。

信息爆炸的時代正好缺少了這樣一種整合信息的手段,信息圖表的形式正好幫助人們解決了這樣的一個難題。所以說信息圖表設計不等于視覺設計,平面設計師通過扮演數據分析師獲得鍛煉,通過數據對比掌握最真實的情況,拉大平面設計師的思維范疇同時獲得更多尊重與信任。

點擊查看原圖



信息圖表早已出現

信息圖表的歷史早于網絡,大約32,000年。公元前30,000年的洞穴繪畫很容易被稱為第一個信息圖表,描繪了周邊地區的動物和其他資源。作為數據的直觀表示,它們絕對是信息圖表。

點擊查看原圖埃及的象形文字也是如此。公元前3000年左右,古埃及人用這些信息圖表來講述生活,工作和宗教的故事。點擊查看原圖

更為現代的信息圖表歷史可能始于William Playfair,他是統計圖形學的早期創新者。1786年,他出版了商業和政治地圖集,其中顯示了許多代表英格蘭經濟的條形圖,折線圖和直方圖。他在1801年用第一張面積圖和第一張餅圖進行了跟蹤。


點擊查看原圖


1857年,英國護士佛羅倫斯·南丁格爾使用信息圖形,說服維多利亞女王改善軍隊醫院的條件。她的圖表顯示了克里米亞戰爭每個月的死亡人數和原因:可預防的藍色疾病,紅色傷口和其他黑色病因。點擊查看原圖

說到英格蘭,信息圖表歷史上的一大步是在1933年,當時哈里貝克創建了倫敦地鐵的第一張地圖,只顯示了描繪公共交通路線和車站的線路。這是一個重要的發展,因為它將視覺圖表移動到日常生活中。點擊查看原圖


信息圖表的應用范圍

因為日常生活中最常被我們接觸到的信息圖表就是地圖,所以總有人認為信息圖表就是地圖。其實地圖僅是信息圖表的用途之一,信息圖表不應該被局限地認為只能作為地圖使用,下面為大家普及一些信息圖表案例:

說明書

點擊查看原圖


點擊查看原圖


游戲設計


點擊查看原圖

點擊查看原圖



網頁設計

點擊查看原圖點擊查看原圖


點擊查看原圖


APP界面設計

點擊查看原圖點擊查看原圖

指示系統

點擊查看原圖點擊查看原圖



信息圖表設計覆蓋的領域非常廣泛,小到說明書、地圖、各種場合PPT制作、書籍設計、游戲、UI、App、而完成一項信息圖表設計需要經過數據采集、分析統計、對比采納、最后通過平面設計師制作完成。

全球著名信息圖表設計師

Jan Schwochow

Jan Schwochow是柏林Golden Section Graphics機構的所有者和創意主管,并且在柏林的KircherBurkhardt機構設立了一個信息圖表部門。自2007年以來,他一直在管理Golden Section Graphics辦公室,該辦公室目前擁有多達16名員工。該團隊的工作獲得了眾多國家和國際獎項。

作品:一個模型體育場

點擊查看原圖點擊查看原圖點擊查看原圖




啟發性廣告

點擊查看原圖點擊查看原圖



Alberto Lucas López

Alberto Lucas López是華盛頓高級地理圖形編輯,他的作品在美國、亞洲和歐洲獲得了無數獎項。Alberto的信息圖表從其他領域脫穎而出,因為他的精致和反由他不斷尋求創新所驅動的直觀概念。僅在2015年,他就贏得了50多項國際獎項。

作品:Fender Stratocaster

點擊查看原圖點擊查看原圖

Antonio Farach

Antonio Farach是Muscat Media Group的信息圖表編輯,也是阿曼時報和Al Shabiba的出版商。

作品:Crimean-Congo Fever

26.jpeg27.jpeg



SUNGHWAN JANG張圣煥/韓國

韓國弘益大學美術學院視覺設計系學士、弘益大學產業美術研究院碩士?,F為203 X Design Studio代表、文化月刊《Street H》發行人,他在2013年開設了自己的“信息圖表實驗室”,研究和設計了不少優秀的信息圖表作品。

作品:Self-Publishing

28.jpeg點擊查看原圖點擊查看原圖點擊查看原圖



作品:Understanding Cat Care

點擊查看原圖點擊查看原圖點擊查看原圖

作品:Burger

點擊查看原圖點擊查看原圖點擊查看原圖



作品:Korean SOJU

點擊查看原圖點擊查看原圖點擊查看原圖

為什么我們要學習信息圖表設計?

信息圖表我認為它始于阿爾塔米拉洞窟里的繪畫。最開始僅僅是用于視覺交流。隨著語言、文字的出現以及紙張的發明,信息得到了的傳達,以文本為主的書籍也成為了交流的中心。辨別出好的信息以及如何精準傳達顯得尤其重要。

我們可以輕松地在世界上任意一個國家的機場里找到廁所,是因為有代表“廁所”的圖片和圖畫文字。當然圖畫文字只是信息圖表中一個很小的部分。現在,我們生活的世界已經成為一個,比起文字,更多地運用視覺信息打破地域和語言限制的時代。

— 張圣煥2018年Malofiej獎銅獎獲得者

Malofiej獎是由新聞設計協會舉辦的。如今這個獎項被稱為信息圖表界的普利策獎,Malofiej獎一直以來表彰在出版和線上的最佳信息圖表。

41.jpeg點擊查看原圖



Malofiej獎26屆信息圖表銅獎▲

為什么你的信息圖表設計就是學不好?

漸漸地發現,信息圖表設計已進入到國內視覺傳達專業里,而事實上在國外信息圖表設計早已是一門獨立的專業學科,我們常常問為什么歐美國家做的UI那么漂亮?

這是有原因的,在國內師資相當缺乏的條件下,信息圖表設計往往是走馬觀花,忽視制作方法上的有效性,導致作品要么擁有視覺沖擊力卻缺乏表達的準確性,要么就是由數據轉化出的視覺效果平庸缺乏魅力。那么怎么樣才可以制作出有魅力的信息圖表設計?

經過深入的觀察與分析,我們認為信息圖表設計將改變平面設計的未來,由Helvetica 掀起的字體設計熱蔓延全球,讓字體設計意識得到重視與提高,而下一股推動這個信息時代發展的必定是信息圖表設計,有魅力的信息圖表設計記錄時代的變遷,讓世界越有魅力!

點擊查看原圖點擊查看原圖點擊查看原圖46.jpeg



BranD × 張圣煥


轉自:搜狐

作者:BranD

鏈接:https://www.sohu.com/a/245081283_611151

來源:搜狐

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服




什么樣的設計才能榮獲「包裝界的奧斯卡獎」?

前端達人

1.png


倫敦當地時間9月12日,Pentawards官方公布了2019年的最終獲獎名單。這個創立于2007年的全球首個也是唯一一個專注于產品包裝類設計的大獎,被譽為「包裝設計界的奧斯卡」。每年組委會會從全球頂尖的設計機構或公司邀請12位行業大咖組成評審團隊,對來自世界各地的上千件包裝設計作品進行嚴格的評選,有時甚至會出現獎項空缺的情況。

2.png
參賽作品被按照食品、飲品、身體相關產品、品以及其他市場5個門類進行分類評選,而獎項等級則設置了鉆石獎、鉑金獎、金獎、銀獎和銅獎。2018年,Pentawards還專門為學生設計師設置了鼓勵年輕一代的NXT—GEN AWARD。每年獲得這個迄今為止最具權威與含金量的包裝設計獎項的作品,無疑是當年包裝趨勢的縮影與風向標。

3.png

全場大獎 —— 鉆石獎作品

作為Pentawards每年僅設置一個名額的全場大獎 「鉆石獎」,今年被其他市場類的「微軟」團隊(Microsoft)捧得,獲獎作品為Xbox自適應控制器包裝。

4.png

Xbox自適應控制器的設計旨在為行動不便的游戲玩家提供同樣能愉悅享受游戲的體驗,全新的控制器完全顛覆了大家對傳統手柄設計的認知,讓殘障人士也能輕松使用Xbox One和Windows 10 PC游戲。

5.png


Xbox自適應控制器的包裝設計同樣充分考慮到了使用人群的特殊性,設計團隊將氣囊集成到包裝中,保護產品的同時也盡量保持包裝的小尺寸。能輕松拆開的封膠、便于開箱的色帶還有抽屜式的內包裝盒,只要找到最顯眼的抽拉部位,不需要任何說明書指導或復雜拆盒步驟,誰都能單手拆包裝。

6.png

類別: 其他市場 – 電子

品牌: XBOX

參賽:Microsoft

設計: Mark Weiser,Kevin Marshall

國家: 英國

鉑金獎作品

7.png




今年飲料類的「鉑金獎」被來自英國愛丁堡的LIND & LIME GIN獲得。包裝設計由蘇格蘭的創意團隊 Contagious 操刀,酒瓶設計的靈感源于品牌商The Port of Leith Distillery所在的Leith 地區海岸上具有歷史意義的工業建筑以及老窯.

8.png


酒瓶封口上展示的是關于英國皇家海軍外科醫生James Lind的文案,從酒瓶包裝的設計到這款酒的命名LIND & LIME GIN,都體現了對這位發起利用柑桔類水果預防與治療壞血病的醫生的致敬。優雅精致的外觀設計搭配晶瑩剔透的玻璃質感,讓人一眼就能從眾多酒瓶包裝中被LIND & LIME GIN所吸引。

9.png

10.png

11.png


類別: 飲品類

品牌: LIND & LIME GIN

參賽: Contagious

設計: James Hartigan

國家:英國

12.png



身體與美容相關的「鉑金獎」得主是來自韓國的彩妝品牌STONEBRICK,設計團隊是來自美國的Established。包裝與產品設計主打樂高與玩色的概念,唇膏、腮紅、眼影等所有彩妝單品都可以互相吸引連接,像拼樂高砌積木的形式被收納好。讓顧客親手搭建自己量身定做的彩妝積木王國,簡直直擊少女心。


13.png

14.png



這種集娛樂性、互動性與定制化為一體的包裝設計,除了能滿足產品對功能層面的基本訴求,更能與消費者產生情感情緒上的連接。利于強化品牌獨特的形象,也能通過其趣味性刺激消費。此包裝設計不僅獲得了Pentawards的鉑金獎,同時也獲得了D&AD Awards 2019 (2019英國黃鉛筆獎 )。


15.png

16.png

17.png


18.png


類別: 身體相關產品

品牌: STONEBRICK

參賽: Established

設計: Sam O’Donahue

國家:美國

19.png



亞美尼亞Backbone Branding設計公司為RICEMAN設計的大米品牌包裝獲得了食品類的「鉑金獎」。

包裝外形以亞洲稻農戴蓑帽的傳統形象為原型,圓錐形帽子紙盒蓋子內側則巧妙與標記測量米量的米杯結合,實用又環保。兩種不同尺寸的袋子分別裝盛不同的大米類型:短粒米為小袋子,長粒米為高袋子。

20.png

21.png

圖形與視覺書寫風格選擇了亞洲書法,以強調這種谷物的區域起源。整體的視覺設計展現了品牌向稻米產品背后的人類致敬的寓意與人文情懷。

22.png

23.png


類別: 食品類

品牌:RICEMAN

參賽:Backbone Branding

設計:Stepan Azaryan, Eliza Malkhasyan

國家:亞美尼亞

24.png



品類的「鉑金獎」被西班牙設計師Roberto Nú?ez為PERFECCIONISTA葡萄酒設計的包裝獲得。這款限量版葡萄酒的包裝設計以重視缺陷為概念。每一瓶酒的木盒包裝都是手工切割的木材制造并帶有墨水印章編號。

25.png


類別:品 – 香檳酒

品牌:PERFECCIONISTA

參賽:Roberto Nú?ez

設計:Roberto Nú?ez

國家:西班牙

26.png

其他品類的「鉑金獎」獲得者是一個來自西班牙的品牌AURIGA的自我推廣設計。視覺語言獨特,充滿神秘感。

27.png

28.png

29.png

30.png


類別:其他市場 – 自我推廣

品牌:AURIGA

參賽:AURIGA

國家:西班牙

更多獲獎作品欣賞

31.png

32.png

33.png

34.png


類別: 飲品類

品牌:「宋」高山單叢茶

參賽:林韶斌設計機構

設計:林韶斌設計機構

國家:中國

35.png

36.png

37.png

38.png


類別: 食品類

品牌:BEE-FEE

參賽:Opus B Brand Design

設計:Zuzanna Sadlik, Beata Faron

國家:波蘭

39.png

40.png

41.png


類別: 飲品類

品牌:Pearlfisher

參賽:Toyo Seikan Group Holdings,Ltd.

設計:Hamish Campbell 等

國家:美國

42.png

43.png


類別: 食品類

品牌:COLOREAT

參賽:Backbone Branding

設計:Stepan Azaryan, Gevorg Balyan

國家:亞美尼亞

44.png

45.png

46.png

47.png


類別: 飲品類

品牌:HANSHUIXIGU

參賽:凌云創意

設計:凌云創意團隊

國家:中國

48.png

49.png

50.png


類別: 食品類

品牌:BOUDIN SAN FRANCISCO

參賽:Art Center College of Design

設計:Yi Mao

國家:美國

51.png

52.png

53.png


類別: 食品類

品牌:無(概念設計)

參賽:Toyo Seikan Group Holdings,Ltd.

設計:Sayaka Kawagoe

國家:日本

54.png

55.png

56.png

57.png

58.png


類別: 食品類

品牌:brand.new

參賽:Toyo Seikan Group Holdings,Ltd.

設計:Kostas Mentzos Cristina Seijas Fernández

國家:希臘


59.png

60.png

61.png

62.png



類別: 其他市場 – 自我推廣

品牌:Stocks Taylor Benson

參賽:Toyo Seikan Group Holdings,Ltd.

設計:Stocks Taylor Benson Design Team

國家:英國

63.png

64.png

65.png


類別: 身體相關產品

品牌:Fengsheng Group

參賽:Shanghai Version Design Group

設計:Zhihua He

國家:中國

66.png

67.png

68.png


類別: 身體相關產品

品牌:SAIB INTIMATE COSMETIC

參賽:SAIB&Co

設計:Jungmin Choi, Eunchong Kim

國家:韓國

69.png

70.png

71.png


類別: 身體相關產品

品牌:COLOUR ZONE

參賽:Shanghai Nianxiang Brand Design & Consulting Co, Ltd.

國家:中國

72.png

73.png

74.png


類別: 身體相關產品

品牌:CODE 00-DESIGNED FOR POST-00S

參賽:YANG DESIGN

設計:Yang Ming Jie

國家:中國

75.png

76.png

77.png


類別: 身體相關產品

品牌:ART&FICT

參賽:British Higher School of Art and Design

設計:Evgeniia Zhuravleva

國家:俄羅斯

78.png

79.png

80.png


類別: 品

品牌:CINCO JOTAS

參賽:MORILLAS BRAND DESIGN, S.L.

國家:西班牙

轉自:簡書
作者:極創設計
鏈接:https://www.jianshu.com/p/de86f3028f18
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。



藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服












觸覺之美-如何進行觸覺設計

鶴鶴

觸覺給人類帶來的情感體驗是不可或缺的,如果沒有它的存在,我們在日常生活中與現實物體互動的過程將變得索然無味。

內容概覽

一.我們的觸覺

二.什么是觸覺反饋

三. iPhone 的振動模塊

四.安卓手機的振動模塊

五.觸覺設計的用途

六.如何設計

七.結語

一.我們的觸覺


“她滑滑的,明亮著,像涂了‘明油’一般,有雞蛋清那樣軟,那樣嫩”,這是朱自清的散文《綠》中對梅雨潭的一段描寫?!盎薄ⅰ败洝?、“嫩”是對觸覺賦予意蘊的獨特表達,這些我們一旦聽到就會在腦海里浮現畫面的描述是來自于生活中無數次觸覺帶給我們的獨特體驗。


在人體的五種感覺中,觸覺與其他感覺相比與我們身體的接觸面更廣,人體全身上下都是觸覺信號的接收器。盡管如此,人類的觸覺能夠傳遞的信息是有限的,通常觸覺傳遞的信息只有視覺信息的 1 %。不過,觸覺給人類帶來的情感體驗又是不可或缺的,如果沒有它的存在,我們在日常生活中與現實物體互動的過程將變得索然無味??萍籍a品也是如此,無論是 VR 體感游戲機還是日常使用的手機,通過振動帶來的觸覺反饋起到了畫龍點睛的作用。


二.什么是觸覺反饋


觸覺反饋,通常是通過硬件的振動模擬人的真實觸覺感受,通常應用于用戶隨身攜帶的手持、穿戴、觸摸等設備上,現在也開始大規模應用于體感游戲、4D 視頻內容、機器人、醫療等領域,可以補充視覺和音頻反饋的不足,增強互動效果,提升用戶體驗。


根據觸覺技術領域的創新公司意美森的用戶反饋和調查顯示,用戶在使用帶觸覺體驗的游戲后,給予了游戲更多的正面評價,并且活躍和分享意愿明顯提高。隨著硬件廠商對用戶體驗的愈發重視,觸覺設計在產品設計中更多地得到應用。接下來會向大家介紹移動 App 產品如何配合硬件設計出優質的觸覺體驗。


三.iPhone 的振動模塊


軟件的體驗升級需要依賴硬件的不斷迭代。iPhone 的振動體驗一直被用戶贊嘆不已,這源自于與蘋果對用戶體驗的追求,即使在大多數用戶看來無關痛癢的振動功能,蘋果也一直進行不斷升級迭代,提高振動模塊的性能,帶來更舒適的體驗。


在 iPhone 振動模塊的升級過程,蘋果不斷增大振動模塊體積,從轉子馬達到線性馬達的更新換代讓震感越來越細膩,如下圖所示。

(上圖內硬件圖片來自知乎用戶「云子可信」)


直到后來, iPhone 7 / 7 plus 上全新線性馬達 Tapitic Engine 問世,iOS 10 的振動接口向開發者開放,如此高配置的線性馬達提供的細膩反饋不但使 iOS 系統 更具科技與藝術的融合之美,更是賦能大量第三方應用,調用此功能的第三方應用可以自定義地使用振動反饋來提高產品體驗。


可能有些讀者會疑惑,全新的 Tapitic Engine 振動模式和以往有什么不同之處呢?我們先回憶一下在以往各種手機的振動給我們帶來的體驗,基本都是嘈雜的聲音加上酸麻的手感,體驗非常拙劣。而 Tapitic Engine 實現了在不發出聲音的情況下提供更細膩舒適的振動體驗,如下圖。


另外振動給我們另一個負面影響就是其干擾性太強,大多數其他手機提供的振動并沒有進行時間和強度的分級,這帶來的問題是無論在何種場景下,手機都會給我們同樣的振動反饋,沒有進行任何場景的細分。比如對于危險操作可能需要時長久強度大的反饋,而一些輕量化的提示只需要輕微的振動即可,但是由于硬件的限制,大部分安卓手機都是一視同仁。而擁有 Tapitic Engine 的 iPhone 則可以自定義三種不同的強度、不同次數和時間,還可以穿插強度使用模擬更多場景,后文會詳細介紹相關應用。


四.安卓手機的振動模塊


剛才提到,絕大多數的安卓機型不可以對振動的強度進行自定義,因此不管在系統軟件還是第三方軟件中,如果場景需要振動輔助,基本都是振動到手麻的一聲“嗡”就不了了之了,手機如果在桌子上這種劣質的振動甚至能把手機震得掉到地上。只有少數有極客精神的安卓廠商會在振動體驗上不遺余力,向蘋果看齊,但由于大部分第三方應用開發者難以針對各個安卓機型不同的硬件振動模塊進行適配,所以大部分安卓機型上的第三方 App 如果需要振動都是調用單一強度,仍然未對振動強度做場景細分,體驗依然不盡人意。


五.觸覺設計的用途


盡管觸覺傳遞的信息遠遠少于視覺和聽覺,但我們通常也不會將觸覺作為傳遞信息的主要手段。我們只將其作為視覺反饋和聽覺反饋的一種補充和配合部分。電子設備的振動模塊產生的觸覺反饋,可以有效提高交互的易感知性,并賦予產品生命力,增強用戶的情感化體驗。


( 1 )  交互反饋


a.更敏感的反饋方式


我們在使用電子設備時獲得反饋的三種形式:視覺反饋,聽覺反饋,觸覺反饋。觸覺比視覺和聽覺的傳達更迅速被用戶感知,由于以人體為介質,觸覺反饋會為對表皮以及對肌肉中感受器進行刺激,因此其要被視覺與聽覺更加敏感和強烈。


我們可以將這種特性應用到相應的產品設計中,比如很多產品的下拉刷新都從之前的文字提示改為了振動提示,可以使用戶更快速地獲得反饋。當用戶下拉的距離到達臨界值并觸發振動后,用戶感受到振動后松手就刷新了,而不用再使用“繼續下拉刷新、釋放刷新”等冗余的文案來提示用戶,如下圖的下廚房應用。


b.強化物理動作


蘋果手機從 iPhone 6s 升級到 iPhone 7 最大的變化之一就是經典的 Home 鍵從可以按下去的實體鍵變為了虛擬鍵。剛開始很多果粉還擔心可能產生的體驗下降問題,但是經過使用后才發現虛擬按鍵加上升級的線性馬達提供的震感,逼真地模擬了真實的按壓觸感,乃至很多用戶反饋說使用了 iPhone 7 很久時間都還以為 Home 鍵仍然是可以按壓的實體鍵。


振動反饋還可以給輸入法應用帶來真實的敲擊感,來自馬薩諸塞大學的一份研究顯示,虛擬鍵盤如果加入振動反饋,可以提升用戶輸入時的準確度。


c.彌補異常情況下的反饋


由于網絡延遲,用戶進行某些操作后可能需要等待一段時間才能收到反饋,如果時間過久,用戶會懷疑是自己操作不當,但如果加入振動反饋,會在其他反饋信息出現前打消用戶的顧慮。


如下圖,知乎的鼓掌功能。用戶點擊鼓掌后,通??蛻舳藭埱蠓斩说臄祿缓箫@示已點贊的狀態,這個過程會收到用戶網絡狀況的影響。如果網絡狀況較差,用戶不能及時從屏幕獲取視覺變化的反饋,就會懷疑自己是不是沒有點擊到正確的熱區或者操作不當,因此用戶可能進行重復點擊從而影響體驗。但若加入振動反饋,用戶在點擊鼓掌后,首先一定會收到振動反饋,因為振動反饋不會受到網絡的影響而不會延遲,之后即使視覺反饋有些許延遲也不會讓用戶懷疑是自己點擊失誤了。


( 2 )  情感化設計


人們容易對自己熟悉的事物產生好感。在產品設計中,我們經常使用日常生活中常見的視覺形象和聲音進行隱喻關聯,與用戶建立情感聯結。觸覺也不例外,日常生活中各種各樣的現實物體都會給我們帶來不同的觸覺感受。電器按鈕的阻尼感、節日煙花爆炸傳遞的震感、撥動齒輪帶來的摩擦感等等都是我們與現實世界之間的觸覺交互。iPhone 的線性馬達提供的不同等級的振動反饋可以充分地模擬并給我們帶來逼真的觸覺體驗。


下面就向大家介紹一些將觸覺設計用于情感化設計中的一些精選案例。


a.單一強度


前文給大家提到,iPhone 手機自 iPhone 7 開始開放了振動接口,可供第三方應用開發者調用,其中有三種強度可供選擇,分別是 Light、Medium 和 Heavy 。單一強度指的是,某個功能只使用了 其中一個振動強度來設計。

如下圖的荔枝的私人 FM 功能,當我們撥動齒輪時,振動模塊就會伴隨著我們撥動的手指產生強度為 Medium 的振動反饋,模擬現實生活中的真實體驗。


b.多強度組合


多強度組合指的是,某個功能使用了 Light、Medium 和 Heavy 三種強度進行組合使用,從而模擬出變化的振動效果。它比單一強度的體驗更加豐富,而且通過設計者巧妙的構思出來的不同的組合形式,它可以模擬出各種獨出心裁的表現效果。


為了研究不同產品上振動帶來的反饋感受,我體驗了很多產品,但論將振動反饋運用到的,不得不提 QQ 的戳一戳功能,它振動的時間節點、強度與每一幀的動畫效果是匹配的,其設計團隊的匠心獨具,可見一斑。為了直觀地讓大家感受振動變化,以戳一戳中的「放大招」為例制作了效果圖給大家展示大概的振動強度隨時間變化過程。下圖中,動畫的過程可以拆解為 大招的能量收集、大招發射、大招撞墻、屏幕搖晃,分別對應不同的振動強度,使得體驗極為真實和令人驚喜。


當我們使用 iMessage 發送短信時,如果選擇了煙花,在短信發出的一瞬間,全屏幕就會布滿驟然綻放的煙花。更令人驚喜的是,線性馬達在此時進行大大小小的振動模擬出煙花的爆裂感,仿佛煙花就是在我們手里綻放一般。


不僅僅是上述案例,通過振動帶來的觸覺反饋在應用設計層面給我們帶來了巨大的想象空間。槍擊,拋硬幣,鼓點,齒輪,等等等等,再加上視覺和聽覺的配合,更是帶給了用戶身臨其境的體驗。


c.適配問題


由于之前提到過的安卓機型割裂嚴重,有些旗艦安卓機型的振動模塊體驗優質,但是大部分安卓手機的振動還是差強人意,因此大部分第三方應用開發者難以針對各個安卓機型不同的硬件振動模塊進行適配,所以大部分安卓機型上的 App 如果需要振動都是調用最原始的振動模式,這種模式的體驗感很差,與 iPhone 的 Tapitic Engine 分級振動體驗不可同日而語,因此即使某個場景需要振動滿足情感化需求,一般情況下在安卓端也是不會加入的,比如荔枝 FM 的私人 FM 功能中的振動、QQ 的戳一戳中的振動都只在 iOS 端做了適配,安卓端是沒有的。


六.如何設計

( 1 )  iOS


在日常體驗 App 產品時,我們可能會發現,在同樣的 iPhone 機型上,有的 App 中某個功能的振動反饋細膩舒適,但有的 App 的振動反饋的強度很不合時宜且體驗感差。這里可能存在設計師與開發人員的溝通問題,設計師并沒有先主動搜集資料去了解 iPhone 的振動有多種強度選擇,只是簡單地讓開發人員將某個功能加入振動反饋,于是開發人員任意選擇了一個振動強度就草草上線。最終,導致設計出來的振動反而降低了體驗。優秀的設計需要平穩的落地,在我們決定要為某個功能設計振動后,我們要完成以下步驟。


1.選擇振動強度;

2.確定振動次數;

3.如果振動多次,確定每兩次之間的間隔時間;

4.確定是否循環。


如果設計的振動是多強度組合,最好將上述參數確定后以可視化的形式(如表格)交接給開發人員,方便其理解。由于部分開發人員可能并未深入了解 iOS 的振動模塊的調用實現方式,因此為了各位設計師朋友能夠更加暢快地與開發溝通,我在文章后面附上了 iOS 調用振動的相關代碼,大家可以將相關代碼直接發給發給開發人員供參考使用。我在附錄列舉了三種震動方式,其中的「 UIImpactFeedbackGenerator 震感」就是上文提到的可以自定義三種強度的方式,推薦大家使用,附錄里還列舉了每種振動方式的支持機型和系統、優缺點和我的個人建議。


( 2 )  安卓


由于安卓自定義系統過多,且硬件之間差異過大,第三方應用開發者難以額外花費時間和精力去適配不同安卓手機硬件,因此通常只使用默認的振動調用方法。因此在與開發工程師交接時,一般我們只需要做后三步。


1.確定振動次數;

2.確定每兩次之間的間隔時間;

3.確定是否循環。


七.結語


電子產品每一次的硬件迭代總是會給設計師帶來巨大的想象空間,作為設計師,我們需要在技術日新月異的時代不斷開拓視野,拓展設計的邊界。同時也是由于技術的進步,可能本文的技術實現方案在未來的某個時間就被淘汰和拋棄,所以希望大家對本文持批判性態度,對文章內可能的疏漏予以指出,我將及時更新或更正。在這里也感謝公司的 iOS 開發小伙伴的支持,犧牲休息時間與我一起檢驗各種實現方案帶來的不同震感,提高本文的嚴謹性。


(附) iOS 振動調用代碼


( 1 )  UIImpactFeedbackGenerator 震感

代碼

a.微弱短振-Light

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleLight];

[generator prepare];

[generator impactOccurred];


b.中等短振-Medium

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleMedium];

[generator prepare];

[generator impactOccurred];


c.明顯短振-Heavy

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleHeavy];

[generator prepare];

[generator impactOccurred];


( 2 ) 長振動震感

代碼

AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);


( 3 ) 3D touch震感

代碼


a. Peek 觸感

AudioServicesPlaySystemSound(1519);


b. Pop 觸感(比 Peek 震感強,且比「UIImpactFeedbackGenerator震感」中的 Heavy 還強烈)

AudioServicesPlaySystemSound(1520);


c.三次連續短振(三次 Peek 觸感連續振動)

AudioServicesPlaySystemSound(1521);


參考書籍:

《微交互》 作者: 塞弗 (Dan Saffer)


轉自:站酷-Ballen貝林

Lottie 動效設計

純純

動效設計,是 UI 設計當中不可或缺的一環。大家對動效的認知也從最初認為動效只是為了美觀酷炫,到逐漸理解了動效對于提升用戶體驗和產品需求的重要作用。而導致這種認知的轉變,相當一部分原因是因為硬件性能的發展和動效輸出方式的優化。

因為動效實現的過程就是設計師和開發之間互相博弈的過程。設計師可能通過 AE 或者其他工具做出炫酷的效果,和開發對接就懵了。要么無法實現,要么極其復雜。畢竟開發工程師要通過代碼把動效實現出來,設計師得用開發所能理解的語言來描述。就如同你能完美地解出一道數學題一樣,讓你把解題思路教給別人,你可能就沒那么順暢了。一方面取決于你的表述能力,而更重要的是對方的理解能力。過去所廣泛采用的通過動效標注輸出給開發的方式,都存在還原度的問題。很多時候還原度達到 80% 可能都算比較好的了。

而今天要說到的 Lottie 不僅可以 100% 還原動效,而且無需動效標注。直接通過 AE 輸出動效文件給開發。開發人員直接調用,然后完美還原。

Lottie是什么?

Lottie 是 Airbnb 開源的一個動畫渲染庫,同時支持 Android、iOS、React Native 平臺。Lottie 支持渲染播放 AE 動畫。通過 AE 插件 bodymovie 導出 json 文件作為動畫數據。


Lottie有什么用?

Lottie 可以應用在 UI 設計的很多場景中。以下舉出幾個常用例子。

1. 動態啟動頁


2. 動態圖標/按鈕

3. 空頁面




以上僅列舉了部分常用案例,其實 Lottie 的應用場景遠不止這些。在 APP 的多個模塊中都可以運用,那么我們要如何將 Lottie 運用在自己的工作項目中呢?那就要了解 Lottie 的原理了。


Lottie的原理是什么?

前面已經提過 Lottie 是 Airbnb 開源的一個動畫渲染庫。我們可以理解為它是一個多功能的視頻播放器,開發人員需要將這個播放器部署到相應的環境中。然后設計人員提供視頻(動效文件)給開發人員,讓開發人員按照要求播放視頻文件,即可完成動效的應用。


假設該按鈕動效一共10幀,整個按鈕切換分為兩部分,第一部分:從菜單切換到關閉(1-10幀);第二部分:從關閉切換到菜單(10-1)。我們可以讓開發通過以下控制方式,完成我們想要的效果。

按鈕動效默認顯示第1幀(菜單狀態),點擊按鈕以后開始播放動效,動效播放到第10幀的時候停止,并停在第10幀(關閉狀態)。當按鈕為關閉狀態(第10幀)時,點擊按鈕以后動效從第10幀倒放到第1幀(關閉狀態),并停在第1幀(菜單狀態)。

通過以上方式就完成了對一個動效按鈕的控制。而日常工作中我們可以靈活地運用多種控制方式。

首先動效的觸發,可以是一次交互事件,比如點擊、滑動;也可以是監聽到了廣播,比如網絡異常等。而觸發以后的動效控制也多種多樣,可以從開始播放到結束,也可以進行倒放;可以循環播放某一段動效;也可以從某一幀播放到另一幀,或者某一個時間點播放到另一個時間點;更多的控制方式需要大家在工作中慢慢挖掘。

Lottie支持的AE屬性

Lottie雖然能夠滿足多種場景需要,但是并非支持所有的 AE 效果。設計制作時,需要考慮該效果是否支持。否則,會導致出錯或者所用效果無法生效。



上圖為 Lottie 支持的主要 AE 屬性,此處有刪減掉部分不常用的屬性??梢源蜷_以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features

需要注意的是文檔中雖然說支持漸變,但是會出錯,所以大家在使用矢量圖形時,請勿使用漸變效果。關于漸變效果的修復后續文章會提到,官網以后也會修復相關問題,但是沒有確切時間。

通過上圖我們可以了解到,Lottie 支持的 AE 屬性基本包含以下幾類:

  • 基礎的形狀比如圓形、矩形、星形等,也可以支持鋼筆工具繪制的矢量形狀和從 AI 中導入的矢量圖形。
  • 支持位移、大小縮放、透明度、旋轉、修剪路徑、蒙版、遮罩這些基礎動畫屬性。
  • 支持圖層間建立父子級關系(只支持圖層與圖層之間建立,當圖層的屬性之間建立父子關系會失效,比如 A 圖層可以和 B 圖層建立父子關系,但是 A 圖層的位移屬性和 B 圖層的位移屬性單獨建立父子關系則不生效)。
  • 支持速度貝塞爾插值,可以搭配 Flow 插件生成各種緩動效果。
  • 支持導入圖片。
  • 支持時間拉伸和時間重映射來通知時間和速度。

(原文章來源于:https://www.uisdc.com/lottie-dynamic-design-guide





如何通過競品分析來解決問題

鶴鶴



1.競品分析的定義


從專業的角度來講,競品分析是通過系統的分析方法去全面了解市場上位于前列的競爭對手的產品,能夠讓設計師快速了解自家產品所處的位置,從而來針對性的改進自身產品的一個方法。簡而言之,就是要站在巨人的肩膀上去思考,以競品分析的形式去學習其他優秀的產品,從而解決自身產品所存在的問題。



2.為什么要去做競品分析


做一件事情之前一定要思考做這件事的價值和意義,只有你明白其重要和必要性,你才會知道該怎樣去做這件事情,而不是一提起競品分析就找一大堆專業框架和術語然后去填內容,這樣雖然產出了很多,但是關鍵性的內容點其實還是不清楚。


說直白點,你需要通過這篇競品分析去解決你工作或者創作中遇到的什么問題,帶著疑惑和目的去分析在我看來是更有效率的。因此特分為以下幾種情況:



因此我們要學會根據自己的不同需求,去制定不同的競品分析方案,讓分析的內容更聚焦。作為UI設計師來講,通過競品分析為自己的設計方案提供科學的理論依據,為自己贏得話語權,能夠更好地科學產出內容。



3. 如何尋找競品:


競品的選擇非常重要,如果找到錯誤的競品,那么你所分析的一切結論可能都引向了一個錯誤的方向。從而讓自己的努力都白費。那么怎樣才能找到合適的競品呢?分為以下三類情況


A.核心服務與目標用戶相同的產品(直接競品)


這一點是廣大設計師都能想到的范疇,也稱為直接競品。即提供的核心服務、市場目標方向、客戶群體等與我們的產品基本一致,產品功能和用戶需求相似度極高的產品 。往往是通過業務關鍵詞就能直接搜索到的競品,比如音樂類產品,那么直接在應用商店,或者通過專業網站(易觀千帆等)搜索關鍵詞“音樂”即可搜索出排行前列的競品。



B.目標人群不同,但功能模塊和服務接近的產品(間接競品):


這類競品可以找起來并不那么直接,可以通過對應功能去逆推擁有此功能的產品,并進行相關搜索。


如果想不到,可以通過“人人都是產品經理” “36氪“等關于產品資訊的網站進行查詢,甚至可以通過百度指數來進行發散思維,看一下跟你關鍵功能相接近的都有哪些。比如你研究外賣產品,除去餓了么和美團等直接競品,你還可以在分析用戶下單和購買流程中,去分析淘寶和京東等購物產品,也能得到一定的幫助。



C.目標人群和服務都不同,但交互或者視覺有可以參考的產品(關聯競品):


這里所選擇的產品,定位和領域可以都完全不同,但是你要從這款產品中得到啟發,從而讓你的產品能夠擁有其他競品不同的特點或者功能模塊。有一個很典型也熟知的的案例,就是衛龍辣條的設計案例,在衛龍推出之前,可以說是沒人會想到辣條會和高端扯上關系,但是衛龍就是借鑒與其領域完全不同的蘋果設計去做,從而在包裝上獨樹一幟,從而吸引人們注意取得成功。因此通過不同領域跨行業的產品有時候也可以找到不錯的思維方向。



4.如何進行商業分析:


進行商業分析,這里只提及到三個基本選項:商業背景、產品盈利模式以及用戶人群。通過這三個基本要素,你能對所研究的競品有一個大概的了解。當然深入了解還需要其他平臺(官網網站、36Kr等)來查閱更多的相關性資料,下列是對QQ音樂商業背景的簡要分析。




5. 如何進行交互分析:


我們在做交互分析時,我們需要進行必要的兩點分析:用戶路徑和交互維度。


用戶路徑:指用戶從某個開始行為事件直到結束事件的行為路徑,即用戶在使用某個功能的完整流程稱之為用戶路徑。我們需要去觀察和體驗在這一個完整路徑中涉及到的頁面、動效、視覺到底是怎樣的。就拿登錄頁來說,我們看看排行前列的競品是怎么做的。通過相應的體驗和對比分析,我們就可以找出這其中符合我們產品性質的最優解,從而提高我們的登錄注冊效率。



交互維度:交互維度和用戶路徑有所區別。這一層需要弄清楚產品的核心路徑,從而能夠更好的解析產品各個層面的邏輯關系,這就需要我們以用戶的角度去逐個體驗,整體聯系,隨后記錄下來。使用過程中我們也要去觀察APP中的交互小細節,怎樣分享的,怎樣展示的,比如音樂軟件進行截屏后和點擊喜歡按鈕后的反饋是怎樣的。




6. 如何進行視覺設計:


在進行視覺分析時,有一點需要注意,如果你需要詳細分析某一模塊,請用手機尺寸截圖后拿到設計軟件中進行測量,不要光靠眼睛觀察,很多時候的小細節我們只有在手動測量后才能感受到,比如控件的尺寸大小,間距的大小,以及顏色的取值,都需要精準測量后才能得出靠譜的結論。


怎樣進行視覺分析呢,我比較推薦從一個app 視覺語言最基本的五個維度去分析,即“形色字構質”



最近以音樂APP進行了一次競品分析,以QQ音樂APP來舉例進行分析(當然競品分析并不能只分析一個,而應該根據你需要的功能找多個競品進行對比分析,才能看到更多的維度,這里只拿一個舉例):




6.1 圖形元素的分析


首先我們以形進行分析,形即圖形元素,具體來講即LOGO和圖標。LOGO的更新在2018年10月以后已完成更新。新版的主要圖標整理歸納如下:



可以看到整體的圖標色調更加清新,造型設計更加圓潤,未選中狀態的線形圖標則采用4px的描邊,粗線形描邊讓整體界面風格顯得更加穩重的同時對用戶的干擾也較小。新版的圖標界面讓界面保持穩重的同時又富有活力。



6.2 色彩體系的分析


其次則是對色這一類別進行分析,顏色其實是對于品牌調性有很大的影響,比如一想起QQ音樂就知道主色是綠,一想起網易云音樂就知道主色是紅,對用戶的記憶點更深刻。通過截屏測量進行分析,得出整體的顏色如下(由于手機屏幕的色差原因,不可避免會有些許誤差)


從局部來看,分析顏色最重要的一點就是能夠弄清楚一個頁面中哪些元素用的是同一種顏色,觀察成熟的產品是怎樣用顏色(和字重)去區分層級關系的。



可以看到,用主色和三種輔色即可區分界面的整個層級關系,由此思考我們在制作自己的界面時也避免用太多的顏色,造成界面太過花哨。(顏色的具體色值可能有些許誤差,更重要的是看顏色層級關系)



6.3 字體體系的分析


接下來是字的分析,字即字體體系,可具體到字體和字號。設計中字體一般來講是蘋方,字號則根據設計師的定義來進行相應的規范。通過頁面的測量分析,可以拿到其具體的字號大小層級分析。(以下定義基于750的設計尺寸)



對于單個界面的分析,個人覺得要帶有思考的眼光去看待,比如在首頁中字號其實分配過多,像“更多”這種按鈕就不應該再分一個字號,字號太多整體就顯得有一點點亂了。雖然大廠的設計能在一定程度上給予我們參考,但并不是說他的每一個設計都是正確的,我們要學會用審視的眼光去看待出現在身邊的設計。



6.4 界面構成分析


界面構成即界面的元素大小以及他們的布局,例如有時候我們不知道一個標準的搜索框的長寬具體多少才是合適的,這就需要我們去分析其他成熟的商業產品,通過測量來知道具體的數值,從而督促自己進行正確的設計。這里選取了一個默認的首頁進行分析。



將一個頁面用右邊的形式進行原型化,去掉干擾可以把結構看得更清楚。間距之類的也可以通過軟件進行測量。可以看到QQ9.0版本的去線化設計,利用大間距來區分各個模塊,去掉了其他的干擾元素,整體的界面模塊看起來非常整潔輕盈以及富有呼吸感。統一的圓角化設計也讓整體設計符合流行趨勢,顯得更活潑。



6.5 質感與風格分析


關于界面的質感則是不同于扁平化的一個設計,即有的頁面在你看來細節會更豐富,層級會更深。界面質感通過漸變,疊加,透明度等不同方式來呈現,比如在QQ音樂中的會員界面卡片,則體現了微質感:



上方的會員卡片就加入了漸變和圖案疊加的方式來為卡片增加質感,讓整個界面顯得更精致。當然,疊加的圖案都是與內容相關的,不能為了疊加而疊加。包括下方的權益圖標,也采用了漸變的方式來讓整個圖標顯得更精致和有質感。我們再處理質感的時候也可以用這種方式來進行。


以上通過“形色字構質”來分析是屬于單個分析,相當于去拆解一個成熟產品中的每一個細節點,從而去學習和吸收。我們還要學會進行對比分析。把單獨某一個功能模塊拎出來,通過不同類型的對比從而歸納出這一類的設計方法和樣式,進而總結相應規律。


比如某一天你需要設計一個歌單列表,你此時就需要分析所有TOP排行的歌單列表,看看分別都有什么,從而總結歸納出結構來,再進行分類。



通過分析提煉,形成以下結論并進行相應的概念風格展示設計:



這樣,我們最后制作出來的方案才能涵蓋比較全的解決方案,從而能夠更好的助力設計產出。上圖的產出可能稍顯簡陋,但只是做一個簡單的示例,真正的產出應該更加有細節和落地,也要結合自己的工作需求做相應調整。



7.關注競品的版本迭代和用戶評價:



關注版本更迭,閱讀競品版本更新的詳細說明,你可以從中得出版解決了什么問題,提升了哪些體驗,添加了哪些功能,融合了什么流行的設計趨勢。產品迭代就是團隊通過用戶需求對某個產品不斷完善的一個過程。迭代對于一個產品來說是至關重要的,一個產品如果不想被對手超越,就必須不斷的對版本進行更新迭代。


除了關注具體的內容,你還可以觀察版本更新的提示信息,例如夸克瀏覽器在每次更新時總會用富有趣味的文案來打動你,從而讓你更加情愿去更新,提升新版的使用率。


用戶評價則更不用說,產品的最終服務對象就是用戶,用戶評價的重要性自然不言而言。不過我們要客觀辯證地去看待用戶的評價,吸收好的建議,屏蔽無腦的意見,從而能夠正確地迭代版本。用戶評價的查看可以使用App Store或者用戶評價網站(https://appbot.co/)去查詢。



總結


以上的篇幅較長,看下來可能會有一些累,那么此篇文章提及到的點在這里回顧一次:


1.競品分析的定義-站在巨人的肩膀上去學習;

2.為什么做-基于自己的目的去進行對應的競品分析,分析的最終目的是解決自己在設計過程中遇到的問題;

3.競品分析分為三個層面:視覺分析、交互分析以及商業分析;

4.怎樣進行商業分析(商業背景、盈利模式、用戶人群);

5.怎樣進行交互分析 (用戶路徑、核心路徑、交互細節);

6.怎樣進行視覺分析 (從“形色字構質”五個維度去分析以及如何對比分析應用);

7.競品的迭代和用戶評價的重要性。


自己有一個小習慣,看完每一篇文章,總會告訴自己一定要在腦海里回顧一遍,思考一下這一篇文章到底有什么觀點是自己之前沒有想到的,哪怕只有一點是沒觸及到的知識盲區,那么這篇文章之于自己就是有意義的。所以希望大家看完能有些許收獲那便是最好的了。


寫這篇文章的目的是給自己的競品練習做一個總結,以輸出倒逼輸入是一種比較有效的學習方法。但基于自己的水平有限,在某些分析的地方仍然存在不足和疏漏之處,希望大家諒解并及時交流。感謝大家看到這里,希望大家每天都進步~


轉自:站酷-進擊的M 

藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務。


如何更好的使用彈窗?

鶴鶴

彈窗在設計中運用的非常廣泛,基本上每個應用都會涉及到。恰好這段時間我也在整理公司設計組件這一塊,所以就想總結分享一下


設計師都會使用彈窗,但對于彈窗背后的分類及運用可能還不是特別了解,在寫這篇文章之前,我查看了很多應用及資料,所以下面會有大量的案例,相信大家看完可以對彈窗的認識更明確,做設計規范的時候也能有自己的想法。


現在的彈窗分為兩種,一種是模態彈窗(重提示),一種是非模態彈窗(輕提示)。

常見的模態彈窗:Dialog/Alert、Actionbar、Popover/Popup

常見的非模態彈窗:Toast/Hud、Tips、Snackbar、



Dialog/Alert  對話框

對話框是我們常用的彈窗,安卓開發語言是Dialog,iOS開發語言Alert,它通常出現在頁面的中間,對話框/警示框的類別非常多,對用戶的干擾比較大。前面之所以說模態彈窗是一種重提示,是因為它需要用戶主動觸發選擇才可以繼續當前的操作。


① 信息-選擇確定

特點:這類彈窗通常是一些系統功能的授權、版本更新、消息通知、重要提示等,通常只有1~3個主按鈕,只需要用戶進行簡單的選擇。


下圖舉例分析:

iOS詢問是否刪除APP,就屬于重要提示彈窗,它一般會用在像刪除、確認提交...一些比較重要的功能操作中。

小紅書的這個是否允許使用網絡彈窗,大家一定在許多APP中都見過,這屬于一個系統自帶的授權彈窗。

馬蜂窩與天貓的消息提醒彈窗,一個屬于初次使用APP時,系統自帶的彈窗,一個屬于使用后期APP為了推送消息,主動提示你開啟消息通知。

有錢花和愛奇藝的版本升級彈窗,都屬于偏運營類的彈窗,這一類的彈窗通常會弱化暫不升級的按鈕,突出升級主按鈕。




② 信息-輸入勾選

特點:這類彈窗通常是輸入一些比較少的信息或者勾選信息,常用于備注輸入、規格選擇、分組選擇等,通常只有確定和取消兩個按鈕。


下圖舉例分析:

微博對于已關注人的分組及備注,都屬于信息輸入及勾選類彈窗,操作通常都比較簡單。




③ 信息-傳達展示

特點:這類彈窗通常是一些廣告、紅包優惠、節日活動等一些運營類彈窗,主要是吸引用戶點擊及參加活動,這類運營彈窗通常會設計的比較吸引人,造型各異,會突出領取、查看等大按鈕,弱化關閉按鈕。


下圖舉例分析:

拼多多和餓了么這類的紅包優惠彈窗,就不多說了,大家都懂,它們最主要的目的就是吸引用戶點擊,提升購買率。

美團的變黃送好禮彈窗,屬于一次比較大的品牌升級,它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動效設計都非常清晰,視覺感很強。

支付寶的這個猜世界杯贏螞蟻積分的彈窗,屬于活動彈窗,它的整體設計非常貼合主題。




Actionbar操作欄

Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出,它的操作及信息會比對話框類型的彈窗更多更復雜。這種當前頁面的下拉彈窗好處就是,可以讓用戶清楚的感知當前的操作,比跳轉到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。


① Action Views操作視圖

特點:這類視圖彈窗通常占屏比較多,以文字、圖標等形式展示各種功能,也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出,不太強調歸屬,大多出現在購買、支付、分享等場景。


下圖舉例分析:

百度網盤的這個+號擴展彈窗比較特殊,它也可以說是浮層,占滿整個屏幕,它最吸引人的還是它的小動效。

京東購買時的彈窗和支付寶付款時的彈窗,都是比較典型的,在各種電商產品及付款頁面用的非常多。

轉轉這個的鍵盤與輸入為一體的彈窗,設計的非常人性化,讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。

網易云音樂的分享彈窗就是典型的以文字與圖標來展示功能的。

微信讀書的底部閱讀設置彈窗,比較特殊,為了使用戶沉浸閱讀,它是比較隱藏的,而且非常輕量化。


undefined



② Action Sheets 操作列表

特點:操作列表相對于操作視圖,它更單一。主要是以文字展示功能按鈕,重要敏感的功能操作一般會用主題顏色或紅色顯示,主要運用在一些日常控件、功能選擇、刪除、保存等場景。


下圖舉例分析:

Keep的選擇日期,屬于iOS原生控件,非常常見。

淘寶的選擇地址彈窗,整個展示的非常清晰全面,而且用戶每選擇一項,就會有相應的顯示。

支付寶和天貓超市的兩種列表彈窗,就不多說了,簡單的功能選擇都會采用這種。




③ 抽屜式彈窗

特點:這種抽屜式彈窗一般從左右兩邊彈出,經常運用在一些導航擴展和目錄展示中,它能承載比較多的信息,基本上都是用來放一些不太常用的功能。


下圖舉例分析:

微信讀書及一些其他閱讀類產品,由于目錄很長,而且一般是從上到下瀏覽的,所以基本都采用了這種抽屜式彈窗。

小紅書的這個抽屜式彈窗,以圖標和文字的形式展示了一些不是很常用的功能,為我的頁面節約了不少空間。




Popover/Popup 浮層

Popover是ios的開發語言,popup是安卓的開發語言,浮層是指,用戶點擊某個功能后浮出一個臨時氣泡對其作出補充,它通常會伴隨著半透明的遮罩或者投影襯底,用戶需要點擊功能區域操作,或者點擊空白處取消,才能進入下一步操作。它與上面操作欄的最大區別就在于,它更強調歸屬,可以出現在頁面的任何地方,而操作欄一般只出現在底部,不強調歸屬。


① 指向浮層

特點:這類的浮層一般伴隨有小三角指向,強調歸屬。氣泡里面的功能通常以單一的文字或文字與圖標結合的形式來展示,主要運用在頂部加號補充、復制、分享轉發等場景。


下圖舉例分析:

支付寶和美團的頂部加號補充浮層,展示形式是差不多的,只是UI樣式不一樣,一個是白色氣泡黑色半透明遮罩,一個是深灰色氣泡。

微信讀書和微信的選擇文字氣泡,在文字復制中很常見,通常會與其他轉發收藏小功能一起出現。




② 導航篩選浮層

特點:所謂導航篩選,自然是與導航分不開的,再加上浮層是比較強調歸屬的,所以它通常會與導航連在一起,一般出現在頂部。


下圖舉例分析:

美團的導航篩選,因為選項及開關很多,所以它的底部會有兩個主按鈕,一個完成,一個重置。

餓了么的這個只有一個功能選項,所以它一般是直接選擇就收起浮層了。




③ 引導浮層

特點:引導浮層的作用就是引導用戶更好的使用產品及交互,降低用戶的學習成本。它通常會出現在用戶首次進入APP的時候,一般只會出現一次,點擊空白位置或我知道了浮層就會消失。


下圖舉例分析:

QQ音樂與微醫的引導浮層都是用戶首次進入應用時,給出的功能搬家提醒浮層。





Toast/Hud 提示框

Hud是ios的控件名詞,Toast是安卓的控件名詞,它們都屬于一種輕提示,給予用戶及時反饋,讓用戶知道自己當前所處的狀態。

Hud一般只出現在屏幕的中央,以毛玻璃的樣式表現,內容展示比較富豐富。

Toast可以出現在屏幕任意位置,通常以黑色半透明的小框來表現,內容一般是純文字提示或者文字與圖標結合提示。


① 狀態提示

特點:狀態提示的Toast,它們一般都是反饋用戶當前操作的狀態,只出現1到2秒就會自動消失,場景一般是關注成功、密碼錯誤、音量提示、靜音、清除緩存等。


下圖舉例分析:

移動的屬于操作遇阻提示。

京東的屬于操作成功反饋。

iOS的音量控制屬于毛玻璃Hud。

微信的清除緩存屬于正在操作狀態。




② 按鍵提示

特點:按鍵Toast提示與狀態提示不同,它們一般自動出現或者點擊觸發才會出現,用于對功能點的補充說明,讓用戶對功能有更深的了解。


下圖舉例分析:

螞蟻森林里點擊樹木就會出現相關信息,當然它也會自動出現,點擊其他區域也會自動消失。 

知乎的消息標簽不僅有小紅點提示,還會在上方自動出現數字提示。




Snackbar

Snackbar是Android中的一個控件。它一般會在超時自動關閉或者在屏幕上滑動關閉,它沒有Toast那么輕量,設置出現的時間會比Toast長,而且可以點擊按鈕進行交互。


下圖舉例分析:

UC瀏覽器的Snackbar,是在提示用戶上滑,來查看更多內容,它需要滑動或者超時才能關閉。

京東的Snackbar,是在為用戶推薦商品,提示用戶點擊箭頭來查看喜歡的商品,它比UC瀏覽器多了一個關閉的按鈕。




Tips提示

Tips與Snackbar最主要的區別就是:Tips它是內嵌在頁面上的,而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發關閉按鈕或點擊進入下級頁面才會消失,一般用于需要用戶感知到的通知信息,或者植入廣告。


下圖舉例分析:

百度網盤在下載視頻時,就會出現一個Tips的提示,讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告,但它抓住了用戶的場景及心理,觀看廣告的幾率大大提升。

愛奇藝的Tips提示就屬于重要通知提示了,提示用戶VIP即將到期,續費可優惠,它們都有一個主按鈕及關閉按鈕,需要用戶主動觸發提示才會消失。


undefined



規范總結

目前的彈窗樣式非常多,你能想到的,你想不到的基本都可以技術實現。但這同時也帶來一個問題,那就是“不規范”。以上提到的彈窗種類,你只需要選擇符合你產品要求的幾個類型,最好不要在一個產品中運用多個同種類型的彈窗,否則后期會很難規范及組件化,當然運營廣告類彈窗可以另當別論。

轉自:站酷

藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。


拆解「開關」背后的設計細節

鶴鶴






如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


小小開關中的大學問



一.生活中的反面案例


故事要從我搬到新出租屋開始講起。半年前搬到新的出租屋后,房間里配置的洗衣機也比之前的大了一倍,而且操作區上分布著的密密麻麻的文字和按鈕讓洗衣機看起來更高級了,然而這種對它的好感并沒有持續多久。在我第一次使用它時,我將衣物放進洗衣機后,選擇好時間和洗滌方式,按下了啟動按鈕(如下圖右側白色按鈕)。



按下后洗衣機發出了“滴”的一聲,在我的認知里它應該是開始工作了,但是10秒過后沒有任何抽水聲和洗衣服的聲音。我疑惑地想:“是不是剛才并沒有成功啟動?”,于是再次按下了啟動按鈕,又是“滴”的一聲,但是這次我等了 1 分鐘沒有任何反應。之后的十分鐘里,我與這臺匪夷所思的機器“交涉”多次才理解了它的運行方式。這臺洗衣機啟動后需要等待大概十幾秒才開始運行,但是在我按下啟動按鈕后我得不到任何反饋或者提示來告訴我洗衣機已經開始工作了,所以疑惑的我又按下了一次啟動按鈕,然而令人崩潰的是這臺洗衣機的啟動和暫停按鈕是一體的,我第二次按下實際是進行了暫停操作,從而導致我第二次的困惑。


如果你是這臺洗衣機的設計師,你會怎么解決上述的問題呢?


可能你的心中已經有了答案,在回答之前我們先試著探究問題的本質。


人們不管是使用日常物品還是與機器進行交互,都會面對兩個階段的問題。一個是「執行」,一個是「評估」。執行時用戶需要理解如何操作,操作后可能會有什么結果。評估時用戶需要知道具體發生了什么。作為設計師我們要通過合理的手段幫助用戶解決這些問題,保證交互的可用性和流暢性。


通常我們會使用「意符」在用戶執行前告知用戶如何理解、如何操作、操作后會有什么結果。在評估前通過「反饋」告知用戶結果是什么。


對于意符的定義,在《設計心理學 1-日常的設計》一書中,作者唐納德·諾曼做出了這樣的解釋:


人們需要某種方式了解他們將要使用的產品或服務,某些標識表明的用途,會發生什么,有什么樣的替代方案。人們尋找蛛絲馬跡,尋找任何可以幫助他們應對和理解的符號。任何可能標識出有意義的信息的符號非常重要。設計師需要提供這些線索。人們所需要的和設計師必須提供的,就是意符。除此之外,優良的設計要求對產品的目的、結構和設備的操作與使用者進行良好的交代。那就是意符的作用。


簡而言之,意符就是在用戶使用前,機器為了讓用戶更好地理解和使用它而做出的提示。而反饋就更好理解了,機器在我們操作后做出的反應就是反饋,沒有反應同樣也是一種反饋。


下圖展示了機器與用戶如何進行交互。一個合理的設計可以讓用戶快速順暢地進行 1234 四個步驟進而完成任務,而糟糕的設計會讓用戶不斷重復這個流程。之所以會出現糟糕的設計,就是因為在步驟 1 和 3 沒有進行合理的意符提示和反饋提示讓用戶摸不著頭腦,進而導致用戶根據自己的猜測和過往經驗來進行操作,最后得到非預期的結果。



回到文章開始時的洗衣機開關問題,因為開始和暫停按鈕是一體的,在沒有任何意符和反饋的情況下我按下這個按鈕時我并不知道我啟動的是開始操作還是暫停操作。


我們可以就這個問題列出以下解決方案:

    1.增加文字提示,如啟動時在顯示屏上顯示“已啟動”,暫停時顯示“已暫?!?;

    2.增加語音提示,啟動開關后使用語音告知用戶“已啟動”或“已暫?!薄?/span>


當然解決方案有很多,每個人都可以根據場景想出不同的解決方案。


與現實機器的開關類似,在 UI 設計中我們如果進行開關設計也需要遵循相應的設計原則。


一個合理的開關設計主體包含的意符分別有兩種:

    1.表示當前狀態;

    2.表示操作后的狀態。

主體之外我們還可以添加輔助提示更加清晰地傳達意符和反饋。


接下來將介紹一些常見的開關類型和輔助提示類型,最后總結出體驗優質的開關設計方法。



二.開關類型


1.icon


在 UI 設計中最常見的開關可能就是 icon 了,即由單一的 icon 通過顏色或圖形的變化來表示開或關的狀態。因為交互設計從古到今并沒有統一的嚴格標準,所以到底是將開關 icon 的樣式設計為「當前狀態樣式」還是設計為「按下之后的狀態樣式」并沒有一個約定俗成的規則。然而,對比而言如今各類 App 設計中常見的且體驗比較好的方案還是將開關樣式設計為當前狀態樣式。如下圖iPhone自帶相機的實況照片開關icon就是顯示當前狀態。



然而,并不是說將開關樣式設計為當前狀態樣式做法普遍且體驗更好就可以這樣做了,有些開關的設計因為使用廣泛,已經在用戶的心智中扎根,我們如果強行改變反而適得其反導致體驗變差。最典型的就是視頻和音樂的播放暫停開關,他們表示的就是操作后的狀態而不是當前狀態,如下圖。



因此,大部分應用的開關類 icon 都是混用當前狀態和操作后狀態的,如下圖嗶哩嗶哩的視頻播放界面,播放暫停開關 icon 表示的是操作后狀態,彈幕開關表示的是當前狀態,而視頻鎖開關 icon 又變成了表示操作后狀態了。



是否統一倒不是關鍵,關鍵是我們是否能夠讓用戶理解相應的意符和反饋,目標是讓用戶在操作開關前能夠知道當前狀態是什么,操作開關后當前狀態是什么。


舉一個反例,下圖中的美顏相機的夜拍模式開關就沒有直觀表現出當前是開還是關,這種有歧義的設計可能讓新手用戶手足無措,可能本來未開啟的功能讓用戶誤以為已開啟,導致拍出來的照片不符合用戶預期。


由此我們可以看出,單一的 icon 開關如果沒有其他的輔助提示會造成意符和反饋的缺失,進而形成較大的歧義性,用戶會在疑惑中按照自己固有的心理模型和過往經驗進行判斷,體驗因此降低。



2.主體與開關分離(分離式)


上一部分舉了美顏相機的反例,其意符和反饋不明產生的歧義問題導致了用戶的困惑,但使用「主體與開關分離」(后文一致簡稱為“分離式”)的開關設計可以解決這個問題,它在意符和反饋層面都給予了用戶提示,可視性很強,完全解決了開關狀態無法被用戶感知的問題。分離式開關指的是,主體不再充當開關,只當做開關的名稱或icon,另外制作一個開關傳達意符和反饋,解決了當前狀態與操作后狀態混淆的問題,其通常的樣式如下圖。



如下圖,Faceu激萌不同于美顏相機設計方式就是將主體與開關分離,很清晰地傳達了當前開關狀態。



大部分App的設置頁面使用的開關都是主體與開關分離的方式,如下圖。



顯而易見,分離式開關直觀展示了當前狀態,在消除歧義方面優于 icon 開關,但同時缺點也很明顯,它占用了過多頁面空間并美感欠佳。




3.名稱變化


名稱變化指的是開關依賴于其名稱的變化告知用戶開關的當前狀態和操作,常見的類型如下:



部分 App 會將開關的名稱變化的方式統一,但也有部分 App 會將這兩類進行混用,即一個是表示當前狀態,一個是表示操作。


下圖為部分 App 的名稱開關,我們可以將上圖的開關名稱類型的序號對號入座。



表示操作的按鈕文字具有一定引導性,用戶容易感知和觸發,反之,表示狀態的按鈕文字由于不具有引導性,如果用戶沒有對這類按鈕形成使用習慣甚至難以意識到它是可點擊的,因此我們可以利用其特性進行逆向應用引導用戶的行為。比如在直播App中,我們希望引導用戶關注主播,又試圖避免用戶關注后又取關主播。我們就可以將“關注”制作為表示操作,文案寫為“關注主播”(屬于1.開啟...)。將“取消關注”制作為表示當前狀態,文案寫為“已關注”(屬于7.已開啟...)。前后的顏色進行區分,“關注主播”的按鈕制作得對比度強,吸引力大,“已關注”做得弱一些,讓用戶誤以為不可點擊,如下圖的斗魚直播。



然而,名稱變化的開關由于語言的模糊性,仍然造成了部分歧義。我們可以發現很多App的名稱變化開關設計中,都會在操作后加入其它提示來消除歧義(如:toast 提示),有些App則并未加入,因此在后文中會著重介紹輔助提示的優點和使用方法。



小結


icon、分離式、名稱變化,如果按照消除歧義的優劣排列的話,大概是 分離式>名稱變化>icon。


那這樣的話是不是應該把開關都換成分離式呢?當然不是,分離式雖然在意符和反饋的層面很充分地消除了歧義,但是其也有明顯的缺點,分離出的開關會占用部分空間,可能會影響美觀,因此我們需要根據需求和頁面結構選擇最適合的開關類型。


那名稱變化和 icon 類的開關如何消除歧義呢,我們可以通過添加下面介紹的輔助提示來解決。



三.輔助提示


1.環境暗示


環境暗示指的是用戶在操作開關前,開關以外的區域給予用戶的提示,這些提示本身存在于交互流程中并不是我們刻意加入的,用戶根據這些提示可以判斷當前狀態以及按下開關后的狀態。


例如在觀看視頻時,當用戶去按下視頻播放按鈕前,用戶會通過當前圖像靜止與無聲音這個環境暗示明白當前狀態是可能是視頻未播放,所以應該按下播放按鈕讓視頻播放。


再比如得到 App 的夜間模式,用戶可以通過當前界面的樣式判斷當前是否已經開啟了夜間模式,如下圖。



看下圖,如果沒有環境暗示,你能分清得到的夜間模式的開關哪個當前狀態是夜間哪個當前狀態是日間嗎?



因此,環境暗示的優勢是我們不需要進行另外設計其他的意符和反饋告知用戶當前狀態,環境給予的暗示已經足夠直觀。



2.模態/非模態提示


當用戶按下開關后模態和非模態提示可以在反饋層面告知用戶,讓用戶知道自己是觸發了開啟還是關閉。


常見的模態提示控件是「警告框(Alerts)」,非模態提示控件是「提示框(Toast)」,前者提示強度大,使用在一些危險、重要的反饋中,后者則使用在一些輕量的提示中。


介紹 icon 開關的部分我們提到了美顏相機的夜拍模式的 icon 開關狀態難以區分,但美圖秀秀在這里使用了頂部的非模態提示在反饋層面告知用戶當前狀態,很好地解決了這個問題,如下圖。



拉勾網的設置中,隱藏簡歷為危險操作,用戶極有可能由于開關名稱的歧義或由于疏忽觸發開關導致簡歷被隱藏從而錯過工作機會,因此此處設計了一個形式為警告框的模態提示來告知用戶當前狀態以及潛在風險。




3.輔助文案


輔助文案指的是在主體(主體可能是開關名稱、icon 或二者皆有之)之外另外放置一些文案信息來充當意符和反饋。下圖案例就是高德地圖的下車提示的開關,開關的主體是名稱,但是下面的一行輔助文案很清晰地傳達了當前的開關是什么狀態。




4.其他輔助提示


并不是所有提示都需要讓用戶看見,我們可以給予用戶其他感官的信號告知用戶當前開關的狀態。


在現實生活中,我們會通過鑰匙在鎖中扭動發出的聲音判斷鎖是否被打開,通過觸摸感受摩托車是否繼續震動判斷其是否已經熄火。


同樣,在 UI 設計中,我們也仍然可以使用聽覺和觸覺來消除開關的歧義。一個比較優秀的案例是高德地圖,當用戶打開下車提示之后,會出現語音提示“已開啟下車提醒”,它充分考慮到身處戶外的用戶可能并不能很方便地獲取屏幕上的視覺信息,因此使用語音的形式提示用戶。



小結


輔助提示很好地補充了開關在消除歧義上的不足,但我們需要合理使用否則就會產生不必要的視覺噪聲。如下圖,試想音樂的暫停播放開關如果加入的 toast 提示會怎么樣呢?由于我們已經可以通過“手機是否發出聲音”這個環境暗示獲知當前的開關狀態,如果再加入 toast 提示必然會出現不必要的視覺噪聲。




4.總結


介紹完開關類型和輔助提示后,我們如何將其應用到我們的產品中,設計出無歧義或低歧義的開關呢?


如果我們選擇的開關類型已經足夠的消除歧義,如分離式,我們就不太需要額外地增加輔助提示了。但是如果使用容易造成歧義的開關,我們可以按照(開關類型+輔助提示 1 +輔助提示 2 +......)的公式進行設計,即一種輔助提示不足夠消除歧義,可以使用多種一起。


舉個上文的例子,高德地圖的下車提醒開關的設計就是「名稱變化開關+輔助文案+語音提示」 的組合。


然而,任何設計都不是完美的,很多地方都需要我們做出妥協,雖然我們可以選擇合適的開關類型和輔助提示解決歧義問題,但隨之而來就可能出現其他問題。如分離式開關消除歧義效果很好,但是占用空間且不美觀,模態和非模態提示給予用戶的反饋比較強,但是可能打擾到用戶。


綜合上文提到的三款相機軟件作為案例,如下圖,我們可以發現在消除歧義的過程中避免不了對用戶造成的干擾或頁面美觀度的降低。我們很難去評判Faceu激萌、美顏相機和美圖秀秀哪個設計得更好,它們只是在易用性和美觀性之間找到了它們所認為的平衡點。具體如何設計,還是要具體問題具體分析。



那么我們應該如何進行取舍呢,在這里我們要考慮另外的因素。我們可以從以下角度分析,使用頻率、用戶人群、潛在風險等。


使用頻率:使用頻率越高,用戶對操作的熟悉度越高,歧義對用戶造成的理解與記憶成本就降低了,設計可以偏向低干擾和美觀度,反之使用頻率越低,歧義對用戶造成的理解與記憶成本升高,設計就應該偏向于易理解。


用戶人群:不同的用戶人群的風格偏好、認知能力是不一樣的。例如,我們要設計一款目標用戶為年輕人的相機產品,設計風格簡約,此時我們比較偏向的設計方案可能就類似美顏相機。反之,如果我們的目標用戶是中老年人,就要偏向于易用而犧牲美觀度,方案轉而偏向美圖秀秀或 Faceu 激萌。


潛在風險:開關的切換如果會導致潛在風險,設計就應該偏向于易理解,且需要使用模態提示告知用戶風險。例如用戶如果關閉了推送通知開關,會導致接收不到實時重要的信息通知,此時不僅要使用易識別的開關類型,還需要添加模態提示告知用戶風險。


我們可以將這些考慮角度放到雷達圖,如下圖所示,最終形成的面積越大我們越應該將按鈕制作得易理解、易使用,反之我們可以偏向于將開關制作得更美觀犧牲一些易用性??紤]到一些特殊產品的特殊用戶屬性,我們可以在下圖中增加其他考慮角度,其并不是一成不變的。



以上是本次對開關設計的思考,看似小小的一個開關,包含的學問卻不勝枚舉。作為一個互聯網產品設計從業者,一定要善于感受生活,用設計師細膩的內心去打量、洞察身邊的一切事物,發現美與不足,思考改進方法,并在這個過程中逐漸提升自我的價值。

轉自:站酷-Ballen貝林 


藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。


如何設計更好的表單

鶴鶴



如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


介紹表單設計里經常會犯的錯誤~

無論是注冊流程,還是信息輸入的界面,表單都是產品設計里最重要的組件之一。本文重點介紹了表單設計里常見的注意事項。不過這些只是通用的規則,實際應用中總有例外~



少于6個選項的情況,建議全部顯示

把選項內容放在下拉框里,不僅隱藏了選項內容,而且需要兩次點擊。如果大于5個選項,建議用輸入選擇器,如果超過25個選項,建議加上搜索功能~



輸入框長度可以暗示內容長度

輸入內容的長度決定了輸入框的長度。這種做法適合應用在一些固定長度信息的情況,比如銀行卡號、電話號碼、郵政編碼等。



標簽頂部對齊

相比左對齊,標簽頂部對齊的表單用戶完成率更高。移動設備屏幕大小有限,頂部對齊的效果也更好(標簽文案長度不可控)。然而在大量數據輸入時,還是可以考慮左對齊標簽,因為瀏覽更,還能節省高度。



不要把占位符當做標簽

用戶在輸入的時候就會看不到標簽內容是什么了。詳見Nielsen Norman團隊的總結。

*也可以參考Google的做法,默認把占位符當作標簽,輸入時標簽移動到輸入框上方



將復選框/單選框上下排列

上下排列方便瀏覽閱讀,橫向排列選項內容會被選框控件隔開。



指出錯誤在哪

告訴用戶具體哪里出錯了,以及錯誤的原因。



等用戶填完了再進行驗證

不要在用戶正在輸入的時候就去驗證,除非這能幫到他。例如在創建一個有字數限制的密碼~



不要隱藏幫助信息

盡量默認顯示幫助信息。如果信息太復雜,考慮在輸入時放在輸入框的旁邊。



不要用*星號表示必填項,標出選填字段

用戶不一定知道星號代表什么含義。還不如明確的標出哪些是選填字段。



標簽和輸入框成組

標簽和對應的輸入框形成一組,他們之間的間距要比組與組之間的間距小,這樣用戶不會困惑標簽是屬于上面還是下面。



按鈕的文案描述具體意圖

比如按鈕上的文字建議寫“注冊”,而不是“提交”。



主次按鈕有層次區分


關系近的內容成組

太長的表單讓用戶感到不知所措。有邏輯地分組能讓用戶更快地理解表單。

轉自:站酷-大秘密mimi

藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

視覺層級強力拆解

鶴鶴

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

自從上一篇發文得到一些發表方向,以后決定以個人獨特的總結以及符合商業的思維邏輯來寫作設計拆解的相關文章教程,前期我還是按大類去詮釋我的整個想法,看看大家的反饋,如果理解門檻還是有很大障礙,我在后期的文章中會再將文章細化出來。


拆解分類

拆解1、視覺面積的影響

拆解2、明度對比的影響

拆解3、色彩的影響

拆解4、視覺位置的影響

拆解5、豐富層度的影響

拆解6、其他(浮層、常用點、角標、動效)




拆解1、視覺面積的影響

視覺面積越大層級越高,而且與比較層的面積倍數有關,參考層如果為1級,那比較層的等級是由和參考層的倍數有關,大一倍那就為2級,大兩倍那就是3級,依次類推。這是美術基礎中的近遠的關系,越靠近的視覺點越大,越靠遠的視覺點越遠,這樣也很容易知道,越近獲得關注越高,越遠越低。

界面舉例我們告一段落,這里再說一下比較常遇到的文字視覺面積,這塊很容易被忽略,其實文字也是具有視覺面積的,而且有不同的視覺大小。接下來我會將所有可能性都拆解出來。


同字號大小,不同粗細層度的影響/文字的邊寬形成的格式塔大小就是文字面積,但不一樣的是,文字是線性結構,所以他不是實面,而是虛面,所以它相對于實面來說還是低一個等級,再說回到粗細的層級比較,越粗的文字他是越靠近實面的,所以這就能判斷越粗的文字層級越高這個道理。


同粗細,同字號大小,一個是有文字底塊,一個沒有,這樣有文字底塊的視覺層級會比沒有文字底塊的視覺層級要高,因為有底塊相當于為實面,這樣就比沒有文字底塊的層級要高了


同粗細,不同字號大小,這個不難理解,這個不存在實面虛面的概念了,因為都是一樣的粗細,但是這個格式塔大小不一樣,也就是說,格式塔越大的層級越高,字號越大的層級越高。


拆解2、明度對比的影響

明度對比越高的視覺點會比明度對比低的視覺點視覺層級要高,這里其實也是美術基礎中的空間的視覺差,越遠的物體越模糊(對比?。?,越近的物體越清晰(對比大)。所以對比大的層級會比對比小的層級會高。(這里插一句,色相也是有明度的,不同的色相也是有不同明度解析,這個可以運用到電商banner的配色上)

下面來看看文字和背景不同對比度對視覺層級的影響。我們將統一文字大小和粗細,背景為白色。


拆解3、色彩的影響 

有色的視覺點總會比無色的視覺點更吸引人,因為色彩也是美術的一類,給沒有色彩的視覺上色是提升視覺體驗的一步。

文字為例:同等大小同等粗細同等明度的字,有顏色的字體會有更大的關注點。

拆解4、視覺位置的影響

給界面一個橫軸和縱軸,從橫軸的左邊到右邊起視覺層級逐漸減弱,從縱軸的上到下邊視覺層級逐漸減弱。這是因為用戶閱讀習慣的問題,人們習慣從左上方開始往右邊閱讀,然后慢慢的往下讀取信息。

拆解5、豐富層度的影響

豐富層度越高的視覺層級越高,豐富層度越高的點信息量越大,越需要花時間停留。

文字為例:設計過的字體豐富層度會比默認字體高,所以有些需要強調的標題或者banner上的字體都是有精心設計過,為了拉開于界面的層級。

界面為例:界面首頁中的banner是豐富層度最高,其次是金剛區,再是標簽欄。

拆解6、其他

除了上訴的主要層級影響,還有其他一些特殊的影響,我這就說兩三個子吧。一個呢是給模塊直接加投影,硬生生的造成前后層級。還有角標的影響,在干凈的頁面中突然來個提示角標,例如微信有消息時的小角標。還一個就是用戶常用關鍵點,那個視覺層級整個產品中的最高層級,這個需要打破所有規則,這個是由用戶主動選擇的視覺層級點,例如電商軟件的搜索框,不管這個搜索框大小如何,層級怎么低都行,但對于用戶進來,第一個渴望的點就是這里,最后是動效的影響,每個動效就是一個互動,動的東西永遠比靜止的東西有活力更加吸引人。

圖片來源UIGREAT的作者JGM



總結


視覺層級的梳理可以很大幅度的提升視覺規范和用戶體驗,通過視覺層級的分析,可以從不同方面去詮釋復雜的頁面,也可以更好的去處理文本關系。

藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務


十分鐘認識界面設計中卡片式設計

鶴鶴


如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

正確認識卡片式設計,什么是卡片、總結卡片優勢、卡片正確設計知識通過設兩個案例進行講解,卡片在運用時的技法,望能幫助大家。



今天順叔和大家一起聊一聊卡片式設計,無論是WEB還是APP卡片式設計運用的比較多,很多UI設計師比較偏愛這樣的表現,卡片式設計會給人一種視覺上的享受,也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解,不能因為卡片式設計而卡片式設計,要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家,之后的幾篇系列文章中,順叔會從界面中比較趨勢的設計技法進行分析,希望能幫助到一些設計的小伙伴。


 

 



引言


卡片式設計這幾年比較流行,同樣這樣的設計表達也是個趨勢,應用在APP PC界面中至今還流行著,從事UI設計的都會知道卡片式設計,具有把內容整合模塊化,從視覺,個性化體驗上進行呈現,是設計師在設計時常用的一種表現,同樣也具有獨特的創新概念。

在一些項目中,一些客戶會說這個設計的APP界面有點太白,沒有層次感怎么辦,那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法,卡片式設計,可以解決在畫面中有個性化、變化、層次感的設計。那客戶又問什么是卡片式設計呢?

 

一、什么是卡片


無處不在的卡片設計具有個性的美感和很好的易用性,是以文字標題,小標題,圖形或圖片組成的模塊化,以塊狀形式規整的整合內容,讓內容更規整化,視覺上更個性化,也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢,而卡片在設計中也占用一定的優勢,讓整體更加的有層次感,在運用起來也比較方便,從視覺、體驗、交互都具有不錯的優點


設計效果圖展示

 


 

 

 

二、卡片設計優勢


1.趨勢

無論是大平臺還是小平臺的產品都會運用這樣的卡片式,跟風式設計趨勢,也讓卡片式設計成為了一個現在常用的優勢,不過卡片式設計的確有很好的效果

 

 

2. 層次感

具有一定的層次感,能在頁面版式中起到設計上的不同,個性化變化,頁面層次感區分強烈,能更好的體現提煉出內容

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

3. 規整化

卡片式設計以圖片、圖標 、LOGO、標題、整合到一起以塊狀的形式在界面中展示,更規整的排版呈現。雖然內容多會導致頁面亂,一個模塊包含內容之后就會規整不少,也給頁面設計上帶來了更好的視覺

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

4. 視覺體驗

卡片式給整個頁面會增加視覺上的體驗,特別那種大圖片卡片式更具有視覺上的沖擊力,背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感??ㄆ皆O計還是需要根據整個布局、產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。

不要為了卡片設計而卡片設計。

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

5. 易用性

卡片式設計在易用性和靈活性上比較高,在響應式設計中同樣應用的也比較多一些。能更好的有序排列。

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

6.簡約設計

簡約設計會更顯得品質,不需要過多的進行裝飾,哪怕就是一個白色的色塊,上面點綴有色彩的圖標和標題副標的變化,也會覺得顯得高大上,就算是一個帶有顏色的色塊卡片,也無須過多的設計內容上的標題 、圖標、按鈕就足以支撐起卡片

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

7. 交互效果

在卡片式的設計中會有一些動效交互,比如整體卡片放大、縮小 、左滑、右滑,可以整模塊化滑動縮放。整體效果增加了不錯的視覺交互體驗。

 

三、卡片正確設計知識


一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢,下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考,把一些表現手法加入到自己的設計中,適合才最重要??ㄆ皆O計還是要根據整個風格和整個布局而進行展示,在做進一步的對比和布局中以最好的效果為最終展示方式,總結分析幾個常見代表例子,如有不全請討論補充,下面就是一些例子

 

1.卡片式形式一

以色塊為主體并用現在比較流行的漸變色組成,其中四邊為圓角,同樣色塊下邊陰影襯托出主題,這個是在卡片中設計比較常見的運用手法,卡片的長高在設計中也是根據結構,內容功能而進行設定。正方形,長方形都是一個表現得手法,在色塊上面標題文字,圖標,圖形是整個卡片的布局的形式,無非就是左右布局和上下布局

應用場景:卡包、天氣、類別、入口、優惠劵,卡劵

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

此圖片來自于網絡


2. 卡片式形式二

這種形式共同點都是在頭部C位出現的卡片式設計,其中承載著標題,副標題,以及圖文版式,不難發現,如果圖片有顏色,那么下面是白色底,這樣在白底上面色塊的出現還是比較簡約凸顯卡片,如果背景有顏色,卡片也有顏色那么卡片的凸顯程度就不會那么強,圖二很多在會員卡設計中常用的比較多,也比較簡約,另外兩個共同特點背景有顏色,一般底部背景顏色就是整個界面的主色調,背景有色塊,上面就用白色卡片,卡片上方標題、文字、圖片呈現。只不過排版的方式有所不同而已,在很多APP設計中,這樣的表達也很多,通過主色調可以很融合的把上面的狀態欄,導航欄融為一體視覺上統一性,底部背景顏色延續下來,上面凸顯白色卡片,這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾,更能體現的上面的文字和圖片。

應用場景:會員卡,滑動卡片,圖文標題,入口

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

此圖片來自于網絡

 

3. 卡片式形式三

這種形式上圖下文字,或者是上標題,下圖片的形式,這種形式特別在圖片素材的選擇上尤為重要,有視覺效果好的圖片通過剪切,處理,合成,攝影,插畫等等方式,出現的圖片質量上好的話可以帶動整個設計的逼格,通過有效的圖片傳達,文字傳達,讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多,同樣也能體現出整體化和視覺化

應用場景:滑動卡片,圖文標題,入口,列表

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

此圖片來自于網絡

4. 卡片式形式四

大圖卡片式,一般以攝影圖片,插畫形式,文字壓與圖片之上,這樣的效果更具有沖擊力,也能顯得出比較潮流。體驗也很不錯,放大視覺,展示內容,圖片相結合,讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符,做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。

應用場景:列表,說明,入口,天氣

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

5.卡片式形式五

列表卡片設計,這種形式一般白色的卡片,上面標題,頭像,按鈕,扁平插畫形式體現,更多應用在一級頁面的下方內容,以及二級頁面的列表頁或者集合頁,整體弱化背景以白色為主,給予圓角及陰影承托出層次感同時,體現上面內容部分。每個模塊的單元體具有統一的視覺。

應用場景:列表,集合頁,入口

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

6. 卡片式形式六

大卡片式設計,表現為一塊特大的卡片式,上面會有標題,按鈕等信息,同樣表現出突出層次感,個性化設計的特質。體現出內容,一般背景有顏色上面卡片為白色,如下面背景為白色,那么卡片的形式也可色塊,在對比上有個反差,才能突出卡片的作用性。

應用場景:提示,說明,優惠劵,劵,入口

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

以上總結的幾種卡片的形式,在設計中可以根據情況而設計,卡片多樣化,布局多樣化,適合自己產品的才最重要,雖然在界面設計中常用的設計,但不要盲目的為了卡片而卡片套用設計,這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。

同樣在這些卡片中會有一些基本的共同的特點

 

共同的特點是

1. 四個角都是圓角

2. 根據潮流漸變色或白卡片

3. 色塊下的陰影,色塊下的陰影更能體現出層次

4. 卡片上面組成部分,標題,副標題,圖形,按鈕,圖片,頭像

5. 字體大小,字體顏色的變化

6. 一般卡片應用在會員,列表,說明,優惠劵,分類,類別,集合頁,歡迎頁等場景常見

 

三、卡片正確設計知識

 

為了講解一下,順叔隨便構思一個產品原型,而快速進行了簡單的設計,一個第一版,一個優化版,主要為了講解一下這個卡片設計一些問題,

以下此圖為構思的原型圖

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

經過分析原型圖之后開始進行設計,首先設計一個版本的,如果這樣卡片布局設計,這樣色彩搭配的情況下,會怎么樣呢,整體設計用了藍紫色為主色調,首先鋪藍紫色的色塊作為背景,然后上面放白色卡片,以至于卡片上詳細的內容,比如數字,圖形能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片,通過扁平化設計,以色塊為主設計一個藍色,一個橙色的卡片,上面并有圖標,頭像,以及標題,兩個顏色的對比,更讓視覺有沖擊力,整體看這個設計并沒有什么,但有個問題在于單個模塊拿出來效果的確都不錯,但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺,當打開這個界面的時候視覺落點在彩色卡片上,那么這個整體設計上就出現了問題,上面的數據,白色卡片其實是比較重要的,而且整個畫面都是卡片毫無設計上的變化,那么只能在這個基礎上在進行優化,其實大家在做設計的同時也這樣,在考慮功能模塊前提下,用戶體驗,也要考慮視覺體驗,那么視覺從哪方面來,色彩、層次、版式等等方面。那么能不能在進行一下優化呢,其實還是有空間在進行優化。(以下圖為第一版)

 

設計第一版

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

根據上面的設計在進行優化,同樣保留白色卡片部分元素,在卡片與卡片之間放一些顏色的圖標,這樣更好的給功能上快捷入口,也能給卡片設計增添了變化。使得整個畫面更靈活

雖然白色卡片,但有一些色彩的點綴,也讓白色卡片活躍起來,把顏色的卡片改成白色卡片,從上到下的版式舒服多了,也沒有那么跳。整個風格更簡約,同時功能也更全面。


調整后

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

從原型圖,在到設計第一版,在到優化調整之后,證明一點,卡片不要因為卡片而套設計,反而會失去效果,考慮功能模塊,用戶體驗,視覺體驗也一定讓整體舒服。一直都說,繪畫中需要有主有次,設計中也一定要有主,有次的進行設計。這樣層級關系才能更清晰。

但這些條件一定是從,體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計,前期的進行思考,邏輯清楚了,在進行設計的時候會更加的順暢??ㄆ皆O計,大家都在應用,希望這個文章能給大家帶來一點點知識點,那就不枉費我在熬夜寫這篇文章。

不為別的,只是一個喜歡分享的肉團子。這篇文章就寫到這里,如果喜歡請給個贊吧。如內容有沒說到的地方,各位可以進行補充,以上兩個圖你稀罕哪個呢?

 藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://www.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
亚洲永久免费观看| 亚洲新中文字幕| 美女扒开尿口让男人操亚洲视频网站| 69久久夜色精品国产69| 亚洲热线99精品视频| 日韩视频免费在线| 欧美色视频日本高清在线观看| 国自产精品手机在线观看视频| 日韩免费电影在线观看| 亚洲精品丝袜日韩| 欧美午夜视频在线观看| 最近2019中文字幕第三页视频| 欧美精品第一页在线播放| 国产一区二区三区高清在线观看| 亚洲精品国产精品久久清纯直播| 亚洲aⅴ日韩av电影在线观看| 日本中文字幕久久看| 原创国产精品91| 国产91久久婷婷一区二区| 色久欧美在线视频观看| 日本精品视频在线| 永久555www成人免费| 日韩av免费一区| 5566成人精品视频免费| 中文字幕亚洲欧美在线| 亚洲精品欧美日韩专区| 最近2019中文字幕第三页视频| 日韩av在线电影网| 5566日本婷婷色中文字幕97| 精品欧美国产一区二区三区| 国产精品黄页免费高清在线观看| 亚洲欧美日韩天堂| 久久久久久91| 精品国产乱码久久久久酒店| 国产精品亚洲аv天堂网| 最近2019中文字幕大全第二页| 久久视频中文字幕| 国产精品欧美日韩久久| 国产精品美女网站| 日韩精品在线电影| 国产欧美va欧美va香蕉在线| 亚洲人午夜色婷婷| 欧美性理论片在线观看片免费| 97av在线播放| 国产精品入口日韩视频大尺度| 中文在线资源观看视频网站免费不卡| 国产三级精品网站| 夜夜嗨av色综合久久久综合网| 岛国av一区二区在线在线观看| 国产精品国产自产拍高清av水多| 91av国产在线| 国产日韩欧美另类| 国产精品久久久久久av福利| 在线电影av不卡网址| 岛国av午夜精品| 精品人伦一区二区三区蜜桃网站| 欧美性受xxxx黑人猛交| 欧美激情综合色| 91日韩在线播放| 激情懂色av一区av二区av| 亚洲福利在线视频| 国产成人综合一区二区三区| 中文字幕亚洲综合| 欧美中文字幕视频在线观看| 久久99久久99精品免观看粉嫩| 久久免费精品日本久久中文字幕| 中文字幕亚洲一区在线观看| 亚洲片在线资源| 欧美性猛交xxxx乱大交蜜桃| 亚洲国产另类久久精品| 亚洲一区中文字幕在线观看| 久久国产精品亚洲| 91欧美精品成人综合在线观看| 久久精品国产2020观看福利| 亚洲国产精品成人va在线观看| 2019中文字幕在线观看| 欧美激情第1页| 国产精品成人av性教育| 久久99精品国产99久久6尤物| 欧美激情一二区| 亚洲国产欧美一区二区三区同亚洲| 日韩中文字幕不卡视频| 亚洲天堂日韩电影| 欧美老女人bb| 日韩一中文字幕| 日韩av电影手机在线| 欧美重口另类videos人妖| 欧美巨猛xxxx猛交黑人97人| 伊人伊成久久人综合网小说| 亚洲视频欧洲视频| 国产欧美欧洲在线观看| 欧美日韩国产二区| 欧美性受xxxx黑人猛交| 97色在线观看| 日韩大片免费观看视频播放| 日韩电影免费观看在线观看| 成人黄色影片在线| 欧美日本中文字幕| 久久久久久高潮国产精品视| 九九精品在线播放| 92国产精品久久久久首页| 亚洲综合日韩中文字幕v在线| 欧美精品videos性欧美| 亚洲高清免费观看高清完整版| 日本一区二区三区四区视频| 成人精品在线观看| 中文字幕不卡av| 国产精品午夜一区二区欲梦| 国产精品久久一区主播| 亚洲国产精品嫩草影院久久| 日本高清不卡在线| 热久久99这里有精品| 97精品在线视频| 亚洲经典中文字幕| 成人观看高清在线观看免费| 国产精品高潮视频| 97久久久免费福利网址| 日韩中文字幕在线视频播放| 性色av香蕉一区二区| 久久综合国产精品台湾中文娱乐网| 97视频在线观看视频免费视频| 日韩国产欧美精品一区二区三区| 色老头一区二区三区在线观看| 欧美亚洲另类制服自拍| 国产精品一区av| 成人免费大片黄在线播放| 久久久精品中文字幕| 久久综合88中文色鬼| 亚洲男人的天堂在线| 中文国产亚洲喷潮| 成人av色在线观看| 亚洲美女中文字幕| 欧美精品在线极品| 91在线国产电影| 精品国产一区二区三区久久狼黑人| 91精品视频大全| 最近2019中文字幕mv免费看| 成人黄色免费在线观看| 韩国视频理论视频久久| 68精品久久久久久欧美| 精品久久久久久久久久久久久| 海角国产乱辈乱精品视频| 欧美专区福利在线| 国模视频一区二区| 国产精品第一第二| 欧美午夜精品久久久久久浪潮| 亚洲一二三在线| 久久国产天堂福利天堂| 高清在线视频日韩欧美| 日韩二区三区在线| 欧美日韩性视频| 欧美成人在线免费| 91精品视频在线| 91久久精品国产91久久| 夜夜狂射影院欧美极品| 亚洲国产一区自拍| 国产精品青草久久久久福利99| 欧美裸身视频免费观看| 亚洲激情久久久| 伊人精品在线观看| 久久777国产线看观看精品| 欧美激情欧美激情| 国产精品视频男人的天堂| 欧美日韩性生活视频|