首頁

這不是EDM,這只是郵件回執(zhí)。

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

 回執(zhí)單的界面設(shè)計(jì);

 微信圖片_20190228174510.gif微信圖片_20190228174528.gif微信圖片_20190228174537.jpg微信圖片_20190228174540.jpg微信圖片_20190228174544.jpg微信圖片_20190228174548.jpg微信圖片_20190228174551.jpg微信圖片_20190228174554.jpg微信圖片_20190228174557.jpg微信圖片_20190228174600.jpg微信圖片_20190228174607.jpg微信圖片_20190228174613.jpg微信圖片_20190228174617.jpg微信圖片_20190228174620.jpg微信圖片_20190228174623.jpg微信圖片_20190228174626.jpg微信圖片_20190228174629.jpg微信圖片_20190228174632.jpg微信圖片_20190228174635.jpg微信圖片_20190228174637.jpg

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

百度行業(yè)首發(fā)《2019.AI人機(jī)交互趨勢研究報(bào)告》

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

人工智能已經(jīng)成為新一輪科技革命和產(chǎn)業(yè)變革的核心驅(qū)動(dòng)力,正在對世界經(jīng)濟(jì)、社會(huì)進(jìn)步和人類生活產(chǎn)生極其深刻的影響。其中,普羅大眾對人工智能感知最為深切的當(dāng)屬人機(jī)交互。語音交互、人臉識別等人工智能技術(shù)已經(jīng)化為應(yīng)用產(chǎn)品走進(jìn)了我們的生活。近日,百度人工智能交互設(shè)計(jì)院發(fā)布了一份聚焦于未來3年內(nèi)的AI人機(jī)交互趨勢研究報(bào)告(以下簡稱“《報(bào)告》”)。


該報(bào)告是百度人工智能交互設(shè)計(jì)院基于過去一年多對AI領(lǐng)域前沿技術(shù)、產(chǎn)品和設(shè)計(jì)的深入研究和洞察,結(jié)合產(chǎn)業(yè)界和學(xué)術(shù)界的經(jīng)驗(yàn)探析而來。AI賦能的人機(jī)交互革新了大眾的生活形態(tài),未來,AI加持的人機(jī)交互模式又會(huì)呈現(xiàn)出什么樣的態(tài)勢呢?


《報(bào)告》從“人機(jī)交互介質(zhì)”、“交互對象”、“AI應(yīng)用場景”、“人機(jī)關(guān)系”等方面總結(jié)了AI人機(jī)交互的八大趨勢。


趨勢一:語音交互技術(shù)進(jìn)步,更趨向人類自然對話體驗(yàn)


研究公司Ovum預(yù)測稱,到2021年,地球上的語音助手的數(shù)量會(huì)和人類一樣多,人們會(huì)越來越傾向于向語音助手尋求情感上的幫助。在AI人機(jī)交互中,語音交互技術(shù)在用戶終端上的覆蓋最為廣泛。


以智能音箱為例,有數(shù)據(jù)顯示,2018年全球智能音箱市場同比增長200%。其中,中國智能音箱市場增速達(dá)到罕見的5370%。谷歌、亞馬遜、蘋果等全球巨頭企業(yè)均加速了用語音交互技術(shù)開啟大眾智能生活的步伐。截止2018年12月31日,搭載百度對話式人工智能操作系統(tǒng)DuerOS的智能設(shè)備激活量也已超2億。


目前,語音交互技術(shù)已經(jīng)加速在智能家居、手機(jī)、車載、智能穿戴、機(jī)器人等行業(yè)的滲透和落地?!秷?bào)告》指出,未來隨著語音技術(shù)的不斷完善,語音交互的自然度將進(jìn)一步提升,并愈加趨向人類自然對話的體驗(yàn)。具體表現(xiàn)為:語音交互將從機(jī)械的單輪對話進(jìn)階到更流暢的多輪對話;合成語音更自然、真實(shí),接近真人水平;語音交互具備聽覺選擇能力,提升多人對話體驗(yàn);語音交互將支持多種方言,并針對細(xì)分群體進(jìn)行差異化設(shè)計(jì)。



趨勢二:人臉、手勢等通道更多出現(xiàn)在產(chǎn)品中,多通道融合交互成為主流交互形式


媒介學(xué)家雷吉斯·德布雷(Régis Debray)曾提出:“技術(shù)能實(shí)現(xiàn)不同區(qū)域里不同文化的人之間的連接”。隨著技術(shù)的發(fā)展,人與人之間的連接早已不成問題。當(dāng)前,AI技術(shù)更是拓展了人與智能體交互的通道。除語音交互外,計(jì)算機(jī)視覺技術(shù)的發(fā)展已使得智能體實(shí)現(xiàn)了通過識別人臉、指紋、面部表情、肢體動(dòng)作等人體信息,而更加快捷多元地與人類進(jìn)行交互。但是不同的交互通道在有其獨(dú)特優(yōu)勢和場景適用性外,也有一定的局限性。


《報(bào)告》認(rèn)為,未來,人與智能體的交互將融合語音、人臉、手勢、生理信號等多種方式,為人類打開更多的交互空間和應(yīng)用場景。具體表現(xiàn)為:人臉檢測及識別聚集更細(xì)維度的面部特征,拓展更多的交互空間和場景;空中手勢交互將成為新熱點(diǎn);觸控、語音、手勢、人臉最有可能成為多通道融合的主流通道;生理信號、觸覺、嗅覺等也將成為輔助通道融入多通道交互中。



趨勢三:智能體開始擁有明確的人設(shè)


近期,明星“人設(shè)”崩塌已成大家茶余飯后的熱門話題。但是你想過,智能體也將擁有明確的“人設(shè)”么?《報(bào)告》認(rèn)為,未來,用戶可以更加明顯地感知到智能體鮮活的“人設(shè)”。


所謂智能體的“人設(shè)”是指,用戶在與智能體的互動(dòng)過程中,根據(jù)感知到的綜合特征推斷出一種具有一致性的角色形象,一般由性格(如外向、善良等)、關(guān)系(如助手、朋友等)和基本屬性(如性別、年齡等)構(gòu)成?!秷?bào)告》指出,目前,智能體人設(shè)的設(shè)計(jì)和表達(dá)主要聚焦在語音(如音色、語調(diào)等)和語言層面(如表達(dá)方式),并且通常局限在部分場景、部分話術(shù)上,缺少一致性和全局感。


《報(bào)告》提出,未來,智能體人設(shè)將從語音、產(chǎn)品外觀、虛擬形象等多維度進(jìn)行設(shè)計(jì),甚至聘用編劇設(shè)計(jì)具有統(tǒng)一形象特點(diǎn)的話術(shù),利用混合現(xiàn)實(shí)(MR)、全息投影等技術(shù)將人設(shè)具象化,讓用戶在不同場景下均感受到智能體一致、明顯的人設(shè)特征。換句話說,未來,智能體的人設(shè)會(huì)具有很明顯的特征,但不會(huì)輕易崩塌。


此外,《報(bào)告》還認(rèn)為,打造用戶喜愛的人設(shè)也將成為企業(yè)在市場競爭中形成差異化、吸引更多用戶的重要方式。



趨勢四:智能體在被動(dòng)交互外,開始出現(xiàn)主動(dòng)交互行為


技術(shù)的發(fā)展雖然革新了我們的生活方式,但是長久以來,人機(jī)交互一直延續(xù)著人類“輸入”,機(jī)器“反饋”的循環(huán)模式,人類始終是主動(dòng)的,機(jī)器始終是被動(dòng)的。


《報(bào)告》認(rèn)為,人工智能賦予了機(jī)器情境感知和自主認(rèn)知能力,使我們有機(jī)會(huì)構(gòu)建機(jī)器主動(dòng)服務(wù)于人的交互模型。智能體出現(xiàn)主動(dòng)交互行為的具體表現(xiàn)為:主動(dòng)交互越來越“貼心”;主動(dòng)交互在“家”和“車”的場景下率先商用落地;主動(dòng)交互將提升公共場景下人機(jī)協(xié)同的效率。



趨勢五:智能體開始擁有情感判斷及反饋智能


2014年在北美上映的動(dòng)畫片《超能陸戰(zhàn)隊(duì)》中的機(jī)器人大白,以對主人公關(guān)懷備至的暖萌形象收獲了大批影迷的喜愛。觀影后的每個(gè)人都希望自己能夠擁有一臺如大白一樣忠心耿耿又溫柔體貼的機(jī)器人。令人欣喜的是,具有情感判斷和應(yīng)對能力的智能體正逐漸成為現(xiàn)實(shí)。


過去20年,在人機(jī)交互中,機(jī)器基于表情、文本等方式的的情感識別能力已有很大的提升。目前市面上出現(xiàn)的如情感陪護(hù)機(jī)器人、智能音箱、智能汽車等已經(jīng)初步具備一些情感識別能力,可以根據(jù)不同的場景、對象,進(jìn)行適當(dāng)?shù)那楦薪换ァ?


《報(bào)告》指出,未來,情感計(jì)算技術(shù)的提升及硬件升級將賦予智能體在“視”“聽”等方面更強(qiáng)的情感識別能力;同時(shí)智能體對于人類思維理解、情景理解能力也將更加完善,情感交互能力將更智能、更體貼。



趨勢六:AI對特定人群的關(guān)懷得到快速發(fā)展和應(yīng)用


人機(jī)交互的發(fā)展為兒童、老人、殘障人士等群體更便捷地利用機(jī)器獲得服務(wù),提供了充分可能。當(dāng)前市面上已經(jīng)出現(xiàn)大量針對兒童教育的AI產(chǎn)品。搭載DuerOS的小度智能音箱也針對以兒童為中心的家庭語音互動(dòng)需求,特別開發(fā)了兒童語音識別引擎,并定制兒童語音播報(bào)音色及對話邏輯,陪伴兒童一起成長。在養(yǎng)老領(lǐng)域,為老人提供陪聊、提醒等陪護(hù)服務(wù)的智能產(chǎn)品也被AI企業(yè)提上了日程。此外,少數(shù)AI產(chǎn)品也開始專注殘障、病患等更加細(xì)分的人群,如2018年11月,百度推出了AI眼底篩查一體機(jī),幫助患者快速篩查眼底疾病,為基層醫(yī)療帶去了極大的便利。


《報(bào)告》提出,未來,AI對人類的關(guān)懷將得到快速發(fā)展和應(yīng)用,覆蓋更加細(xì)分的人群和更深入的場景。為兒童,AI將從易于交互到提供心智陪伴的服務(wù);為老人,AI將縮小他們與科技的鴻溝,助推他們開啟品質(zhì)生活;為感官殘障人士,AI將幫助他們重獲對世界的立體感知;為特殊疾病人群,AI將提供預(yù)測、診斷和康復(fù)服務(wù)。



趨勢七:智能設(shè)備互聯(lián)互通,多場景銜接


以BAT為首的互聯(lián)網(wǎng)企業(yè),在2018年紛紛調(diào)整組織架構(gòu),轉(zhuǎn)向To B。巨頭重提產(chǎn)業(yè)互聯(lián)網(wǎng)戰(zhàn)略成為當(dāng)前市場新現(xiàn)象。此現(xiàn)象背后,正是AI、5G、云計(jì)算等新興技術(shù)的發(fā)展與升級。2018年的政府工作報(bào)告,進(jìn)一步強(qiáng)調(diào)了“產(chǎn)業(yè)升級的人工智能應(yīng)用”?!爱a(chǎn)業(yè)化”和“應(yīng)用化”成為未來幾年人工智能的兩大發(fā)展方向。


《報(bào)告》指出,隨著AI技術(shù)的進(jìn)一步成熟和落地,及其與大數(shù)據(jù)、IoT的結(jié)合,AI將從單品智能、獨(dú)立場景到互聯(lián)智能,場景融合進(jìn)階。智能設(shè)備將互聯(lián)互通,場景將進(jìn)一步融合,實(shí)現(xiàn)多場景銜接;VR/AR將促進(jìn)線上和線下、虛擬和現(xiàn)實(shí)的聯(lián)結(jié),未來,VR會(huì)加速拓展到更多的產(chǎn)業(yè)和實(shí)體,AR中的現(xiàn)實(shí)與虛擬將從簡單疊加到有機(jī)融合,實(shí)現(xiàn)用戶可以源自自然意識進(jìn)行人機(jī)互動(dòng)。



趨勢八:人機(jī)開始走向深度協(xié)同,信任構(gòu)建成為首要突破點(diǎn)


2018年6月,百度研究院發(fā)布并開源“神經(jīng)條件隨機(jī)場”的AI算法。該算法擁有強(qiáng)大的腫瘤病理切片檢測能力,可以大幅提升醫(yī)生閱讀病理切皮的效率和準(zhǔn)確率。人機(jī)協(xié)同即,通過人工智能增強(qiáng)人類智能,讓人工智能成為人類智能的自然延伸和擴(kuò)展。


目前,人機(jī)協(xié)同已在工業(yè)領(lǐng)域初步實(shí)現(xiàn),而隨著智能體從工業(yè)生產(chǎn)領(lǐng)域向商業(yè)服務(wù)、社會(huì)服務(wù)和家居服務(wù)領(lǐng)域拓展,人機(jī)將走向深度協(xié)同?!秷?bào)告》認(rèn)為,人機(jī)深度協(xié)同可以最大化發(fā)揮雙方優(yōu)勢,實(shí)現(xiàn)合作共贏。


而人們對AI的信任,是智能體全面進(jìn)入人類工作和生活,實(shí)現(xiàn)真正人機(jī)協(xié)同的前提。即,信任構(gòu)建成為了實(shí)現(xiàn)人機(jī)深度協(xié)同的首要突破點(diǎn)。與此同時(shí),AI倫理道德將更加細(xì)化,成為所有從業(yè)者需遵守的行業(yè)準(zhǔn)繩。AI行業(yè)的發(fā)展在帶給大眾便利生活之時(shí),避免算法歧視、保護(hù)人類隱私、尊重人類價(jià)值等也變成了從業(yè)者們亟需重視的問題。


最后,《報(bào)告》指出,AI時(shí)代的人因工程是一個(gè)真正的系統(tǒng)工程。而每個(gè)人機(jī)交互行業(yè)的從業(yè)者都需要擁有AI思維。最重要的是,中國的人機(jī)交互設(shè)計(jì)和研究者們將首次和發(fā)達(dá)國家站在同一起跑線上,我們有機(jī)會(huì)去定義這些體驗(yàn)標(biāo)準(zhǔn),而不再是追隨或遵守。


AI時(shí)代大門緩緩開啟,屬于中國和中國企業(yè)引領(lǐng)世界前沿的新時(shí)機(jī)已到來。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

覺得看國外作品沒用?用實(shí)戰(zhàn)案例幫你學(xué)會(huì)正確的審美姿勢!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

發(fā)好看的國外設(shè)計(jì)作品,總有人會(huì)評論你換成漢字試試。不過確實(shí)有很多人存在疑問:看國外的作品真的有用嗎?今天這篇超全面的教程,教你一個(gè)正確觀看優(yōu)秀作品的姿勢,保證能讓你換一雙看作品的眼睛。

之前聽一位同學(xué)在公司看國外作品學(xué)習(xí)的時(shí)候,公司的一個(gè)老員工發(fā)現(xiàn)了,就過來語重心長地和他說,你看這些東西沒用的,學(xué)不到東西,就是在浪費(fèi)時(shí)間等等,類似這樣的話說了一堆。聽到這個(gè)話題的時(shí)候就特別的親切,因?yàn)樵陂_始接觸設(shè)計(jì)的時(shí)候,和那位老員工的想法一樣。但是隨著對設(shè)計(jì)的理解越來越深,接觸的項(xiàng)目多了以后,這種想法慢慢就淡化了。

其實(shí)新人對研究國外作品這件事存在誤區(qū)是很正常的,畢竟應(yīng)用的文字不一樣,內(nèi)容多數(shù)我們也看不懂,把時(shí)間花在這上面給人的第一感覺確實(shí)有點(diǎn)不合適,哪有直接去看國內(nèi)的作品來得過癮。我們暫時(shí)拋開作品的數(shù)量與質(zhì)量不談,來聊聊這個(gè)話題。

我們平時(shí)在工作中完成的作品,里面基本都會(huì)包含文字、圖片或圖形、色彩這幾種基本元素,不管你做的是海報(bào)、logo還是畫冊都離不開它們,比如純文字類型的海報(bào)、公告、條幅。

純圖片形式的燈箱、畫冊、展板、品大片。

純圖形的UI圖標(biāo)、布展裝飾、logo徽章。

包括純顏色的手機(jī)屏保、背景墻之類的設(shè)計(jì),這些基本的設(shè)計(jì)元素,會(huì)在設(shè)計(jì)作品中單獨(dú)出現(xiàn)。

而更多的設(shè)計(jì)作品都是這幾種元素同時(shí)出現(xiàn)的結(jié)果,這些海報(bào)中,文字、圖片、圖形、色彩這幾種元素都占全了。注意,這些海報(bào)用的都是中文,屬于國內(nèi)的海報(bào)對吧?也能夠在這上面學(xué)到一些東西,那我們換幾張國外的作品看看,有什么不一樣的地方。

日本的、歐洲的等等都是優(yōu)質(zhì)的設(shè)計(jì)作品,我們可以來分析一下這些作品,風(fēng)格、技法、表現(xiàn)形式暫時(shí)可以拋開。

構(gòu)成他們的元素和國產(chǎn)海報(bào)有什么區(qū)別?都存在文字、圖片、圖形包括色彩,唯一的區(qū)別就是上面說的,不同的國家,使用的文字會(huì)不太一樣。那么這種文字上的差異真的會(huì)影響到我們對這個(gè)作品的研究、欣賞嗎?

答案很明顯,不會(huì)的。了解一些構(gòu)成知識的同學(xué)都知道,構(gòu)成版面的基本元素就是點(diǎn)、線、面,而文字、圖片、圖形包括色彩,他們在版面中整體來看,本質(zhì)上就是點(diǎn)線面的具象表現(xiàn)。那我們在欣賞這些作品的時(shí)候,完全可以把文字看成是點(diǎn)線面的存在,這樣的話也就沒有必要糾結(jié)他用的是哪個(gè)國家的文字了。

像這張國外的海報(bào),我們把這里存在的視覺元素標(biāo)注出來,他們本質(zhì)上就是這些東西。

國內(nèi)的也一樣,如果你看到的是這些東西,還需要糾結(jié)這是哪個(gè)國家的作品嗎?

版面中的所有視覺元素,都可以看成是點(diǎn)線面的存在。

來做一組實(shí)驗(yàn),這張英文海報(bào),我們把這里面的英文,替換成漢字。前后對比一下,海報(bào)的整體感覺,基本沒有出現(xiàn)什么變化。

再換一組,感覺基本一致。

再來一組,這回我們把英文替換成日文。類似這個(gè)版面構(gòu)成的形式,我們把文字替換成英文、漢字,變化也不會(huì)很多,依然很美觀。我們研究、學(xué)習(xí)、欣賞優(yōu)秀作品的時(shí)候,一定不能受到類似「看國外的設(shè)計(jì)沒用」這類思維的束縛,不然的話你會(huì)錯(cuò)過很多的。

不光從構(gòu)成的角度看這個(gè)問題是這樣,其實(shí)從設(shè)計(jì)發(fā)展的角度來看,也能得出同樣的結(jié)論。因?yàn)楝F(xiàn)代設(shè)計(jì)教育的起源來自德國的包豪斯,后來包豪斯的理念傳到了美國,又通過美國傳遍了整個(gè)世界。包括我們現(xiàn)在學(xué)習(xí)的平面設(shè)計(jì)體系,都是一脈相承的。從這個(gè)起源的角度來看,也不存在國內(nèi)、國外那么大的差別。都是一個(gè)門派的,只要做的好,那看誰的都一樣。說了這么多,應(yīng)該能看出來,我們是鼓勵(lì)大家去多看優(yōu)秀作品的。那么堅(jiān)持做這件事,又能得到什么呢?下面就來說一下,為什么要養(yǎng)成欣賞優(yōu)秀作品的習(xí)慣?

欣賞優(yōu)秀作品的習(xí)慣

先來看看這個(gè)習(xí)慣能給我們帶來的好處有哪些。

1. 提升審美

長時(shí)間欣賞優(yōu)秀的作品,會(huì)對我們個(gè)人的審美能力有質(zhì)的提升,幫助我們開闊眼界。眼高手低雖然是個(gè)貶義詞,不過這對于正在成長的我們來說是好事,最起碼能讓自己對自己的能力有一個(gè)比較清晰的認(rèn)知,知道自己做的不夠好,這樣會(huì)有動(dòng)力不斷的鞭策自己學(xué)習(xí)新的東西,把專業(yè)做到更好。

2. 培養(yǎng)興趣

如果我們對這個(gè)行業(yè)沒興趣的話,就算你再有設(shè)計(jì)天賦,也很難做好的。堅(jiān)持看優(yōu)秀的作品給我們提供持續(xù)的刺激,說不定哪幅作品就非常合你的胃口,勾起你的興趣,讓你花時(shí)間去研究。

3. 利用碎片化的時(shí)間學(xué)習(xí)

平時(shí)都很忙很累,再懶一點(diǎn),就沒什么完整的時(shí)間學(xué)習(xí)。這個(gè)時(shí)候如果能把碎片化的時(shí)間利用上,我們坐地鐵、坐公交、午休、睡覺前,包括上廁所的時(shí)候都是可以通過欣賞這些優(yōu)秀的作品提升自己的,這也是一個(gè)提升學(xué)習(xí)效率的習(xí)慣。

4. 為設(shè)計(jì)提供靈感和參照

這也是最重要的一點(diǎn),不知道你有沒有一接到項(xiàng)目,大腦就一片空白的感覺,是因?yàn)槟愀苫罡傻奶俚脑騿??不一定,有不少人每天不停的干活還這樣。其實(shí)出現(xiàn)這種狀況的主要原因就是看東西看的太少。很多好的形式我們見都沒有見過,怎么可能有印象,沒印象就更不可能把他們應(yīng)用到我們平時(shí)的工作中了。

所以說,我們想有好的想法、無盡的靈感,必須通過看優(yōu)秀作品這個(gè)成本低、見效快的方式來提升了,并且通過我們持續(xù)不斷的積累,得到的東西會(huì)越來越多,這是一種可以不斷提升自己的方式。

當(dāng)然了,欣賞優(yōu)秀作品也是有方法的,走馬觀花的看一大堆,最后能得到的可能只有審美的提升。就是感覺自己周圍的人做的東西都是垃圾,輪到自己做,發(fā)現(xiàn)自己也很垃圾。那為了避免這個(gè)悲劇發(fā)生在你的身上,下面分享一些欣賞優(yōu)秀作品的正確方法。

如何欣賞作品

我們欣賞作品的場景主要有兩種,第一種是有目的、有針對性的去看;第二種是沒有針對性的看。這兩種場景要看的東西差不多,細(xì)節(jié)上會(huì)有一些差異,我們先來了解一下有針對性的。一般來說,有目的有針對性指的是我們接到了具體的項(xiàng)目,但是這個(gè)項(xiàng)目以前沒有接觸過,需要了解一下別人都是怎么做的,然后帶著問題去尋找答案。

先從項(xiàng)目要求入手,就是看看你做的內(nèi)容是關(guān)于什么的,比如你要做日本壽司海報(bào),就去搜集這方面的作品。有些同學(xué)在搜索的時(shí)候很實(shí)在,要做關(guān)于壽司的海報(bào)就專門去找日本壽司的作品,這種方式的缺陷特別明顯,如果你要做的這個(gè)項(xiàng)目品類能找到的優(yōu)秀作品很多還好,不過多數(shù)情況下,優(yōu)秀作品是不那么好找的。這個(gè)時(shí)候把思路打開,選擇的余地就會(huì)大很多。

比如把日本壽司海報(bào)這個(gè)關(guān)鍵詞縮減成日本料理海報(bào),優(yōu)秀作品的數(shù)量會(huì)成倍的增加。

或者你要做的是海報(bào),那我們搜索的時(shí)候除了海報(bào),還可以找日式的包裝、畫冊。

網(wǎng)站、插畫等等作品,都會(huì)給我們帶來很多的思路。

數(shù)量的問題,這也是我們推薦看國外優(yōu)秀作品的一個(gè)原因,光去找中文的作品,在一個(gè)小品類里,很難找到足夠多的優(yōu)秀作品,一般的東西又沒有什么學(xué)習(xí)的價(jià)值,這時(shí)候加入國外的東西會(huì)讓我們的選擇余地更大、思路更廣。我們在搜集作品的同時(shí),連帶關(guān)于項(xiàng)目的一些圖片、文字材料都可以一起搜索,這樣能幫助我們更深的理解這個(gè)項(xiàng)目,學(xué)到更多的知識。

其實(shí)學(xué)習(xí)這個(gè)行為不是非得上學(xué)、看書才能學(xué),我們設(shè)計(jì)師在接觸各種項(xiàng)目的時(shí)候,通過與客戶溝通和查閱項(xiàng)目相關(guān)資料的過程也是在學(xué)習(xí),而且我覺得這種學(xué)習(xí)方式比我們單純的去上學(xué)讀書更深刻、實(shí)用。學(xué)到的東西也是在工作中甚至生活中用得上。

在找到這些優(yōu)秀作品以后,就可以嘗試去尋找這些作品共同的規(guī)律。

比如文字,如果文字屬于同一種題材的設(shè)計(jì),就算是不同國家的作品,我們也會(huì)在里面找到一些共同的特征。比如這些關(guān)于食品的字體,都會(huì)表現(xiàn)出屬于食物的那份圓潤的特征,這就是一種規(guī)律。這些規(guī)律性的東西總結(jié)出來,就可以嘗試應(yīng)用到自己的作品中。這個(gè)是學(xué)習(xí)大的規(guī)律,在這個(gè)大規(guī)律的基礎(chǔ)上,再去關(guān)注這里面的一些小的細(xì)節(jié)。想做好東西,稍小的細(xì)節(jié)也很重要。

再比如文字組的形式。文字的主要作用是傳遞信息,那么如何、美觀的把文字表現(xiàn)出來就要靠文字組了。一款作品做的是否優(yōu)秀,通過觀察文字組的處理是否細(xì)致,很容易看出來。信息的層級關(guān)系需要文字組來表現(xiàn),主標(biāo)題、副標(biāo)題、段落文字、時(shí)間、裝飾性的文字等等,這些文字可不是隨便扔到版面中就行了,它們都是通過設(shè)計(jì)師的處理,以文字組合的形式分布在版面的各個(gè)位置。

這里面每一個(gè)文字組合都是一個(gè)小的個(gè)體,比如很常見的日期的處理方式就有很多,像這張海報(bào)里日期文字組合的處理方式。

我們看到了覺得這個(gè)形式不錯(cuò),就可以記下來。那這些處理方式我們見過了,遇到合適的項(xiàng)目,換一個(gè)字體,或者調(diào)整一下數(shù)字,就能應(yīng)用到自己的項(xiàng)目中了,這些組合形式,你沒看見、沒有印象,自己拍腦袋是很難想出來的。

包括這種產(chǎn)品或圖形的表現(xiàn)排列形式,在做畫冊、雜志、頭圖、詳情頁、海報(bào)、展板的時(shí)候經(jīng)常會(huì)碰到。

自己排不好的話,就可以借鑒這些作品的形式和規(guī)律,再上手就輕松多了。如果你想做的是logo設(shè)計(jì),也可以去觀察優(yōu)秀作品的細(xì)節(jié),比如字體與圖形的比例、文字與圖形的間距是多少、文字與文字的間距如何控制,包括別人的創(chuàng)意點(diǎn)在哪,這些東西都是可以在別人的作品中學(xué)到的。

△ 《高手的平面課堂!解鎖LOGO設(shè)計(jì)新技巧》

就像異形同構(gòu)這篇文章,你看到了這類作品,就能回憶起這款 logo 使用的是異形同構(gòu)中的邊線同構(gòu)這個(gè)方式設(shè)計(jì)的,這種方式有哪些特點(diǎn)?如何能設(shè)計(jì)出類似的作品?教程里都講過了,這樣又把之前學(xué)到東西鞏固了一遍。

△ 《平面設(shè)計(jì)中,如何通過“抄襲”優(yōu)秀的作品成為高手?》

包括你看過的作品,他們的網(wǎng)格是怎么劃分的。使用的是什么樣的字體、構(gòu)圖如何都可以作為我們思考學(xué)習(xí)的方向,關(guān)于這幾點(diǎn)的詳細(xì)內(nèi)容,在之前的文章里很細(xì)致的講過,沒看過的同學(xué)可以去看看。

如果是沒有針對性的看作品,和上面的思考路徑是一致的,只不過是利用碎片化的時(shí)間來學(xué)習(xí)而已,更靈活一些,可以快速瀏覽,也可以觀察細(xì)節(jié)。如果你有收藏整理這些材料的習(xí)慣會(huì)更好,拿出來就能用,收集整理的越多、越細(xì)致,以后工作起來越輕松。

案例演示

所謂的創(chuàng)意就是我們把不同的元素重新發(fā)散、打散、重組呈現(xiàn)的過程。能夠保證有想法、思路的前提就是見識,要見過很多好東西,有了很深的印象以后才能憑借這些印象,學(xué)到的東西設(shè)計(jì)成新的、屬于你自己的作品。下面給大家演示一遍,我們看多了優(yōu)秀作品以后,再去做設(shè)計(jì)的時(shí)候會(huì)發(fā)生什么變化。

比如我們要用這些材料來設(shè)計(jì)一款網(wǎng)頁頭圖。

看到這些材料,可能會(huì)想到以前在哪見過,類似這種左右放置的圖配文形式。

產(chǎn)品價(jià)格的處理方式見過這樣的。

文字的形式全部使用黑體和無襯線字體,很多作品都是這樣處理的,放在一起很和諧。

還見過所有的文字組,都以左對齊的形式進(jìn)行排列的作品。

只要有印象,我們在設(shè)計(jì)的過程中就會(huì)下意識的往這些方向上靠,設(shè)計(jì)出的作品也會(huì)接近前面的那些規(guī)則。

在這些規(guī)則影響的基礎(chǔ)上,如果我們還見過襯線體搭配無襯線體的作品,圖疊字的形式,也能做出接近的風(fēng)格作品。

同樣內(nèi)容,不同的表現(xiàn)形式。你看過的優(yōu)秀作品越多,選擇的空間就越大。

我們再來看這個(gè)案例,一張藝術(shù)展的海報(bào)。

整體的骨架是這樣的,這種骨架布局的方式來自于左邊這個(gè)案例,類似的形式有很多。

主體文字組合的結(jié)構(gòu)是因?yàn)橐娺^類似的組合方式,在文字量近似的情況下,我們的文字組合也可以設(shè)計(jì)成類似的形式。

如果說我們設(shè)計(jì)的這個(gè)文字組合之間,距離稍遠(yuǎn),也有很多的作品會(huì)使用線的分割來解決這個(gè)問題。

包括其他文字組合的布局方式,也是參照這種軸線式的排列方法。文字使用的是宋體搭配西文襯線體的方式,中文的宋體和西文的襯線體具有類似的筆畫特征,基礎(chǔ)文字的統(tǒng)一性能夠得到保障。

將和主題相關(guān)的照片填充到劃分好的網(wǎng)格中,這里面使用的照片是同一張照片的不同局部,這種對照片重復(fù)的處理方式也很常見,在給版面增加變化的同時(shí),也會(huì)制造出一定的故事性,引發(fā)受眾的聯(lián)想。

一張海報(bào)從無到有的創(chuàng)作過程。

想設(shè)計(jì)出不錯(cuò)的作品,沒有大量的積累,對優(yōu)秀的作品沒有印象是肯定行不通的。

總結(jié)

怎么樣,是不是覺得多看看優(yōu)秀的作品還是有用的?不管是國外的、國內(nèi)的都一樣能學(xué)到很多。類似我是做電商的,看印刷品的設(shè)計(jì)沒用;我是做包裝的,看版式的作品沒用;我專門做商業(yè)項(xiàng)目的,看藝術(shù)類的項(xiàng)目沒用;我們公司是做金融產(chǎn)品的,那看其他行業(yè)的東西都沒用。遇到這種言論,我們可以冷靜的思考一下,是真的沒用,還是這個(gè)人,他不會(huì)用。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

排行榜的設(shè)計(jì)專題分享!

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

 排行榜干貨集合。微信圖片_20190225111836.jpg微信圖片_20190225111830.jpg微信圖片_20190225111813.jpg微信圖片_20190225111744.jpg微信圖片_20190225111840.jpg微信圖片_20190225111847.jpg微信圖片_20190225111913.jpg微信圖片_20190225112016.jpg微信圖片_20190225111950.jpg微信圖片_20190225112001.jpg微信圖片_20190225111935.jpg微信圖片_20190225111930.jpg微信圖片_20190225111926.jpg微信圖片_20190225111920.jpg微信圖片_20190225112023.jpg微信圖片_20190225112028.jpg微信圖片_20190225112121.jpg微信圖片_20190225112125.jpg微信圖片_20190225112129.jpg微信圖片_20190225112137.jpg微信圖片_20190225112149.jpg微信圖片_20190225112225.jpg微信圖片_20190225112222.jpg微信圖片_20190225112217.jpg微信圖片_20190225112213.jpg微信圖片_20190225112204.jpg微信圖片_20190225112154.jpg

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

用這3個(gè)方法選配圖,讓你的設(shè)計(jì)好看又能打!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

圖片相較于純文字具備更強(qiáng)的視覺性,所以選擇合適的好圖片就至關(guān)重要,下面為大家介紹三種思路。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。


為什么你的設(shè)計(jì)看起來很亂?用這3個(gè)方法搞定!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

為什么你的設(shè)計(jì)看起來很亂?在此之前我們先了解一個(gè)概念,我們怎樣看這個(gè)世界?

我們通過眼睛看世界,眼(又稱眼睛,目)是一個(gè)可以感知光線的器官。那么結(jié)論來了,我們看到這個(gè)世界,其實(shí)本質(zhì)就是看到了光。舉個(gè)例子,晴空萬里時(shí)我們可以看到很遠(yuǎn)很遠(yuǎn)的距離,反之在漆黑的屋子里,我們什么都看不見。

我們再來了解第二個(gè)問題,眼睛是怎樣成像的?眼睛通過調(diào)節(jié)晶狀體的彎曲程度(屈光)來改變晶狀體焦距獲得倒立的、縮小的實(shí)像。簡單來說,成像原理就是晶狀體來改變焦距,簡單一點(diǎn)解釋決定成像的重要因素是焦距。

你的設(shè)計(jì)看起來很亂,往往在這幾個(gè)方面出了問題:

  • 明暗關(guān)系紊亂;
  • 視覺焦點(diǎn)不明確,畫面沒有重點(diǎn);
  • 顏色雜亂,毫無章法。

明暗

明暗是指畫中物體受光、背光和反光部分的明暗度變化以及對這種變化的表現(xiàn)方法。明暗分亮面,灰面,暗面,以及明暗交界線,反光五大調(diào)子。單個(gè)物體明暗關(guān)系,暗部(反光,投影)>灰面>亮面。整體關(guān)系,靠近光源暗部>遠(yuǎn)離光源……畫畫核心畫的是光,遵循光照的自然規(guī)律即可。

去色檢查畫面明暗關(guān)系

從上至下三張圖依次是去色之后的黑白圖;運(yùn)用色相和飽和度給畫面賦予一個(gè)顏色的單色圖;原圖。

從下圖可以粗略得出結(jié)論,明暗(光源色)+固有色=色彩。調(diào)色之前先處理明暗,畫面顏色處理起來就非常簡單了。

最近火爆的國產(chǎn)硬核科幻片海報(bào),即使去掉顏色,黑白關(guān)系依舊明確清楚。好的設(shè)計(jì)即使沒有任何顏色,依舊是一副好的素描畫。我所理解的明暗關(guān)系與色彩的關(guān)系相當(dāng)于人體與衣服妝容的關(guān)系,對于一個(gè)美女是否漂亮,衣服妝容的搭配是你能達(dá)到漂亮的上限,然而你的臉型,身高,氣質(zhì),皮膚才是你能達(dá)到的驚為天人的基礎(chǔ)。

視覺焦點(diǎn)

視覺焦點(diǎn)究其概念,是讓我們的視線多停留幾秒的視覺元素,我們在畫面中第一眼就能看到的元素,畫面中的「主角」。

對畫面的視覺漏斗進(jìn)行分類:

  • 視覺焦點(diǎn):想看不見都很難,表現(xiàn)突出;
  • 重要元素:不經(jīng)意就能看見;
  • 輔助元素:仔細(xì)看看也能看見(類似買理財(cái)產(chǎn)品的最右下角的小標(biāo)注,「投資有風(fēng)險(xiǎn),理財(cái)需謹(jǐn)慎」)

高斯模糊法看視覺焦點(diǎn)

瞇著眼睛看形,睜著眼睛看細(xì)節(jié)。把畫面模糊調(diào)到一定程度,然后看畫面,如果畫面仍然能看清楚「主角」,那么畫面的視覺中心就是可以的。下圖畫面即使模糊了,我們依然能看清「男主角」沈騰以及飛馳人生四個(gè)大字,雖然原圖背景復(fù)雜以及其他裝飾物很多,依然不影響畫面的整體協(xié)調(diào)感,元素多且雜而不亂。

這上面的兩個(gè)例子看出,即使畫面模糊了,還是能清晰看到畫面表達(dá)的主題。那么模糊度多少合適呢,一般調(diào)整到上面所說的視覺漏斗中重要元素看起來剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由于光的照射產(chǎn)品漫反射的顏色,可以粗略按色彩元素分為光源色,固有色和漫反射產(chǎn)生的環(huán)境色。按照長期的實(shí)踐經(jīng)驗(yàn)來看,通常比較和諧的配色方式是除了產(chǎn)品的固有色之外,盡量把光源色和環(huán)境色統(tǒng)一在三種顏色(黑白灰不算顏色)之內(nèi),顏色比例盡量類光源色的主色調(diào)占據(jù)畫面百分之八十的面積,其他環(huán)境色作為補(bǔ)充。

色彩插件檢查配色

谷歌插件 palette.site 能分析出畫面顏色的狀態(tài)以及畫面中幾種主要的顏色,借助這個(gè)插件能很輕松檢查畫面是否超過了3種顏色(黑白灰不算顏色),如果超過三種顏色,那么頁面就需要做減法,或者將顏色統(tǒng)一在一個(gè)色系里,用明度以及飽和度區(qū)分。

插件的使用方法:可以直接使用瀏覽器下載,然后也可以在瀏覽器中選擇一張圖片,右鍵「在新標(biāo)簽中打開圖片」,然后再「點(diǎn)擊右上角的插件按鈕」分析顏色狀態(tài)。

從上面的兩個(gè)案例中可以看出,兩個(gè) banner 的顏色分析基本都在三種顏色以內(nèi),特別是下面的看起來比較復(fù)雜的顏色,總共分析的顏色也就紅黃藍(lán),其中藍(lán)色還是點(diǎn)綴色的存在。

今天的內(nèi)容就說到這里了,我們回顧一下重點(diǎn)內(nèi)容,解決畫面看起來很亂可以有以下方法:

  • 去色檢查畫面明暗關(guān)系
  • 高斯模糊法看視覺焦點(diǎn)
  • 色彩插件檢查配色

設(shè)計(jì)雖沒有近路,但可以少走彎路。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

 

界面沒層次,到底哪里出了問題?

ui設(shè)計(jì)分享達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

剛?cè)胄械男率衷O(shè)計(jì)師容易出現(xiàn)一個(gè)問題,接到需求就開始設(shè)計(jì),最后出現(xiàn)的界面和原型幾乎一模一樣,唯一的區(qū)別就是上了色,加了圖片和圖標(biāo),最后提交審核時(shí)老板反饋,“這個(gè)界面看上去太“平”了,你在這里加個(gè)背景色吧;這個(gè)圖標(biāo)太小,你再放大一點(diǎn);這個(gè)位置你在加點(diǎn)裝飾……”。


這主要原因還是界面沒層次導(dǎo)致的,雖然老板對設(shè)計(jì)不太清楚,但是關(guān)于業(yè)務(wù)邏輯我們的設(shè)計(jì)稿是否表達(dá)清楚,重點(diǎn)是否突出這個(gè)他最清楚了。


那么如何才能提高界面層次呢?我們可以從兩個(gè)方面入手,在設(shè)計(jì)前我們需要考慮突出內(nèi)容層次的方法;在設(shè)計(jì)中需要考慮突出視覺層次的方法。


目錄


一、突出內(nèi)容層次的方法

  • 將相關(guān)聯(lián)的元素進(jìn)行組合

  • 確認(rèn)內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面

  • 確認(rèn)重要內(nèi)容,將其差異化設(shè)計(jì)

二、提高視覺層次的方法

  • 利用線、面、留白將模塊進(jìn)行分割

  • 利用大小、投影、背景圖突出視覺層次

  • 利用顏色對比提高視覺感受

  • 利用文字對比提高界面的可閱讀性




一、突出內(nèi)容層次的方法


當(dāng)一個(gè)界面信息量比較大時(shí),層次感好的界面用戶進(jìn)來能快速的獲得想要的信息,同時(shí)最終達(dá)到產(chǎn)品的目的。而層次感差的界面用戶看半天也不知道要做什么,看一會(huì)也就走了。因此良好的視覺層級是界面成功的關(guān)鍵。在設(shè)計(jì)前我們需要將相關(guān)聯(lián)的元素進(jìn)行組合;確認(rèn)內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面;確認(rèn)重要內(nèi)容,并將其差異化設(shè)計(jì)。

1.將相關(guān)聯(lián)的元素進(jìn)行組合

在設(shè)計(jì)前,產(chǎn)品原型圖已經(jīng)將我們的元素進(jìn)行了分類組合,但是他們更多的是考慮邏輯、功能上的層次,而如何有一個(gè)清晰的內(nèi)容層次呢?設(shè)計(jì)師可以利用《格式塔心理學(xué)》中的接近性原則將相關(guān)聯(lián)的元素組合在一起,不相關(guān)的拉開距離,同時(shí)形成一定的規(guī)律和節(jié)奏,這樣會(huì)讓用戶閱讀起來更輕松。

       undefined     

需要注意的是,界面中的間距需要滿足一定的規(guī)律和節(jié)奏,比如模塊之間的間距大于標(biāo)題到內(nèi)容的間距;在內(nèi)容中不相關(guān)聯(lián)的內(nèi)容間距大于相關(guān)聯(lián)的間距,如下圖所示。              

?undefined     

天貓個(gè)人主頁的個(gè)人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容;最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。


京東金融的我的頁面用戶的資產(chǎn)信息排在最前面,他首先是遵循了用戶的瀏覽習(xí)慣,同時(shí)也是用戶想要看到的內(nèi)容,其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容,最后是福利大禮包排在第三位這也是產(chǎn)品想個(gè)用戶看的內(nèi)容。

2.確認(rèn)內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面

將相關(guān)聯(lián)的信息整理之后就需要確認(rèn)模塊的優(yōu)先級了,由于用戶的瀏覽順序是自上而下的,因此我們需要將優(yōu)先級高的模塊放到前面。


那么優(yōu)先級如何判斷呢?大家可以從三個(gè)方面去考慮,第一是遵循用戶的瀏覽習(xí)慣;第二是用戶想看的內(nèi)容;第三是產(chǎn)品想要用戶看的內(nèi)容,如下圖所示。

       undefined     

天貓個(gè)人主頁的個(gè)人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容;最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。


京東金融的我的頁面用戶的資產(chǎn)信息排在最前面,他首先是遵循了用戶的瀏覽習(xí)慣,同時(shí)也是用戶想要看到的內(nèi)容,其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容,最后是福利大禮包排在第三位這也是產(chǎn)品想個(gè)用戶看的內(nèi)容。

3.確認(rèn)重要內(nèi)容,將其差異化設(shè)計(jì)

在設(shè)計(jì)時(shí)我們需要知道,優(yōu)先級高的模塊不一定重要程度就高,因此我們還需要確認(rèn)模塊的重要層級,同時(shí)利用背景、布局等方式進(jìn)行差異化設(shè)計(jì),用起用戶注意,如下圖所示。

       undefined     

網(wǎng)易嚴(yán)選中的新人專享禮和品牌制造商直供就采用了差異化設(shè)計(jì),職工類模塊采用的是普通的宮格式布局,新人專享禮采用添加背景的方式,加深了模塊的縱深感,對比其他模塊更加突出。


大麥網(wǎng)中的特色模塊和其他模塊也采用了差異化設(shè)計(jì),特色模塊采用拼圖的方式設(shè)計(jì),其他模塊采用列表的方式進(jìn)行設(shè)計(jì),用戶進(jìn)入頁面首先就能夠看到這個(gè)模塊,提高用戶接受信息的效率。


土豆視頻個(gè)人主頁的列表部分也采用了差異化設(shè)計(jì),消息提醒、我的收藏、觀看記錄、我的緩存這四個(gè)用戶常用的功能采用宮格式布局,其他不常用的我的會(huì)員、客戶與反饋、設(shè)置采用列表式結(jié)構(gòu),這樣也能夠提高用戶操作速度。


二、提高視覺層次的方法


當(dāng)然內(nèi)容層級確定了顯然不夠,我們還需要考慮突出界面的視覺層次,這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢?在設(shè)計(jì)中,我們可以利用線、面、留白將模塊進(jìn)行分割;利用大小、投影、背景圖等突出視覺層次;利用顏色對比提高視覺感受;利用文字對比提高界面的可閱讀性。

1.利用線、面、留白將模塊進(jìn)行分割

大家記得在設(shè)計(jì)前我們已經(jīng)對界面中相關(guān)聯(lián)的元素進(jìn)行了組合,組合之后就可以利用線、面、留白的方式,將不相關(guān)聯(lián)的元素進(jìn)行分割,提高界面的視覺層次,從而提高用戶的瀏覽和操作效率。

       undefined     

線分割:是最為基礎(chǔ)的分割方式,其優(yōu)勢是占用空間小、分割感弱,多用于列表、Feed流中。需要注意的是,分割線顏色設(shè)置需要非常淺,避免模塊之間強(qiáng)烈的分割感,比如橘子娛樂的列表就是采用若隱若現(xiàn)的線,讓列表中的內(nèi)容更規(guī)整。


面分割:也可叫背景欄分割,其優(yōu)勢是占用空間小、可操作性高,同時(shí)能夠更好的區(qū)分不同模塊之間的關(guān)系,多用于模塊和模塊之間的分割,比如轉(zhuǎn)轉(zhuǎn)個(gè)人主頁的模塊采用面分割瀏覽性更強(qiáng)。


留白分割:是iOS11發(fā)布之后興起的以留白或間距的方式進(jìn)行分割,其優(yōu)勢是無強(qiáng)烈的分割感,界面清爽,多用于比較有規(guī)律或以大圖為主的模塊之間的分割,比如轉(zhuǎn)轉(zhuǎn)主頁下方的賣二手還錢、買實(shí)惠好貨等,其內(nèi)容部分都較為規(guī)則,采用該方式較為合適。

2.利用投影、大小、背景圖突出視覺層次

為了突出界面的視覺層次,我們還可以通過投影、大小、布局等增加界面的對比,從而突出重要信息。

       undefined     

投影:是界面對比較常用的一種方式,其優(yōu)勢是提升界面的空間感,改變視覺次序,通過投影大小的變化還可營造不同的空間關(guān)系,多用于卡片風(fēng)格的設(shè)計(jì)中,比如Keep均是采用卡片風(fēng)格的設(shè)計(jì),添加投影后讓界面視覺層次更突出了。


大?。?/strong>是大眾最為熟知的對比方式,其優(yōu)勢是通過大小對比能夠很快的拉開視覺層次,同時(shí)能夠很好的引導(dǎo)用戶瀏覽路徑,比如ofo黃色的大按鈕遠(yuǎn)遠(yuǎn)都能看見,該頁面就一個(gè)目的掃碼用車。


背景圖:往往不如投影和大小常用,但是它的使用可以將模塊從其他樣式中年凸現(xiàn)出來,多用于banner、推薦等重要模塊中,比如美圖秀秀的推薦模塊,該模塊可以說是美圖的核心模塊。

3.利用顏色對比提高視覺感受

顏色是最容易感知到的對比方式,通過顏色我們可以明確哪些是重要信息,在使用中我們可以通過色相、明暗、飽和度上進(jìn)行對比,其多用在按鈕、重要信息、導(dǎo)航、背景板中。

       undefined     

自如首頁上的租房、服務(wù)、旅行采用對比色進(jìn)行強(qiáng)調(diào)對比,進(jìn)入頁面用戶就能夠清楚這三塊是是界面的核心功能,同時(shí)引導(dǎo)用戶關(guān)注右側(cè)的具體服務(wù)信息。


淘票票首頁中的按鈕、引導(dǎo)提示、標(biāo)簽欄選中均用了紅色進(jìn)行強(qiáng)調(diào)對比,很容易引起用戶的注意,讓用戶看一眼就知道如何操作。


招商銀行首頁中的話題PK采用對比色進(jìn)行強(qiáng)調(diào)對比,很容易引起用戶操作的興趣。

4.利用文字對比提高界面的可閱讀性

文字的層次感往往和字體大小和明暗有關(guān),其中字體大小是提高文字信息層級的重要手段,在文字排版中如果文字之間的層次不清晰,那么一定是大小的對比不夠,在UI中字體大小對比往往在4-8px較為適合,如下圖所示。

       undefined     

當(dāng)字體大小對比適合之后就需要通過通過字體的明暗突出主要信息,弱化次要信息,從而提高界面的可閱讀性,如下圖所示。

       undefined     

在UI設(shè)計(jì)中我們往往都設(shè)定了字體規(guī)范,這樣不僅能夠達(dá)到設(shè)計(jì)統(tǒng)一,同時(shí)也有很好的對比性,常用字號為40, 36, 32,28,24, 22(px),比如優(yōu)酷的星球頁面,通過字體大小,顏色深淺的對比,讓用戶首先看到重要信息,弱化次要信息。

            

三、總結(jié)


在界面設(shè)計(jì)中為了降低用戶的理解成本,突出重點(diǎn)內(nèi)容,讓用戶使用起來舒適,就需要有個(gè)清晰的內(nèi)容層次和視覺層次。

在設(shè)計(jì)前我們需要考慮將相關(guān)聯(lián)的元素進(jìn)行組合;確認(rèn)內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面;確認(rèn)重要內(nèi)容,將其差異化設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

構(gòu)建設(shè)計(jì)師和程序員的共同語言

ui設(shè)計(jì)分享達(dá)人

從控件封裝、布局說明、標(biāo)注語言三個(gè)方面,指導(dǎo)設(shè)計(jì)協(xié)同開發(fā),共同建立項(xiàng)目框架和控件庫,規(guī)范設(shè)計(jì)方式和開發(fā)方式。

undefined


設(shè)計(jì)師拿到開發(fā)剛寫好的頁面時(shí),往往會(huì)眉頭一皺,這跟自己的設(shè)計(jì)稿差別有點(diǎn)大啊。在設(shè)計(jì)走查的時(shí)候才發(fā)現(xiàn),幾乎每個(gè)頁面都有大大小小的問題。從顏色樣式到按鈕組件、從元素尺寸到界面布局,都多多少少存在偏差。開發(fā)一般情況都是在完成功能開發(fā)后,才對頁面視覺進(jìn)行統(tǒng)一優(yōu)化,但是無奈需要優(yōu)化的地方太多太分散,成倍地增加了工作量。


那么能否制定一套協(xié)作方案,把固定的、通用的和可復(fù)用的元素或組件封裝起來,運(yùn)用在項(xiàng)目初期設(shè)計(jì)和開發(fā)的工作流程中。從而統(tǒng)一地把控設(shè)計(jì)項(xiàng)目中的所有可變元素,方便設(shè)計(jì)師和開發(fā)在項(xiàng)目中后期做各種改動(dòng),同時(shí)也利于項(xiàng)目的迭代升級呢?


這里我做了以下思考,歡迎大家一起來交流探討。



/目錄

一、寫在前面

二、控件封裝

三、布局規(guī)范

四、標(biāo)注語言

五、總結(jié)



一、寫在前面

UI設(shè)計(jì)要有組件化、模塊化、結(jié)構(gòu)化的思維。以各平臺設(shè)計(jì)規(guī)范為基礎(chǔ),從控件封裝、布局規(guī)范和標(biāo)注語言三個(gè)方面,構(gòu)建一套設(shè)計(jì)師和開發(fā)之間的共同語言。



/文字&文本


在封裝前我們先定義一下設(shè)計(jì)中最常用到的元素——文字。文字在UI界面中幾乎撐起了絕大部分內(nèi)容,它的功能包括但不限于標(biāo)題導(dǎo)航、內(nèi)容構(gòu)建、說明解釋、標(biāo)簽示意等等。把文字跟圖標(biāo)、背景等元素組合起來的時(shí)候,在界面中形成了更明確的意符。


(一)換行規(guī)則

文字在界面中的顯示方式可分為標(biāo)簽、短文本、長文本三種。標(biāo)簽和短文本一般情況下不換行顯示、如在特殊情況下會(huì)超過一行,則使用省略號顯示。長文本特指會(huì)換行顯示的文本。




(二)行高設(shè)定

各系統(tǒng)平臺都有自己默認(rèn)的字體行高規(guī)則,但是這些行高規(guī)則并不統(tǒng)一,比如iOS的字體行高對照表如下:

來源見水印


而且默認(rèn)的行高在展示長文本(多行顯示)時(shí),效果并不一定理想,甚至可能會(huì)很丑陋。所以我們需要制定統(tǒng)一的標(biāo)準(zhǔn)來規(guī)范各平臺的字體設(shè)計(jì)和開發(fā)規(guī)則。


解決方案:對于標(biāo)簽和短文本默認(rèn)設(shè)定1倍行高,長文本根據(jù)文本內(nèi)容和字號大小來設(shè)定行高,以達(dá)到最佳閱讀效果。

undefined

行高設(shè)定



(三)視覺間距

規(guī)范短文本行高,確保視覺間距等于實(shí)際標(biāo)注間距,才能保證開發(fā)準(zhǔn)確還原界面布局。

undefined

視覺間距示意圖




/特殊情況

有些控件的文本長度在少數(shù)特殊情況下會(huì)換行顯示,為了簡化適配過程,我們可以直接使用長文本來設(shè)計(jì)。

(一)Toast



(二)橫幅





/圖標(biāo)&切圖


圖標(biāo)在某些場景下可以無需文字說明,更直觀簡潔地表達(dá)含義。設(shè)計(jì)同一類圖標(biāo)時(shí)應(yīng)該保持視覺效果統(tǒng)一,視覺尺寸可以通過使用模板來進(jìn)行規(guī)范。

undefined

圖標(biāo)設(shè)計(jì)模版



為了保證同一組圖標(biāo)的影響范圍相同,我們在設(shè)計(jì)圖標(biāo)時(shí)首先設(shè)定視覺安全區(qū)域,然后加入透明度為1%的背景作為影響范圍圖層。切圖時(shí)需把影響范圍圖層包含進(jìn)去,不僅便于設(shè)計(jì)師規(guī)范所有圖標(biāo)的尺寸大小,也方便開發(fā)直觀獲取到圖標(biāo)的實(shí)際切圖大小。


圖標(biāo)設(shè)計(jì)示例




二、控件封裝

利用組件化的思維,將可重復(fù)利用的元素或者控件打包成固定的模版,稱之為封裝。

這里設(shè)計(jì)師可以使用Sketch的文字、圖層、組件封裝功能,構(gòu)建可協(xié)作、方便維護(hù)、完整的控件庫。程序員在構(gòu)建項(xiàng)目框架時(shí),也應(yīng)對每一個(gè)元素進(jìn)行可復(fù)用性封裝。


(一)封裝基礎(chǔ)顏色

基礎(chǔ)顏色有主色、輔色、強(qiáng)調(diào)色、中性色(灰色)、功能色(成功、失敗、警告、不可點(diǎn))等。


在sketch中,新建一個(gè)圖層,設(shè)定好圖層樣式,點(diǎn)擊新建圖層樣式完成封裝。封裝樣式按固定格式“類別/編號+顏色”來命名,其中“/”可以自動(dòng)識別為列表層級。

顏色封裝




(二)封裝常用字體

每個(gè)項(xiàng)目都應(yīng)該設(shè)定常用字體庫,例:導(dǎo)航標(biāo)題、文章標(biāo)題、正文、說明、鏈接等等。


在sketch中,新建一個(gè)文本,設(shè)定好文本樣式,點(diǎn)擊新建文本樣式完成封裝。封裝樣式按固定格式“主類別/二級類別/顏色”來命名,其中“/”可以自動(dòng)識別為列表層級。


字體封裝



(三)封裝圖標(biāo)

APP項(xiàng)目中的圖標(biāo)大小一般設(shè)定為20px、24px、28px、32px、44px等。


在sketch中,新建圖標(biāo)影響范圍圖層,設(shè)定安全區(qū)域,畫好圖標(biāo)后點(diǎn)擊新建symbol按鈕。封裝的圖標(biāo)按固定格式“范圍/具體位置/名稱”來命名,其中“/”可以自動(dòng)識別為列表層級。


圖標(biāo)封裝



(四)封裝按鈕

按鈕一般情況下有兩種適配方案,第一種固定邊距,第二種固定尺寸。封裝時(shí)結(jié)合Dynamic Button 3.5插件,可以動(dòng)態(tài)制作同類型按鈕。


在sketch中,利用已封裝好的字體和顏色來組合成按鈕的文本和背景,文本命名格式為“上邊距:右邊距:下邊距:左邊距”,如果上下和左右邊距并分別相同,則只需要給出上邊距和右邊距的數(shù)值。如“10:20”。按鈕背景命名為BG,設(shè)定為已封裝的顏色。執(zhí)行一次“?+J”的操作,關(guān)聯(lián)文字和背景,然后將兩者用symbol封裝。


封裝后取消Dynamic group編組




由于按鈕大小會(huì)根據(jù)內(nèi)容文字長度而改變,因此需設(shè)定合理的適配規(guī)則。


固定文本左上邊距和高度



固定背景的高度



(五)統(tǒng)一維護(hù)

基礎(chǔ)元素樣式可以放在一個(gè)畫布上進(jìn)行統(tǒng)一管理。

undefined

顏色和字體可以統(tǒng)一管理





三、布局規(guī)范

利用模塊化思維進(jìn)行布局,將由已封裝的組件構(gòu)成的功能區(qū)編組成一個(gè)模塊,模塊可以自由排列組合,增加或刪除。


(一)基本框架

界面布局應(yīng)遵循各平臺基礎(chǔ)設(shè)計(jì)規(guī)范,iOS和安卓的基本框架不能混用。

undefined

安卓&iOS對比圖



/開發(fā)規(guī)范

制作高保真設(shè)計(jì)稿時(shí)我們統(tǒng)一使用iOS設(shè)備的750*1334分辨率,對應(yīng)Android的720*1280分辨率。無需新出一套設(shè)計(jì)稿。


iOS和Android設(shè)備在設(shè)計(jì)和開發(fā)時(shí)應(yīng)該注意的差異,基于1倍標(biāo)注

/視覺上

a. iOS狀態(tài)欄20pt,Android狀態(tài)欄25pd

b. iOS導(dǎo)航欄44pt,Android導(dǎo)航欄48pd

c. iOS菜單欄49pt,Android菜單欄48pd


/交互上

a.  Andriod有物理返回按鈕,點(diǎn)擊控制返回上一步操作,而不僅僅返回上一個(gè)頁面;iOS沒有實(shí)體返回按鈕,導(dǎo)航欄的back按鈕控制返回應(yīng)用內(nèi)的上一層頁面。因此在設(shè)計(jì)時(shí)每個(gè)頁面都應(yīng)該有明確的返回或關(guān)閉按鈕

b. 導(dǎo)航標(biāo)題的位置iOS居中顯示,Android靠左

c. 安卓對列表操作欄的處理為長按,iOS為左滑。實(shí)際處理的時(shí)候可以分開設(shè)計(jì),也可以設(shè)計(jì)成統(tǒng)一的操作方式



(三)模塊化布局

模塊化布局對于設(shè)計(jì)師來說可以使頁面功能和信息分布清晰明了,對于開發(fā)來說也更利于進(jìn)行頁面布局。


undefined

例一:主界面


undefined

例二:內(nèi)容頁





四、標(biāo)注語言

利用sketch插件導(dǎo)出可自助查看標(biāo)注的html文件,標(biāo)注文件無需手動(dòng)生成,也不會(huì)對設(shè)計(jì)稿造成遮擋。但是開發(fā)要花更多精力去對每一個(gè)元素的樣式、間距進(jìn)行點(diǎn)擊查看,相比之前直觀的標(biāo)注,增加了閱讀成本。


為此我們設(shè)計(jì)一套標(biāo)注方案,可以通過少量標(biāo)注,提供準(zhǔn)確的多界面適配信息。標(biāo)注規(guī)則是對由適配不同屏幕造成歧義的地方做針對性地標(biāo)注說明。


(一)固定框架

在設(shè)計(jì)界面時(shí),首先設(shè)定界面的固定框架結(jié)構(gòu),如頁面內(nèi)容區(qū)的安全邊距。


undefined

全局界面安全邊距設(shè)定


/模塊外間距設(shè)定

多個(gè)模塊之間的間距設(shè)定

undefined

模塊間距設(shè)定,一般情況下可以不做標(biāo)注



/模塊內(nèi)安全區(qū)域

模塊內(nèi)部組件和元素的影響范圍

undefined

模塊內(nèi)安全區(qū)域標(biāo)注




(二)基本標(biāo)注類型

規(guī)范好界面的布局和模塊的構(gòu)建方式后,針對模塊或者組件在適配過程中會(huì)變動(dòng)的部分,或者固定不變的部分,特別標(biāo)注說明。其余沒特別標(biāo)注的部分按照默認(rèn)標(biāo)注尺寸來布局。


/固定高

undefined

固定區(qū)域高度



/固定寬

固定彈出框?qū)挾?/span>



/固定百分比

固定圖形所占頁面的百分比



/固定邊距

固定邊距


/固定比例(Fixed Ratio)

undefined

固定模塊寬高比



/等分分布

undefined

等分分布


/范圍內(nèi)居中

undefined

在標(biāo)識的范圍內(nèi)居中分布





(三)標(biāo)注實(shí)例

因此方案尚未落實(shí)到實(shí)際項(xiàng)目中,因此在這里以網(wǎng)易云音樂為例,按新的標(biāo)注方案進(jìn)行剖析說明。


例一




例二



undefined

例三



例四




五、總結(jié)

文章內(nèi)容更多偏向指導(dǎo)設(shè)計(jì)師如何規(guī)范設(shè)計(jì)方法,同時(shí)創(chuàng)造了幾種標(biāo)注語言(FR、ED、AC等)。后期組織設(shè)計(jì)和開發(fā)同學(xué)一起就此方案進(jìn)行交流討論,給大家普及這種設(shè)計(jì)和標(biāo)注方法,讓設(shè)計(jì)師和開發(fā)能夠就組件封裝和標(biāo)注語言的方案達(dá)成共識,方便后期協(xié)作,提高工作效率。同時(shí)聽取多方觀點(diǎn),對此文檔進(jìn)行不斷優(yōu)化完善。

Tooltips設(shè)計(jì)指南

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

工具提示(Tooltips)是用戶觸發(fā)的信息,用來提供有關(guān)頁面元素和功能的更多信息。盡管工具提示(Tooltips)對于網(wǎng)頁不是新概念,但它們卻經(jīng)常被錯(cuò)誤的使用。


Tooltips并不新鮮,但它們?nèi)匀槐徽`用。


定義:Tooltip是當(dāng)用戶與圖形用戶界面中的元素交互時(shí)出現(xiàn)的簡短、信息豐富的消息。Tooltips通常會(huì)在兩種情況下出現(xiàn),鼠標(biāo)懸停時(shí)或鍵盤懸停。(以防萬一你不知道鍵盤懸停是什么: 為了使用頁面中激活的元素,用戶通常需要用鼠標(biāo)移上去或使用鍵盤上的tab鍵切換上去。鍵盤懸停指的是保持鍵盤聚焦在同一個(gè)元素上一段時(shí)間。)


工具提示(Tooltips)可以依附于頁面中任何激活的元素(圖標(biāo)、文字鏈接、按鈕,等等)。它們?yōu)榕鋵Φ脑靥峁┟枋龌蚪忉?。因此,tooltips與界面中的元素相關(guān)聯(lián)并具有特定性,并不會(huì)用它來解釋大圖或整個(gè)的任務(wù)流。


有一個(gè)很重要的地方是,tooltips是用戶觸發(fā)的。因此,在頁面中主動(dòng)彈出來告知用戶新的功能或如何使用一個(gè)具體的功能的提示不是tooltips。


由于tooltips是由懸停手勢觸發(fā)出來的,他們只能在設(shè)備上通過鼠標(biāo)或鍵盤觸發(fā)。在觸摸屏上通常不可用。(將來,tooltips可以在眼控設(shè)備上觸發(fā),當(dāng)用戶將視線聚焦在界面某個(gè)特定元素一段時(shí)間便可觸發(fā))



Tooltips vs. Popup Tips

盡管tooltips主要是限于桌面電腦和筆記本,但是在觸摸屏上,它們還有一個(gè)類似姊妹元素:popup Tips。Tooltips和Popup Tips都有相同的目標(biāo):提供有用的、更多的內(nèi)容。下面這個(gè)表格展現(xiàn)了二者主要的相似點(diǎn)和不同點(diǎn)。



Tooltips

Popup tips

適用場景

桌面端

任何

觸發(fā)

懸停(鼠標(biāo)或鍵盤)

觸摸/點(diǎn)擊

結(jié)束

用戶離開交互區(qū)

用戶關(guān)閉或點(diǎn)擊屏幕其它區(qū)域

對應(yīng)元素

圖標(biāo)、文本鏈接、按鈕、圖片

“?” 或 “i” 圖標(biāo)

內(nèi)容類型

微內(nèi)容

微內(nèi)容



本文將重點(diǎn)介紹tooltips及其在桌面網(wǎng)站上的使用。



Tooltip使用指南


1.不要在任務(wù)的關(guān)鍵信息處使用tooltips

用戶不需要找到工具提示即可完成任務(wù)。當(dāng)Tooltips為一些用戶不熟悉的表單字段提供額外的解釋,或者解釋一些看起來不尋常的需求時(shí),它是最好用的。請記住,tooltips會(huì)消失,因此指令或其它可直接操作的信息,比如字段需求,不應(yīng)該出現(xiàn)在tooltip中。(如果是的話,用戶就不得不在他的工作記憶中記住,以便順利使用)


Don't:

Amtrak網(wǎng)站將密碼要求放在Tooltips中(通過鼠標(biāo)懸停訪問)。這類信息對于用戶成功完成“創(chuàng)建賬戶”流程至關(guān)重要,因此應(yīng)始終顯示在屏幕上。

 

Do:

FedEx使02-用tooltips為運(yùn)輸表單字段提供額外信息。比如,電子郵件字段中有一個(gè)tooltip,說明列出該字段的原因(此tooltip通過鼠標(biāo)懸停訪問)

 

2.在tooltip內(nèi)提供簡短有用的內(nèi)容

明顯的或有冗余文本的tooltips對用戶無益。如果你無法想到特別有用的內(nèi)容,就不要提供Tooltip。否則,只會(huì)給UI增加無用信息,并且浪費(fèi)任何一個(gè)看到該工具提示的用戶。

此外,長內(nèi)容也不再是“提示”,所以請保持簡短。Tooltips是微內(nèi)容的——短文本旨在自給自足。你的文本可以是單行或者多行,只要它是有關(guān)聯(lián)的并且不會(huì)遮擋相關(guān)內(nèi)容。


Don't:

在Sprint網(wǎng)站上,帶有“添加新行”的按鈕上還有文本“添加新行”的tooltip。這個(gè)tooltip是重復(fù)且沒必要的。

 

Do:

阿里巴巴的搜索框里有一個(gè)無標(biāo)簽的相機(jī)圖標(biāo)。當(dāng)用戶鼠標(biāo)懸停到這個(gè)圖標(biāo)上時(shí),會(huì)出現(xiàn)“通過圖片搜索”的tooltip。這個(gè)功能對很多用戶來說都不熟悉,因此這里描述圖標(biāo)用途的tooltip很有幫助

 

3.支持鼠標(biāo)和鍵盤懸停

Tooltips只在鼠標(biāo)懸停時(shí)出現(xiàn)的話,對于依賴于鍵盤導(dǎo)航的用戶來說不夠易用。確保在你的設(shè)計(jì)中tooltips可以通過鍵盤無障礙訪問。


Don't:

麥當(dāng)勞的網(wǎng)站不支持通過鍵盤觸發(fā)tooltip。當(dāng)用戶選中同一個(gè)頁面(底部)時(shí),鼠標(biāo)懸停啟動(dòng)的tooltip(頂部)不可用。

 

Do:

維基百科支持鍵盤觸發(fā)tooltips。鼠標(biāo)懸停和鍵盤懸停時(shí)會(huì)出現(xiàn)相同的tooltips。

 

4.當(dāng)附近有多個(gè)元素時(shí)使用箭頭指示

箭頭有助于清楚的識別工具提示和哪個(gè)元素相關(guān)聯(lián)。當(dāng)附近有幾個(gè)元素時(shí),箭頭有助于避免混淆。


Don't:

PowerPoint有幾個(gè)圖標(biāo)彼此靠近。如果沒有工具提示箭頭,則很難知道哪個(gè)工具提示對應(yīng)哪個(gè)工具。

 

Do:

Whiteboard使用工具提示箭頭來提示所選圖標(biāo)。盡管圖標(biāo)間距很大,但手型指針的提示能讓指示更清晰,視覺噪音最小。

 

5.在網(wǎng)頁中使用統(tǒng)一的Tooltips

Tooltips很難發(fā)現(xiàn),因?yàn)樗鼈兺ǔH狈σ曈X線索。如果tooltips在你的網(wǎng)站中沒有規(guī)律的出現(xiàn),用戶將永遠(yuǎn)不會(huì)發(fā)現(xiàn)它們。保持一致并為設(shè)計(jì)中的所有元素,而不是只針對某些元素提供工具提示非常重要。如果只有一些元素需要額外的解釋,使用彈出提示而不是工具提示。


Don't:

Business Insider網(wǎng)站為其導(dǎo)航菜單里3個(gè)圖標(biāo)的其中兩個(gè)提供了tooltips。(注:在網(wǎng)站的主頁上,Globe圖標(biāo)確實(shí)有一個(gè)讀取Globe圖標(biāo)的工具提示,但是這個(gè)標(biāo)簽沒有任何幫助,沒有說明它的功能:語言選擇器)一般來說,我們建議不要使用沒有標(biāo)簽的圖標(biāo)和隱藏標(biāo)簽的tooltips,但是當(dāng)工具提示不一致時(shí),這種問題更嚴(yán)重。

 

Do:

Todolist始終如一的使用tooltips。主要部分的三個(gè)圖標(biāo)都有tooltips.通過一致性來實(shí)現(xiàn)用戶的潛在期望。

 


更多推薦

  • 為無標(biāo)簽的圖標(biāo)提供tooltips

大多數(shù)圖標(biāo)都有一定程度的概念模糊,這就是我們?yōu)樗袌D標(biāo)推薦文本標(biāo)簽的原因。如果你堅(jiān)持不為網(wǎng)站中的圖標(biāo)提供文本標(biāo)簽,至少你可以給用戶提供一個(gè)描述性的工具提示。


  • 確保tooltips和背景有一定的對比

用戶通常會(huì)查看他們點(diǎn)擊或懸停的位置。然而,由于tooltips的隱蔽性,一定對比度對于確保用戶能看到工具提示中的文字很重要。此外,對于有視力障礙的用戶,在白色頁面中使用淺灰色tooltips會(huì)很難閱讀。


  • 定位tooltips,以便他們不會(huì)遮擋相關(guān)內(nèi)容

當(dāng)tooltips遮擋了與它們相關(guān)的內(nèi)容時(shí),會(huì)導(dǎo)致用戶重復(fù)操作(即移動(dòng)鼠標(biāo)關(guān)閉工具提示,再次讀取信息或字段,懸停以顯示工具提示)。測試你的工具提示位置確保不會(huì)擋到與用戶目標(biāo)相關(guān)的其它內(nèi)容。



結(jié)論

當(dāng)用戶無法理解某項(xiàng)功能時(shí),tooltips是一種防錯(cuò)方式。如果用戶遵循其它的設(shè)計(jì)指南(比如,文本標(biāo)簽加圖標(biāo)),那么今天的很多tooltips用例都可以忽略。重要的信息應(yīng)始終在頁面上顯示。因此,tooltips對于用戶完成重要的任務(wù)并不是必不可少的。


我們越是追求極簡主義,我們需要的tooltips就越多,我們的用戶就需要越多的學(xué)習(xí)成本。下次,當(dāng)你考慮tooltips的時(shí)候,問一下自己:為了用戶完成某個(gè)任務(wù),這個(gè)信息是否需要?如果答案是否定的,那么工具提示非常合適。否則,信息應(yīng)直接出現(xiàn)在頁面中。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

 

日歷

鏈接

個(gè)人資料

存檔