首頁

2021-2022 設(shè)計(jì)趨勢(shì) · 數(shù)字未來篇

seo達(dá)人


背景

回顧互聯(lián)網(wǎng)發(fā)展歷程,從桌面端撥號(hào)上網(wǎng)到高速5G的移動(dòng)互聯(lián)網(wǎng),隨時(shí)隨地互聯(lián)互通對(duì)現(xiàn)實(shí)生活的影響力也逐步提升,虛擬與現(xiàn)實(shí)的距離也逐漸縮小。未來數(shù)字世界在沉浸感、參與度、永續(xù)性等方面對(duì)體驗(yàn)提出了更高的要求。本文將從虛擬世界的視角,對(duì)設(shè)計(jì)挑戰(zhàn)和機(jī)遇進(jìn)行總結(jié)和預(yù)測。

概述

電影《頭號(hào)玩家》里的“綠洲”描繪了一個(gè)龐大的虛擬數(shù)字世界,在這里人們用數(shù)字化身來控制、并相互競爭以提高自己的地位,這被視為未來虛擬世界該有的樣子。不過目前落地概念是由Roblox在招股書里描述的8個(gè)關(guān)鍵詞:身份,朋友,沉浸感,多樣性,低延遲,隨地,經(jīng)濟(jì),文明。我們嘗試把這8個(gè)詞提煉5個(gè)虛擬世界的設(shè)計(jì)趨勢(shì),分別展開論述。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

一、虛擬世界人物:數(shù)字替身(Avatar)設(shè)計(jì)

數(shù)字替身(avatar)是用戶在虛擬世界中的化身。它可以代表用戶的位置方向、運(yùn)動(dòng)狀態(tài)和姿勢(shì),是用戶在虛擬世界的交互載體。avatar的設(shè)計(jì)有追求品牌塑造和技術(shù)突破的趨勢(shì)。

1.1 形象多樣化,追求品牌風(fēng)格化

在avatar形象設(shè)計(jì)方面,當(dāng)前大火的Roblox和Horizon worlds的設(shè)計(jì)非常有特點(diǎn)。Roblox基于多面體建模,顯得不夠精致。而Horizon worlds的人物直接沒有下半身,一群上半身人物在空中懸浮游走。但從另一個(gè)角度來講,這也許正是他們品牌風(fēng)格的記憶點(diǎn)。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

Roblox的avatar形象

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

Horizon worlds的avatar形象還有一些時(shí)尚品牌借助avatar穿戴自己的產(chǎn)品,以次來凸顯品牌調(diào)性。著名奢侈品牌Gucci就與虛擬形象科技公司 Genies 合作,允許用戶創(chuàng)建自己的個(gè)性化虛擬形象進(jìn)行穿搭售賣。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

Avatar的不同呈現(xiàn)形態(tài)的根據(jù)“卡通感-寫實(shí)感”、“兒童化-成人化”這兩組維度,可以得到視覺特征定位圖。其中第四象限是虛擬世界avatar形象超寫實(shí)化的一個(gè)重要的發(fā)展方向。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

1.2 從指尖驅(qū)動(dòng)到自然驅(qū)動(dòng)

Avatar是用戶在虛擬世界的替身,長久以來玩家依賴于“指尖”去控制自己avatar,比如前后左右移動(dòng)方向,跑跳等動(dòng)作。這需要一定的學(xué)習(xí)和轉(zhuǎn)化成成本,這對(duì)用戶的沉浸感帶來一定的損耗。蘋果Memoji是對(duì)表情AR技術(shù)的應(yīng)用,TrueDepth相機(jī)硬件可以通過你的臉驅(qū)動(dòng)Memoji的嘴巴、眼睛、頭部和舌頭。

你可以在FaceTime通話中與Memoji重疊,Memoji的嘴唇也能夠與你的聲音同步。統(tǒng)計(jì)表明,用戶之間的信息或FaceTime對(duì)話越來越多的由文本或視頻轉(zhuǎn)向由虛擬avatar進(jìn)行。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

Memoji臉部驅(qū)動(dòng)的虛擬頭套除了avatar的面部表情外,整個(gè)肢體也可以被現(xiàn)實(shí)人體通過動(dòng)作捕捉技術(shù)來驅(qū)動(dòng)。近期,美國廣播公司Fox推出了全球首檔虛擬人物歌唱比賽《Alter Ego》。節(jié)目中的虛擬形象可以設(shè)定不同的膚色、身體體型和性別。參賽選手可以自由設(shè)定他們認(rèn)為最能代表自己內(nèi)在,或最能引起觀眾注意的虛擬形象。然后使用動(dòng)作捕捉技術(shù),由自己的身體驅(qū)動(dòng)虛擬形象進(jìn)行表演。?

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

《Alter Ego》全身驅(qū)動(dòng)虛擬?形象在虛擬世界中,讓每個(gè)人都能夠擁有理想中的Avatar是未來的一種時(shí)尚,也是作為設(shè)計(jì)師的機(jī)會(huì)。

1.3 數(shù)字人的高仿真高智能趨勢(shì)

作為虛擬世界里的NPC,數(shù)字人是智能化的獨(dú)立avatar。在“外貌”方面數(shù)字人也會(huì)逐漸往高寫實(shí)的方向發(fā)展。而在“精神”方面,依托AI機(jī)器學(xué)習(xí)算法和大數(shù)據(jù),數(shù)字人的對(duì)話質(zhì)量也與真人相差無幾。服務(wù)應(yīng)用的數(shù)字客服、游戲中的超級(jí)NPC,都可以以假亂真,表現(xiàn)甚至優(yōu)于真人。這對(duì)設(shè)計(jì)師的智能化交互設(shè)計(jì)能力提出了更高的要求。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

UNEEQ公司基于知識(shí)計(jì)算和語音合成提供的數(shù)字人對(duì)話產(chǎn)品

二、虛擬世界空間:從界面設(shè)計(jì)到“界體”設(shè)計(jì)

在虛擬世界的概念下,界面(interface)設(shè)計(jì)師講逐漸升級(jí)為“界體“(interbody)設(shè)計(jì)師。設(shè)計(jì)師的工作效率和發(fā)揮空間將會(huì)被大大擴(kuò)展。

2.1 空間3D建模更加普及

虛擬世界基于VR/AR等可穿戴設(shè)備,可以實(shí)現(xiàn)整個(gè)身體與“界體”的交互。這將會(huì)大大簡化建模步驟和時(shí)間成本,幫助設(shè)計(jì)師在沉浸式的體驗(yàn)中完成設(shè)計(jì)構(gòu)想,釋放創(chuàng)造力。而目前主流的通過手指對(duì)電子屏幕界面進(jìn)行點(diǎn)觸的交互模式將會(huì)被取代?;始宜囆g(shù)學(xué)院研發(fā)推出的Gravity Sketch是一款支持在3D空間中建模型的工具。

沉浸式VR體驗(yàn),讓設(shè)計(jì)師可以將自己提前以客戶的視角在虛擬場景中按真實(shí)的比例直觀感受并調(diào)整設(shè)計(jì)。這個(gè)工具已經(jīng)應(yīng)用到了汽車和工業(yè)設(shè)計(jì)、服裝設(shè)計(jì)、建筑設(shè)計(jì)等行業(yè)。借助Gravity Sketch,福特汽車公司已將汽車內(nèi)外飾設(shè)計(jì)階段的概念開發(fā)時(shí)間從四個(gè)月縮短至僅20小時(shí)。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

△福特汽車用Gravity Sketch設(shè)計(jì)汽車

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

服裝設(shè)計(jì)的運(yùn)用

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

Gravity Sketch在建筑上的運(yùn)用使用VR Gravity Sketch主要優(yōu)點(diǎn)之一,就是能夠幫助設(shè)計(jì)師更好地理解比例。同時(shí)Gravity Sketch在靈活性方面具有非常好的潛力,彌補(bǔ)了2D繪制和3D建模之間的空白。等技術(shù)更成熟些,相信Gravity Sketch 會(huì)有更大的可能。

2.2 數(shù)字孿生向高等級(jí)發(fā)展

虛擬世界不僅僅局限于在形態(tài)和環(huán)境方面的復(fù)刻。它應(yīng)當(dāng)是平行于真實(shí)世界的互聯(lián)互通的“平行宇宙”。數(shù)字孿生通過為現(xiàn)實(shí)的建筑物在數(shù)字世界里錨定虛擬建筑實(shí)現(xiàn)互聯(lián)互通。數(shù)字孿生也像自動(dòng)駕駛一樣分為幾個(gè)等級(jí)。

終極形態(tài)的數(shù)字孿生,是真正意義上的平行世界。目前,數(shù)字孿生的進(jìn)展正在向更高等級(jí)發(fā)展。最近發(fā)布的第四代萬達(dá)廣場“慧云4.0”介紹到:數(shù)字化運(yùn)維管理平臺(tái),融合了BIM、數(shù)字孿生、Iot、大數(shù)據(jù)、人工智能、5G等技術(shù),實(shí)現(xiàn)了對(duì)商業(yè)廣場消費(fèi)場景、運(yùn)維服務(wù)和資產(chǎn)的管理。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

舉一個(gè)溫度報(bào)警的例子:傳感器發(fā)現(xiàn)故障,收集信息并發(fā)出警報(bào),同步反饋至管理平臺(tái)。管理平臺(tái)定位設(shè)備位置、顯示影響區(qū)域及對(duì)應(yīng)的環(huán)境參數(shù),同步現(xiàn)場視頻,顯示設(shè)備連接管網(wǎng)。操作人員,處理報(bào)警信息,下發(fā)維修工單。現(xiàn)場維修人員收到工單信息,可通過電腦、手機(jī)、平板等方式進(jìn)行遠(yuǎn)程查看及操控設(shè)備,實(shí)現(xiàn)快速檢修。

3.3 數(shù)字空間的智能化發(fā)展趨勢(shì)

虛擬世界的空間也會(huì)在數(shù)字孿生的基礎(chǔ)上朝著智能化的方向發(fā)展,就像數(shù)字人可以完成自我進(jìn)化和成長一樣,這就是數(shù)字空間的智能化發(fā)展趨勢(shì)。百度AIR智能交通系統(tǒng)定位于路端的“自動(dòng)駕駛系統(tǒng)”。

跟傳統(tǒng)的道路信息化設(shè)備強(qiáng)調(diào)軟硬件結(jié)合不同,這是一套可在數(shù)據(jù)驅(qū)動(dòng)下自學(xué)習(xí)進(jìn)化的系統(tǒng),應(yīng)用L4級(jí)自動(dòng)駕駛級(jí)別的感知預(yù)測規(guī)劃技術(shù),讓路端交通基礎(chǔ)設(shè)施實(shí)現(xiàn)數(shù)字化、智能化和網(wǎng)聯(lián)化升級(jí)。在AIR智能道路系統(tǒng)加持下,自動(dòng)駕駛將更快落地。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

百度AIR智能交通系統(tǒng)

三、虛擬世界交互方式:更豐富和自然

隨著交互設(shè)計(jì)的發(fā)展,虛擬世界中中的交互方式會(huì)越來越趨向豐富和自然。就像點(diǎn)觸交互逐漸替代按鍵交互一樣,眼控、語音、手勢(shì)等自然交互也一定會(huì)逐漸替代點(diǎn)觸交互成為主流。

3.1眼控交互:更人性、更直覺

簡單來講,眼控交互開發(fā)的原理就是在開發(fā)引擎中,將視線范圍設(shè)置為一條射線狀或圓錐狀物體,和VR/AR中的各種物體進(jìn)行碰撞檢測,當(dāng)程序一旦檢測到碰撞,則視為用戶的視線落到了這個(gè)物體上,由此進(jìn)行眼控交互。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

在虛擬世界的環(huán)境中相比于其他交互來說,眼球追蹤門檻低無需復(fù)雜外設(shè),受環(huán)境影響小,應(yīng)用場景幾乎無限制,更為重要的是眼控交互非常人性化,眼動(dòng)交互非常符合人的直覺。比如在應(yīng)用中想要隱藏菜單功能,需要通過其他的交互方式刻意發(fā)出指令隱藏和調(diào)用菜單,而眼控交互可以非常自然,當(dāng)注視點(diǎn)偏離,菜單會(huì)自動(dòng)隱藏。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

又比如在射擊游戲中,可以體驗(yàn)真實(shí)的眼球鎖定目標(biāo)進(jìn)行打擊的快感。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

盡管目前存在實(shí)時(shí)渲染、眩暈、米達(dá)斯接觸等等技術(shù)問題的限制,但隨著軟硬件技術(shù)的升級(jí)迭代,用戶體驗(yàn)正在逐漸完善,眼控交互一定是未來的交互趨勢(shì)。

3.2 語音交互:更自然、更便捷

語音交互作為更趨近于人與人之間最自然的交流方式,近些年有許多發(fā)展的突破點(diǎn)。在虛擬世界發(fā)展主線上,語音交互趨向更自然、更人性化、更個(gè)性化。從GUI到VUI,不依賴觸摸屏的輸入,出現(xiàn)無導(dǎo)航、無按鈕、無菜單界面。

過去反人類的一些溝通方式慢慢被“調(diào)教”。此外,多人會(huì)話場景下的技術(shù)方案日漸增多。Google的智能語音助手可實(shí)現(xiàn)連續(xù)對(duì)話,可以打電話給飯店或理發(fā)店等商家?guī)湍泐A(yù)約,目前,Google Duplex可以跨app完成幫你租車、回復(fù)消息、找照片分享給好友、寫郵件等一系列任務(wù)。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

Google智能語音助手語音識(shí)別可讓你感覺自己仿佛就是故事的一部分。能夠與內(nèi)容進(jìn)行真實(shí)的對(duì)話將會(huì)大大地提升沉浸感。在 VR 領(lǐng)域內(nèi),語音交互更可能替代現(xiàn)有固化的 UI 界面。只需要通過簡單的語音交流就能完成繁復(fù)的操作,無需再去點(diǎn)擊屏幕上放置好的浮動(dòng)界面圖標(biāo),這樣的設(shè)計(jì)或許才是未來虛擬世界玩家所需要的。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

《Starship Commander》語音VR游戲

3.3 手勢(shì)交互:更自由、更靈活

借助能夠感知深度信息的攝像頭,手機(jī)可以更好地讀懂用戶的手勢(shì)語言。2019年國內(nèi)外手機(jī)廠商的發(fā)布大會(huì)上,LG手機(jī)G8 ThinQ以及華為發(fā)布Mate30系列推出的隔空手勢(shì),可實(shí)現(xiàn)一些簡單的諸如滑動(dòng)、切歌、截屏等效果。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

在VR應(yīng)用中,目前還需要手柄設(shè)備進(jìn)行控制交互。但就像觸屏手機(jī)終將取代按鍵手機(jī)一樣,VR手勢(shì)交互取代手柄按鍵交互將成為未來趨勢(shì)。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

下面是微軟hololens嘗試的一些可以更自然地與我們?nèi)粘I钪惺褂玫哪承┦謩?shì)匹配的命令:

  • 選擇:通過用食指指向,捏以創(chuàng)建光線,將鼠標(biāo)懸停在上面,將手/手指移到形狀中。
  • 確認(rèn):通過豎起大拇指,確定的手勢(shì),點(diǎn)頭。
  • 取消:拇指向下,通過搖動(dòng)否定,交叉雙手。
  • 刪除:通過丟棄,輕彈,揮舞。

未來虛擬世界的人機(jī)交互方式一定是多種自然交互的混合,我們稱之為“多模交互”。用戶可以通過聲音、肢體語言、信息載體(文字、圖片、音頻、視頻)、環(huán)境等多個(gè)通道與計(jì)算機(jī)進(jìn)行交流。混合 GUI、VUI、手勢(shì)、體感等多種交互方式,更加自然和充分的模擬人與人之間的交互方式。

四、虛擬世界感知體驗(yàn):更臨場和沉浸

在現(xiàn)實(shí)世界中,人類通過視覺、聽覺、觸覺、嗅覺和味覺感知真實(shí)的世界。同樣在虛擬世界中,要做到沉浸感和臨場感需要在感知層面縮小物理世界和虛擬世界之間的差距。五種感官中,視覺、聽覺和觸覺所占比例最大,虛擬世界的虛擬體驗(yàn)也主要集中在前三種。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

人類感知外界信息的途徑

4.1 視覺:裸眼真實(shí)面對(duì)面

虛擬世界在感知層面最先要突破的就是視覺層面的極度真實(shí)感,畢竟這占據(jù)著人類信息感知83%的壓倒性比例。谷歌Starline是一個(gè)軟硬件結(jié)合的技術(shù)項(xiàng)目,目的是實(shí)現(xiàn)遠(yuǎn)方的人們之間的面對(duì)面交流。Starline使用攝像頭捕獲用戶,進(jìn)行虛擬世界的三維重建。通過實(shí)時(shí)數(shù)據(jù)壓縮和傳輸,最后使用一種光場顯示系統(tǒng),讓用戶可以在裸眼狀態(tài)下感受面對(duì)面的真實(shí)感。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

4.2 聽覺:置身空間環(huán)繞聲場

虛擬世界的臨場感僅靠視覺是遠(yuǎn)遠(yuǎn)不夠的。為了實(shí)現(xiàn)更逼真的效果,還原人耳的聽覺效果、塑造360度的空間音頻體驗(yàn)可以被認(rèn)為是還原臨場的關(guān)鍵。聲音的臨場感來源于真實(shí)世界的聽覺環(huán)境:我們時(shí)刻都被聲音籠罩,無論我們是否有意識(shí)地傾聽。這種無處不在的聲音能夠提供重要的位置和空間線索,對(duì)于聲音的感知能夠提供給我們?cè)谔囟ㄇ闆r下的位置信息。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

在虛擬世界的架構(gòu)中,聲音能夠通過空間音效來呈現(xiàn),以還原現(xiàn)實(shí)的聲音效果,聲音融入故事情節(jié),并將虛擬空間從平面感擴(kuò)展到三維的立體感。3D的空間音頻創(chuàng)造出比單獨(dú)的視覺效果更廣闊的認(rèn)知領(lǐng)域,讓用戶完全沉浸在音效空間之中。

舉個(gè)例子,當(dāng)你在雷雨中,傳統(tǒng)的游戲音效讓你僅僅感受到雷聲在你身邊,但在虛擬世界世界里,雷聲從天上傳來,雨聲喧囂不絕,你還能夠聽到雨滴落在地面和頭頂?shù)穆曇?。這樣逼真的音效有助于讓游戲玩家沉浸在更熟悉的情景中。

4.3 觸覺:在空氣中感受觸摸

在PC和手機(jī)已經(jīng)非常普遍的現(xiàn)在,人們感受過游戲中的震動(dòng)特效,或者手機(jī)靜音時(shí)的嗡嗡聲。但這些觸覺震動(dòng)對(duì)虛擬世界來說還過于簡單,無法復(fù)制觸摸真實(shí)世界對(duì)象并與之交互的豐富感覺。

因此想要將虛擬空間打造為“現(xiàn)實(shí)環(huán)境”,觸覺也是關(guān)鍵的感官之一。我們無時(shí)無刻不在觸摸物品,而虛擬世界里的觸覺反饋是一種力的反饋,能夠?qū)⑻摂M接觸轉(zhuǎn)換為物理的感知。這是一種特殊的觸覺反饋形式,通過技術(shù),簡單的穿戴設(shè)備就可以讓身體感受到不同層次的觸覺。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

目前,可用于各種應(yīng)用的薄型觸覺手套和熱顯示器已經(jīng)逐漸問世。即由硅膠和電極制成的柔軟、靈活的人造皮膚,通過自我監(jiān)控以提供準(zhǔn)確的信息,使用微電流技術(shù)將逼真的觸摸感受反饋給用戶。這種手套能夠通過上百個(gè)力反饋點(diǎn)來感受虛擬物體的形狀、紋理和運(yùn)動(dòng)、尺寸、重量、沖擊力,甚至溫度。

五、虛擬世界產(chǎn)品玩法延伸

虛擬世界奉行“開放共創(chuàng)”的理念,并受到加密技術(shù)的支持。這在產(chǎn)品玩法和數(shù)字資產(chǎn)領(lǐng)域也帶來新的發(fā)展方向,值得設(shè)計(jì)師關(guān)注。

5.1 游戲和社交更高度的融合

虛擬世界產(chǎn)品領(lǐng)域,游戲和社交是主要的突破口。社交的內(nèi)容是游戲,游戲是特定情境內(nèi)的社交。因此,社交游戲化是將社交通過游戲的方式來展現(xiàn),讓用戶在玩游戲的過程中進(jìn)行社交。

而社交游戲化則是通過將游戲的機(jī)制融入社交系統(tǒng)中,從而讓用戶在社交的過程中,有游戲般的體驗(yàn)。游戲和社交的的高度融合是未來虛擬世界產(chǎn)品發(fā)展的重要趨勢(shì)。以《Roblox》為代表的開放世界游戲與傳統(tǒng)的MMO(大型多人在線游戲)相比,最大的不同點(diǎn)在于更加開放的社交生態(tài)。

作為游戲UGC創(chuàng)作平臺(tái),在這里玩家可以開發(fā)自己的游戲,也可以玩別人開發(fā)的游戲建立了穩(wěn)定的虛擬世界社交關(guān)系。以人氣較高的《Adopt Me!》為例。《Adopt Me!》的玩法是玩家扮演家長或者孩子,選擇收養(yǎng)孩子或是被收養(yǎng),整體玩下來形式類似過家家。玩家可以購買手推車、妝發(fā)等各式各樣的付費(fèi)道具裝扮自己。這是一種更加沉浸和開放的社交模式。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

微軟旗下公司開發(fā)的《我的世界》是一款和《Roblox》畫風(fēng)非常相似的開放世界游戲。2020年加州大學(xué)伯克利分校還在《我的世界》里舉行了虛擬的畢業(yè)典禮,包含了現(xiàn)實(shí)流程中的校長致辭、學(xué)位授予、拋禮帽等。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

年輕新世代更青睞于輕松、趣味娛樂的社交類游戲,通過小游戲+語音互動(dòng)等方式來制造豐富和封閉的娛樂場景,釋放社交壓力的同時(shí)增加趣味性和沉浸感。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

5.2 加密潮牌和藝術(shù)收藏崛起

和元宇宙一起走紅的還有NFT。NFT全稱為非同質(zhì)化代幣,簡單來說,他具有唯一性和不可拆分性,這使得它可以和現(xiàn)實(shí)世界中的一些商品綁定。NFT 流動(dòng)性高可隨時(shí)交易以及鑒別,獨(dú)一無二的藝術(shù)創(chuàng)作使其具備收藏屬性,加密處理使得其難以復(fù)制仿造,最終成就了它的稀缺和價(jià)值。

前不久,Nike 宣布收購了僅僅成立兩年的虛擬運(yùn)動(dòng)品牌 RTFKT。RTFKT 這個(gè)名字因?yàn)榕c英文「artifact(人造物)」發(fā)音相似而來,同時(shí)這個(gè)名字也代表著其品牌理念。有人這樣評(píng)價(jià) RTFKT:如果在你小的時(shí)候曾想擁有一雙 AirJordan 的話,那么當(dāng)你的孩子出生他會(huì)想要一雙 RTFKT。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

無聊猿猴被很多 NFT 玩家認(rèn)為是在 CryptoPunk 之后最成功的 NFT 收藏品項(xiàng)目,甚至部分用戶認(rèn)為它比 CryptoPunk 還要成功。無聊猿游艇俱樂部(Bored Ape Yacht Club)簡稱BAYC,是一個(gè)基于以太坊的NFT集合,包含10,000只獨(dú)特的無聊猿(Bored Apes)。每只無聊猿都有一系列特征,這些特征由170多個(gè)特征以編程方式生成,包括表情、服裝、頭飾等。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

前不久,adidas 三葉草宣布與 Bored Ape、The Sandbox、Coinbase 合作,正式進(jìn)軍“元宇宙”,加入 NFT 世界!

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

幾周前虛擬藝術(shù)創(chuàng)作團(tuán)體RTFKT Studios 與村上隆合作推出的「cloneX」系列發(fā)售。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

5.3 設(shè)計(jì)版權(quán)得到更好的保護(hù)和增值

加密藝術(shù)家和設(shè)計(jì)師可以利用NFT創(chuàng)造出獨(dú)一無二的數(shù)字藝術(shù)品,助力設(shè)計(jì)版權(quán)增值。鵝廠23周年,騰訊公司為員工發(fā)放了 23 周年紀(jì)念版NFT“數(shù)字藏品”,由騰訊旗下NFT交易平臺(tái)「幻核」團(tuán)隊(duì)設(shè)計(jì)發(fā)行,騰訊旗下聯(lián)盟鏈“至信鏈”提供鏈上存證。

該系列NFT以QQ企鵝形象為基礎(chǔ),進(jìn)行了IP衍化,每一個(gè)形象都各不相同,每只QQ企鵝共有6個(gè)自定義部分,每個(gè)部位隨機(jī)展現(xiàn)不同元素并組合成獨(dú)有形象,共發(fā)行72000枚。其中有1000枚彩蛋款特殊造型“致敬”名人:李小龍、卓別林、諸葛亮、牛頓、愛因斯坦等等。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

近日,京東也正式上線「靈稀」數(shù)字藏品交易平臺(tái),該平臺(tái)所有數(shù)字藏品將由京東云提供的區(qū)塊鏈技術(shù)服務(wù)京東智臻鏈進(jìn)行唯一標(biāo)識(shí)。目前國內(nèi)布局?jǐn)?shù)字藏品交易平臺(tái)的科技巨頭已經(jīng)有三家:螞蟻旗下的「鯨探」、京東的「靈稀」以及騰訊旗下的「幻核」。除了后者是獨(dú)立APP,前兩者均為小程序。

2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告·數(shù)字未來篇

六、總結(jié)

虛擬世界時(shí)代將是一個(gè)以“設(shè)計(jì)”驅(qū)動(dòng)的時(shí)代,設(shè)計(jì)師們將成為虛擬世界里的造夢(mèng)師。面對(duì)虛擬世界的機(jī)會(huì)和挑戰(zhàn),設(shè)計(jì)師責(zé)無旁貸。正如《人類簡史》提到過的,“想象”是人類能一步步發(fā)展到今天的關(guān)鍵。我們無法確定未來世界的具體樣貌,亦無法確定虛擬世界是否會(huì)到來,但虛擬世界的豐富將是必然,未來亦會(huì)有更多的設(shè)計(jì)師參與建設(shè)。

 

作者:騰訊ISUX,微信公眾號(hào): 騰訊ISUX

本文由 @ 騰訊ISUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


iOS界面設(shè)計(jì):12個(gè)優(yōu)秀案例激發(fā)你的靈感

seo達(dá)人


那么,如何設(shè)計(jì)出一款界面精美的移動(dòng)端App呢?

如果你是為iOS設(shè)計(jì)應(yīng)用程序,那么此文你可以好好看一看。我們都知道用戶界面會(huì)直接影響到用戶體驗(yàn)。所以本文中,我首先精心挑選了12款最佳iOS移動(dòng)應(yīng)用程序模板和案例,它們都有著優(yōu)秀的iOS用戶界面設(shè)計(jì)(iOS設(shè)計(jì)模式)和良好的用戶體驗(yàn),涵蓋生活類,雜志類,體育類,天氣類,網(wǎng)上購物類等等。此外,本文還提供了一些iOS人機(jī)界面設(shè)計(jì)指南。希望能對(duì)您有所幫助。

1. City App

類別:導(dǎo)航

系統(tǒng)要求:支持iOS 9.0以上

City App是一個(gè)iOS應(yīng)用程序模板,也是一款以用戶為中心的信息類集合軟件。City App用于提供城市指南解決方案,并可以顯示你所在城市的有趣地點(diǎn),并加以描述性介紹。

用戶還可以直接通過相機(jī)照片搜索圖片所在定位,一張圖片就是一個(gè)數(shù)據(jù)的集合。Admin后臺(tái)可集中管理地點(diǎn)數(shù)據(jù),但您可以對(duì)其編輯,更新或刪除。來自世界各地的風(fēng)景優(yōu)美的圖片是界面色彩的主要構(gòu)成,非常美觀。

 

2. Triibe

類別:生活方式

系統(tǒng)要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

Triibe是一個(gè)引領(lǐng)全新的社區(qū)類iOS應(yīng)用程序,它是專門為制作達(dá)人設(shè)計(jì)的一款產(chǎn)品。它提供一種最簡潔、直觀的方式展示你的手工創(chuàng)作和學(xué)習(xí)創(chuàng)意。任何題材設(shè)計(jì),包括工藝,烹飪,家居,時(shí)尚等等,都可以得到展示。該App的一大特色使其精美的界面,用戶在這里上傳和展示其手工作品,搭配純凈的淺色背景,幾乎和任何的設(shè)計(jì)作品都能呼應(yīng)。

 

3. Design Events near you

類別:活動(dòng)

系統(tǒng)要求:沒有限制

Design Events,顧名思義,就給人一種充滿設(shè)計(jì)感的印象。它是由來自印度的一位才華橫溢的設(shè)計(jì)師Johny vino設(shè)計(jì)的。它一款典型的iOS應(yīng)用程序,主要用于發(fā)現(xiàn)你身邊的各種設(shè)計(jì)活動(dòng)以及您所在城市和附近地區(qū)的各種戶外活動(dòng)。它可以智能的進(jìn)行有趣的活動(dòng)推薦。該App的動(dòng)畫交互和過渡都非常簡潔流暢,搭配明快的配色,讓人覺得眼前一亮。

 

4. Trove

類別:播客和時(shí)尚

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

這是一個(gè)非??犰艜r(shí)尚的iOS應(yīng)用程序。借助Trove,您可以隨時(shí)隨地找到自己喜歡的風(fēng)格,獲取來自世界頂級(jí)風(fēng)格影響者的無盡靈感和建議,追隨頂級(jí)時(shí)尚博主。瀏覽“精選”服裝,可以發(fā)現(xiàn)并關(guān)注與您風(fēng)格一致的博客。此外,“My feed”選項(xiàng)卡,可以讓您隨時(shí)查看收藏夾,并將物品添加到您的收藏夾中,以便稍后再購買或可以選擇立即購買,你的所有選擇都是自由的。

 

5. Nowait Guest

類別:食品和飲料

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

Nowait Guest是一個(gè)簡化生活的iOS App。使用該應(yīng)用程序,可以為您節(jié)約大量的訂餐等待時(shí)間,很餐廳都已經(jīng)開始投入使用該App,以方便其顧客可以提早了解其訂餐情況,包括Chili’s,Buffalo Wild Wings,F(xiàn)irst Watch等。用戶在家時(shí),就可以隨時(shí)查看附件餐廳的當(dāng)前等待時(shí)間,然后做出決定是否前往。餐廳的圖片使用非常吸睛,整個(gè)界面看起來讓人覺得“垂涎三尺”。

 

6. The New York Times

類別:雜志和報(bào)紙

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

這是一款家喻戶曉的應(yīng)用程序,幫助您隨時(shí)隨地掌握最新信息,對(duì)于新聞愛好者和喜歡閱讀的用戶而言,這是一款比書美觀,但和書一樣能用文字傳達(dá)信息的程序。該程序與iPhone,iPad和Apple Watch的NYT應(yīng)用程序一起獲得過聞?lì)悜?yīng)用程序獎(jiǎng)項(xiàng)。它具有新聞快訊,多任務(wù)處理,晨報(bào)和晚報(bào),播客,保存文章以供日后在任何設(shè)備上閱讀等功能。

 

7. iPhone X – Todo Concept

類別:雜志和報(bào)紙

系統(tǒng)要求:iOS 9.0或更高版本。與iPhone,iPad和iPod touch兼容

iPhone X – Todo Concept是由Jee-Jeong為Norde設(shè)計(jì)。它是基于iPhone X概念而制作的一個(gè)新原型。該原型的草圖和psd模型都可以免費(fèi)下載。它是設(shè)計(jì)師特別為iPhone X的發(fā)布而設(shè)計(jì)的。它的動(dòng)畫過度和轉(zhuǎn)換都非常流利,其色彩選擇鮮明大膽,極富感染力。留白的界面設(shè)計(jì)模式,和各種純色背景都能形成鮮明對(duì)比,突出了重要信息,又美化了界面。

 

8. Cloud Music Offline MP3 Music

類別:音樂

系統(tǒng)要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

對(duì)于喜歡聽音樂的人來說,這是一款不容錯(cuò)過的音樂應(yīng)用程序。您可以輕松地將音樂從云端下載到您的設(shè)備并脫機(jī)播放。您的設(shè)備上就是一個(gè)無限量的音樂庫。其音樂播放列表非常有趣,設(shè)置了動(dòng)畫多樣的操作按鈕。整個(gè)界面白色純背景,干凈而簡潔,用戶的注意力會(huì)停留在其喜歡的音樂上,不會(huì)分散。該程序支持所有最流行的音樂文件格式:.flac .mp3,.aiff,.m4a,.wav 等等。

 

9. KicksOnFire: Buy Sneakers

類別:運(yùn)動(dòng)

系統(tǒng)要求:iOS 8.0或更高版本,與iPhone,iPad和iPod touch兼容

這個(gè)應(yīng)用程序是是專為運(yùn)動(dòng)鞋發(fā)燒友設(shè)計(jì)的,主要是推送新款運(yùn)動(dòng)鞋的特別發(fā)布日期及其相關(guān)新聞。該程序是App Store下載量最大的運(yùn)動(dòng)鞋發(fā)布日歷類應(yīng)用程序,不僅是獲得第一手運(yùn)動(dòng)鞋咨詢,您還可以在這里購買您最喜愛的運(yùn)動(dòng)鞋。其推送會(huì)基于您的個(gè)人資料智能進(jìn)行個(gè)性化的發(fā)布和價(jià)格估算。

 

10. Airbnb

類別:旅行

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

家喻戶曉的一款A(yù)pp,風(fēng)靡全球。當(dāng)您準(zhǔn)備旅行,從Airbnb開始享受難忘的旅行體驗(yàn)吧。這里,所有關(guān)于旅行的事情都變得更加美好,比如尋找旅行冒險(xiǎn),遠(yuǎn)游或找到一個(gè)全新的地方。游客可以獲得度假屋租賃,體驗(yàn)一種新體驗(yàn),并在世界各地參觀的地方。如果您有房屋待租,Airbnb也是一個(gè)最佳平臺(tái),在這里,你絕對(duì)會(huì)當(dāng)一個(gè)優(yōu)秀的“房東”。

 

11. Local Weather Radar & Forecast

類別:天氣

系統(tǒng)要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

該程序是一個(gè)當(dāng)?shù)赝黄菩缘奶鞖庑侣劜?bào)App,也是一個(gè)美國本地,乃至世界各地的交通應(yīng)用程序。只需一個(gè)點(diǎn)擊,就可以來回切換地位,以便隨時(shí)查看您的朋友和家人所在地的天氣情況。該程序還可以以小時(shí)來記錄您所在地區(qū)的氣溫變化情況,形成以個(gè)獨(dú)特的“氣溫變化”列表。

 

12. Sofa

類別:電影,電視和書籍

系統(tǒng)要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

這是一款iPhone應(yīng)用程序,是可以讓您沉浸在書籍,電影或電視節(jié)目中度過美好時(shí)光的一款A(yù)pp。您可以自定義創(chuàng)建電影,電視節(jié)目,書籍等列表,也可以將電影,電視節(jié)目和書籍添加到任何列表中。當(dāng)您需要搜索某一條目時(shí),可以通過向下滑動(dòng)操作來直接解鎖。

以上是2018年12個(gè)非常棒的iOS移動(dòng)應(yīng)用程序,它們中的大部分都位于App Store排行榜的首位,下載次數(shù)和使用人數(shù)都幾位可觀。看了這么多成功的iOS應(yīng)用程序,作為設(shè)計(jì)師,你有沒有思考過,這些App成功的秘訣的是什么?

不難發(fā)現(xiàn),出色的用戶界面和用戶體驗(yàn)至關(guān)重要。iOS設(shè)計(jì)主題將就明晰、尊重和深度,這意味著,在整個(gè)iOS系統(tǒng)中,文字在任何尺寸的設(shè)備上都是清晰易讀的,圖標(biāo)是精確而清晰的,并且需要流暢的動(dòng)畫和交互,有序的視覺層次等等??傊O(shè)計(jì)出來的App需要滿足用戶對(duì)質(zhì)量和功能的高期望值,才有可能成功。

 

那么,設(shè)計(jì)一個(gè)美觀精細(xì)的iOS移動(dòng)界面都有哪些必須注意的點(diǎn)呢?

1. 排版

1)字體

字體選擇不宜多,多則雜亂。只需使用單個(gè)字體并使用幾種字體變體即可。蘋果公司使用San Francisco,并根據(jù)產(chǎn)品功能選擇字體。例如,在iOS 7中使用Myriad(Pro)Light,在iOS 9中使用SF-UI。在iOS 10中,舊金山變體是SF UI Text和SF UI Display。你只需按照規(guī)則即可。但為了達(dá)到文字的易讀性和可讀性俱佳,關(guān)于字體選擇和字體布局,你還是要根據(jù)具體情況仔細(xì)斟酌。

 

2)字體大小

iOS的字體大小有其比較明確的規(guī)范,具體查看下表:

 

2. UI設(shè)計(jì)中的顏色

色彩的魔力不言而喻,人都是視覺性的動(dòng)物。顏色可以傳達(dá)活力和信息,提供視覺連續(xù)性,響應(yīng)用戶行為提供反饋、幫助人們可視化數(shù)據(jù)。自iOS 7以來,Apple一直在為其操作系統(tǒng)界面和預(yù)設(shè)應(yīng)用程序設(shè)置色彩明朗鮮艷的調(diào)色板。關(guān)于顏色的選擇比較自由,你可以使用下面列出的默認(rèn)iOS調(diào)色板,也可以自己定制,以便在同類App中可以脫穎而出。

了解更多:如何在UI設(shè)計(jì)中明智地使用顏色來創(chuàng)建完美的UI界面?

 

3. 圖標(biāo)

iOS的圖標(biāo)風(fēng)格是簡單易懂,并且專注于某個(gè)功能點(diǎn)或者信息點(diǎn)。通常情況下,iOS應(yīng)用程序需要使用到不同尺寸的圖標(biāo)。比如,用戶在安裝某一App后,在主屏幕可能需要使用較小的圖標(biāo),但該程序在App Store里又需要更大的圖標(biāo)。關(guān)于iOS圖標(biāo)大小,也有比較明確的規(guī)范:

 

4. iOS 11中的更新

1)加粗的導(dǎo)航設(shè)置

這幾乎是iOS 11中最令人印象深刻的變化。使用粗體標(biāo)題可以讓用戶快速了解其當(dāng)前位置,并進(jìn)行快速標(biāo)簽切換。

 

2)界面布局中的空白區(qū)域

iOS 11的標(biāo)題文本包含一組元素,其中包含圖片和描述,這些元素可以保持組元素之間的較大間距。在這種情況下,設(shè)計(jì)元素保持足夠的間距并且可以用于區(qū)分不必要的裝飾元素之間的層次關(guān)系。

 

地址:Mockplus

作者:jongde

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》iOS界面設(shè)計(jì):12個(gè)優(yōu)秀案例激發(fā)你的靈感

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



如何在界面設(shè)計(jì)中使用留白

seo達(dá)人


  01 .認(rèn)識(shí)留白 

在介紹如何使用留白提升用戶體驗(yàn)之前,我們需要先明確留白的意義。

留白是頁面元素與元素之間,以及元素周圍的空間。當(dāng)設(shè)計(jì)師談?wù)摿舭讜r(shí),實(shí)際上說的是負(fù)空間,術(shù)語“負(fù)空間”起源于傳統(tǒng)藝術(shù)形式,它讓我們更準(zhǔn)確地捕獲物體的形狀。

“Suprematism: Self Portrait in two dimensions”

負(fù)空間就是元素之間的部分  by Kasimir Malevich

 

雖然我們稱之為留白,但并不意味著就是白色的。只要該空間沒有任何的文字和圖像,即使被填充了任何顏色,這也算是一個(gè)留白。所以留白與實(shí)際的白色并沒有關(guān)聯(lián),“留白”就是“負(fù)空間”。

 

 02 . 為什么留白很重要 

留白是一個(gè)好設(shè)計(jì)的基本要素,與傳統(tǒng)藝術(shù)一樣,物體在GUI里也需要負(fù)空間,文字,Button,Logo,和其他元素需要空間去呼吸,所有優(yōu)秀的用戶界面里,從頂部到底部,頁面中所有的元素都有適當(dāng)?shù)牧舭住?

空白可分為兩種類型:大留白和小留白。

大留白

 

小留白

 

Note
小留白:文本和網(wǎng)格之間的空白,它有助于內(nèi)容的可讀性。
大留白:頁面上主要元素之間的空白,與小留白不同,大留白是整體設(shè)計(jì)的容器。

 

 03.七種影響用戶體驗(yàn)的留白 

留白是平衡設(shè)計(jì)元素的好工具,幫助我們更好得組織內(nèi)容,提升視覺信息傳達(dá)的體驗(yàn)。

— 1 強(qiáng)調(diào)特定元素 —

強(qiáng)調(diào)某種元素,是設(shè)計(jì)師最常見的任務(wù)之一,雖然設(shè)計(jì)師可以用許多視覺方法讓用戶聚焦在某些特定元素上,在焦點(diǎn)的周圍運(yùn)用留白往往都能獲得比較好的效果。

距離和注意力之間有特定的聯(lián)系,較大的距離能吸引人的注意,周圍的缺失使現(xiàn)有的元素更佳突出。設(shè)計(jì)師會(huì)運(yùn)用合適的留白去強(qiáng)調(diào)重要的元素,例如一段內(nèi)容,較大的Padding值會(huì)加強(qiáng)這個(gè)區(qū)域的吸引力,因?yàn)槠聊簧蠜]有其它元素可關(guān)注。

物體周圍的留白越多,就越容易吸引眼球。

在下面的例子里,Google在設(shè)計(jì)中大力倡導(dǎo)留白,留白很好地傳達(dá)了設(shè)計(jì)的意圖,我們的注意力在頁面的主要目標(biāo)上,不會(huì)分散給其他區(qū)域。

MailChimp的主頁運(yùn)用了相同的方法,來突出操作按鈕(call to action),你會(huì)注意到“Sign Up Free”這個(gè)按鈕立刻吸引了人的注意。

 

— 2 鏈接相關(guān)元素 —

當(dāng)我們?cè)跈z查元素布局時(shí),通常把它看做是一些對(duì)象的組合,這是因?yàn)槲覀兊拇竽X會(huì)根據(jù)物體之間的相對(duì)位置,來創(chuàng)造一個(gè)關(guān)系模型。格式塔的法則解釋了,臨近的物體會(huì)被看做是一個(gè)整體。留白也提供了一種視覺線索,看一下這張圖:

很可能你看到的是兩組點(diǎn)陣,而不是12個(gè)原點(diǎn),這是12個(gè)相同的點(diǎn),唯一不同的是他們的間距不同。

這個(gè)法則也可以用于交互設(shè)計(jì),我們來看下面的Web表單。

  • 相關(guān)元素成組:我們知道,一組元素靠在一起時(shí),看上去是有關(guān)系的,所以相關(guān)的標(biāo)簽要靠得近。左圖較難傳達(dá)出標(biāo)簽與輸入框的關(guān)系,而通過調(diào)整間距,如右圖,表單的可瀏覽性提高了。

  • 相關(guān)信息成組:眾所周知,長的表單讓人感到壓迫。用戶在填這些表格的時(shí)候會(huì)變得猶豫。把相關(guān)的字段組合在一起,能幫助用戶了解他們必須填寫的信息。以下的形式中,兩種表格都有相同數(shù)量的字段。不同的是右邊劃分了三個(gè)組,內(nèi)容的數(shù)量是相同的,但是給用戶的印象大不相同。

 

— 3 防止視覺雜亂 —

許多的App和網(wǎng)站承載著太多的信息和元素,沒有足夠的呼吸空間。這通常由于產(chǎn)品創(chuàng)造者希望傳遞太多的信息,不幸的是,用戶的關(guān)注度有限,越多的元素爭搶著注意力,用戶能夠關(guān)注到的就越少。

可以看下面的例子,這是一個(gè)元素太多引起的極端案例。

當(dāng)每個(gè)看上去都一樣的時(shí)候,用戶選不出重要的那一個(gè)

 

許多網(wǎng)站有著相同的問題,缺乏留白會(huì)給用戶的眼睛和耐心帶來壓力,充斥著文字和圖片的網(wǎng)站使用戶產(chǎn)生挫敗感,使他們逃離。

雜亂的頁面沒有吸引力,并且不會(huì)讓用戶想要閱讀內(nèi)容,尤其是當(dāng)沒有視覺層次時(shí)。

過多的信息負(fù)載讓界面變得混亂,那么減少混亂就能提高界面的可理解性:通過消除干擾,你可以強(qiáng)制用戶只關(guān)注即時(shí)可見的內(nèi)容,你可以用留白來減少壓迫性,留白可以減少噪音,讓用戶更能聚焦。當(dāng)布局達(dá)到了留白平衡,各個(gè)元素更容易被解讀時(shí),就會(huì)帶來更好的用戶體驗(yàn)。

Tip
請(qǐng)嘗試“5秒測試”,觀察一個(gè)頁面5秒鐘,然后回憶你記得的內(nèi)容,是否是你想要強(qiáng)調(diào)的元素,這將幫你了解頁面中是否有合適的留白。

 

— 4 通過互動(dòng)內(nèi)容引導(dǎo)用戶 —

如果你希望用戶的視線從一個(gè)點(diǎn)流向另一個(gè)點(diǎn),你需要給他一個(gè)這么做的線索,這個(gè)線索就是留白,留白運(yùn)用的得當(dāng)時(shí),能為頁面創(chuàng)造自然的視線流動(dòng)。

特定的留白可以實(shí)現(xiàn)有效引導(dǎo)、保持讀者的興趣,如下圖所見,Dropbox通過鋸齒模型引導(dǎo)用戶瀏覽一系列產(chǎn)品的關(guān)鍵特征。

空白可以幫助設(shè)計(jì)師講故事

 

不對(duì)稱是另一種留白技巧,可以用來引導(dǎo)用戶對(duì)某一部分的注意,當(dāng)一個(gè)元素運(yùn)用了不對(duì)稱留白,它會(huì)立馬就會(huì)從周圍的元素中跳脫出來,看起來更有活力。如果你要在頁面中設(shè)計(jì)一個(gè)鏈接或者按鈕,這種方法可以有效引起別人的注意。

非對(duì)稱留白非常適合聚焦頁面上的特殊區(qū)域

 

— 5 提高可讀性 —

內(nèi)容為王,內(nèi)容是大多數(shù)應(yīng)用程序和網(wǎng)站的價(jià)值,這就是為什么良好的可用性的一個(gè)關(guān)鍵方面是內(nèi)容的可讀性,很多因素可以提高可讀性,比如字體的大小和顏色,或使用標(biāo)題,留白是其中一個(gè)重要因素,因?yàn)樗鼘?duì)內(nèi)容的可讀性有直接的影響:

行間距可以大大提高一段文本的可讀性,一般來說,行間距越大,用戶閱讀時(shí)候的體驗(yàn)就越好,但是太大會(huì)破壞統(tǒng)一性,使得設(shè)計(jì)中斷。

段落和文字塊之間的留白有助于幫助人們更好地理解閱讀的內(nèi)容,根據(jù)2004年的研究,這種空白增加了近20%的可理解性

 

— 6 運(yùn)用視覺分隔線 —

設(shè)計(jì)師經(jīng)常使用橫向或縱向的線去創(chuàng)造分隔線,雖然這樣的分隔線在大多數(shù)情況下是可以的,有一個(gè)主要的缺點(diǎn),大量分隔線的使用會(huì)導(dǎo)致視覺的噪音,造成密集擁擠的頁面。

隨著用戶的偏好向更簡潔的界面轉(zhuǎn)移,對(duì)UI中的基本元素進(jìn)行解構(gòu)是成功的關(guān)鍵??梢杂秘?fù)空間來布局,而不是線,更少的分隔線能營造清爽、現(xiàn)代和更實(shí)用的感受,大方地使用留白可使一些復(fù)雜的界面看起來更簡潔友好。這一變化背后的真正意義在于,在關(guān)注內(nèi)容和功能同時(shí)消除冗余的元素。

 

— 7 創(chuàng)造成熟優(yōu)雅的感受 —

雖然留白經(jīng)常被看作是改善用戶體驗(yàn)的技巧,但它也可以被用于純粹的審美目的,大量留白的網(wǎng)站能反映出極簡和奢華感。

留白有助于提高整體設(shè)計(jì)的基調(diào)——通過把更多的焦點(diǎn)放在產(chǎn)品本身,使產(chǎn)品看上去更奢華。

 

04. 關(guān)于利益相關(guān)者的幾句話 

現(xiàn)在你可能知道了留白的重要性,而另一方面,留白可能引起設(shè)計(jì)師和利益相關(guān)者的矛盾?!傲舭滋嗔?,我們可以用來做什么?”是我們經(jīng)常從利益相關(guān)者(客戶或經(jīng)理)那里聽到的。

把這種要求作為一個(gè)機(jī)會(huì)去教育利益相關(guān)者,作為設(shè)計(jì)師,我們的工作就是幫助他人理解為什么留白是用戶體驗(yàn)重要的組成部分,宣揚(yáng)并解釋你的思考過程,如果這不起作用,你可以采用A/B測試,測試一個(gè)設(shè)計(jì)的兩個(gè)版本,一個(gè)由設(shè)計(jì)師提出,一個(gè)由客戶提出,用戶可能會(huì)喜歡那個(gè)不那么混亂的版本。

 

05.結(jié)論 

留白不是一個(gè)空白的畫布,而是一個(gè)強(qiáng)大的設(shè)計(jì)工具,但是這個(gè)工具很難掌握:現(xiàn)實(shí)應(yīng)用中的留白既是藝術(shù)也是科學(xué),掌握如何使用留白來創(chuàng)建良好的布局需要實(shí)踐。你實(shí)踐的越多,學(xué)到的也就越多。

 

原文地址:medium

譯文地址:51UXC(公眾號(hào))

譯者:51UXC 翻譯社

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》如何在界面設(shè)計(jì)中使用留白

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



為什么界面設(shè)計(jì)大多喜歡用藍(lán)色?

seo達(dá)人


 為什么選擇藍(lán)色?

理由很多,我這里羅列一些:

1、人們就是喜歡藍(lán)色

問卷調(diào)查顯示大部分人把藍(lán)色當(dāng)做它們最喜歡的顏色。因此藍(lán)色被認(rèn)為是全球最安全的顏色。

色彩偏好是視覺體驗(yàn)中的重要一環(huán):

 

2、與大自然的關(guān)聯(lián)

藍(lán)色與凈水、晴空等自然景觀能夠產(chǎn)生強(qiáng)烈的關(guān)聯(lián),這提高了人們對(duì)它的喜好。

 

3、界面設(shè)計(jì)的通用顏色

從一個(gè)界面設(shè)計(jì)師的角度來看,藍(lán)色絕對(duì)是一個(gè)有用的顏色。紅色、橙色和綠色通常都是有含義的,例如錯(cuò)誤、警示和完成。藍(lán)色相對(duì)來說就成為了非常好的選擇。

 

4、科技創(chuàng)新感

這也是很多公司使用這個(gè)顏色的原因。

 

5、安全感

在旅游網(wǎng)站上,藍(lán)色是一種非常通用的色彩,因?yàn)樗梢员磉_(dá)可以依賴的感覺,這對(duì)于旅游來說是件好事。

 

6、讓產(chǎn)品看起來更加可信

很多情況下,說服用戶使用我們的產(chǎn)品至關(guān)重要。這時(shí),藍(lán)色就可以表現(xiàn)出信賴感。很多像Dell、IBM、Intel、AT&T和支付寶這樣的科技公司利用藍(lán)色來傳遞信譽(yù)信息,因?yàn)樗麄兊漠a(chǎn)品是人們每天都要依賴的。

 

7、色弱

很多種色弱患者(如最常見的紅綠色盲)都可以看得到藍(lán)色,這一點(diǎn)上藍(lán)色明顯優(yōu)于諸如綠色和紅色等其他顏色(Z Yuhan:幸運(yùn)的是,色盲雖然在百種男性中的發(fā)病率高達(dá)10%,在亞洲人里卻十分少見)。

普通人看到的顏色 VS 色弱患者看到的顏色:

Facebook用藍(lán)色,因?yàn)樵瞬窬褪巧せ颊?,他說:“藍(lán)色對(duì)我來說是最豐富的顏色,我可以看到所有種類的藍(lán)色?!?

 

結(jié)論

我希望讀完本文,你能了解為何藍(lán)色在設(shè)計(jì)師中如此流行。然而這并不意味著你應(yīng)該把你的方案的主色調(diào)改成藍(lán)色。

藍(lán)色也不是最好的萬能色,萬能色并不存在。

在一個(gè)網(wǎng)站或App上行得通的顏色,可能在另一個(gè)上就不能用了。最安全的方法還是根據(jù)目標(biāo)用戶的喜好來選擇。

所以最終,用在你設(shè)計(jì)上的最佳色彩應(yīng)該是你的用戶所認(rèn)為的最佳色彩。

Z Yuhan:我發(fā)現(xiàn)我的手機(jī)上橙色比較多,文化差異,還是這幾年激烈競爭的變化?

 

原文地址:babich

譯文地址:知乎

譯者:Z Yuhan

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》為什么界面設(shè)計(jì)大多喜歡用藍(lán)色?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



“手把手教你設(shè)計(jì)”—12個(gè)最佳手機(jī)APP界面設(shè)計(jì)教程

seo達(dá)人

如何使用Photoshop來設(shè)計(jì)手機(jī)UI界面

1. How To Set Up Photoshop For UI Design

如果你是Photoshop的新手,又在做UI設(shè)計(jì),這個(gè)教程教你如何使用常用的Photoshop設(shè)置來達(dá)到更好的效果。本文是以iPhone為實(shí)例告訴你怎么在UI設(shè)計(jì)中使用Photoshop,完全是初學(xué)者的教程。

 

2. How to Design an iPhone App in Photoshop

這篇文章將為我們介紹使用Adobe Photoshop為iPhone設(shè)計(jì)一個(gè)簡單的3頁目錄列表應(yīng)用程序。并且將一步步地指導(dǎo)你完成這些步驟,還涵蓋了使用Photoshop設(shè)計(jì)iPhone應(yīng)用程序的所有基本原則。

 

3. Design an App Landing Page in Photoshop

在這個(gè)教程中,我們可以看到一個(gè)應(yīng)用程序著陸頁的詳細(xì)設(shè)計(jì)過程。設(shè)計(jì)師使用Tuts Android應(yīng)用程序進(jìn)行演示,強(qiáng)調(diào)其功能和優(yōu)勢(shì),利用多個(gè)CTA來完善整個(gè)著陸頁的設(shè)計(jì)。

 

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要設(shè)計(jì)一個(gè)像Facebook或者Instagram這樣成功的登錄界面設(shè)計(jì),那么這個(gè)完全是你必看的基礎(chǔ)教程,視頻中教你如何選擇顏色,設(shè)計(jì)按鈕以及詳細(xì)的步驟來展示登錄界面的設(shè)計(jì)過程。視頻雖然是四年前的,但是里面的設(shè)計(jì)依舊不過時(shí)。

 

如何使用Sketch來設(shè)計(jì)手機(jī)UI界面

1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

開始一個(gè)新的設(shè)計(jì)項(xiàng)目是很難的,無論你是自由設(shè)計(jì)師,還是在知名的產(chǎn)品公司工作,時(shí)常會(huì)感到迷茫。本文將一步步的教你如何使用Sketch開始一項(xiàng)新的APP設(shè)計(jì)項(xiàng)目。

 

2. Food App UI ? Sketchapp Tutorial / Sketch 4 Tutorial

視頻主要是介紹如何使用Sketch制作一個(gè)美食類APP 菜單欄UI設(shè)計(jì),簡單易懂。

 

3. Sketch 3 for iOS App Design Step by Step

Sketch 3是一款優(yōu)秀的矢量設(shè)計(jì)和圖形程序,很適合用于設(shè)計(jì)iOS應(yīng)用程序。在這個(gè)視頻中,設(shè)計(jì)師使用Sketch 3來設(shè)計(jì)一個(gè)iPhone APP用戶界面。

From Idea To Reality: Designing An App With Sketch And Xcode 》這篇文章是進(jìn)階版的APP 設(shè)計(jì)教程,從理論到具體的例子講解,非常受益。

 

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作為當(dāng)下主流的設(shè)計(jì)工具,似乎有超越Photoshop的趨勢(shì)。本視頻介紹的是如何使用Sketch來制作一個(gè)音樂APP登錄頁設(shè)計(jì),可以說是手把手的教程,每一步都非常的詳細(xì)細(xì)致,非常適合初學(xué)者。

看了前面的音樂類APP登錄界面的教程, 你是否也想設(shè)計(jì)出一個(gè)屬于自己的音樂APP呢?接下來我將介紹如何通過結(jié)合Sketch和原型設(shè)計(jì)工具設(shè)計(jì)一款音樂類的APP(Prototype an music app with prototyping tool)

 

TIMING

這款原型音樂類的APP在Mockplus設(shè)計(jì)大賽中斬獲頭籌,設(shè)計(jì)師通過采用Sketch以及Mockplus的結(jié)合,做出了高保真原型。這個(gè)APP主要體現(xiàn)一種復(fù)古的視覺效果,磁帶轉(zhuǎn)動(dòng)的效果是這次視覺上的設(shè)計(jì)重點(diǎn)。

 

必讀的手機(jī)界面UI設(shè)計(jì)好文

1. The 10 principles of mobile interface design

計(jì)算機(jī)和手機(jī)是人們?nèi)粘9ぷ骱蜕畋貍涞耐ㄓ嵐ぞ?。但在許多方面,手機(jī)往往更加強(qiáng)大,手機(jī)更加的私人化,與我們的聯(lián)系更緊密。鑒于移動(dòng)手機(jī)和計(jì)算設(shè)備之間的許多差異,移動(dòng)設(shè)計(jì)與桌面設(shè)計(jì)的設(shè)計(jì)大不相同。這篇文章詳細(xì)的向我們介紹了移動(dòng)界面設(shè)計(jì)的基本原則,幫助設(shè)計(jì)師們開發(fā)移動(dòng)應(yīng)用程序的獨(dú)特力量。

 

2. UI Design Do’s and Don’ts

iOS良好的優(yōu)化了用戶面設(shè)計(jì),并提供給用戶優(yōu)質(zhì)且具有吸引力的用戶體驗(yàn)。在開始你的iOS設(shè)計(jì)之前,一定要清楚Apple官網(wǎng)的關(guān)于iOS常見的設(shè)計(jì)原則,來在增強(qiáng)手機(jī)應(yīng)用的可用性和吸引力。更多關(guān)于優(yōu)秀的iOS界面設(shè)計(jì),請(qǐng)閱讀《iOS人機(jī)界面指南》。

 

3. How to use colors in UI Design

顏色可以說在UI設(shè)計(jì)中至關(guān)重要。用的好,那就成功了一半,用不好,可能導(dǎo)致整個(gè)應(yīng)用失敗。在你的配色方案中,最好只使用三種主色跳,使用的顏色越多。越難實(shí)現(xiàn)平衡。這篇文章不但提到基礎(chǔ)的用色知識(shí)加上實(shí)例解釋,還有常用的工具介紹。

 

4. 10 Best APP UI Design for Your Inspiration

每位UI設(shè)計(jì)師都?jí)粝胫龀鲎畛錾慕缑妫║I)設(shè)計(jì), 能夠脫穎而出的手機(jī)界面設(shè)計(jì)則少之又少。設(shè)計(jì)師們?cè)谠O(shè)計(jì)UI界面時(shí),往往會(huì)參考來自不同設(shè)計(jì)師的設(shè)計(jì),這篇文章列出了2017年最出色的的10個(gè)手機(jī)應(yīng)用界面設(shè)計(jì)范例,給設(shè)計(jì)師們謀福利。

 

總結(jié)

移動(dòng)設(shè)計(jì)不斷地在發(fā)展,如果你想跟上這個(gè)時(shí)代,你需要不斷閱讀和觀看高質(zhì)量的教程或文章。在本文中,我收集12個(gè)最佳教程的示例來教初學(xué)者如何學(xué)習(xí)手機(jī)UI界面設(shè)計(jì),希望你們能從中受益。

 

原文地址:Mockplus

作者:jongde

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》“手把手教你設(shè)計(jì)”—12個(gè)最佳手機(jī)APP界面設(shè)計(jì)教程


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



10個(gè)最新優(yōu)秀手機(jī)應(yīng)用界面設(shè)計(jì)實(shí)例

seo達(dá)人


1). YONO.MP3 mobile app – 音樂軟件

*設(shè)計(jì)師:Anton Shmatko, Green Shark Studio, Pavel Khenkin

*軟件介紹:YONO.MP3是一款即可欣賞音樂, 也可收聽廣播節(jié)目, 了解最新時(shí)訊和趣事的手機(jī)端音樂軟件。它會(huì)是你閑暇時(shí)搜索和分享歌曲,歌手和專輯的理想工具。

*亮點(diǎn):該款軟件采用了一個(gè)極具特色的配色方案 — 所有界面整體使用黑紅兩種顏色的對(duì)比, 經(jīng)典而不失大氣。 而局部漸變色的使用, 也讓其功能和按鈕更加突出,極具層次感。而且, 軟件圖片, 按鈕和圖標(biāo)的層級(jí)疊加, 也使整個(gè)界面更加的時(shí)尚柔和。總之,軟件界面設(shè)計(jì)整體簡潔漂亮而不失易用性。

 

2). Watering Tracker App – 生活類軟件

*設(shè)計(jì)師:Tubik

*軟件介紹:Watering Tracker app, 顧名思義,就是一款可以追蹤盆栽或植物的水分情況,及時(shí)提醒用戶澆水的生活類手機(jī)應(yīng)用。

*亮點(diǎn):首先,這種能夠監(jiān)測植物水分情況,通知用戶澆水的創(chuàng)意,新穎且有趣。其次,界面背景和局部添加的綠色植物圖片使整個(gè)界面更加的直觀舒適,帶給用戶好心情。 當(dāng)然,作為植物監(jiān)測的工具,同時(shí)也設(shè)置了顯示各株植物水分,濕度,光照之類細(xì)節(jié)信息的功能區(qū),即點(diǎn)即可了解到植物的具體生長情況,簡單易操作。而且,配色方面,黑色背景搭配白色和綠色圖片及按鈕,符合整個(gè)植物主題的同時(shí),也更易于用戶接受和使用。

 

3). Listen – 音樂軟件

*設(shè)計(jì)師:CD UXT

*軟件介紹:Listen是一款致力于為喜愛不同音樂風(fēng)格的用戶提供獨(dú)特且愉悅體驗(yàn)的音樂軟件。整個(gè)界面設(shè)計(jì)簡潔清晰,用戶可以簡單的通過不同頻道(例如最新歌曲,電臺(tái),主體和專輯等)和不同場景(例如駕車,運(yùn)動(dòng),工作和約會(huì)等)快速的搜尋到最喜愛的歌曲。而且,軟件還特別為用戶提供了根據(jù)不同心情播放不同音樂列表的功能,更具個(gè)性。總之,喜歡閑暇時(shí)沉浸在自己的音樂世界的你,它會(huì)是你最佳的選擇。

*亮點(diǎn):軟件整體采用經(jīng)典的藍(lán)色背景搭配白色字體和同色系圖片,更加柔和舒適。一系列插畫風(fēng)格 的場景和頻道對(duì)應(yīng)圖片,也使整個(gè)界面設(shè)計(jì)更加美觀有趣。結(jié)合明亮陰影的圖標(biāo)和按鈕讓軟件對(duì)應(yīng)功能更加凸顯的同時(shí), 更能易于用戶識(shí)別使用。 針對(duì)不同部件添加的靈活交互,也能夠使用戶具有更加流暢且愉悅的體驗(yàn)??傊?,它是一款以用戶愉悅體驗(yàn)為基礎(chǔ)而設(shè)計(jì)的軟件原型,值得嘗試。(點(diǎn)擊這里查看原型詳情

 

4). NightOwl Coffee – 咖啡預(yù)定軟件

*設(shè)計(jì)師:Queble Solutions

*軟件介紹:NightOwl Coffee是一款能夠幫助用戶根據(jù)自己的需要快速訂購各式咖啡的手機(jī)應(yīng)用軟件。

*亮點(diǎn):軟件整體采用了獨(dú)具特設(shè)的插畫風(fēng):主頁添加的由明亮顏色和各種幾何元素呈現(xiàn)的卡通咖啡機(jī),可愛且切合主題。純色的背景搭配上灰色插畫以及黃色圖標(biāo)和按鈕,使整個(gè)軟件界面更加干凈整潔,易于用戶使用。

 

5). Roomframes app – 管理型軟件

*設(shè)計(jì)師:Adrain Rudzik

*軟件介紹:Roomframe app是一款適用于iOS手機(jī)端的應(yīng)用軟件,能夠幫助用戶記錄并珍藏他們所旅行過的地方的相關(guān)記憶,尤其是他們旅行中所居住過的房間的珍貴記憶。所以,從這方面來講,它是一款生活管理型手機(jī)應(yīng)用。

*亮點(diǎn):軟件多處使用了框架設(shè)計(jì),方便用戶根據(jù)不同的旅店,工作區(qū)和相關(guān)新增地點(diǎn),添加對(duì)應(yīng)的日期,圖片和描述。其簡單的白色背景,使用戶信息更加明顯,也易于用戶隨時(shí)回顧或與家人朋友分享這些難忘的回憶。

 

6). iOS App Slide Car – 生活類軟件

*設(shè)計(jì)師:Melany Roa

*軟件介紹:iOS App Slider Car是一款專門針對(duì)iOS手機(jī)研發(fā)的應(yīng)用軟件,能夠幫助用戶分類搜索各式汽車信息,并實(shí)現(xiàn)在線交易的一種手機(jī)端應(yīng)用。同時(shí),它也是一款能夠幫助用戶結(jié)交不同汽車愛好者的社交工具。

*亮點(diǎn):簡單純色的背景,使用戶專注于汽車圖片,價(jià)格,描述和所有者等信息。搜索界面添加各種搜索參數(shù),用戶簡單點(diǎn)擊即可實(shí)現(xiàn)汽車信息搜索。總之,整個(gè)界面簡單,整潔而實(shí)用。

 

7). Karoline – 購物軟件

*設(shè)計(jì)師:Varduhi Adami

*軟件介紹:Karoline是一款手機(jī)端服裝購物軟件,提供了各類服裝的詳細(xì)信息和購買渠道。

*亮點(diǎn):軟件整體的粉色系配色,柔和甜美,對(duì)女性購買者極具吸引力。所有界面以服裝圖片為主,更易于用戶根據(jù)喜好挑選。而且,添加的簡單且易識(shí)別的圖標(biāo)和按鈕,方便用戶搜索和查詢相關(guān)服裝細(xì)節(jié)。軟件界面豐富,例如主頁,我的賬號(hào),我的訂單,我的購物車,要請(qǐng)朋友,設(shè)置,購買等,能夠滿足用戶購買時(shí)各方面的需求。所以,如果你有通過手機(jī)在線購買服裝的打算,它會(huì)是不是錯(cuò)的嘗試。

 

8).Space – 管理類軟件

*設(shè)計(jì)師:Doeun Shin

*軟件介紹:Space是一款能夠幫助用戶更加有效的管理日常生活的手機(jī)端應(yīng)用。主要提供了兩項(xiàng)特色服務(wù):早上,自動(dòng)結(jié)合用戶的日常習(xí)慣,提供有用的日程管理信息和建議,例如交通和天氣情況等; 晚上,通過自動(dòng)分析用戶語音日記,提供符合用戶心情的主體和提示音等等。

*亮點(diǎn):該軟件以插畫風(fēng)為基礎(chǔ),添加了各式動(dòng)畫按鈕及圖片,直觀生動(dòng)。藍(lán)色主題,漂亮舒適,無論早上還是晚上使用,用戶都不會(huì)反感。而且,軟件本身添加多樣的功能性界面,例如語音日記,心情日歷,日常服務(wù),節(jié)日簡介等等,簡單全面??傊且豢顦O具吸引力的管理軟件。

 

9).QuickBee – 廣告類軟件

*設(shè)計(jì)師:Monish Mohanan

*軟件介紹:QuickBee是一款廣告分類管理軟件,提供了生活中各個(gè)方面的信息,例如汽車,房地產(chǎn),求職和教育等風(fēng)方面面信息。使用者只需創(chuàng)建賬號(hào),即可搜尋所需生活信息,了解流行趨勢(shì),瀏覽各類特色廣告。

*亮點(diǎn):軟件設(shè)計(jì)簡潔,顏色搭配極佳。彩色按鈕呈現(xiàn)多樣的生活分類,整潔美觀。各式框架呈現(xiàn)流行趨勢(shì)和特色廣告,簡潔有序。矢量圖標(biāo)簡單易識(shí)別。添加多種界面,滿足用戶各方面的需求。

 

10).Wallet – 理財(cái)類軟件

*設(shè)計(jì)師: uixNinja

*軟件介紹:Wallet一款能夠幫助使用者理財(cái)?shù)囊苿?dòng)端軟件。

*亮點(diǎn):軟件使用黑色,紅色和紫色三種顏色的對(duì)比和漸變,極具特色,漂亮?xí)r尚。簡易圖標(biāo)和多色幾何圖形,是軟件界面更加簡潔使用,令人印象深刻。

 

結(jié)語

這些就是我們所搜集的10款最新的優(yōu)秀手機(jī)端軟件UI設(shè)計(jì)作品。 希望他們不僅能給你新的設(shè)計(jì)帶來靈感,同時(shí)也能幫助你把握和預(yù)計(jì)2018年手機(jī)應(yīng)用UI設(shè)計(jì)的發(fā)展趨勢(shì)。

 

原文地址:Mockplus

作者:jongde

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》10個(gè)最新優(yōu)秀手機(jī)應(yīng)用界面設(shè)計(jì)實(shí)例


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



大屏監(jiān)控系統(tǒng)數(shù)據(jù)可視化界面設(shè)計(jì)

seo達(dá)人

大屏監(jiān)控系統(tǒng)數(shù)據(jù)可視化是藍(lán)藍(lán)設(shè)計(jì)的一個(gè)重要發(fā)展方向,近幾年了積累了一些經(jīng)驗(yàn)和作品,除了部分作品是保密的之外,可以放在網(wǎng)站上的作品請(qǐng)瀏覽,藍(lán)藍(lán)設(shè)計(jì)也建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加微信號(hào)ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系010-63334945。

點(diǎn)擊查看原圖

點(diǎn)擊查看原圖


安全管理主題.jpg

點(diǎn)擊查看原圖

點(diǎn)擊查看原圖

htmy.png

dp_icon1.png

hzyd.png

HZpolice.jpeg

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

費(fèi)茨定律如何指導(dǎo)界面設(shè)計(jì)

seo達(dá)人

什么是費(fèi)茨定律

費(fèi)茨定律是人類運(yùn)動(dòng)的預(yù)測模型,主要用于人機(jī)交互和人體工程學(xué)。該法則預(yù)測光標(biāo)/手指從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間(T)由到目標(biāo)的距離(D)和目標(biāo)的大?。╓)所決定,用數(shù)學(xué)公式表達(dá)為時(shí)間 T =a + b log2 ( D /W + 1 )。其中a、b是經(jīng)驗(yàn)常數(shù),a代表手指開始到停止的時(shí)間,b代表手指的移動(dòng)速度。

舉個(gè)生活中一個(gè)開燈的例子:

早期的開關(guān)只有一個(gè)手指大,每次開燈的時(shí)候都需要將手移動(dòng)到開關(guān)上方,然后伸出手指調(diào)整到適合位置然后在按下。由于按鈕小,在沒開燈的時(shí)候你根本不知道它在哪里,需要不停的摸,所需時(shí)間就比較長。后期大家意識(shí)到了這個(gè)問題,將開關(guān)按鈕設(shè)計(jì)變大,人們操作時(shí)只需要將手移動(dòng)到按鈕上方,由于面積大不需要調(diào)整直接按下即可,所需時(shí)間就比較短。

 

如何指導(dǎo)界面設(shè)計(jì)

費(fèi)茨定律應(yīng)用比較廣泛,其在移動(dòng)界面設(shè)計(jì)中也有很好的啟發(fā)意義,結(jié)合費(fèi)茨定律公式可以得出指導(dǎo)我們?cè)O(shè)計(jì)的三個(gè)要點(diǎn):

1. 按鈕越大,所需時(shí)間越短

根據(jù)公式,當(dāng)?shù)侥繕?biāo)的距離(D)一定時(shí),目標(biāo)大?。╓)越大,所需時(shí)間越短,反之越長。下面以支付寶的登錄流程為例,如下圖所示:

左圖是支付寶初始頁,該頁面主要讓用戶選擇合適自己的操作方式。因此在設(shè)計(jì)上采用登錄和注冊(cè)按鈕并排的方式,目標(biāo)區(qū)域較小,給用戶充分選擇的時(shí)間。

中圖和右圖,界面中僅僅只有一個(gè)按鈕,其他注冊(cè)、遇到問題都可弱化用文字高亮的樣式展示,用戶在操作時(shí)基本不用想就知道點(diǎn)擊下一步按鈕。大大的減少了操作時(shí)間,讓用戶可以專注于登錄上。

 

2. 距離越遠(yuǎn),所需時(shí)間越長

當(dāng)按鈕大小一定時(shí),手到目標(biāo)的距離越遠(yuǎn),所需時(shí)間就越長,反之越短。但是這里就發(fā)現(xiàn)一個(gè)問題,移動(dòng)端如何判斷手到目標(biāo)的距離呢?這里我們可以借用拇指熱區(qū)來進(jìn)行判斷。隨著手機(jī)越來越大,不同機(jī)型的拇指熱區(qū)會(huì)有所差異,以iPhone6右手操作為例,它的拇指熱區(qū)。如下圖所示:

根據(jù)圖例可知綠色區(qū)域是我們手指最容易輕松達(dá)到的,橙色是伸長手指才能觸達(dá),操作相對(duì)較難,紅色區(qū)域?yàn)殡y以觸及的區(qū)域。我們可以判斷手指到綠色區(qū)域的時(shí)間最短,到紅色區(qū)域的時(shí)間最長。因此在設(shè)計(jì)時(shí)我們需要將重要層級(jí)高的按鈕放到拇指熱區(qū)的綠色部分中,讓目標(biāo)離手指越近,從而提高操作速度。如下圖所示:

以上兩個(gè)案例均是Feed流界面,在卡片中露出功能有點(diǎn)贊、評(píng)論、分享這三個(gè)按鈕,其中大眾點(diǎn)評(píng)這三個(gè)中點(diǎn)贊的重要性層級(jí)最高,因此將其放在綠色最易觸達(dá)區(qū)域,單手操作離手指距離最近,而分享和評(píng)論次之,因此將其放在了紅色和橙色區(qū)域,單手操作離手指更遠(yuǎn)。

其中微信讀書這三個(gè)中分享的重要層級(jí)最高,因此將其放在最易觸達(dá)的綠色區(qū)域,單手操作更近。

 

3. 手移動(dòng)越快,越易錯(cuò)誤操作

其實(shí)不管你手的速度有多快,當(dāng)距離較遠(yuǎn)、按鈕較小時(shí),當(dāng)手移動(dòng)到按鈕上方就會(huì)停下來進(jìn)行定位然后才能準(zhǔn)確得進(jìn)行操作,如果只要求速度,手移動(dòng)過來直接點(diǎn)擊有可能就點(diǎn)中不了按鈕,容易進(jìn)行錯(cuò)誤操作。

因此在UI設(shè)計(jì)中,如果我們想要用戶能夠快速操作,可以為用戶打破距離和大小帶來的限制,結(jié)合手勢(shì)操作來進(jìn)行設(shè)計(jì)。如下圖所示:

以微信為例,在微信列表中為了讓用戶能夠快速操作列表,引入了手勢(shì)操作(安卓長按、iOS側(cè)滑),當(dāng)長按或側(cè)滑列表時(shí),就會(huì)在當(dāng)前位置出現(xiàn)操作內(nèi)容,提高操作效率。

 

在移動(dòng)端界面中的應(yīng)用

在實(shí)際交互設(shè)計(jì)中,合理使用費(fèi)茨定律,可以讓我們的界面使用更流暢,錯(cuò)誤率更低。下面我們一起來看看費(fèi)茨定律的四大應(yīng)用場景。

1. 來電顯示場景——不同狀態(tài),不同設(shè)計(jì)方式

iOS的來電提示在鎖屏和蘇醒狀態(tài)分別采用滑動(dòng)接聽和點(diǎn)擊接聽,可以很好的用費(fèi)茨定律來解釋。如下圖所示:

鎖屏?xí)r:用戶手機(jī)場景不確定,很容易意外點(diǎn)擊。在設(shè)計(jì)時(shí)就需要增加操作距離、延長操作時(shí)間,防止誤操作的情況,采用滑動(dòng)解鎖就可以增加操作的距離,放在該場景中使用較為合適。

蘇醒時(shí):用戶正在使用手機(jī),這時(shí)候采用滑動(dòng)操作距離太長了,因此設(shè)計(jì)為按鈕的樣式,用戶可快速點(diǎn)擊接聽或拒絕,進(jìn)而提高用戶操作效率。

 

2. 將返回浮于底部操作欄中——縮短操作距離和時(shí)間

隨著屏幕越來越大,拇指熱區(qū)也發(fā)生了變化,你會(huì)發(fā)現(xiàn)左上角的返回按鈕單手操作越來越不可能,尤其是Plus、iPhoneX的出現(xiàn)返回按鈕顯得有點(diǎn)雞肋。不過在體驗(yàn)資訊類的產(chǎn)品時(shí)發(fā)現(xiàn),部分界面他們將返回按鈕放到類界面底部左下角的位置,下面將這兩種進(jìn)行對(duì)比下。如下圖所示:

以今日頭條的詳情為例,返回按鈕在常規(guī)的左上角。結(jié)合拇指熱區(qū)你會(huì)發(fā)現(xiàn)左上角的區(qū)域單手是很難到達(dá)的。對(duì)于資訊類APP需要不斷切換看的文章,返回鍵在左上角無疑加重了操作難度。

以虎嗅為例,他們將返回按鈕移動(dòng)到了底部左下角,結(jié)合拇指熱區(qū)你會(huì)發(fā)現(xiàn)左下角的區(qū)域單手是可以輕松到達(dá)的,將返回按鈕放在底部,大大的節(jié)約了用戶操作時(shí)間。

需要注意的是,盡管通過分析,返回按鈕在左下角單手更好操作,但是有時(shí)候習(xí)慣真的是一件可怕的事情,比如我在華西醫(yī)院的微信小程序時(shí),很少能夠記住點(diǎn)擊底部的前進(jìn)和后退鍵,每次想返回上一級(jí),就習(xí)慣性的點(diǎn)左上角,結(jié)果就直接退出小程序。如下圖所示:

、

面對(duì)頂部返回鍵單手不方便點(diǎn)擊、底部返回鍵又老是記不住點(diǎn),同時(shí)在當(dāng)前規(guī)范下又不適合大面積的使用,怎么樣才能幫助用戶操作呢?其實(shí)iOS按住左側(cè)屏幕邊緣向右滑既可以返回上一步,安卓自帶虛擬返回鍵都是較為快捷的操作方式。

 

3. 合理利用手勢(shì)操作——提高用戶操作速度

安卓的長按和iOS的側(cè)滑編輯大家都比較熟悉,他們多用在列表頁的編輯狀態(tài),用戶長按或側(cè)滑列表,操作按鈕就顯示在當(dāng)前位置,操作效率比較高,如下圖所示:

以天貓購物車為例,大家知道長按是安卓端常用的功能,側(cè)滑是iOS端的功能,然后天貓購物車這兩種功能都支持。其主要原因考慮到安卓用戶在使用蘋果手機(jī)時(shí),可能不知道側(cè)滑的功能,因此在購物車的編輯中還加入了長按功能,讓用戶能夠更快捷的操作。

 

4. 將操作按鈕進(jìn)行收納——阻礙用戶操作

在設(shè)計(jì)時(shí)如果控制不經(jīng)常使用,或者想阻礙用戶操作時(shí),就可以把操作按鈕放遠(yuǎn)一點(diǎn),同時(shí)在設(shè)計(jì)上可以將其收納,加大用戶到操作難度。如下圖所示:

以大眾點(diǎn)評(píng)詳情為例,在右上角并沒有直接放舉報(bào)到按鈕,而是放到更多到按鈕,一個(gè)原因是為了方便后期的拓展,另外很重要到一個(gè)原因是不想讓用戶舉報(bào)加深用戶的操作難度。

 

總結(jié)

本文主要分享了費(fèi)茨定律在UI界面中的應(yīng)用,結(jié)合今天的分析,總結(jié)起來主要有四個(gè)要點(diǎn):

  • 1、我們想要更容易點(diǎn)擊到目標(biāo),就需要將一個(gè)頁面的主操作按鈕放大。
  • 2、我們想要讓用戶快速點(diǎn)擊目標(biāo),操作更方便,可以將目標(biāo)放于拇指熱區(qū)輕松觸達(dá)區(qū)域。
  • 3、我們想要讓用戶快速移動(dòng)時(shí),就可以利用手勢(shì)操作,它打破距離和大小的限制,從而讓用戶可以快速操作。
  • 4、我們不想要用戶操作或不常用的控件時(shí),就可以將按鈕進(jìn)行收納,加大用戶操作距離,從而增長用戶的操作時(shí)間。

 

參考文獻(xiàn):

Technical Artist的不歸路 —— 費(fèi)茨定律(Fitts’s Law)在UI設(shè)計(jì)中的使用  

設(shè)計(jì)法則: Fitts’ Law / 費(fèi)茨定律(費(fèi)茨法則)

《通用設(shè)計(jì)法則》立德威爾著   朱占星 薛江譯 中央編譯出版社 2013年9月北京第1版

 

原文地址:海鹽社(公眾號(hào))

作者:風(fēng)箏KK

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》費(fèi)茨定律如何指導(dǎo)界面設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



界面設(shè)計(jì)中的三維設(shè)計(jì)法

seo達(dá)人


隨著當(dāng)今越來越多的信息需要被展示、曝光,而移動(dòng)設(shè)備的屏幕空間又有限,為了減少用戶在使用應(yīng)用時(shí)的跳轉(zhuǎn),減少用戶的路徑,設(shè)計(jì)師們開辟了第三個(gè)維度——即在 z 軸上展示疊加的分層動(dòng)效進(jìn)行交互表達(dá),從二維到三維,這樣更能有效利用手機(jī)屏幕上的有限空間,這也是以后界面設(shè)計(jì)的大趨勢(shì)。

這個(gè)思維方式最早是在安卓的MATERIAL DESIGN語言上體現(xiàn)出來的。(以下簡稱MD)

 

Depth(深度):

Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.

在MD的設(shè)計(jì)規(guī)范中,用Depth來說明界面設(shè)計(jì)中的深度,既而在界面設(shè)計(jì)中引入了Z軸的設(shè)計(jì)思維,將界面設(shè)計(jì)由二維設(shè)計(jì)引進(jìn)了三維設(shè)計(jì)思維的地帶。MD通過抽象化紙片在物理世界中的形態(tài),定義除了各種信息層級(jí)以及常用狀態(tài)的表達(dá)方式。

再來看看,如今iOS的最新版本iOS 12,也已經(jīng)開始向這一方向進(jìn)行發(fā)展。最典型的要屬以下的iOS的內(nèi)置應(yīng)用:股市、語音備忘錄、地圖、錢包、音樂、播客、App Store等。

三維設(shè)計(jì)法,在界面設(shè)計(jì)當(dāng)中,主要分為兩個(gè)方向來運(yùn)用,視覺設(shè)計(jì)和交互設(shè)計(jì)。

人們通過雙眼能夠分辨出物體遠(yuǎn)近大小的形態(tài),因此如果利用這樣的視覺規(guī)律,便可以在畫面中呈現(xiàn)出真實(shí)的效果,突出視覺的立體化。

因?yàn)槭巩嬅娈a(chǎn)生三維的模擬真實(shí)的效果,可以畫面更具有吸引力,我們之所以能夠看清楚物體,是因?yàn)橛泄獾拇嬖?,現(xiàn)實(shí)生活的影子是因光而產(chǎn)生的,才是一個(gè)真實(shí)立體形。如果能恰當(dāng)運(yùn)用光影的效果,那將會(huì)讓圖形在進(jìn)行三維空間轉(zhuǎn)換時(shí)變得更加凸顯。

當(dāng)今,在界面的視覺設(shè)計(jì)方面,通過層疊、卡片化和投影的設(shè)計(jì)手法來對(duì)界面的內(nèi)容進(jìn)行處理,可以增加界面的層次感。在如今同質(zhì)化嚴(yán)重的扁平化設(shè)計(jì)下,能給人煥然一新的感覺,同時(shí)也給人一種內(nèi)容呼之欲出的感覺,加強(qiáng)了點(diǎn)擊的欲望。這樣的設(shè)計(jì)手法讓界面的Z軸空間得以加強(qiáng),必將是下一個(gè)新的趨勢(shì)。

例如:KEEP、潮汐、蝦米音樂

 

例如:Dribbble 和 Behance

圖片來源于網(wǎng)絡(luò)

 

而在交互設(shè)計(jì)方面,想同時(shí)展示多種內(nèi)容時(shí),假設(shè)對(duì)一個(gè)需求有著很強(qiáng)的曝光要求,或者是想讓用戶知道有這項(xiàng)內(nèi)容的存在,但又不想讓頁面內(nèi)容過長,導(dǎo)致被忽略或難以找到時(shí),可以采用頁面Z軸層級(jí)覆蓋的表現(xiàn)形式。

采用了Z軸層級(jí)覆蓋的架構(gòu)形式,用戶主要的交互操作變?yōu)樯侠?、下拉來閱讀信息,減少了點(diǎn)擊跳轉(zhuǎn)這一類的操作,減少了用戶的操作成本。且滑動(dòng)手勢(shì),是以后人機(jī)交互發(fā)展中的一個(gè)必然趨勢(shì)。

在一些APP中有所表現(xiàn)的有:豆瓣FM、豆瓣詳情頁等。(大家可以從這些APP上獲取設(shè)計(jì)靈感)

豆瓣FM

 

豆瓣(電影詳情頁)

 

例如:

上圖是京東(APP)的商品詳情頁,這時(shí)候我們接到的需求是將上圖的文案放進(jìn)這個(gè)界面中。

要知道在寸土寸金的APP界面中,每一個(gè)位置都是十分的寶貴,一但放置不佳,就會(huì)給用戶的視覺流造成一定的影響,使得用戶體驗(yàn)下降。況且,還是京東這樣流量巨大的電商APP,位置便顯得更加寶貴,而上圖中的紅色標(biāo)記范圍就是我們的限制區(qū)域,下面我們先來看一個(gè)不合理的做法。

上圖我們是直接加了一個(gè)界面,將這個(gè)模塊設(shè)定為可以進(jìn)行跳轉(zhuǎn),從而達(dá)到顯示完整(文案)的需求。

這樣做,不僅增加了用戶的路徑,而且還會(huì)給來回切換的用戶造成一定的困擾,消耗了手機(jī)的資源的同時(shí),下面的留白也顯得很浪費(fèi)、空曠,視覺上就很不美觀。

那么,京東是怎么做的呢?

京東采用了一個(gè)浮層設(shè)計(jì)(Z軸),將全跳轉(zhuǎn)改為半跳轉(zhuǎn),這便是在界面設(shè)計(jì)中的Z軸運(yùn)用,這樣既可以達(dá)到文案所要求的曝光,也能最大利用讓界面的空間,實(shí)現(xiàn)與原場景的完美銜接。

通過在 Z 軸上進(jìn)行分層設(shè)計(jì),模擬物理世界中人與物的真實(shí)的交互模式,幫助用戶理解產(chǎn)品設(shè)計(jì),將信息更好的淺層化,這樣可以給設(shè)計(jì)師們帶來更多發(fā)揮的空間。

在使用這個(gè)思維來做設(shè)計(jì)時(shí),可以事先考慮以下幾點(diǎn):

  • 根據(jù)用戶使用體驗(yàn),來判斷是否需要使用Z軸分層交互。
  • 這樣做是否能幫助用戶更好的理解你所做的設(shè)計(jì)?
  • 空間感設(shè)計(jì)主要意義是能正確的引導(dǎo)用戶,并建立起對(duì)產(chǎn)品的使用邏輯。
  • 每一個(gè)界面層級(jí)只需要表現(xiàn)一件事。
  • 當(dāng)你想要在界面中加入一個(gè)菜單欄但發(fā)現(xiàn)沒有空間?這時(shí)候可以考慮使用Z軸的設(shè)計(jì)。
  • 謹(jǐn)慎使用Z軸層級(jí)交互,因?yàn)樗鼤?huì)增加空間關(guān)系的復(fù)雜度。
  • 多參考現(xiàn)實(shí)世界中的真實(shí)交互,它給你的預(yù)期和感受,在互聯(lián)網(wǎng)設(shè)計(jì)中的很多靈感都來自于對(duì)真實(shí)世界的理解。

 

總結(jié):

我們?cè)谧鲈O(shè)計(jì)時(shí),可以把當(dāng)前的界面可以想象成一個(gè)的三維世界——分作X軸,Y軸,與Z軸,在這三個(gè)坐標(biāo)軸上,可以進(jìn)行思維上拓展。

在交互設(shè)計(jì)當(dāng)中,減少跳轉(zhuǎn)便是減少用戶路徑,就是使用各種方法在三維空間中,用x軸、y軸、z軸做出最合適、合理的用戶體驗(yàn)設(shè)計(jì)。

 

原文地址:站酷

作者:ChrisIce

 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》界面設(shè)計(jì)中的三維設(shè)計(jì)法

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



那些高效的界面設(shè)計(jì)工具

seo達(dá)人


Part1 界面設(shè)計(jì)工具的發(fā)展歷程

隨著互聯(lián)網(wǎng)行業(yè)的日益繁榮,界面設(shè)計(jì)領(lǐng)域逐漸走向成熟,界面設(shè)計(jì)工具也一直在以驚人的速度發(fā)展。界面設(shè)計(jì)工具的發(fā)展歷經(jīng)了三個(gè)階段:
  • 1. 第一階段是最早期界面設(shè)計(jì)領(lǐng)域剛剛起步,設(shè)計(jì)師普遍使用PS來制作界面。但PS是一個(gè)全面的而非專門針對(duì)界面設(shè)計(jì)的工具,因此界面設(shè)計(jì)師在界面的繪制、文件的交付上都存在一定不便。
  • 2. 第二階段是Sketch的出現(xiàn)。雖然Sketch是一款Mac端軟件,但其作為一款專門針對(duì)界面設(shè)計(jì)的工具,以其高效、小巧的優(yōu)勢(shì)迅速占領(lǐng)界面設(shè)計(jì)市場,逐步取代PS成為各大設(shè)計(jì)團(tuán)隊(duì)的首選。由于Sketch在動(dòng)效制作方面的欠缺,出現(xiàn)了Principle、Flinto、Protopie等專門設(shè)計(jì)界面動(dòng)效的工具,一般設(shè)計(jì)師都會(huì)將其搭配使用。
  • 3. 當(dāng)前階段各種新興設(shè)計(jì)工具如XD、Figma、Framer Web逐漸走進(jìn)設(shè)計(jì)師們的視野,它們專注于界面設(shè)計(jì)領(lǐng)域,不斷挖掘和突破Sketch的短板,為設(shè)計(jì)師們打造更良好的使用體驗(yàn)。

 

Part2 界面設(shè)計(jì)工具的未來發(fā)展趨勢(shì)

界面設(shè)計(jì)工具的發(fā)展改變著設(shè)計(jì)師們的工作方式。界面設(shè)計(jì)工具也漸漸從單一專注設(shè)計(jì)本身向云端性、協(xié)作性、通用性發(fā)展,旨在實(shí)現(xiàn)更高效的設(shè)計(jì)生產(chǎn)活動(dòng)。

 

1. 云端性

隨著云計(jì)算的發(fā)展,界面設(shè)計(jì)工具也在逐步走向云端化。設(shè)計(jì)從本地轉(zhuǎn)向云端,不再依賴于本地硬件的性能,云端的計(jì)算能力讓使用性能得以提高。設(shè)計(jì)也不再受時(shí)間和空間的限制,只要有網(wǎng)絡(luò),設(shè)計(jì)師可以隨時(shí)隨地的工作,臨時(shí)使用其他電腦工作時(shí)省去了安裝軟件、同步設(shè)計(jì)文件的麻煩。

設(shè)計(jì)文件的共享從傳送本地文件給對(duì)方,變成發(fā)送鏈接給對(duì)方。前者耗費(fèi)本地內(nèi)存與下載時(shí)間,后者有網(wǎng)即可打開。設(shè)計(jì)工具的云端性使得設(shè)計(jì)的靈活度增強(qiáng),設(shè)計(jì)效率大大提高。

 

2. 協(xié)作性

注重不同工種之間的高效協(xié)作也是設(shè)計(jì)工具的一個(gè)發(fā)展趨勢(shì)。新興的設(shè)計(jì)工具(如Figma、Framer Web)試圖將產(chǎn)品、設(shè)計(jì)、開發(fā)、測試融為一個(gè)整體,讓不同工種之間可以高效討論、同步設(shè)計(jì)方案。實(shí)現(xiàn)整個(gè)團(tuán)隊(duì)效率的最大化。利用技術(shù)降低反復(fù)溝通的成本、減少同步不一致情況的發(fā)生,掃除各工種之間的協(xié)作障礙。

 

3. 通用性

今年9月Figma舉辦的第二屆Config Europe大會(huì),其主題是讓設(shè)計(jì)和代碼連接更緊密。可以看出設(shè)計(jì)工具越來越注重其通用性,設(shè)計(jì)工具不僅可以幫助設(shè)計(jì)師輸出設(shè)計(jì)稿本身,而且致力于打破設(shè)計(jì)與代碼之間的壁壘,降低交接成本。讓設(shè)計(jì)實(shí)現(xiàn)變得更加輕松高效。

 

Part3 界面設(shè)計(jì)工具推薦 

1. UI工具篇

1.1 Figma
Figma是一款全平臺(tái)通用的在線界面設(shè)計(jì)軟件。2019年UXTOOLS設(shè)計(jì)工具使用報(bào)告中顯示,F(xiàn)igma的使用率從12%增長至26%,在今年的Config Europe大會(huì)上Figma也預(yù)告了一些即將推出的功能迭代,其便捷高效的特性使其受到眾多設(shè)計(jì)師的追捧,正在逐步搶占sketch的用戶市場。

 

Figma與Sketch相比,亮點(diǎn)功能有哪些?

1)Windows用戶也可隨心使用

與sketch只支持蘋果生態(tài)系統(tǒng)相比,F(xiàn)igma最大的好處是windows用戶也可以使用。他支持在Mac、windowsPC機(jī)甚至ipad上使用,理論上只要你能打開瀏覽器,就可以使用Figma愉快地設(shè)計(jì)。 

 

2)云端文件使用不卡頓,支持離線編輯

Figma創(chuàng)建的文件全部存儲(chǔ)在用戶的云端賬戶中,不占用本地內(nèi)存。當(dāng)文件過大時(shí),sketch會(huì)出現(xiàn)卡頓現(xiàn)象,拖拽一個(gè)圖層都會(huì)變得很困難。而Figma對(duì)本地資源的消耗很小,大文件也幾乎不存在卡頓的情況。

設(shè)計(jì)師們最關(guān)心的無網(wǎng)或若網(wǎng)情況下Figma的使用問題,F(xiàn)igma也給出了相應(yīng)的解決方案。其支持離線編輯,離線時(shí)會(huì)自動(dòng)把內(nèi)容保存在本地,當(dāng)網(wǎng)絡(luò)恢復(fù)后自動(dòng)同步到云端。  
1

3)一鍵導(dǎo)入sketch文件

Figma可導(dǎo)入Sketch文件,大大降低了文件遷移成本。如果你想遷移全部工作到Figma是十分便捷快速的。

 

4)更強(qiáng)大的組件功能

Figma和Sketch都擁有組件功能。當(dāng)原始組件更改時(shí),復(fù)制組件就會(huì)同步變化,在這點(diǎn)上二者是相同的。但Figma在組件邏輯上比Sketch更進(jìn)一步,復(fù)制組件可以靈活處理與原始組件的同步關(guān)系。當(dāng)設(shè)計(jì)師修改復(fù)制組件的樣式時(shí),原始組件不受影響。此時(shí)二者的關(guān)聯(lián)邏輯仍然存在,當(dāng)再次修改原始組件,復(fù)制組件仍然會(huì)同步變化。相比于Sketch,F(xiàn)igma把組件做的更加靈活限制更少。

同時(shí)Figma也在不斷優(yōu)化其組件功能,在Config Europe大會(huì)上,F(xiàn)igma預(yù)告在今年11月會(huì)正式上線組件Variants功能。該功能是將一系列有關(guān)聯(lián)的內(nèi)容生成一個(gè)Variants組件,在使用時(shí)可以直接通過識(shí)別出來的組件屬性改變組件樣式。其優(yōu)勢(shì)在于使用組件時(shí)可以更輕松的切換所需組件的不同狀態(tài),再也不需要像在sketch中一樣逐級(jí)尋找了。

如下圖中的按鈕組件,設(shè)計(jì)師可以將所有的按鈕狀態(tài)都列舉出來并按層級(jí)、顏色、狀態(tài)、大小命名。然后選中所有按鈕將其組成一個(gè)Variants組件。

 

5)與代碼緊密結(jié)合

在使用sketch輸出設(shè)計(jì)稿時(shí),設(shè)計(jì)師往往需要借助藍(lán)湖或zeplin輸出標(biāo)注文件。Figma則與代碼緊密結(jié)合,本身自帶交付功能。其文件中的每個(gè)模塊都有代碼模式,只需要將開發(fā)同學(xué)的賬號(hào)開通查看權(quán)限并發(fā)送鏈接,就可以直接在設(shè)計(jì)文件上獲取標(biāo)注,也可自行導(dǎo)出所需的CSS、ios、Android樣式。

 

6)一鍵恢復(fù)歷史版本

Figma會(huì)將設(shè)計(jì)師的每一次修改存成對(duì)應(yīng)的歷史版本,當(dāng)老板說想要某一版時(shí),設(shè)計(jì)師只要恢復(fù)至老板想要的版本就ok啦。如果其他設(shè)計(jì)師誤刪除或錯(cuò)誤修改文件,也有機(jī)會(huì)一鍵搶救。  
1

7)團(tuán)隊(duì)協(xié)作

團(tuán)隊(duì)協(xié)作功能可謂是Figma最大的核心競爭力。當(dāng)幾位設(shè)計(jì)師需要維護(hù)同一份設(shè)計(jì)文件時(shí),F(xiàn)igma可以支持幾位設(shè)計(jì)師同時(shí)在線修改,只要將文件鏈接分享給對(duì)方并給到相應(yīng)權(quán)限(查看、編輯權(quán)限)即可。如果使用sketch,設(shè)計(jì)師一般會(huì)發(fā)送源文件給對(duì)方修改來達(dá)到協(xié)作效果。來回傳輸源文件不僅容易造成文件同步出錯(cuò),而且有一定的下載時(shí)間成本和存儲(chǔ)成本,相比之下Figma的優(yōu)勢(shì)顯而易見。

除了設(shè)計(jì)師之間的協(xié)作,F(xiàn)igma也有效提高了設(shè)計(jì)評(píng)審的效率。與在工作群截設(shè)計(jì)圖標(biāo)紅再描述相比,F(xiàn)igma的評(píng)論功能使得同事可以在設(shè)計(jì)文件中實(shí)時(shí)標(biāo)注討論方案,提高了線上評(píng)審效率。

 

小結(jié)
設(shè)計(jì)師受文件本地存儲(chǔ)的限制,在工作中把源文件給同事、設(shè)計(jì)稿給產(chǎn)品、切圖給開發(fā)、一項(xiàng)簡單的輸出對(duì)接任務(wù)變得瑣碎起來。Figma的出現(xiàn)打破了設(shè)計(jì)師長久以來的孤島工作狀態(tài),設(shè)計(jì)師只需分享一個(gè)鏈接,同事可以修改設(shè)計(jì)稿、產(chǎn)品可以評(píng)審、開發(fā)可以查看界面模塊的屬性甚至查看代碼,大大提升了設(shè)計(jì)師的工作效率。如果您的團(tuán)隊(duì)正在考慮更換設(shè)計(jì)工具,Figma是一個(gè)不錯(cuò)的選擇。

 

2. 動(dòng)效工具篇

2.1 Framer Web
Framer Web是一款在線動(dòng)效設(shè)計(jì)軟件,于今年5月上線正式版,相比于Framer家族的前兩款產(chǎn)品Framer classic、Framer X, Framer Web突破了其以代碼為操作核心的理念,上線的新版本對(duì)設(shè)計(jì)師來說更加易用友好。

 

Framer Web的核心亮點(diǎn)是什么?

1)網(wǎng)頁端全平臺(tái)可用

相比于Framer classic和Framer X作為本地客戶端軟件只支持Mac電腦,F(xiàn)ramer Web是一款基于瀏覽器的在線設(shè)計(jì)工具,因此windows用戶也可以安心使用。同時(shí)個(gè)人版本免費(fèi),大大降低了設(shè)計(jì)師的使用成本。

 

2)文件導(dǎo)入

Framer Web可通過import選項(xiàng)導(dǎo)入Sketch甚至Figma文件,可搭配Sketch和Figma快速制作高保真動(dòng)效。

 

3)輕松實(shí)現(xiàn)復(fù)雜動(dòng)效

Framer一直主打利用代碼實(shí)現(xiàn)復(fù)雜可控的交互動(dòng)效,。雖然可以保證輸出高質(zhì)量的動(dòng)效,但對(duì)于設(shè)計(jì)師們來講十分不友好,學(xué)習(xí)成本過高。此次發(fā)布的Framer Web為了解決這一問題,增加了適合設(shè)計(jì)師使用的可視化界面控制動(dòng)效,設(shè)計(jì)師可以通過Magic Motion輕松實(shí)現(xiàn)復(fù)雜動(dòng)效。

Magic Motion與principle、keynote的動(dòng)畫實(shí)現(xiàn)原理類似。當(dāng)你選擇目標(biāo)元素添加了交互行為后,可以在Magic Motion中選擇一個(gè)過渡方式。只要兩個(gè)畫板中的元素名稱一致且在不同面板中擁有不同的形態(tài),那么在畫板切換時(shí)該元素就會(huì)生成補(bǔ)間動(dòng)畫發(fā)生相應(yīng)變化。

 

同時(shí)Framer也新增了一些特別的交互控制實(shí)現(xiàn)一些特殊動(dòng)效。比如自帶控件中的video,本身會(huì)有一些獨(dú)特的交互行為如End、Pause、Play(播放、停止、暫停),當(dāng)進(jìn)行這些操作時(shí),會(huì)觸發(fā)相應(yīng)的頁面變化。

 

4)從設(shè)計(jì)到代碼

代碼一直是Framer的核心功能。Framer Web默認(rèn)隱藏了代碼面板,設(shè)計(jì)師還是可以在設(shè)定了動(dòng)效后,通過點(diǎn)擊頂部的handoff調(diào)出相應(yīng)代碼。如果你是一個(gè)需要使用代碼的設(shè)計(jì)師,你仍然可以通過編輯代碼實(shí)現(xiàn)更復(fù)雜的動(dòng)效。
對(duì)于設(shè)計(jì)師來說,F(xiàn)ramer提供的豐富動(dòng)效已經(jīng)可以滿足絕大部分訴求。絕大部分設(shè)計(jì)師已經(jīng)無需再關(guān)注代碼部分,通過可視化界面完全可以做出很豐富的交互效果。而Framer Web最終的野心是希望設(shè)計(jì)師通過可視化界面設(shè)計(jì)出參數(shù)化的動(dòng)效,可以直接導(dǎo)出相應(yīng)的能交付生產(chǎn)端的代碼。

目前Framer Web 已經(jīng)可以實(shí)現(xiàn)導(dǎo)出相應(yīng)動(dòng)效代碼,但導(dǎo)出的效果仍有待完善,只是可以導(dǎo)出Transiton的參數(shù)而已。

 
5)高效協(xié)作
Framer Web和Figma一樣,也非常注重團(tuán)隊(duì)協(xié)作。設(shè)計(jì)師可以將鏈接分享對(duì)方進(jìn)行查看、編輯,方便幾位設(shè)計(jì)師合作一個(gè)項(xiàng)目的情況。與需要反復(fù)傳輸文件相比,F(xiàn)ramer Web省時(shí)省力,大大提高了設(shè)計(jì)師的工作效率。
 
小結(jié)

Framer Web放棄了攻占界面設(shè)計(jì)領(lǐng)域的策略,轉(zhuǎn)而和Figma官方達(dá)成積極的戰(zhàn)略合作,專注于做專業(yè)的動(dòng)效設(shè)計(jì)軟件。因此Framer Web非常適合和Figma搭配使用。隨著產(chǎn)品策略的調(diào)整,相信在不久的將來Framer Web還會(huì)為設(shè)計(jì)師們提供更豐富、高效的動(dòng)效設(shè)計(jì)功能,非常值得期待。

 

3. 插件篇

雖然云端化的設(shè)計(jì)工具正逐漸興起,但sketch仍然是目前較為主流的界面設(shè)計(jì)工具。因此接下來除了為大家介紹一些可以提升工作效率的Figma插件外,也會(huì)介紹一些好用的sketch插件,大家可以根據(jù)自己的需求自行嘗試體驗(yàn)。

  

3.1 Design Lint(Figma)
設(shè)計(jì)師在做較大項(xiàng)目時(shí)可能會(huì)繪制幾十個(gè)頁面,難免會(huì)存在界面丟失元素的情況。Design Lint就能幫助你解決這一問題。它可以在你工作的時(shí)候進(jìn)行實(shí)時(shí)更正,檢查不同界面直接的差異,包括顏色、字體、填充、半徑值等樣式差異并糾正錯(cuò)誤。
如果你做了一些修改,Desgn Lint也會(huì)根據(jù)你的修改實(shí)時(shí)更新。這款插件可以讓你更專注于設(shè)計(jì)本身,而不用浪費(fèi)時(shí)間檢查不同頁面的元素是否使用正確,大大提高了設(shè)計(jì)師的工作效率。
https://www.figma.com/community/plugin/801195587640428208/Design-Lint

 

3.2 TinyImage Compressor(Figma)
設(shè)計(jì)師在做較大項(xiàng)目時(shí)導(dǎo)出的設(shè)計(jì)稿過大,存儲(chǔ)和傳播的成本高。用這款插件最多可以比Figma默認(rèn)導(dǎo)出的文件小90%。同時(shí)支持導(dǎo)出多格式文件,導(dǎo)出多個(gè)圖片時(shí)還會(huì)自動(dòng)生成一個(gè)zip壓縮包。
https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl

 

3.3 Design System Organizer(Figma)
這款插件幫助設(shè)計(jì)師在設(shè)計(jì)組件系統(tǒng)時(shí)管理組件系統(tǒng)。在設(shè)計(jì)組件系統(tǒng)時(shí),會(huì)遇到如圖所示的:“Buttons-Small-Default…”的組織形式。該插件可以對(duì)組件進(jìn)行管理、如分組、取消分組、移動(dòng)、重命名。當(dāng)重命名組后,該組中所有組件的名稱都會(huì)隨之改變,十分方便。
https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

 

3.4 Juuust Handoff(Figma)
Figma本身自帶交付功能,但該插件的好處是生成的是離線文件,導(dǎo)出的文件可直接交付開發(fā)。開發(fā)同學(xué)可以不受網(wǎng)絡(luò)影響隨時(shí)查看間距、色值等信息。
https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff

 

3.5 Image Optim (Sketch)
設(shè)計(jì)師在導(dǎo)出設(shè)計(jì)稿時(shí)有時(shí)圖片過大,Image Optim可以在導(dǎo)出圖片時(shí)壓縮圖片,但不會(huì)影響圖片的質(zhì)量。使用時(shí)需先安裝app再安裝Sketch插件。
https://oursketch.com/plugin/imageoptim

3.6 FontFinder(Sketch)
設(shè)計(jì)師在做較大項(xiàng)目時(shí)可能會(huì)繪制幾十個(gè)頁面,難免會(huì)存在字體使用錯(cuò)誤的情況,F(xiàn)ont FInder就能幫助你解決這一問題。它可以檢測出文件中存在的所有字體,你可以勾選想要更改的字體就可以一鍵將其改成目標(biāo)字體。再也不需要在幾十個(gè)頁面中逐個(gè)尋找更改,大大提升了工作效率。
https://oursketch.com/plugin/font-finder

 

3.7 Craft(Sketch)
Craft插件十分強(qiáng)大,其中填充功能可以大大提升設(shè)計(jì)師的效率。在設(shè)計(jì)如列表頁時(shí),設(shè)計(jì)師為了效果需要編輯不同的標(biāo)題、圖片,都要冥思苦想編內(nèi)容。Craft可以一鍵填充文字,如姓名、文章、日期、郵箱、地址、國家等。不同類別下面也設(shè)置了一些分類,方便設(shè)計(jì)師選擇。除此之外,Craft還可以一鍵填充真實(shí)不重復(fù)的照片,為設(shè)計(jì)師節(jié)省了很多時(shí)間。
https://www.invisionapp.com/craft
3.8 BaseAlign(Sketch)
Sketch自帶的對(duì)齊工具對(duì)形狀來說很好用,但對(duì)于文字來講一般是文字的文本框?qū)R,并不是文字本身對(duì)齊。BaseAlign插件使用的是文字自身的基線對(duì)齊,這樣就以保證不同大小的文字都可以對(duì)齊,設(shè)計(jì)效果更完美。
https://oursketch.com/plugin/basealign

 

4. 協(xié)作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研發(fā)的高效設(shè)計(jì)協(xié)作平臺(tái)。XSHOW連接了產(chǎn)品經(jīng)理、開發(fā)等各個(gè)不同工種,提高了設(shè)計(jì)資源輸出和分發(fā)效率。設(shè)計(jì)師將設(shè)計(jì)文件上傳到XSHOW,就可以將文件鏈接分享給產(chǎn)品經(jīng)理、開發(fā)等同學(xué)。

產(chǎn)品經(jīng)理在手機(jī)小程序上就可以預(yù)覽方案,設(shè)計(jì)師每次更新的方案也可以直接預(yù)覽。開發(fā)同學(xué)可以直接查看標(biāo)注和切片。同組設(shè)計(jì)師也可以直接下載源文件、甚至查看歷史迭代版本。

網(wǎng)址:https://xshow.tencent.com

 

XSHOW是如何實(shí)現(xiàn)高效協(xié)作的?

對(duì)于設(shè)計(jì)師

1)可視化上傳文件

設(shè)計(jì)師先在Sketch中安裝XSHOW插件,可使用快捷鍵或直接點(diǎn)選需要上傳的文件畫板,接著直接選擇XSHOW中的“導(dǎo)出”,就可直觀快速的將文件上傳到XSHOW。

 

2)記錄所有版本迭代,輕松找回第一稿

設(shè)計(jì)師每一次上傳的文件都會(huì)有云端記錄,設(shè)計(jì)師可以通過時(shí)間軸便捷找回歷史文件,輕松找回第一稿。 
1

 

3)靈活豐富的分享權(quán)限

對(duì)于項(xiàng)目分享的權(quán)限,XSHOW的設(shè)置更為靈活,除了支持私密、公開、指定人或團(tuán)隊(duì)可見外,也可以控制權(quán)限的時(shí)效。

 

對(duì)于項(xiàng)目管理者

1) 直觀了解團(tuán)隊(duì)輸出,組建團(tuán)隊(duì)展示能力空間

XSHOW除了個(gè)人使用外還可以組建團(tuán)隊(duì)。項(xiàng)目管理者可以通過XSHOW直觀查看整個(gè)團(tuán)隊(duì)的設(shè)計(jì)稿件輸出修改情況,同時(shí)可以組件團(tuán)隊(duì)展示能力空間。 

 

2)方案變更及時(shí)知道

XSHOW有記錄所有版本迭代的能力,因此作為項(xiàng)目管理者可以及時(shí)知道團(tuán)隊(duì)成員對(duì)方案的修改變更,解決了團(tuán)隊(duì)內(nèi)部有時(shí)同步不及時(shí)的問題。 
 

3)便捷組建項(xiàng)目和管理團(tuán)隊(duì)成員

項(xiàng)目管理者可以在XSHOW便捷組建項(xiàng)目和管理團(tuán)隊(duì)成員,大大提高了項(xiàng)目管理者的管理效率。

 

對(duì)于合作產(chǎn)品經(jīng)理或甲方

1)多端查看更方便

XSHOW支持web和小程序兩種沉浸式查看方案的方式。在小程序上查看方案方便合作方直觀感受方案在手機(jī)上的真實(shí)效果,如果合作方身邊沒有電腦也可以及時(shí)查看稿件。 
 

 

2)查看歷史變更

XSHOW的歷史變更功能可以使合作方也及時(shí)了解方案的變更情況,大大提升了信息同步效率。

 

對(duì)于開發(fā)工程師
1)便捷查看標(biāo)注與管理切片
設(shè)計(jì)師將文件上傳到XSHOW后,只要將鏈接分享給開發(fā),開發(fā)就可以直接在線查看文件標(biāo)注、下載切片。

小結(jié)
XSHOW作為一款高效協(xié)作工具可以大大節(jié)省設(shè)計(jì)師稿件輸出成本,提升工作效率。希望大家多多體驗(yàn),體驗(yàn)地址:https://xshow.tencent.com

 

Part 4 結(jié)語

在未來界面設(shè)計(jì)工具會(huì)繼續(xù)向云端性、協(xié)作性、通用性發(fā)展。大家可以根據(jù)自身情況嘗試使用Figma、Framer Web等新興工具來提高設(shè)計(jì)與協(xié)作效率,形成良性的協(xié)作體系,使自己更專注于設(shè)計(jì)本身,創(chuàng)造更大的設(shè)計(jì)價(jià)值。 

 

原文地址:騰訊ISUX(公眾號(hào))

作者:ISUX

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》那些高效的界面設(shè)計(jì)工具

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


日歷

鏈接

個(gè)人資料

存檔