首頁

UI 設(shè)計:如何做到理性?

博博

有哪些理性,以及如何做到理性



UI 設(shè)計,是用理性方法,來滿足需求,并帶來美學(xué)享受。


本篇探討 UI 設(shè)計如何做到理性。全文共有三部分:有哪些理性,如何做到理性,止步于理性嗎。



01 UI 設(shè)計:有哪些理性?


UI 設(shè)計主要有四類理性:基本原則,基礎(chǔ)知識,風(fēng)格設(shè)定,風(fēng)格把控。四類理性有一個共同核心:活學(xué)活用



1 基本原則


共有四個基本原則:對齊,對比,親密,重復(fù)。



先說對齊。


秩序產(chǎn)生美。對齊作為一種基本秩序,主要事關(guān)整齊美觀閱讀體驗。


對齊一般分左對齊、右對齊和居中對齊。


從閱讀體驗角度來講,左對齊通常勝過居中對齊,所以絕大部分文章和 UI 界面都是左對齊為主。


從美感角度來講,居中對齊往往勝過左對齊,所以一些強(qiáng)調(diào)美感勝過強(qiáng)調(diào)閱讀效率、篇幅不長、同時需要細(xì)品的詩或歌往往采用居中對齊。



從空間利用率角度來講,右對齊往往是左對齊的一種補(bǔ)充。比如微信的發(fā)現(xiàn)頁面,最重要的圖標(biāo)和文字左對齊,次要的右箭頭和其它信息右對齊。


UI 設(shè)計追求閱讀體驗、美感和高空間利用率,所以這三種對齊方式大部分時候都會同時出現(xiàn)。整體而言,是以左對齊為主,居中對齊和右對齊為輔。


再說對比。


嘈嘈切切錯雜彈,大珠小珠落玉盤。音樂講究韻律和節(jié)奏,設(shè)計也追求錯落有致的節(jié)奏感。這種節(jié)奏感,很大程度上靠對比實現(xiàn)。


好的對比可以帶來視覺張力,就是抓人眼球的吸引力,同時也能起到主次分明和視覺引導(dǎo)的作用,最終帶來良好的閱讀體驗。


一定程度上,對比是無處不在的。只要存在不同,就存在對比。比如大小之間的對比,不同顏色之間的對比,文字與圖標(biāo)/圖片之間的對比,不同對齊方式之間的對比,等等。


一般而言,對比需要果斷:若不同,就徹底不同。因為一般情況下,充分的對比能帶來更好的視覺張力和更好的閱讀體驗。


第三說親密


設(shè)計就是分類,張小龍曾如是說。分類中最重要的原則是親密,還有一個副產(chǎn)物是留白。


性質(zhì)相同或相似的元素,我們會讓它們看起來離的更近,關(guān)系更親密。親密成就分類,分類能化繁為簡。


最后說下重復(fù)


設(shè)計追求一致性,一致性主要靠重復(fù)來實現(xiàn)。被大量“重復(fù)”的元素,比如這篇文章里的字體大小和字體顏色,既保證了一致性,又提高了效率。


2 基礎(chǔ)知識


基礎(chǔ)知識主要包括:手繪、顏色、版式設(shè)計、字體設(shè)計、品牌設(shè)計、動效設(shè)計、插畫設(shè)計等專業(yè)知識。


UI 設(shè)計師可能不用畫卡通人物或插畫,但一定會畫圖標(biāo)和 logo,這些也會用到手繪。作為造型基本功,需要掌握一定手繪技能。


顏色方面,最重要的是能夠很好感受和理解顏色傳達(dá)出來的感覺,也即顏色的“精神之美”,這塊主要依賴審美和練習(xí)。


配色方面,推薦軟件里的 HSB(色相、飽和度和亮度) 模式,這種模式很好理解,也方便調(diào)色。另外還強(qiáng)烈推薦從照片中吸取顏色,因為照片往往會和“生活”、“自然”有一定關(guān)聯(lián),“生活”和“自然”是非常重要的素材和靈感來源。從色卡中選擇顏色也是一個不錯的選擇。


版式設(shè)計就像是選秀節(jié)目中練習(xí)生的舞臺表演,考驗的是唱跳、表情管理、舞臺魅力、臨場應(yīng)變等綜合實力。


“活學(xué)活用”環(huán)節(jié),會結(jié)合例子分享版式設(shè)計。


字體設(shè)計、品牌設(shè)計、動效設(shè)計、插畫設(shè)計等方面,個人經(jīng)驗不多,就不分享了。文末會附一份推薦書單,囊括基本原則和部分基礎(chǔ)知識。


3 風(fēng)格設(shè)定


風(fēng)格設(shè)定,即上篇提到的“精確描述”,是在動手設(shè)計之前,先探索出合適的風(fēng)格,并把它精確描述出來。


好的開始是成功的一半。風(fēng)格設(shè)定是一個開始,極其重要。如果風(fēng)格設(shè)定只做到 60 分,稍微打點折扣的執(zhí)行結(jié)果就是不及格。所以,如果要把設(shè)計做到 85 分,風(fēng)格設(shè)定一般要做到 90 分。


風(fēng)格設(shè)定猶如在茫茫大海中行船,首要目標(biāo)把握方向,核心訴求是精準(zhǔn)。海上并無現(xiàn)成道路和導(dǎo)航可循,只能依靠繁瑣而嚴(yán)謹(jǐn)?shù)耐评砗陀嬎恪?


風(fēng)格設(shè)定的次要目標(biāo)劃一個既清晰界定風(fēng)格、又清晰指明“發(fā)揮范圍”的“圓圈”,核心訴求是周密。因為需要清楚知道“圓圈”以內(nèi)代表什么,“圓圈”以外代表什么。


在“精準(zhǔn)”和“周密”上同時做到優(yōu)良,風(fēng)格設(shè)定才能做到優(yōu)良。


既精準(zhǔn)又周密的風(fēng)格設(shè)定,通常無法一蹴而就:“風(fēng)格設(shè)定”階段一般只能做到七成,剩下三成需要在設(shè)計過程中繼續(xù)探索和打磨。下一大段會結(jié)合案例分享具體方法。


4 風(fēng)格把控


風(fēng)格把控有兩層含義,一是實現(xiàn)當(dāng)初設(shè)定的風(fēng)格,二是在實現(xiàn)的基礎(chǔ)上做到統(tǒng)一和規(guī)范。


只要嚴(yán)格在“圓圈”里發(fā)揮,實現(xiàn)當(dāng)初設(shè)定的風(fēng)格并不難。那做到統(tǒng)一和規(guī)范難嗎?往難了說就是需要做大量瑣碎工作:以聯(lián)系的眼光看待所有設(shè)計元素,并把它們分類規(guī)整好,注意分類不宜過多,同時分類邏輯上不能出現(xiàn)明顯問題。往簡單了說就是大量復(fù)用已有的設(shè)計樣式。


風(fēng)格把控就是在劃定的“發(fā)揮范圍”內(nèi),利用設(shè)計知識和經(jīng)驗,以規(guī)范的方式實現(xiàn)規(guī)劃好的風(fēng)格。


5 活學(xué)活用


活學(xué)活用作為四類理性的共同核心,最典型的應(yīng)用場景是版式設(shè)計。


活學(xué)活用有兩個要點:正反結(jié)合,風(fēng)格第一。



所謂正反結(jié)合,是指設(shè)計知識既能正著用,也能反著用。最常見的例子是對齊原則,大部分時候是正著用,但如果想要營造活潑的感覺,也會反著用:故意打破對齊原則。


除了對齊原則,其它設(shè)計知識,比如重復(fù)原則,也可以反著用。


本文配圖就是一個例子:圖片左上角、右上角和右下角分別散布著裝飾元素(橫線、圓環(huán))和 logo,在裝飾元素的出現(xiàn)次數(shù)上,沒有用重復(fù)原則。過年家里掛燈籠一般至少掛兩個,同一裝飾元素一般至少出現(xiàn)兩次,以達(dá)到一種和諧和較為熱鬧的裝飾效果。



我在裝飾元素的出現(xiàn)次數(shù)上沒有用重復(fù)原則,而在出現(xiàn)位置(相似位置)、元素大?。ㄏ嗨拼笮。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜?fù)原則,同樣達(dá)到了和諧效果。之所以沒在裝飾元素的出現(xiàn)次數(shù)上用重復(fù)原則,是想放一個隱喻在這里。


所謂風(fēng)格第一,是指設(shè)計風(fēng)格永遠(yuǎn)第一,設(shè)計知識永遠(yuǎn)第二。知識服務(wù)風(fēng)格,切不可重知識輕風(fēng)格。


《倚天屠龍記》中,張三豐教張無忌練習(xí)太極劍時,要他忘記劍招,只記劍意。某種程度上,版式設(shè)計也要將“劍意”放在第一位,“劍招”服務(wù)“劍意”。


對比原則也有反著用的時候。有一條關(guān)于對比的知識:對比要果斷,若不同,就徹底不同。這條知識能解釋百事可樂 logo 里紅色與藍(lán)色的強(qiáng)烈對比,但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色,無對比。



設(shè)計最重要的是感染力,感染力主要來自個性、態(tài)度、價值觀這些風(fēng)格層面的東西,而非設(shè)計知識這些技法層面的東西。


當(dāng)一個設(shè)計,技法高超而風(fēng)格不足時,感染力和魅力就會不足,這也是設(shè)計師經(jīng)常會犯的錯誤,大家需要注意。



02 UI 設(shè)計:如何做到理性?


可以簡單分成三步:規(guī)劃,成形,細(xì)化。下面結(jié)合微信 Redesign 這個案例來說明。



1 規(guī)劃:用“紅綠燈”法設(shè)定風(fēng)格


設(shè)定風(fēng)格,用到的方法姑且稱之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網(wǎng)上看到的一種“紅黃綠卡片法”(在紅、黃、綠三種顏色的卡片上寫下不同的設(shè)計關(guān)鍵詞),并和“情緒板”法有相似之處:都包含關(guān)鍵詞定位圖片參考兩部分。


先說關(guān)鍵詞定位,共有兩步。


第一步類似頭腦風(fēng)暴,結(jié)合產(chǎn)品屬性、用戶屬性、市場情況、個人喜好等因素,把能想到的設(shè)計關(guān)鍵詞全部寫下來。合適的不合適的都要寫,只要想到了就寫下來,確保有二三十個。如果關(guān)鍵詞數(shù)量不夠,這個步驟可以多重復(fù)幾次,直到夠了為止。這一步設(shè)計師和需求方都要參與進(jìn)來,在提供關(guān)鍵詞上雙方是平等關(guān)系。


這個微信 Redesign 是個具有探索性質(zhì)的小練習(xí)項目,基于微信 7.0,有兩個目的:首先保留原有交互體驗和品牌識別度,其次在視覺上更年輕、更流行??梢酝ㄋ桌斫獬桑阂豢钗⑿拧捌つw”,主要給年輕用戶和趕新潮的中老年用戶用。


結(jié)合產(chǎn)品屬性(社交類、工具類、內(nèi)容類)、用戶屬性(年輕用戶為主)、市場情況、個人喜好這些因素,這一步想到的關(guān)鍵詞如下圖所示。



第二步是歸類,就是把第一步產(chǎn)生的所有關(guān)鍵詞歸成“紅黃綠”三類。如果關(guān)鍵詞不夠,還可以再補(bǔ)充。這一步依然是需求方和設(shè)計師共同參與,但需要設(shè)計師來主導(dǎo)。


紅色關(guān)鍵詞代表不能踩的紅線:不能這樣做;黃色關(guān)鍵詞代表黃燈警告:這樣做不太合適綠色關(guān)鍵詞代表暢通無阻:應(yīng)該這樣做。


需要注意的是,綠色關(guān)鍵詞最好控制在 3-4 個之間,如果超過 4 個,就需要分成主綠關(guān)鍵詞和次綠關(guān)鍵詞,主綠關(guān)鍵詞依然要控制在 3-4 個之間。這樣做有兩個考量,一是確保簡單和重點突出,二是也更容易實現(xiàn)。


回到第一步的關(guān)鍵詞上來。設(shè)計中當(dāng)然可以用“擬人”、“隱喻”等手法,所以“擬人”這個關(guān)鍵詞顯得意義不大,故刪去?!皽貪櫋焙汀坝H和”,“老少皆宜”和“大眾”在語義上都存在一定的重復(fù),所以刪去后者。刪除這類不合適的關(guān)鍵詞后,剩余關(guān)鍵詞就按“紅綠燈”法歸類,歸類后情況如下。


(微信 Redesign 之按“紅綠燈”法歸類后的設(shè)計關(guān)鍵詞)


關(guān)鍵詞定位已就緒,再來找參考圖片。


可供參考的圖片有兩大類:照片和 UI 界面。UI 界面也有兩類:線上作品(真實項目、練習(xí)作品等)和上線作品。


做 UI 設(shè)計,參考什么樣的圖片?個人建議,做什么類型的設(shè)計,就重點參考什么類型的圖片。比如 UI 界面就重點參考 UI 界面,banner 就重點參考 banner。


UI 界面的設(shè)計,個人喜歡重點參考知名產(chǎn)品的上線作品。單從視覺角度來說,上線作品的質(zhì)量可能比不過一些線上練習(xí)作品。但是已經(jīng)上線的知名產(chǎn)品的 UI 設(shè)計,其風(fēng)格的形成往往都會經(jīng)過很多推敲,會有很多比較成熟的設(shè)計思路在里面。


參考別人的設(shè)計,最重要的是參考設(shè)計思路,其次才是參考表現(xiàn)形式。這種設(shè)計思路,有時候能從網(wǎng)上找到,但更多時候靠自己推測


微信 Redesign,根據(jù)“很多年輕人在用,且風(fēng)格比較流行”這條主線,找來了 QQ、抖音、B 站、小紅書、陌陌、Soul、騰訊視頻、愛奇藝等產(chǎn)品的截圖。這些產(chǎn)品的截圖,看完一圈后,就會面臨一個問題:以圖標(biāo)為例,這幾個產(chǎn)品的圖標(biāo),風(fēng)格各異,但基本都具備“年輕”和“流行”的特點,那應(yīng)該參考哪一個?



這時就要求助關(guān)鍵詞定位。除了“年輕”和“流行”,主綠關(guān)鍵詞還有一個“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛奇藝和騰訊視頻:很多老人和小孩也會用這兩個 App 看視頻,網(wǎng)上公開的數(shù)據(jù)也能佐證這一點,所以它們的設(shè)計一定會照顧中老年用戶的審美。


最后,出于個人偏好,我選擇重點參考愛奇藝的圖標(biāo)風(fēng)格,具體而言就是:深淺雙色、較粗(1.5pt)描邊、圓潤風(fēng)格。


2 成形:按照規(guī)劃,實現(xiàn)風(fēng)格


紅黃綠三色關(guān)鍵詞及重點參考圖片就緒后,就可以動手設(shè)計。


我一般會把界面設(shè)計粗略分成三大部分:版式風(fēng)格、元素風(fēng)格、元素大小,元素為圖標(biāo)、圖片、按鈕等,然后去一一實現(xiàn)。


先說版式風(fēng)格。


用的主要綠色關(guān)鍵詞是“更流行”和“更年輕”?!案餍小卑ǎ焊笞痔柕捻撁鏄?biāo)題、盡可能用留白代替分割線和卡片的“無界”風(fēng)格、圓形頭像、更多留白更多舒適、等等?!案贻p”包括:更圓潤的搜索框、輸入框和圖標(biāo)、更年輕更具活力的配色、等等。


再說元素風(fēng)格之圖標(biāo)風(fēng)格。


圖標(biāo)主要參考愛奇藝 App:其一,底部導(dǎo)航和發(fā)現(xiàn)頁的圖標(biāo)都是深淺雙色加較粗的描邊;其二,除了更圓潤以外,部分圖標(biāo)還變 Q 了。


最后說元素大小。


以這個小項目為例,最主要的元素大小是圖標(biāo)大小和字體大小,它們會影響整個設(shè)計的感覺。通常情況,元素越小,給人感覺越精致、越高端,此其一;其二,可能是年輕人和老年人視力存在差別的原因,越小的元素往往代表年輕人的審美,反之則代表老年人的審美。


元素大小主要運(yùn)用的綠色關(guān)鍵詞是“輕微老少皆宜”。也就是說,需要在年輕人和中老年人的審美中找到一個平衡,所以元素大小基本直接參考了微信 7.0 的設(shè)計,個別地方做了微調(diào)。


最后,出來的效果如下圖所示。



3 細(xì)化:打磨優(yōu)化


這份設(shè)計我發(fā)在了網(wǎng)上,部分網(wǎng)友留言說看著不夠好,不太舒服,有一個表達(dá)的比較具體——“雖然用了大面積留白,卻讓人感到緊迫...”。


基于網(wǎng)友的留言,我仔細(xì)審視了這個設(shè)計,最后發(fā)現(xiàn)問題主要出在頁面(發(fā)現(xiàn)頁為例)左右兩側(cè):留白過小。



當(dāng)初之所以這么設(shè)計,是想通過頁面左右兩側(cè)較少的留白制造一種內(nèi)容將要撐破屏幕的感覺,從而營造一種活潑的感覺。注意,彼時“活潑”還沒出現(xiàn)在“黃色”關(guān)鍵詞里,上文兩張關(guān)于關(guān)鍵詞的圖都省略了中間探索和優(yōu)化的過程。


很多網(wǎng)友之所以沒有感受到活潑而只是覺得不太舒服,至少有兩個原因:第一,整個設(shè)計的基調(diào)是簡約、清爽,有一定的年輕感和流行感,但沒有太明顯的活潑感,硬往里面某個地方塞“活潑感”并不和諧,大家也難以感受到;第二,單純就“活潑感”而言,做的依然不到位,比如圖標(biāo)與右側(cè)文字的留白,可以比圖標(biāo)與左側(cè)邊界的留白大,方能更好彰顯活潑與活力。


考慮到“輕微老少皆宜”這個綠色關(guān)鍵詞及微信主要是工具型和內(nèi)容型產(chǎn)品,“活潑感”用在這里并不十分合適,于是放棄,并將“活潑”歸為“黃色”關(guān)鍵詞。此處留白的目的就回歸其本職工作:整體和諧與舒服。于是就把留白相應(yīng)調(diào)大了。



另外一個優(yōu)化的點是“眼睛”的形狀:微信圖標(biāo)、看一看圖標(biāo)、表情圖標(biāo)、朋友圈里將點贊和評論折疊起來的圖標(biāo)都有一雙“眼睛”,這雙“眼睛”起初是豎著的橢圓形,很萌,也比較低齡化。為了盡可能的“輕微老少皆宜”,這里統(tǒng)一把“眼睛”由豎著的橢圓形改成了圓形,弱化了“萌”和“低齡化”的感覺。



還有一塊是顏色上,拍攝視頻動態(tài)的圖標(biāo)有用到藍(lán)紫色。這個紫色基本符合“更年輕”、“更流行”,但不太符合“輕微老少皆宜”,所以最后放棄了紫色,保留了藍(lán)色。



遵循主綠關(guān)鍵詞里的“輕微老少皆宜”,其它優(yōu)化的點有:微信圖標(biāo)尖角處的圓角調(diào)小,刪除啟動頁與黑色"WeChat"字形成對比的綠色圓點。另外還有一些視覺層面美觀、和諧、舒適度的優(yōu)化,比如顏色、留白、圓角大小、字體大小方面的微調(diào)。


優(yōu)化后的微信 Redesign,整體效果如下圖所示。



凡事預(yù)則立,不預(yù)則廢。UI 設(shè)計如何做到理性最核心的是設(shè)計風(fēng)格,規(guī)劃、成形和細(xì)化都緊密圍繞設(shè)計風(fēng)格展開。


最后,嘗試總結(jié)下“紅綠燈”法的優(yōu)勢,主要有四點:精確、周密、穩(wěn)妥、高效



關(guān)于設(shè)計風(fēng)格,傳統(tǒng)規(guī)劃方法一般只有三四個“綠色”關(guān)鍵詞。


“紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關(guān)鍵詞,從而確保大方向更準(zhǔn)確?!凹t綠燈”法會產(chǎn)生20個以上的紅黃綠關(guān)鍵詞,從而確保劃出來的“發(fā)揮范圍”更周密,極少有疏漏。


在“成形”這個設(shè)計環(huán)節(jié),一旦踩到“紅線”和“黃線”,規(guī)劃好的紅黃綠關(guān)鍵詞都會馬上發(fā)出警報,從而大大降低“違規(guī)踩線”行為的發(fā)生次數(shù),確保設(shè)計執(zhí)行環(huán)節(jié)的穩(wěn)當(dāng)可靠。


“紅綠燈”法通俗易懂門檻低,需求方可以較為深度參與“規(guī)劃”環(huán)節(jié)。需求方在“規(guī)劃”環(huán)節(jié)的深度參與,理論上可以降低后期的返工和修改次數(shù),從而確保整個設(shè)計過程的高效。同時理論上也能夠提高設(shè)計師和需求方雙方合作的愉快程度。



03 UI 設(shè)計:止步于理性嗎?


UI 設(shè)計,始于理性,但無法止步于理性,還需要超越理性。注意,這里的理性,僅指設(shè)計知識的相關(guān)理性。


超越理性主要有兩點:直覺,其它知識。



1 直覺


直覺是指一種能夠快速感受和評估設(shè)計優(yōu)劣的感覺。良好的直覺往往快而準(zhǔn)。


感知和評價別人的設(shè)計時,用到的幾乎全部是直覺。審視自己的設(shè)計時,也離不開直覺。


在審視自己的 UI 設(shè)計時,直覺主要發(fā)揮兩個作用:第一,囿于知識儲備或表達(dá)能力,有些地方就是解釋不清,這個時候就要靠直覺去感受去判斷;第二,直覺往往會作為檢視設(shè)計的最后一道關(guān)卡,也是最重要的一道關(guān)卡。


直覺來自哪里?


個人觀察是,直覺往往和審美正相關(guān)。比如一個設(shè)計師,他掌握的設(shè)計知識有限,經(jīng)驗有限,對自我的要求也不高,最終的作品往往不出彩。但如果他審美好的話,往往能夠分辨出不同設(shè)計方案之間孰優(yōu)孰劣。


如果你想就設(shè)計稿征求別人的意見,請去找那些審美好的人。


2 其它知識


其它知識是指設(shè)計知識以外的所有其它知識。比如 iPhone 上刪除應(yīng)用前應(yīng)用圖標(biāo)的抖動,其靈感應(yīng)該來自生活中的搖頭求饒或嚇得發(fā)抖,抖動的幅度和頻率則需要利用物理學(xué)和數(shù)學(xué)方面的知識。


優(yōu)秀的設(shè)計,一定會從生活中汲取大量靈感,并廣泛利用社會類、人文類和理工類學(xué)科的知識。就拿數(shù)學(xué)來說,在好的設(shè)計中,一定是個??停阂驗槟阈枰煌5陌从嬎闫?,從而計算不同設(shè)計元素之間的比例關(guān)系和各自的大小。


汝欲學(xué)詩,功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎(chǔ),而非關(guān)鍵。寫詩的關(guān)鍵在于你對生活、對世事的積累和感悟,在于你的思想是否深刻,情懷是否充足。


寫詩如此,做設(shè)計亦如此。設(shè)計知識只是做設(shè)計的基礎(chǔ),而非關(guān)鍵。做設(shè)計的關(guān)鍵在于“其它知識”?!捌渌R”非本文重點,就不展開了。



結(jié)語


UI 設(shè)計里的理性,主要是各類設(shè)計知識。理性的核心在于活學(xué)活用各類設(shè)計知識。


理性嚴(yán)謹(jǐn)?shù)淖?UI 設(shè)計,可以簡單分成三步:規(guī)劃,成形,細(xì)化。好的開始是成功的一半,一個高質(zhì)量的規(guī)劃顯得尤為必要。


用“紅綠燈”法做規(guī)劃,并指導(dǎo)成形和細(xì)化工作,會更精準(zhǔn)、周密、穩(wěn)妥和高效。


UI 設(shè)計,是七分理性,三分直覺。審美越好,直覺越準(zhǔn)。


優(yōu)秀的 UI 設(shè)計,一定會從生活中汲取大量靈感,并廣泛利用設(shè)計以外學(xué)科的知識。








推薦書單  


[美]Robin Williams《寫給大家看的設(shè)計書》

[日]佐佐木剛士《版式設(shè)計原理》

[日]伊達(dá)千代《色彩設(shè)計的原理》

[日]小林章《西文字體1、2》

左佐《設(shè)計師的自我修養(yǎng)》

左佐《治字百方》




原文鏈接:https://mp.weixin.qq.com/s/yZVBzTYJxWQ7fk-tjXG8Yg


    • 文章來源:站酷   作者:SnowDesign

      分享此文一切功德,皆悉回向給文章原作者及眾讀者.

      免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



界面設(shè)計中的那些版式-圖版篇

博博

這篇主要說一下版面和圖形使用,對高手來說可能有些老生常談,但對移動端界面設(shè)計或許會有點參考價值,用幾分鐘看看吧。


    作者:王鐸(Micu設(shè)計)


    這篇主要說一下版面和圖形使用,對高手來說可能有些老生常談,但對移動端界面設(shè)計或許會有點參考價值,用幾分鐘看看吧。

     

    界面美不美,除了構(gòu)圖之外,另一個重要手段的就是如何處理留白,也可以理解成版率。留白就是為了凸顯層次、突出內(nèi)容。

    手持設(shè)備屏幕較小,決定了信息顯示是有限的。用戶有效接受信息并不與界面內(nèi)提供的信息量成正比,有的時候提供的越多,用戶反而真正接受的越少。妄想滿屏都是信息是不可能的。用戶越來越受不了滿屏的信息了。

    讓用戶接受該接受的有效信息,是關(guān)鍵。

     

    在設(shè)計界面的時候,因為內(nèi)容和頁面都比較多,為了保證頁面與頁面的統(tǒng)一性,首先需要設(shè)定頁面內(nèi)容四周的留白。在設(shè)定頁面的間距后相應(yīng)的內(nèi)容圖標(biāo),圖片等的安排就確定下來了。用這樣的方法能使調(diào)整出來的頁面更為條理化。

     

     

    紅色色的部分就是內(nèi)容。在頁面中一般會有導(dǎo)航的存在,那么內(nèi)容區(qū)的版面是從導(dǎo)航下面計算的。

    界面四周增加留白。這樣的界面很容易集中用戶的視線到少數(shù)的內(nèi)容上去,突出了焦點,整體給人一種典雅高級的感覺。

     

     

     


    反之,縮小留白或者不留白,頁面會顯得更豐富更充滿活力。而圖片的展示空間會增加,沖擊感增強(qiáng),讓界面更顯得富更有張力。

    根據(jù)頁面的內(nèi)容不同和功能點,適當(dāng)?shù)恼{(diào)整界面周邊的留白非常重要。一般圖片本身比較有意境,可以直接采用“出血”的方式,不留白或者少留白。

     

     

     

     

    下面介紹一些版面的小規(guī)律、小技巧。

     

    1.取其精華,一塊顏色也能定天下!


     

    提取主要的信息,通過對整個頁面的顏色進(jìn)行調(diào)整,從而提高版面使用率。將一個或多個功能點作為主信息,提到首頁中進(jìn)行設(shè)計,從達(dá)到想要的視覺效果。這樣處理后的界面設(shè)計不僅能顯得大氣有張力,而且展現(xiàn)出來的信息聚合度高。

     

    在缺少圖像素材的情況下,如何讓界面顯得有張力,整體感強(qiáng),呈現(xiàn)出來的版面率高。

     

     

    單色背景留白,凸顯主要信息。要求圖標(biāo)或者文字,相對簡潔,能夠很好地和背景色融為一體。再通過線條和規(guī)則的圖形來分割留白區(qū)域,增加層次感。

    做好這些的前提是,設(shè)計師要明確主要信息,以及它們之間的關(guān)系。 

     

     

    結(jié)合產(chǎn)品特點巧妙的運(yùn)用大色塊,將變化的信息用顏色區(qū)分出來。讓用戶最直觀的感知信息的變化。

     

     

     

     

    2.多色塊靈活分割,加強(qiáng)內(nèi)容使用率



    圖片素材少,還可以采用多色塊進(jìn)行分割,讓界面顯得不那么單調(diào)。

    加強(qiáng)內(nèi)容使用率可以通過色塊(臨近色或是互補(bǔ)色)的延伸或是圖像的重復(fù)來組織頁面版式。將圖片和色塊進(jìn)行統(tǒng)一化排版布局,整體基調(diào)能使頁面豐富化。圖片與相同大小的色塊可以保持界面的統(tǒng)一性與簡潔性,色調(diào)的一致的統(tǒng)一性和連續(xù)性使頁面更為整體,這樣看起來的頁面就像一張圖片一樣有張力。并且這種方式讓用戶感覺點擊的區(qū)域也會增加,從而操作也變得便捷起來。

     

     

     

    3.構(gòu)圖不拘一格,找到最合適的內(nèi)容版率。


     

    橫向和縱向分割,使界面顯得整齊、穩(wěn)定,而斜向分割讓界面沖擊感強(qiáng)。

    使用不同的構(gòu)圖方式,穿插性地將少量的圖片整合在構(gòu)圖的形狀中,能讓界面變得活躍而富有活躍性。這樣的表現(xiàn)方式還能將產(chǎn)品的氣質(zhì)融入進(jìn)去,淋漓盡致地展現(xiàn)。有節(jié)奏感的設(shè)計更為取巧地加強(qiáng)了版式率。在界面設(shè)計中,圖文的穿插可以引導(dǎo)用戶的視線,讓原本簡單的內(nèi)容變得有趣。在層次上,也可以區(qū)分內(nèi)容的主次性,讓閱讀更加的輕松。

     

     

     

     

     

    4.簡約化桌面或主頁,讓界面越近越美


     

    常用方式:圖標(biāo)、加大文案字號、序號、數(shù)字等來達(dá)到加強(qiáng)版式率的運(yùn)用,提高視覺上的豐富性。

     

    圖標(biāo)表達(dá)

     

    人們越來越認(rèn)同扁平化,一方面是因為扁平化的圖標(biāo)看上去清新簡潔,用戶理解快。另一方面,與圖標(biāo)搭配的背景更加單純,要么留白,要么炫簡,盡可能減少給用戶在視覺上干擾。好的扁平化圖標(biāo)不是簡單地刪減細(xì)節(jié),而是著重凸顯有效的信息。

     

    圖標(biāo)是最為直接的表達(dá)方式,簡單明確的圖形,能讓用戶通過對圖標(biāo)的認(rèn)識快速找到想要的功能和需求點。圖標(biāo)與文案的搭配有效的降低了閱讀時候的疲勞感。從而加強(qiáng)了界面內(nèi)容的節(jié)奏。運(yùn)用圖標(biāo)的設(shè)計條理清晰,功能明確。

     

     

     

     

    信息化圖標(biāo)能給產(chǎn)品增色。有趣的圖標(biāo)設(shè)計不僅能很好的將功能點進(jìn)行區(qū)分,也能好的將軟件的特性和品牌展現(xiàn)出來。

    把圖形融入到界面中,可讓內(nèi)容更為豐富,層次更加的分明。

     

     

     


    5.突出重點文案,調(diào)整版面率,讓信息更清晰。

     

    調(diào)整文字大小將調(diào)整版式的使用率,使原本空的界面內(nèi)容顯示的更為飽滿,用戶閱讀起立更為直接。使用較大的字號進(jìn)行加強(qiáng)頁面使用率能讓頁面顯得更為信息。突出重要的引導(dǎo)文案,加強(qiáng)了軟件的情景感和帶入感??焖僖龑?dǎo)了用戶對功能的理解,從而準(zhǔn)確的使用。

     

    在頁面中我們可以強(qiáng)調(diào)重點數(shù)據(jù)或功能詞等來區(qū)分界面中的層次感。讓用戶的視線更為集中。

     

     

    6.串聯(lián)圖片,讓它們講故事,視圖化版面。

     

    這種設(shè)計方法更多的是將文案用圖形或插圖展現(xiàn)出來。在數(shù)據(jù)頁面和引導(dǎo)頁中最為常見。

    一段文案一副插圖的引導(dǎo)頁更為有特色,給用戶的情懷感更強(qiáng)。這種設(shè)計手法也是最容易體現(xiàn)產(chǎn)品特質(zhì)和吸引眼球的。圖案的易讀性高,能在極其短暫的時間內(nèi)快速傳達(dá)給用戶信息。用圖像來講故事,是設(shè)計中最根本的表現(xiàn)方法,也更是最為受歡迎的表達(dá)方式。

     

     

     

     

     

     

     

    圖在界面中的運(yùn)用

     

    三種方式:摳,邊界關(guān)系,殘缺

     

    1.切摳弄,制造純色留白!



    在處理圖片素材的時候,常常會碰到圖片背景雜亂,產(chǎn)品不夠突出的問題。在設(shè)計之前我們可以對素材先進(jìn)行處理,將產(chǎn)品直接摳出來。利用這種方式可以找到產(chǎn)品的形狀,越明確的形狀越能反映用戶對產(chǎn)品的認(rèn)知度。產(chǎn)品的獨特性能快速明確的表達(dá)給用戶,用戶從潛意識第一時間的判斷到產(chǎn)品的類型和使用特性。

    下面是一個曲奇餅干的網(wǎng)站,將主餅干的勾出來,進(jìn)行層次感的區(qū)分。在產(chǎn)品介紹中采用了側(cè)面的實物摳圖,體現(xiàn)出了曲奇餅干最為真實的厚度。運(yùn)用碎落的餅干塊虛化拉開產(chǎn)品的層次。深色的背景與餅干對比強(qiáng)烈,直接凸顯了實物的形狀。讓用戶一目了然,食欲大增。從而增了用戶的購買欲望。

     

     

    在很多的電商APP中也常采用摳圖,去除多余雜亂的信息,利用產(chǎn)品的形狀直接體現(xiàn)不同商品的特點。這樣的界面用戶閱讀起來輕松愉悅。

     

     

     

    2.建立邊界,再打破邊界,破出重圍

     

    如果需要展示的信息較多,采用分割區(qū)域的方法,可以使界面顯得整齊干凈。而當(dāng)信息較少時,設(shè)計師可以大膽選用“局部出血”的方式,建立邊界,再突破它,增加層次感和沖擊力,以凸顯主題。

    一定要記得設(shè)定好的內(nèi)容范圍是為了讓頁面顯得整體化,而不僅僅是擺放和拼圖。

     

    在網(wǎng)頁設(shè)計中有時候會見到這種方式,其實在手機(jī)、平板等UI設(shè)計中我們完全可以套用。

    運(yùn)用圖片的穿插來區(qū)分背景和產(chǎn)品或形象的層次感,處理完的界面更加富有生命力。放大需要突出的主形象,把它作為第一焦點展現(xiàn)在用戶的眼前,有種強(qiáng)烈的“面對面”感受。

     

    在APP中采用將圖片局部突出出來,能拉開信息的層次,將需要突出的圖片信息第一時間展示給用戶。一方面可以方便和引導(dǎo)用戶點擊,另一方面在上下滾動的長副瀑布流里,適當(dāng)?shù)卮蚱破胶?,可以豐富頁面的節(jié)奏感。

     

     

     

     

    在ICON的設(shè)計中我們也常用到破圖的方法。在統(tǒng)一的圓角矩形中,將表達(dá)寓意的圖形局部超出,使圖標(biāo)更為有空間感和靈活性。

    采用這種方式設(shè)計的圖標(biāo)空間感強(qiáng),層次感強(qiáng)烈,能使產(chǎn)品形象顯得更為突出。

     

     

     

     

     

    在字體中也經(jīng)常運(yùn)用到破圖的方法,讓字體更為生動。在破字的過程中也能引發(fā)出不同的創(chuàng)意點。

    大美青海字體設(shè)計我把數(shù)字9破出了方塊。而在優(yōu)車尚品字體的設(shè)計中,我通過品字的破圖找到了車的聯(lián)想,讓整個字體設(shè)計的更為貼切靈動。

     

     

    3.沖出畫面,只保留局部,讓產(chǎn)品再大一點!


     

    有時候,我們拿到素材,在處理后發(fā)現(xiàn),圖片比較平常,用戶一眼就知道是什么。這個時候,可以考慮保留局部的方式,營造殘缺美,增加時尚感。不要小看用戶的的腦補(bǔ)能力,當(dāng)然,這種方案還是要與客戶或者產(chǎn)品經(jīng)理及時溝通,殘缺美不是所有人動能接受的。

     

    我們將圖片進(jìn)行放大,找出產(chǎn)品特點。選擇能撐起整個頁面構(gòu)圖的位置,切除不必要的圖形,讓圖片沖出畫面!這樣處理后,頁面顯得非常富有張力,激發(fā)了用戶想看到產(chǎn)品整個形象的欲望,起到產(chǎn)品預(yù)熱的效果。

     

     

     

     

    在WATCH的預(yù)熱官網(wǎng)中,設(shè)計師將圖片放大,裁取有特點的部位進(jìn)行展示,引導(dǎo)了用戶點擊觀看產(chǎn)品的整體形象,激發(fā)了用戶更多的去了解產(chǎn)品的特性。

    從版面角度看,局部放大裁切圖片,增加了留白,增加了版式率,讓整個頁面顯得飽滿,微距的效果使用戶與產(chǎn)品更貼切。

     

    這一篇主要理順了一下版面和圖形使用知識,并不全面,大家還是以欣賞為主??赐炅四苡袀€留白、破圖的印象就不算白看。

    設(shè)計大方向上的東西終于絮叨得差不多了,我知道其實大家都懂,就是不知道從何下手而已,下一篇來點小方向的實用東西,歡迎大家留言。

    文章來源:站酷   作者:micu設(shè)計

    分享此文一切功德,皆悉回向給文章原作者及眾讀者.

    免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


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

seo達(dá)人

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

1. How To Set Up Photoshop For UI Design

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

 

2. How to Design an iPhone App in Photoshop

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

 

3. Design an App Landing Page in Photoshop

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

 

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

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

 

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

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

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

 

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

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

 

3. Sketch 3 for iOS App Design Step by Step

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

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

 

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

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

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

 

TIMING

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

 

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

1. The 10 principles of mobile interface design

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

 

2. UI Design Do’s and Don’ts

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

 

3. How to use colors in UI Design

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

 

4. 10 Best APP UI Design for Your Inspiration

每位UI設(shè)計師都夢想著做出最出色的界面(UI)設(shè)計, 能夠脫穎而出的手機(jī)界面設(shè)計則少之又少。設(shè)計師們在設(shè)計UI界面時,往往會參考來自不同設(shè)計師的設(shè)計,這篇文章列出了2017年最出色的的10個手機(jī)應(yīng)用界面設(shè)計范例,給設(shè)計師們謀福利。

 

總結(jié)

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

 

原文地址:Mockplus

作者:jongde

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


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

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

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

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



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

seo達(dá)人


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

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

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

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

 

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

*設(shè)計師:Tubik

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

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

 

3). Listen – 音樂軟件

*設(shè)計師:CD UXT

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

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

 

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

*設(shè)計師:Queble Solutions

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

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

 

5). Roomframes app – 管理型軟件

*設(shè)計師:Adrain Rudzik

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

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

 

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

*設(shè)計師:Melany Roa

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

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

 

7). Karoline – 購物軟件

*設(shè)計師:Varduhi Adami

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

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

 

8).Space – 管理類軟件

*設(shè)計師:Doeun Shin

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

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

 

9).QuickBee – 廣告類軟件

*設(shè)計師:Monish Mohanan

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

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

 

10).Wallet – 理財類軟件

*設(shè)計師: uixNinja

*軟件介紹:Wallet一款能夠幫助使用者理財?shù)囊苿佣塑浖?

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

 

結(jié)語

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

 

原文地址:Mockplus

作者:jongde

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


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

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

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

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



語音用戶界面設(shè)計 - 對話式體驗設(shè)計原則

博博

文章包括三部分:1.智能語音對話系統(tǒng);2.了解 VUI 相關(guān)知識;3.語音用戶界面基本設(shè)計原則。

最近在閱讀關(guān)于智能語音方面的書籍,將最近零零碎碎的筆記重新整理了一番,希望能讓讀者更加快捷、高效的認(rèn)識智能語音方面的基礎(chǔ)知識點。



智能語音對話系統(tǒng)


語音交互界面是近年來最重要的趨勢之一,它不僅可以依托于智能手機(jī)而存在,而且可以和智能家居、車載導(dǎo)航、智能電視、智能音響等一系列產(chǎn)品結(jié)合到一起。越來越多的人更加頻繁地使用 Siri、Google Assistant、Cortana、小愛同學(xué)等。越來越多的應(yīng)用也都已經(jīng)涉及到智能語音技術(shù)。





1、語音和語言有何區(qū)別?


我們首先需要了解「語音」和「語言」的區(qū)別。


語音是語言的信號載體,語音是人的發(fā)音器官發(fā)出的,承載一定的語言意義,而語言才承載人類的智慧。通俗的講,語音是天生就存在的,嬰兒剛出生的哭喊聲也算是語音。它是人的發(fā)音器官發(fā)出具有一定社會意義的聲音。其物理基礎(chǔ)主要有音高、音強(qiáng)、音長、音色四要素構(gòu)成。而語言則是需要學(xué)習(xí)不斷進(jìn)化的。在智能語音中,我們需要考慮的是如何確保在復(fù)雜的現(xiàn)實環(huán)境下,把干擾信息過濾,獲取到準(zhǔn)確的信息。




2、語音界面之間的關(guān)聯(lián)



喚醒:Amazon Echo 和 Google Home 之類的語音驅(qū)動設(shè)備不斷地在等待喚醒詞(“Alexa ...”或“OK,Google ...”)從而進(jìn)入喚醒狀態(tài)。


反饋:一旦喚醒,設(shè)備會將隨后接收到的音頻發(fā)送到云端的AI平臺。 該平臺使用自動語音識別(ASR)和自然語言理解(NLU)的組合來識別用戶的意圖并將其發(fā)送到支持應(yīng)用程序。 


回復(fù):應(yīng)用程序處理請求并通過文本進(jìn)行響應(yīng)(如果支持則提供可視化信息)。該平臺將文本轉(zhuǎn)換為語音并通過設(shè)備播放。




3、對話系統(tǒng)概述


對話系統(tǒng):能夠與人進(jìn)行連貫對話的計算機(jī)系統(tǒng),可以采用文本、語音、圖形、觸覺、手勢及其他方式與人進(jìn)行交互,常以語音交互為主。



而如今的智能設(shè)備能夠“理解你所說的話并且采取行動”,是兩個重要技術(shù)結(jié)合的結(jié)果:一個是自動語音識別(ASR),另一個是自然語言理解(NLU)。


自動語音識別(ASR) — 通過聲學(xué)模型和語言模型,將人的語音識別為文本的技術(shù)

自然語言理解(NLU)— 對用戶輸入的文本進(jìn)行語義理解,包括用戶意圖識別和語義槽填充


對話狀態(tài)跟蹤(DST) — 根據(jù)所有對話歷史信息推斷當(dāng)前對話狀態(tài)St和用戶目標(biāo)

對話策略學(xué)習(xí)(DPL) — 基于當(dāng)前狀態(tài)生成下一步操作

自然語言生成(NLG) — 獲取結(jié)果文本,主要依據(jù)模板或深度生成的模型生成用戶可以理解的自然語言文本

從文本到語音(TTS) — 結(jié)果播放給用戶聽,將自然語言文本轉(zhuǎn)化成語言輸出




4、語音交互設(shè)計需要遵循什么原則?


遵循合作原則:「聽者」和「說話者」為了能夠順利交談,必須互相合作。Paul Grice 提出了這個觀點,并將其分為以下4個準(zhǔn)則。


質(zhì)的準(zhǔn)則:說真實信息,做不到的話不要說。

舉例:對用戶說:“有什么可以幫您的嗎?”,而實際上整個 VUI 系統(tǒng)僅僅能提供查詢話費余額。


量的準(zhǔn)則:保持對話交流簡潔,減少認(rèn)知負(fù)荷。

解釋:刪除多余的措辭。比如“請您注意聽,因為我們的選項可能已經(jīng)變了”。


相關(guān)準(zhǔn)則:所說的話需與當(dāng)前對話有關(guān),不干擾當(dāng)前任務(wù)進(jìn)行。

解釋:比如用戶想知道天氣,你給他推薦旅游的地方。


方式準(zhǔn)則:說話需清晰、明了,不要拐彎抹角。

解釋:不要使用讓用戶難以理解的「專業(yè)術(shù)語」。







了解 VUI 相關(guān)知識


語音交互界面(VUI)指的是為用戶提供可進(jìn)行語音交互的計算機(jī)平臺,它能夠?qū)崿F(xiàn)自動化的服務(wù)并且提供完整的相關(guān)流程。而設(shè)計 VUI 的時候,設(shè)計師需要側(cè)重于用戶的語音交互過程,并設(shè)計出相應(yīng)的語音應(yīng)用系統(tǒng)。由于 VUI 是面向用戶的交互界面,因此滿足用戶的實際需求是至關(guān)重要的。




1、語音用戶界面 VUI 簡史


20世紀(jì)50年代:貝爾實驗室建立了一個單人語音數(shù)字識別系統(tǒng)。


20世紀(jì)60、70年代:語音數(shù)字系統(tǒng)的這項研究仍在不斷拓展可識別的詞匯,并且致力于實現(xiàn)“連續(xù)語音”的識別。


20世紀(jì)80年代:技術(shù)進(jìn)步讓語音識別更具實用性,使日常語音的識別成為可能。


20世紀(jì)90年代:誕生了第一個可行的非特定人的語音識別系統(tǒng)。簡稱 IVR


21世紀(jì)初期,IVR 系統(tǒng)成為了主流,任何人都可以通過一個普通的固定電話和語音進(jìn)行股票詢價、機(jī)票預(yù)定、銀行轉(zhuǎn)賬、處方藥品預(yù)定、本地電影排片查詢以及收聽交通信息等。




2、那什么是 IVR 系統(tǒng)?


交互模式的語音應(yīng)答,簡稱為 IVR。我們后續(xù)簡稱為:交互式語音應(yīng)答(IVR)系統(tǒng)


它可以通過電話線路理解人們的話并且執(zhí)行認(rèn)為,一般都廣泛的應(yīng)用在運(yùn)營的客服方面,即使是現(xiàn)在三大運(yùn)營上的機(jī)器客服還是采用了這種語音應(yīng)答的方式。但是通過電話撥號的方式開始語音的問答還存在很多的缺點,例如只能應(yīng)用在單輪任務(wù)的問答,交互方式比較單一,不能進(jìn)行中途打斷等缺點。


IVR,即語音增值業(yè)務(wù),是移動運(yùn)營商由2002年開始啟動的業(yè)務(wù)。移動的 IVR 分為兩大品牌:音信互動和娛音在線,聯(lián)通的 IVR 品牌為聯(lián)通。





3、IVR 系統(tǒng)設(shè)計與移動設(shè)備


21世紀(jì)初,IVR 系統(tǒng)已逐漸普及。起初“按鍵+語音”的混合形式(請按“1”或者說“1”),是很常見的模式,比如10086的查詢功能。人們創(chuàng)造了 IVR 系統(tǒng),希望它可以自動處理一些事物,這樣客戶就不會總是需要找一個真人來解決問題了。相比與真人客服交談,很多用戶實際上更喜歡使用 IVR 系統(tǒng),因為他們可以花很長時間反復(fù)咨詢信息而不會覺得他們是在“打擾”一個人類客服。


移動 VUI 設(shè)計需要注意:


1、確定它是否需要一個視覺化的呈現(xiàn),比如一個虛擬角色。


2、確定你的 VUI 在什么時候允許用戶說話?可以被打斷嗎?是否需要按鍵功能?




4、VUI 的優(yōu)勢是什么?



速度快:語音輸入的方式比手動輸入快很多,同樣的時間可以輸出更多的信息。


釋放雙手:釋放雙手與機(jī)器進(jìn)行交互,比如駕駛狀態(tài)下,通過語音輸入完成用戶需求,安全和便利。


直覺性:說話更自然,更容易??梢灾苯油ㄟ^語音輸入的方式來表達(dá)你的意愿。


同理心:語音包含了語氣、音量、語調(diào)和語速,且傳遞了大量的感知信息,不僅僅是文字那么簡單。




5、哪些場景不適合使用 VUI ?


公眾場所:開放的環(huán)境辦公,比如:咖啡館、圖書館等。環(huán)境影響因素較大,不利于用戶語音的錄入和接收。


不適應(yīng)對計算機(jī)說話:并不是每個人都喜歡對計算機(jī)大聲說話,即使是在私人空間。


更喜歡打字:許多人習(xí)慣每天在手機(jī)上花幾小時,大部分的時間都是在打字。


隱私安全:比如身份證、銀行密碼等。GUI 比 VUI 更加適合高效安全輸入。




6、哪些場景適合使用 VUI?


使用場景需要騰出雙手,比如車載導(dǎo)航、智能音響。


作為家庭的控制中心,打造智能家具居控制的切入點。


語音記錄病歷,不管對醫(yī)生來說還是患者來說,都是提高看病效率的很好助手。


幫助用戶簡單記錄、查詢、照顧用戶的作息時間等。




7、VUI 設(shè)計師的工作內(nèi)容


VUI 設(shè)計師思考的是在系統(tǒng)和終端用戶間,從開始到結(jié)束的整個對話過程。他們思考正在解決的問題以及用戶需要什么來達(dá)成他們的目的。VUI 設(shè)計師在項目中扮演著非常重要的角色。通常會參與項目全程的工作,并與團(tuán)隊合作完成在技術(shù)、體驗、設(shè)計上的優(yōu)化。



如果 VUI 需要與后端系統(tǒng)進(jìn)行交互,他們要考慮需要處理的請求。如果流程中有人的因素,比如客服需要交接,那么設(shè)計師需要考慮如何進(jìn)行交接,以及如何培訓(xùn)客服。







語音用戶界面基本設(shè)計原則



1、對話式用戶界面


對話式設(shè)計定義:思考如何與 VUI 系統(tǒng)進(jìn)行一輪以上的交互。


因此,需要設(shè)計一輪以上的對話,并思考用戶接下來可能會做什么。不要強(qiáng)迫用戶展開新一輪對話,而是去嘗試了解用戶的意圖并允許用戶繼續(xù)交談,同時有必要為用戶近期所說的話保留歷史記錄。





2、多模態(tài)界面


與 IVR 系統(tǒng)不同的是,在移動設(shè)備上我們可以增加一個可視化組件。


比如在向用戶傳達(dá)信息、確認(rèn)信息,以及告訴用戶什么時候輪到他們說話等。(比如:百度地圖的小度,他會告訴用戶什么時候可以說話,目前所處的狀態(tài),說完之后給予的反饋)


如果有一個可視化組件,則會讓移動設(shè)備增強(qiáng)優(yōu)勢。允許用戶同時使用語音和屏幕進(jìn)行交互。(手機(jī)上虛擬助手,有些雖然以語音交互為主,但是在用戶的智能手機(jī)上也會有一個配套的APP)。





3、設(shè)定用戶期望


優(yōu)秀的對話式設(shè)計不僅僅是精心制作的友好提示。Google 交互設(shè)計師 Margaret Urban 建議:如果你不能理解答案,就不提問。


“當(dāng)某個人成功完成了一次語音交互,伴隨著腦內(nèi)咖(endorphin)的升高,用戶會獲得一種成就感和滿足感。此時正是一個絕佳的時機(jī)來告訴用戶”你做的很棒,要不要再試試這個?”


是否讓我們想到了網(wǎng)頁登陸驗證的時候,需要完成一塊拼圖,但是你再慢他也告訴你超越全球96%以上的人。


“如果你已經(jīng)設(shè)計了一個設(shè)置鬧鐘的功能,但是你沒有提供用戶取消設(shè)置的方式,這就像給人一條浴巾但是沒給他香皂一樣。如果你設(shè)置了可以完成某項任務(wù)的語氣,請務(wù)必考慮與之相關(guān)的任務(wù)。”





4、確定策略時需注意的幾點


輸入確認(rèn):必須確保用戶感覺到自己是被理解的,同時有助于讓用戶知道,什么時候 VUI 不理解他們所說的話。


1、確認(rèn)錯誤的后果是什么?比如:預(yù)定錯誤的航班?制定錯誤的任務(wù)?播放錯誤的歌曲?


2、系統(tǒng)將如何反饋?比如:會有音頻提示嗎?是否有視覺反饋嗎?比如Amazon Echo上的光環(huán)。


3、是否擁有屏幕?比如:車載導(dǎo)航、手機(jī)屏幕、智能手表。


4、選擇合適的確認(rèn)形式?比如:明確確認(rèn)、含蓄確認(rèn)、混合式的確認(rèn)。




5、確認(rèn)策略的兩種方案


顯性確認(rèn):重要信息,需強(qiáng)制用戶確認(rèn)信息。


隱性確認(rèn):讓用戶知道他的話接收到了,但不需要他們確認(rèn)。




6、確認(rèn)信息的方式




三級置信度:


系統(tǒng)將在一定的閾值內(nèi),以明確的形式確認(rèn)信息,拒絕較低置信度的信息,并以隱性確認(rèn)來確認(rèn)置信度超過80%閥值的信息。


1、80%以上,使用隱性確認(rèn)。如果是誤識別代價高的話,考慮采取顯性確認(rèn)。

2、45%-80%,使用顯性確認(rèn),以明確的形式確認(rèn)信息。

3、45%以下的,拒絕確認(rèn)信息。


舉例:用戶:幫我再買一份口香糖。

VUI:(置信度大于80%,使用隱性確認(rèn))好的,已經(jīng)為您再購買一份口香糖。

(置信度45%~79%,使用顯性確認(rèn))您是想再多買一份口香糖,是嗎?

(置信度小于45%)對不起,我沒有聽清您講的話,您想買什么?



隱性確認(rèn):


1、只使用隱性確認(rèn),不要求用戶進(jìn)行操作。

2、將「答案」和連同「原始的問題的一部分」一同回復(fù),讓用戶知道系統(tǒng)識別到的是哪個問題。

3、當(dāng)置信度高的時候,也可以不用連同問題,這樣更自然流暢。



非語言式確認(rèn):


1、僅需行動反饋,而不需要口頭響應(yīng)。

2、通過視覺確認(rèn),比如小米智能家居,可以通過語音交互打開燈光、電視、窗簾等。

     a、如果沒有延遲,沒必要再對其回復(fù)。

     b、如果有3-5秒延遲,需進(jìn)行回復(fù),讓用戶知道并不是設(shè)備沒有聽到她的聲音。

3、使用一個“聲音標(biāo)識”,即簡短的、有識別度的聲音。這樣有助于幫助用戶快速知道他們已經(jīng)到了哪一步。



通用確認(rèn):


1、在某些對話式系統(tǒng)中,最好不要詢問用戶具體說了些什么 - 哪怕是隱性確認(rèn)。

2、通用確認(rèn)可以讓用戶分享更豐富的體驗,因為這類反饋能適應(yīng)用戶輸入的各種信息,并讓對話繼續(xù)進(jìn)行。通常人與人之間的對話,也不會句句必回復(fù),也會有 “嗯” “哦 ”“啊” “然后呢”等。 



視覺確認(rèn):


1、確認(rèn)一個項目清單,通過屏幕顯示進(jìn)行溝通會更加有效。人的記憶有限,通常用戶一次性不能記住超過大約7個聽覺項目。

2、用來確認(rèn)用戶的選擇。用戶可以通過說話或按下按鈕來回復(fù)。而 GUI 的反饋指令更加明確。




7、判斷你的 VUI 適合哪種類型


目前大多數(shù)的 VUI 系統(tǒng)都是“命令 - 控制”模式,這意味著當(dāng)用戶想要說話時,必須給出明確的指示。


1、用戶可以隨時向系統(tǒng)詢問 / 發(fā)出命令嗎?


2、是否參與一個有明確開始和結(jié)束的封閉式對話?




8、命令-控制模式



喚醒系統(tǒng)方式:按鍵通話(車載導(dǎo)航、Siri等)、直接進(jìn)行關(guān)鍵詞呼叫(“OK Google”“小度”等喚醒詞)。


喚醒系統(tǒng)反饋:系統(tǒng)檢測到用戶說話完成,通常會使用某種非語言的音效進(jìn)行提示,然后做出相應(yīng)處理(比如:“啵”的一聲或者視覺反饋:聲波線、點狀動效、設(shè)備逐漸發(fā)光等)。


系統(tǒng)聆聽時間:用戶說出喚醒詞或按下按鈕后,系統(tǒng)保持聆聽狀態(tài)的時長,根據(jù)經(jīng)驗來看,10秒 是個不錯的起始時間段。



喚醒響應(yīng)時間與反饋方式


喚醒響應(yīng)時間與喚醒反饋方式有關(guān),不同喚醒反饋方式下,最佳響應(yīng)時間不同:


1、當(dāng)喚醒反饋為"燈光"反饋時,喚醒響應(yīng)速度越快越好,在200ms時,用戶響應(yīng)舒適度最高(對響應(yīng)時間評價為剛剛好的用戶比例),73%的用戶對速度滿意。


2、當(dāng)喚醒反饋為"燈光+音效"時,喚醒響應(yīng)速度的舒適時間為300ms左右,76%的用戶對速度滿意。


3、當(dāng)喚醒反饋為"燈光+人聲"時,喚醒響應(yīng)速度的舒適時間為500ms左右,74%的用戶對速度滿意。


數(shù)據(jù)來源:百度人工智能交互設(shè)計院智能音響時間測試實驗



喚醒等待時間體驗感


用戶請求及反饋階段響應(yīng)時間對等待體驗的影響:


1、1250ms以內(nèi)是用戶認(rèn)為響應(yīng)速度較優(yōu)的區(qū)間,其中650ms為最佳體驗值。在450ms時,少量用戶覺得響應(yīng)速度太快了,用戶會感覺到緊迫感和壓力,難以接受。


2、在1450ms時,有53%的用戶開始感覺響應(yīng)有延時,但仍能夠接受。


3、從2150ms開始,有20%的用戶認(rèn)為音箱響應(yīng)太慢,不能夠接受。我們認(rèn)為20%的用戶不滿意,已經(jīng)不足以被稱為一個優(yōu)秀的產(chǎn)品。


數(shù)據(jù)來源:百度人工智能交互設(shè)計院智能音響時間測試實驗




9、對話模式


1、不要強(qiáng)迫他們不斷地去表明他們將要開始說話,自然地對話技巧進(jìn)行話輪轉(zhuǎn)換。


2、通過更精細(xì)的設(shè)計,使 VUI 系統(tǒng)可以處理一些常見的微妙表達(dá)方式。(用戶處理完畢說“謝謝”,你可以設(shè)置系統(tǒng)忽略這種情況,或回復(fù)“不用客氣”,而不是提示或者報錯。)


3、不要問你都無法理解的反問句。


4、打破話輪轉(zhuǎn)換的情況,用戶在系統(tǒng)說完之前就進(jìn)行提問。


5、在命令 - 控制模式和對話模式之間進(jìn)行切換。喚醒之后進(jìn)行自然的對話。




10、對話式標(biāo)識


使 VUI 更加人性化、更具吸引力,對話式標(biāo)識是讓用戶了解交談進(jìn)展以及進(jìn)展情況的重要方式,當(dāng)系統(tǒng)在對話中使用了一些基本的對話禮儀后,用戶的參與度會更高,并且會以同樣的方式進(jìn)行回復(fù)。



反面案例:

虛擬助理:你昨晚你睡了幾小時?

用戶:大約7個小時。

虛擬助理:你昨天吃了幾份水果和蔬菜?

用戶:大概有4份。

虛擬助理:你昨晚吃藥了嗎?

用戶:吃藥。

虛擬助理:再見。


正確案例:

虛擬助理:我會問你幾個有關(guān)你身體健康的問題。第一個問題,昨晚你睡了幾小時?

用戶:大約7個小時。

虛擬助理:不錯。你昨天吃了幾份水果和蔬菜?

用戶:大概有4份。

虛擬助理:了解了。最后一個問題,你昨晚吃藥了嗎?

用戶:吃藥。

虛擬助理:好的,暫時就這些了,我明天還會再問你的,回見。




11、異常處理


“當(dāng)你與人類交談時,永遠(yuǎn)不會出現(xiàn)不可恢復(fù)的錯誤狀態(tài)。”

— ABI JONES, Google 設(shè)計主管


“你偶爾因為犯錯和不知道某些事情導(dǎo)致評分降低造成的影響,比你每次做對一件事情重要百倍?!?nbsp;

— 英特爾語音助手部經(jīng)理 Pilar Manchon


如果處理的得很好,錯誤情況就不會影響用戶,你可以讓用戶回到正常流程,并順利完成任務(wù)。但如果處理不好,用戶不僅這次無法完成任務(wù),他們以后都可能再也不用你的產(chǎn)品了。


一個好的設(shè)計師應(yīng)該知道,你不能只設(shè)計正常的情況, 你還要對出錯的情況做出設(shè)計。這對于 VUI 設(shè)計來說尤為重要,因為出錯情況是家常便飯。



未檢測到語音 / 檢測到語音,但沒有識別


1、什么情況下可以明確說出來?

     a、你的系統(tǒng)只使用語音

     b、用戶沒有其他的回復(fù)方式

     c、必須要用戶回復(fù)后,系統(tǒng)才能繼續(xù)進(jìn)行任務(wù) / 對話


2、什么情況下可以什么都不做?

     a、用戶可以通過其他方式進(jìn)行下一步操作(比如通過按鍵選擇)

     b、就算什么也不做,也不會中斷對話

     c、系統(tǒng)沒有理解時,用視覺信息提示告訴用戶,比如:提示列表等

     d、利用虛擬表情形象反饋,疑問、微笑等動作表達(dá)



其他異常處理


1、當(dāng)出現(xiàn):語音被正確識別,但系統(tǒng)無法處理

     a、程序?qū)﹃P(guān)鍵屬性理解不明,寫了錯誤的回復(fù)

     b、沒有針對一些情況的回復(fù)

解決:對用戶可能會說到的所有情況做更完善的預(yù)測,通過數(shù)據(jù)收集來避免此問題


2、當(dāng)出現(xiàn):部分語音識別錯誤

     a、什么也不去處理,因為這不是你想要的結(jié)果

     b、匹配錯誤的行為

解決:可以用 N-Best 列表來智能匹配最有可能的識別結(jié)果


3、增強(qiáng)錯誤提示

     a、當(dāng)需要用戶說話的時候,使用這種增強(qiáng)錯誤提示策略

     b、必要的情況下,進(jìn)階錯誤行為提示可以更為詳細(xì),并提供更多的幫助

     c、如果你正在設(shè)計一個可以提供真人輔助的系統(tǒng),可以為錯誤數(shù)量設(shè)置一個閾值,當(dāng)達(dá)到該閾值時,將用戶轉(zhuǎn)移給人工助手  




12、新手和專家用戶


如果你的用戶會定期使用你的系統(tǒng),那么在設(shè)計中就需包含不同的策略。


“務(wù)必確保你的目標(biāo)不是簡單的訓(xùn)練你的用戶,應(yīng)當(dāng)適應(yīng)用戶的行為,而不是用已有的命令讓用戶感到厭煩?!?

— Google 交互設(shè)計師 Margaret Urban


我們在 VUI 設(shè)計上該如何更好的交互設(shè)計?


1、減少冗長指令以及其他引導(dǎo)提示。通過計算 APP 使用次數(shù)和頻率來確認(rèn)是否切換模式。


2、縮短解釋性提示。但是請務(wù)必使用“對話式標(biāo)識”。


3、啟動效應(yīng)。



什么是啟動效應(yīng)?


指某人受到某種特定的刺激后(例如一個詞語或者圖像)會影響他們對之后刺激的反應(yīng)。首先讓用戶預(yù)先知道你會問他們幾個確定數(shù)量的問題,為后面會發(fā)生的事情提供了暗示,用戶就會知道如何去準(zhǔn)備。比如以下情況:


1、當(dāng)給人們呈現(xiàn)一個還沒完成的草圖,隨著這個草圖越來越完整,人們就越來越辨認(rèn)出這張圖畫的是什么。之后,再給他們呈現(xiàn)其他還沒完成的草圖時,他們會更早辨認(rèn)出這張圖畫的是什么;


2、如果當(dāng)給人們呈現(xiàn)一組漢字,假如里面含有 “河” 這個字,隨后讓他們寫出部首是 “氵” 的字時,這些人回答 “河” 的幾率會更大。



談?wù)勛约簩π率趾蛯<矣脩舻睦斫?/strong>


01、專家型用戶:代表老用戶且愿意探索你的產(chǎn)品或服務(wù),有著很大的包容度。并會積極提出各種改進(jìn)的建議和享受產(chǎn)品帶來的驚喜感。


02、新手:什么叫新手,就是剛剛下載你的產(chǎn)品,準(zhǔn)備使用的用戶,對產(chǎn)品功能都還處于陌生摸索的階段。他們不會因為你的技術(shù)而使用你的產(chǎn)品,使用你的產(chǎn)品目的是完成某項任務(wù)。他們有興趣使用更高級更復(fù)雜的產(chǎn)品,但卻不愿意接觸全新的東西,要想讓他們認(rèn)可,那么產(chǎn)品就必須足夠簡單。




13、持續(xù)跟蹤上下文


持續(xù)跟蹤信息并不容易,但如果不跟蹤這些信息,你的 APP 就只能做單輪的對話行為。


指代:用兩個不同的詞語指同一個東西。比如: “他”  “哪些”





14、幫助和其他通用部分


我們在設(shè)計 IVR 系統(tǒng)時,我們會確保每個狀態(tài)都包含一組通用組件:重復(fù)、主菜單、幫助、操作和再見。





15、延遲


產(chǎn)生原因:糟糕的連續(xù)性能、系統(tǒng)處理進(jìn)程、數(shù)據(jù)庫訪問


處理方式:告知用戶關(guān)于延遲的情況(比如:“請稍等,正在查找相關(guān)記錄”)、非語音和視覺的提示(比如:延遲提示音以及加載狀態(tài))、可視化效果(比如:加載中的動態(tài)圖標(biāo))


處理細(xì)節(jié):延遲的時長可能為0~10秒,在沒有延遲的時候最好也插入幾秒的延遲。因為如果在系統(tǒng)說“請稍等”之后,緊接著就繼續(xù)對話的話,會給用戶帶來異樣的感受。很多設(shè)備針對喚醒詞采用了本地化識別的方式,這樣喚醒的會更快。




16、消除歧義


問題來源:用戶只會提供執(zhí)行命令所需的部分信息,而沒有提供所有的細(xì)節(jié)。


舉例:用戶可能會詢問某地的天氣,而很多地方都有叫這個名字的地點,諸如“湖南路”那邊的天氣怎么樣。


解決方案:


1、依靠任何已知的信息來確定答案,而不是再次詢問用戶。


2、根據(jù)上下文線索進(jìn)行判斷。


3、反問用戶進(jìn)行確認(rèn),確保系統(tǒng)對用戶同一個問題的各種各樣的回復(fù)形式都有良好的適應(yīng)性。


4、指令不明確。比如“給胡歌打電話,撥打工作電話還是家庭電話?”,系統(tǒng)以隱性的形式對名字進(jìn)行了確認(rèn),系統(tǒng)對這個名字有很高的置信度,并且僅有一個胡歌。


5、用戶回答的信息超初了你的 VUI 系統(tǒng)可以處理的范圍時,你可能需要縮小范圍消除歧義。




17、設(shè)計文檔


我們需要制作:示例對話(sample dialogs)和會話流(dialog flow)文檔外其他一些情況。例如:在設(shè)計過程中,你還需要創(chuàng)建提示列表、完善對話每個狀態(tài)指定完整的語法規(guī)則等等。





18、無障礙設(shè)計


“一開始,我就很討厭屏幕閱讀器的工作方式。為什么它會被設(shè)計成這樣?當(dāng)以視覺的方式來展示信息沒有任何意義時,屏幕閱讀器只是簡單地將文字轉(zhuǎn)換成音頻。所有那些應(yīng)用花在創(chuàng)造完美用戶體驗的時候和精力此時都變得沒有任何意義,甚至有的給盲人用戶帶來了更糟的體驗。”    — 克里斯·莫里(Chris Maury)





19、典型 VUI 項目交付項內(nèi)容


示例對話:系統(tǒng)和用戶之間可能產(chǎn)生交互行為的預(yù)設(shè)對話,對話看起來就像電影劇本一樣,包括兩個主要角色之間來回往復(fù)對話。


流程圖:展示下一個狀態(tài)分支的所有方式,不一定要羅列所有的交互或示例對話,也可以是功能的分組、文本的分組等。


提示列表:如果沒有屏幕可以使用配音演員或語音合成來播放提示列表。


產(chǎn)品原型:如果這是一個多模態(tài)產(chǎn)品,有屏幕、支持觸摸交互。




參考文獻(xiàn):

《語音用戶界面設(shè)計:對話式體驗設(shè)計原則》-【美】Cathy Pearl(凱瑟 彼爾)

語音交互入門:從概念,原理到如何設(shè)計VUI產(chǎn)品 - 杜松

AI時代的語音設(shè)計經(jīng)驗漫談 - 少夫白杰

語音用戶界面設(shè)計 - 對話式體驗設(shè)計原則 - walle_x






文章來源:站酷   作者:Sabaku_no_Gaara

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

【譯文】移動應(yīng)用界面設(shè)計7宗罪

博博

本文是移動原型工具Proto.io的設(shè)計團(tuán)隊8月份在自家博客上發(fā)表的一篇“軟文”,通過與移動設(shè)計界大牛們的對話,幫助大家了解在進(jìn)行移動設(shè)計時應(yīng)該特別注意的禁忌,大家可以回顧一下自己團(tuán)隊的應(yīng)用正在觸犯哪些禁忌,想必會有點意思。

【譯者注】本文是移動原型工具Proto.io的設(shè)計團(tuán)隊8月份在自家博客上發(fā)表的一篇“軟文”,通過與移動設(shè)計界大牛們的對話,幫助大家了解在進(jìn)行 移動設(shè)計時應(yīng)該特別注意的禁忌,順便推了一下Proto這個工具。大家可以回顧一下自己團(tuán)隊的應(yīng)用正在觸犯哪些禁忌,想必會有點意思。讀完本文,相信你能 找到優(yōu)化自家移動應(yīng)用設(shè)計的方向。


規(guī)則就是用來打破的?這完全取決于規(guī)則本身。在移動應(yīng)用界面設(shè)計(后續(xù)簡稱:移動設(shè)計)的世界里,大家對美學(xué)、手勢和動效的看法略有不同。有時一個簡單的功能性應(yīng)用比華麗的應(yīng)用帶來的效果更好,而有時候卻恰恰相反。


不過,有些基本規(guī)則是人們不愿意去打破的。如果你的移動設(shè)計使得用戶無法順利觸達(dá)關(guān)鍵功能,這顯然是行不通的。假使你的文字字號過小導(dǎo)致沒人能順利完成閱讀,那么你得回爐重做。淺色背景搭配白色文字?重來吧。

我們試圖了解優(yōu)秀的設(shè)計師們心目當(dāng)中移動設(shè)計的7宗罪是什么。經(jīng)過垂詢?nèi)M設(shè)計專家,我們得到了三個略有區(qū)別的結(jié)果,看看你是否能從其中找到一致的地方呢。


0c0156e773ac32f875520f0b7ce5.jpg




來自AKTA的意見


Alyssa Burke與Macy Nguyen是AKTA(一個數(shù)字體驗咨詢公司)的設(shè)計師,倆人都曾為財富500強(qiáng)的公司以及迅速增長的創(chuàng)業(yè)公司效力,參與過原生移動設(shè)計項目,為某些機(jī)構(gòu)的頂級項目貢獻(xiàn)設(shè)計輸出。以下是他們認(rèn)為無法接受的移動設(shè)計7宗罪:


1、忽略上下文情境


目標(biāo)用戶的個人檔案(年齡、生活習(xí)慣、技術(shù)潛能等)與他們的物理環(huán)境(室內(nèi)室外,在線離線,早晨晚上等)會影響許多設(shè)計決策。移動設(shè)計師應(yīng)該在迭代流程中 充分考慮上下文因素,以降低可用性不足的風(fēng)險。即使擁有平滑的過渡轉(zhuǎn)場、光滑的按鈕和美麗的字體,一些應(yīng)用也會因為整體界面設(shè)計不符合特定用戶場景(深色 界面用于戶外場景:糟糕的移動設(shè)計)而失去成名機(jī)會。


2、閉門造車


設(shè)計和開發(fā)數(shù)字產(chǎn)品是一項需要團(tuán)隊協(xié)作的工作。即使有項目成員(開發(fā)、新人、極客、狂熱者、朋友、陌生人、你的哥們兒和設(shè)計師潮人)對具體項目內(nèi)容完全不 了解,將設(shè)計工作及早并及時推廣到整個項目周期中的不同角色之間也是非常關(guān)鍵的。我們需要讓他們了解到必要的上下文信息,并持續(xù)保持相關(guān)信息互通。與其在 發(fā)布后修復(fù)問題,不如在項目進(jìn)程早期預(yù)留調(diào)整空間。


3、怠慢開發(fā)人員


程序員和工程師(以及偶爾酗酒的碼農(nóng))不僅是你的同伴,而且是技術(shù)先導(dǎo)。他們除了知道哪些能夠在現(xiàn)實中奏效之外,還能夠如你設(shè)想的那般確保你的想法得到完 美落地。有些移動設(shè)計在技術(shù)上行不通,有些或許可行,但這些都需要很多努力或時間在項目中驗證。如果不問你或許永遠(yuǎn)無法確定能否做到。在項目交付時,開發(fā) 人員會把你的設(shè)計成果實現(xiàn)出來,此刻,他們可能很欣賞你,也可能很討厭你。


4、低估動效設(shè)計


隨著物聯(lián)網(wǎng)逐步成熟,數(shù)字界面在人們與周圍真實世界的互動中扮演了更重要的角色,界面設(shè)計的這一部分需要被設(shè)計師更加慎重的對待。人類擁有與生而來的本 能,從所處環(huán)境的變化中得到不同的感知與反應(yīng)。使用合理的界面動效是一種呈現(xiàn)優(yōu)先級和重要內(nèi)容的有效方式。在某些情形下的恰當(dāng)運(yùn)用,甚至能夠引發(fā)用戶的愉 悅。有興趣的讀者可以了解下迪斯尼動畫的12項基本法則。


5、字號太小


比起紙質(zhì)內(nèi)容,人們在手機(jī)屏幕上進(jìn)行閱讀的精確度和深入度略有不足。正如移動設(shè)計拇指觸控規(guī)則所定義,數(shù)字界面的字號最少應(yīng)該兩倍于印刷字號。不同情形適 用不同的字體和設(shè)置,尤其當(dāng)用戶試圖在移動設(shè)備上完成多類任務(wù)時。為了避免字號太小,還需要優(yōu)先考慮按鈕形狀、圖片及交互等界面元素對整體體驗有何影響。


6、忽略觸控目標(biāo)


許多移動設(shè)計師仍然對用戶手指大小不同的現(xiàn)狀缺乏重視。一旦涉及行動或者任務(wù)導(dǎo)向的觸控目標(biāo),盡可能的使它簡單而且容易點擊。為老人設(shè)計時要考慮觸控時的 抖動因素,同樣為兒童設(shè)計時需要考慮點擊的不準(zhǔn)確性。建議為圖形資源周圍增加留白區(qū)域,以便本質(zhì)上提升觸控面積,幫助提升完成任務(wù)的速度。


7、死摳平臺規(guī)范


在Android和iOS平臺上統(tǒng)一一套設(shè)計方案有一定局限性,也容易對全局體驗?zāi)繕?biāo)帶來副作用。兩個平臺上有各自用戶熟悉的設(shè)計模式,設(shè)計師不應(yīng)該只熟悉規(guī)范,而應(yīng)該探索在兩個平臺上流行的應(yīng)用。


230656e773cb6ac7255885014da5.jpg




來自Moblico Solutions的意見


我們同Moblico Solutions(一家提供移動關(guān)系管理方案的企業(yè),其目標(biāo)是協(xié)助品牌“打造更多有意義的移動瞬間”)的一些員工進(jìn)行了交流,他們不僅為諸多行業(yè)客戶提 供了“如何讓他們的移動應(yīng)用體驗更棒”的建議,而且掌握移動設(shè)計方面的竅門。以下是他們認(rèn)為移動設(shè)計的7大禁忌:


1、在用戶設(shè)備上占用過多容量只為了體現(xiàn)存在感


當(dāng)用戶收到“磁盤空間不夠”的提示時,會馬上遍歷手機(jī)上已經(jīng)安裝的應(yīng)用并開始選擇刪除的對象。如果一個移動應(yīng)用體積很大,占用了過多的容量卻并未提供等同的價值會怎么樣?后會有期,用戶肯定拿你開刀。記得保持應(yīng)用在體積上足夠輕量,這樣至少用戶不會輕易把你刪掉。


2、在應(yīng)用啟動時及要求允許權(quán)限控制(推送、地理位置、攝像頭等)


回想下,有多少次我們興沖沖的下載一個應(yīng)用并準(zhǔn)備開始使用時,一個對話框立馬跳出來掃了興?我不關(guān)心這個對話框描述什么內(nèi)容,只想馬上關(guān)掉它并繼續(xù)使用應(yīng)用功能。它是啥?好吧,菜鳥應(yīng)用!


3、下載后在使用前就要求登錄、注冊甚至收費


實際上,這條或許應(yīng)該排為第一禁忌,很難讓人忍受。你能對用戶所做最糟糕的事情就是:在他們下載你的應(yīng)用后告訴他們必須付費才能使用。爛,爛,爛,重要的事情說三遍,趕緊刪之。


4、設(shè)計的移動應(yīng)用界面看起來像網(wǎng)頁


如果這樣,還需要移動應(yīng)用干嘛呢?要說有一件事情可以毀掉一個移動開發(fā)者,那就是把網(wǎng)頁的體驗縮小到移動端并且稱之為移動應(yīng)用。移動應(yīng)用應(yīng)該有其具體優(yōu)勢,只提供縮水的網(wǎng)頁體驗遠(yuǎn)不能滿足用戶期望。


5、粗暴投放廣告,或者只提供極難點擊的廣告關(guān)閉按鈕


當(dāng)你在滾動瀏覽移動站點時,只是手指不小心長按了某張圖片就觸發(fā)了瀏覽器廣告,這難道不是讓人煩躁的事情?偏偏還提供極小的關(guān)閉按鈕,誰能點得到?想要點擊簡直跟賭博一樣。嘗試點擊關(guān)閉的時候還總是因為手指觸控面積較大誤觸了廣告,真是要了命!


6、消息推送過載


沒錯,現(xiàn)在你的應(yīng)用出現(xiàn)在數(shù)百萬人的手機(jī)屏幕上,它有巨大的影響力。不過,在推送之前請三思,捫心自問:推送是否與用戶相關(guān)?用戶是否真的需要它?當(dāng)然,你可以在你的移動店鋪每次上新時都推送一下,但真的至于么?影響力越大,責(zé)任也越大,慎重使用消息推送吧。


7、移動賬號缺乏單點登錄支持


當(dāng)移動開發(fā)者認(rèn)同并尊重用戶不愿意重復(fù)勞動的想法時,最好的體驗才可能產(chǎn)生。沒人愿意為你的應(yīng)用重新登錄一次。我們得接受單點登錄的現(xiàn)行趨勢,F(xiàn)acebook在這點上非常成功,繼續(xù)加油吧。


208456e773e232f875520f8802a6.jpg




來自Ideaware的意見


Andres Max是數(shù)字創(chuàng)新機(jī)構(gòu)Ideaware(致力于幫助創(chuàng)業(yè)團(tuán)隊和財富500強(qiáng)的公司打造有競爭力的移動應(yīng)用)的創(chuàng)始人。在創(chuàng)建Ideaware之前,Max 是Mashable設(shè)計團(tuán)隊的    負(fù)責(zé)人。經(jīng)歷過為眾多行業(yè)巨頭設(shè)計移動產(chǎn)品之后,Max對移動設(shè)計7宗罪有自己深刻的見解:


1、用戶點擊后無反饋


看在上帝的份上,當(dāng)用戶在你的應(yīng)用中進(jìn)行點擊后請給予及時的反饋吧,否則用戶會以為你的應(yīng)用掛了,并且馬上退出。


2、無休止的引導(dǎo)


如果使用自己的手機(jī),我只想快速完成相關(guān)任務(wù)。別問我各種問題或者讓我填寫亂七八糟的內(nèi)容。


3、觸控?zé)釁^(qū)尺寸不對


請停止把按鈕和輸入框做的太小,這不是網(wǎng)頁。我的手指需要輕松觸及行動按鈕,而不是要進(jìn)行精確到像素級的點擊。


4、使用古怪的導(dǎo)航模式


想讓用戶可以快速熟悉你的應(yīng)用?那就不要以自己獨特的方式來組織導(dǎo)航。Apple的人機(jī)交互規(guī)范和Google的設(shè)計指南就是最好的參照標(biāo)準(zhǔn)。導(dǎo)航設(shè)計方面別引入爭議,從而給潛在用戶一個卸載應(yīng)用的理由。


5、選取糟糕的配色色系


給眼睛一些休息的空間,你不必采用黃黑色文本那樣的出挑配色。


6、留白


移動應(yīng)用需要很多留白空間,把各種視覺元素進(jìn)行區(qū)分,按鈕得加大處理,所有一切都依靠留白來提供視覺緩沖。移動端首屏的概念沒有網(wǎng)頁那么夸張,所以切忌把所有東西都塞到首屏當(dāng)中。


7、無休止的推送


為了上帝,請不要每天推送20條消息給用戶了。用戶在收到幾條推送后,就會深深的感覺到想要卸載應(yīng)用的那股沖動。


3a6956e773f26ac7255885dc59a7.jpg



你心目中的移動設(shè)計7宗罪是什么呢?


盡管不同設(shè)計師心目中的7宗罪不盡相同,我們依然可以看到不少相似點和共識。最重要的兩條是:1、除非確有必要,避免推送消息;2、通過使用符合習(xí)慣與直覺的導(dǎo)航,以及提供其當(dāng)尺寸的視覺元素,讓你的移動設(shè)計具備可用性。


我們還能想到的一條是:忽略數(shù)字原型。在原型設(shè)計階段能夠發(fā)現(xiàn)很多移動設(shè)計問題,以及讓它們更具可用性更加出色的寶貴反饋。這也是Proto.io為什么堅持提供強(qiáng)大又易用的原型解決方案的原因。




譯者:1688事業(yè)部/無線交互/舒舟
文章來源:站酷   作者:阿里巴巴CBU設(shè)計

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


把握“時間”顯示的訣竅

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

背景


“時間”作為人機(jī)交互界面中經(jīng)常出現(xiàn)的元素,本質(zhì)上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯(lián)網(wǎng)產(chǎn)品時會發(fā)現(xiàn),關(guān)于“時間”的顯示狀態(tài)或形式在不同場景、不同頁面里往往是不太一樣的,這是出于怎樣的考慮呢?今天我們就來聊一聊,如何在產(chǎn)品設(shè)計中把握“時間”顯示的訣竅,讓其在頁面中發(fā)揮最大的作用。



“時間”元素的分類


按照“時間”元素在頁面中的出現(xiàn)場景和所起到的作用,可以大致歸為以下幾類:


A.事件的關(guān)鍵構(gòu)成要素

時間作為描述整個事件的重要組成部分,缺失后會對原本所要傳達(dá)的內(nèi)容產(chǎn)生嚴(yán)重的影響,進(jìn)而影響用戶的使用預(yù)期和結(jié)果,比方說用戶可能不能以一個較低的價格完成商品購買,或錯過了產(chǎn)品發(fā)布會的時間。 


B.行為的時間標(biāo)記

指用戶本人作為行為主體或行為的接收對象,在某一動作發(fā)生后為其所打上的時間標(biāo)記,比方說“我”購買商品下單的時間或收到一封郵件的時間。


C.內(nèi)容的附屬信息

用戶在使用產(chǎn)品進(jìn)行內(nèi)容消費時,時間作為該條內(nèi)容的附屬信息,起到補(bǔ)充說明的作用,比方說一條短視頻或新聞的發(fā)布時間。


在上面的案例中,我們會發(fā)現(xiàn)“時間”在對應(yīng)場景里所發(fā)揮的作用不同,用戶在使用產(chǎn)品時往往對時間存在不一樣的關(guān)注程度。因此我們在做頁面設(shè)計時,要根據(jù)具體場景和用戶訴求判斷“時間”元素的重要性和優(yōu)先級,通常情況下:時間作為事件的關(guān)鍵構(gòu)成要素>行為的時間標(biāo)記>內(nèi)容的附屬信息,之后再思考用什么樣的設(shè)計形式去展示來達(dá)到我們的目標(biāo)。




“時間”的呈現(xiàn)方式和運(yùn)用技巧

在討論“時間”元素的設(shè)計之前,我們先共識一些有關(guān)時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度,類似我們高中物理時學(xué)過的“時刻”和"時間間隔“的概念。


拿開會舉例子:“下午4:30會議開始”、“下午6:00會議結(jié)束”描述的是事件開始、結(jié)束的時間點,而“整個會議持續(xù)1.5小時”、“會議時間為下午4:30-6:00”描述的是事件過程的時間段;但是,我們在會議開始時也可以這樣講“會議將在1.5小時后結(jié)束”。


通過上面的例子我們可以發(fā)下,同樣是描述一件事情,運(yùn)用不同的時間點、時間段的方式去表達(dá),意思一樣但卻傳遞出不一樣的情感,并且兩者存在如下的“換算”關(guān)系:

1)時間段加上定語會變成時間點(但同樣是時間點,“下午6:00”是絕對時間,而“1.5小時后”是相對時間,剛好對應(yīng)到我們設(shè)計時兩種時間戳類型);

2)兩個時間點之間則表示時間段。

所以,我們在平時表達(dá)或設(shè)計時,要先想清楚用“時間”是想側(cè)重表達(dá)某一事件、動作發(fā)生的即刻時間節(jié)點?還是想描述其所持續(xù)的時間過程?之后我們再針對不同語境去選取合適的文案和呈現(xiàn)方式。



時間的呈現(xiàn)方式離不開:時間戳類型、時間顯示格式、時間顆粒度。其中,時間顆粒度指的是描述時間的最小單位,往往顆粒度越細(xì),給用戶傳達(dá)的確定感越強(qiáng)(如轉(zhuǎn)賬時間是12日15:15:20),對用戶的激勵作用越明顯(如距搶購結(jié)束僅剩00時01分23.6秒)。


1.絕對時間戳

絕對時間可理解為事物發(fā)生時的確切時間,由具體日期(年、月、日)和時間(時、分、秒)組成。使用絕對時間戳的優(yōu)勢是信息傳達(dá)精準(zhǔn),顯得正式,給人確定感和安全感,同時排布規(guī)整,便于形成認(rèn)知習(xí)慣;但缺點是內(nèi)容顯示過長不利于閱讀,并且占用空間較大。




在時間顯示格式的選擇上,為了避免混淆,推薦使用文字格式或“-”分隔符來分隔日期,而“/”分隔符在不同國家有不同的展示順序習(xí)慣,容易造成誤解,盡量少用。


時間顆粒度的選擇依情況而定,一般場景總結(jié)如下:




2.相對時間戳

相對時間在產(chǎn)品設(shè)計領(lǐng)域通常是指內(nèi)容生產(chǎn)、到達(dá)、或狀態(tài)發(fā)生改變時,距當(dāng)前時間點的時間差值,多用于push通知、信息流產(chǎn)品,側(cè)重強(qiáng)調(diào)內(nèi)容的時效性;而“倒計時”也算相對時間的一種,側(cè)重營造時間的緊迫感。使用相對時間戳的優(yōu)勢是用戶辨識、理解成本低,不用通過計算來判斷時間過去或還剩下多久;缺點是不夠精確、正式,并很難衡量兩個時間點的臨近性。



在使用相對時間是,要注意格式友好。時間單位可隨著時間的推移自動改變;數(shù)字不要過多,盡量取整;并且可設(shè)置其與絕對時間轉(zhuǎn)換的臨界點。



總結(jié)


在設(shè)計界面中的“時間”元素時,要遵循場景貼合、便于閱讀理解的總體原則;之后根據(jù)場景和目標(biāo),再選取合適的“時間”呈現(xiàn)方式(包括時間戳類型、時間顯示格式、時間顆粒度)。



當(dāng)時間作為“A.事件的關(guān)鍵構(gòu)成要素”時

一般情況下使用絕對時間,并且要看是為了強(qiáng)調(diào)某一關(guān)鍵時間節(jié)點,還是側(cè)重表達(dá)整個持續(xù)過程。此外,選用關(guān)聯(lián)場景的文案或者運(yùn)用倒計時(相對時間)的形式,可一定程度上促進(jìn)用戶更加集中注意力,提升對信息的關(guān)注度,并達(dá)到特殊的激勵作用和轉(zhuǎn)化效果。


當(dāng)時間作為“B.行為的時間標(biāo)記”時

該場景通常是為了追求確定感,通過提供精準(zhǔn)的時間和日期便于用戶定位到過去或?qū)淼哪硞€時間點(段)去查找、回顧相應(yīng)內(nèi)容,因此大多數(shù)采用絕對時間,時間顆粒度依具體情況而定。


當(dāng)時間作為“C.內(nèi)容的附屬信息”時

如果所設(shè)計的產(chǎn)品供給內(nèi)容的更新速度快,用戶活躍度高,并且此時內(nèi)容的時間信息準(zhǔn)確性不那么重要反而更側(cè)重于內(nèi)容的時效性,那么通常會使用相對時間。部分信息流產(chǎn)品(比如新聞資訊類、社區(qū)類)會在列表頁使用相對時間,在詳情頁使用絕對時間,時間顆粒度也是依情況而定;并且會隨著時間推移,在某一時間節(jié)點前把相對時間轉(zhuǎn)換為絕對時間。



 

原文地址:站酷
作者:vivo互聯(lián)網(wǎng)UED

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

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

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

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


3D to H5工作流應(yīng)用手冊:理論篇

資深UI設(shè)計者

前言

設(shè)計師需求中 3D 視覺平移到互動 H5 中的項目越來越多,three.js 和 PBR 工作流的結(jié)合卻一直沒有被系統(tǒng)化地整理。

和各位前端神仙一起做項目,也一起磕磕碰碰出了愛與痛的領(lǐng)悟。小小總結(jié),希望 3D 去往 H5 的道路天塹變通途。

本手冊主要分為兩大部分:

Part 1 理論篇:主要讓設(shè)計師了解計算機(jī)到底是如何理解和實時渲染我們設(shè)計的 3D 項目,以及 three.js 材質(zhì)和預(yù)期材質(zhì)的對應(yīng)關(guān)系。

Part 2 實踐篇:基于 three.js 的實現(xiàn)性,提供場景、材質(zhì)貼圖的制作思路、以及 gltf 工作流,并動態(tài)討論項目常常遇到的還原問題。

本文主要面向剛接觸 3D 圖形學(xué)的設(shè)計師,僅截取了最常用的理論知識和大家一起學(xué)習(xí);部分涉及技術(shù)美術(shù)或計算機(jī)圖形學(xué)的描述可能不甚嚴(yán)謹(jǐn),希望大家多多交流討論哈。

其實無論 H5 開發(fā)用到的是哪種 webGL,設(shè)計相關(guān)的材質(zhì)制作基本還是基于 PBR 思路進(jìn)行的,所以這邊建議各位親可以先去閱讀一下 Substance 官方寶冊《The PBR Guide》。

Part 1 理論篇

設(shè)計師在還原 3D 類型的互動 H5 項目的時候一定想過這個宇宙終極問題:為什么 H5/Web 實現(xiàn)的 3D 效果和 C4D 里渲染出來的差異那么大?

其實這是我們對實時渲染引擎(UE、Unity、three.js 等)和離線渲染工具(Redshift、Octane、Vray 等)的差異存在誤解:一是離線渲染工具是基于真實光照環(huán)境來計算每顆像素的著色,實時渲染如果要實現(xiàn)這種效果需要耗費更多硬件基礎(chǔ)和算力去模擬光照(沒個好顯卡都開不動光追)。

雖然 UE5 的實時渲染技術(shù)和硬件兼容性已經(jīng)讓大家大吃一驚,但在實際項目,尤其是需要兼容低端設(shè)備的 H5 來說,渲染能力還是相對有限的。二是對于游戲或 H5 互動網(wǎng)站實際應(yīng)用來說,流暢的互動體驗優(yōu)先級往往高于畫面精細(xì)度,所以犧牲視覺保性能也是常見情況。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 1-Octane 離線渲染效果 vs three.js 實時渲染效果:材質(zhì)細(xì)節(jié)、全局光照及投影、以及抗鋸齒表現(xiàn)差距明顯

當(dāng)實時渲染效果與設(shè)計預(yù)期差距過大時,設(shè)計師能多了解一些基礎(chǔ)的計算機(jī)圖形學(xué),也許就能更好地和開發(fā)同學(xué)商討性價比更高的視覺實現(xiàn)和資源優(yōu)化方案(以及更多 Battle 的籌碼)。

1. 著色器與著色算法差異(硬核預(yù)警)

首先我們要知道計算機(jī)之所以能在 2D 屏幕上畫出 3D 的圖像,是因為有著色器(Shader)在繪制,它將我們?nèi)S空間里的模型與光照信息進(jìn)行轉(zhuǎn)換,并光柵化為二維圖像。在計算機(jī)圖形學(xué)中,著色器是用于對圖像的材質(zhì)(光照、亮度、顏色)進(jìn)行處理的程式。

常用的著色器分為四種:像素/片元著色器(Pixel/Fragment Shader)、頂點著色器(Vertex Shader)、幾何著色器(Geometry Shader)、細(xì)分曲面著色器(Tessellation Shader)。

像素/片元著色器與頂點著色器(Vertex Shader)在 webGL 處理過程中都有使用,頂點著色器先將模型中每個頂點的位置、紋理坐標(biāo)、顏色等信息進(jìn)行轉(zhuǎn)換裝配,再由片元著色器對 3D 信息光柵化并轉(zhuǎn)換成 2D 屏幕信息。(關(guān)于著色器差異,感興趣的同學(xué)可以直接跳到附錄查看。)

著色器是怎么把頂點中所帶有光照、紋理等信息轉(zhuǎn)換并重建在二維圖像的像素中呢?GPU 中是透過不同的著色算法來實現(xiàn)的。

一種是獲取每個三角形的插值(Interpolate)來實現(xiàn),這種方法稱作 Per Vertex Lighting,但是當(dāng)三角型很大的時候,插值往往不夠精準(zhǔn)。此時還可以引用另一種方法 Per Pixel Lighting,計算每個像素的光照信息,獲得更好的渲染效果,但是往往也帶來更大的計算量。

一般常見計算機(jī)圖形著色算法有三類:Flat Shading、Gouraud Shading、Phong Shading。這些算法雖然看起來和我們設(shè)計師沒啥關(guān)系,但事實上在后面了解 three.js 材質(zhì)時,就會發(fā)現(xiàn)他們在呈現(xiàn)時的差異。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 2-Flat、Gouraud、Blinn-Phong 著色法比較 [ F1, ©?Stefano Scheggi ]

平直著色法 Flat Shading

這種著色法認(rèn)為模型中所有面都是平的,同一個多邊形上的任意點的法線方向都相同。著色時,會優(yōu)先選擇多邊形的第一個頂點或三角形的幾何中心計算顏色。這種著色法實踐上的效果很像低面模型,也比較適合使用在高速渲染的場景。值得注意的是,這種著色法難以做出平滑高光效果。

高洛德平滑著色法 Gouraud Shading

這是一種平滑的著色方法,在著色時會先計算三角形每個頂點的光照特性,利用雙線插值去補(bǔ)齊三角形區(qū)域內(nèi)其他像素的顏色。這個著色法比起平直著色法增加了插值的細(xì)節(jié),而且也比 Phong 著色法渲染單個像素的光照特性的性能要高。

但是在渲染高光時,可能會因為無法獲取精確的光照值而出現(xiàn)一些不自然的過渡(或 T 型連接容易被錯誤繪制),此時可以考慮對模型進(jìn)行細(xì)分或使用漫反射材質(zhì)。

Phong 平滑著色法 Phong Shading

與 Gouraud Shading 不同的是,它會對頂點的法線進(jìn)行插值,并透過每個像素的法向量計算光照特性。這種做法能繪制出精致、精準(zhǔn)的曲面,但是計算量較大。Blinn-Phong 是 Phong 的進(jìn)階版,著色性能更好,且高光彌散更自然。

2. 基本光照模型 Illumination Model

簡單了解計算機(jī)如何繪制 3D 圖形后,再來看看它要如何具體理解我們所設(shè)計的 3D 場景。

3D 轉(zhuǎn)換成 2D,也就是 3D 柵格化的過程中,每一個像素的顏色是需要基于它所在的環(huán)境計算出來,而基于被渲染物體表面某個點的光強(qiáng)度計算模型就被稱為光照明模型(Illumination Model)或光照模型(Light Model),透過計算光照模型所得到表面位置對應(yīng)像素顏色的過程被稱為表面繪制(Surface Render)。

*請注意這里說的光照模型并不是指設(shè)計師理解的 3D 立體模型,而是指模型對象表面光照效果的數(shù)學(xué)計算模型。

影響光照模型的因素有兩大方面,一是本身給渲染物體材質(zhì)設(shè)置的各種光學(xué)特性(顏色反射系數(shù)、表面紋理、透明度等),二是場景中光源光及環(huán)境光(場景中各個被照明對象的反射光)。

傳統(tǒng)光照模型都是對漫反射和鏡面反射的理想化模擬,如果要還原基于真實物理世界的效果,光照模型需要遵循能量守恒定律:一個物體能反射的光必然少于它接受的光。在實踐層面則表現(xiàn)為,一個漫反射更強(qiáng)且更粗糙的物體會反射更暗且范圍更大的高光,反之亦反。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©?Joe Wilson ]

光照模型與著色組合在不同的渲染需求下也會有不同的應(yīng)用:

  • 真實感渲染(Photorealistic Rendering):目的是基于真實物理世界對 3D 場景進(jìn)行仿真還原。
  • 非真實感渲染(Unphotorealistic Rendering):也被成為風(fēng)格化渲染(Stylistic Rendering),會更抽象化地對模型進(jìn)行重繪。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 4-真實感渲染及非真實感渲染對比 [ F3, ©?Autodesk ]

真實感渲染 Photorealistic Rendering

考慮到真實感渲染對硬件的依賴,目前 webGL 中使用的一般以簡單的局部光照模型為主(只計算光源對物體的光照效果,不計算物體間的相互影響,我們看到的“假反射”通常透過貼圖來進(jìn)行模擬),根據(jù)反射形態(tài),經(jīng)典的光照模型有下列幾種:

  • Lambert 漫反射模型:

這種模型的粗糙表面(如塑料、石材等)會將反射光從各個方向反射出去,而這種光反射也稱為漫反射。理想的漫反射體我們通常稱作郎伯反射體(Lambertian Reflectors),也就是我們熟悉的橡膠材質(zhì)。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 5-漫反射模型與其他光照模型對比 [ F4, ©?ViroCore ]

  • Phong 鏡面反射模型:

這是一種以實驗及觀察為合成基礎(chǔ)的非物理模型。它的表面反射同時結(jié)合了粗糙表面漫反射和光滑表面鏡面反射,但 Phong 模型在高光處的表現(xiàn)有過渡瑕疵。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 6-Phong 鏡面反射模型視覺構(gòu)成 [ F5 ]

  • Blinn–Phong 模型:

是在 OpenGL 和 Direct3D 里默認(rèn)的著色模型,一種調(diào)優(yōu)后的非物理的 Phong 模型,頂點間的像素插值使用 Gouraud 著色算法,比 Phong 著色算法性能更好,而且高光效果也更平滑。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 7-Phong 及 Blinn-Phong 鏡面反射模型對比 [ F6 ]

  • Cook-Torrance/GGX 光照模型:

如果你用過 C4D 的默認(rèn)渲染器,那么一定在材質(zhì)的反射通道設(shè)置中見過它倆。

這是相對高級的光照模型,不同于 Phong 和 Blinn-Phong 模型僅僅對漫反射及鏡面反射進(jìn)行理想化模擬,這兩個光照模型基于不同物理材質(zhì)加入了微表面(Microfacet)的概念,并考慮到表面粗糙度對反射的影響,對鏡面反射進(jìn)行了調(diào)優(yōu),使得高光的長尾彌散更加自然,也是目前 PBR 渲染管線(Unity、UE)中較常用的光照模型。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 8-Phong、Blinn-Phong 與 GGX 鏡面反射模型對比 [ F7, ©?ridgestd ]

  • 次表面散射模型 Subsurface scattering/SSS:

終于有一個設(shè)計師們常見的概念了。次表面散射是指光穿透不透明物體時(皮膚、液體、毛玻璃等)的散射現(xiàn)象?,F(xiàn)實生活中,大部分物體都是半透明的,光會先穿透物體表面,繼而在物體內(nèi)被吸收、多次反射、然后在不同的點穿出物體。以皮膚為例,只有大概 6%的反射是直接反射,而 94%的反射都是次表面散射。

BSSRDF(雙向次表面反射分布函數(shù))是用于描述入射光在介質(zhì)內(nèi)部的光照模型,目前也被應(yīng)用在最新的虛擬角色皮膚實時渲染中;但由于 SSS 材質(zhì)的計算需要依賴深度/厚度數(shù)據(jù),所以 webGL 對這種高級光照效果的還原程度還是相對有限的。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 9-Unity 中模擬次表面散射光照模型效果 [ F8, ©?Alan Zucconi ]

非真實感渲染 Unphotorealistic Rendering

也就是我們常說的 3 渲 2,非寫實渲染風(fēng)格也是從人們對 3D 場景套以 2D 繪畫或自然媒體材質(zhì)需求而演化過來的。因此非寫實渲染技術(shù)實際上是不同光照模型+不同著色處理共同作用的風(fēng)格化輸出,目前也被大量應(yīng)用在動畫及游戲中,像《英雄聯(lián)盟:雙城之戰(zhàn)》《蜘蛛俠:平行宇宙》都是頂級三渲二大作。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 10-在不同通道中混合應(yīng)用真實感渲染及非真實感渲染效果 [ F9, ©?Polygon Runway]

  • Cel Shading/Toon Shading:

卡通著色,一種最常見的以 3D 技術(shù)模擬扁平風(fēng)格的著色形式,通常以極簡的顏色、漸變及明確的外框線等漫畫元素作為風(fēng)格特征。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 11-Blender 中不同類型的 Toon Shader 效果 [ F10, ©?Blendernpr]

日本創(chuàng)意編程師 Misaki Nakano 制作了一個非常有趣的 Toon Shading H5 互動頁面,大家可以體驗一下不同著色形態(tài)下非常模型的視覺表現(xiàn)。點擊體驗: https://mnmxmx.github.io/toon-shading/dst/index.html

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 12-Misaki Nakano 的 Toon Shader 互動網(wǎng)站 [ F11, ©?Misaki Nakano]

  • Customized Shading:

目前越來越多渲染器可支持設(shè)計師及工程師根據(jù)項目需求對著色進(jìn)行定制化處理,以產(chǎn)出更具風(fēng)格化和藝術(shù)化的著色效果。例如工業(yè)界插畫常用的冷暖著色(Gooch Shading),以及更具繪畫質(zhì)感的素描著色(Hatching)及油畫水墨畫等自然媒體著色,都已經(jīng)深入到了我們?nèi)粘5膭?chuàng)作之中。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 13-在 Unity 中,基于真實感渲染的貼圖效果與 NPR 水墨風(fēng)格化著色效果對比 [ F11, ©?鄧佳迪]

3. Three.js 材質(zhì)著色對比

說完真實感與非真實感渲染差異后,我們再來看看 Three.js 中的材質(zhì)。

和許多渲染引擎一樣,除了原生材質(zhì)外,webGL 的材質(zhì)和著色都是可以根據(jù)需求進(jìn)行定制的,但這往往會也帶來較高的開發(fā)成本及兼容性風(fēng)險??紤]到 H5 項目的實際應(yīng)用場景,下表羅列了 Three.js 原生材質(zhì)的對比,包含了材質(zhì)特性優(yōu)勢、貼圖差異及適用場景,大家可以基于項目需求快速選擇并混合使用:

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 15 – three.js 材質(zhì)對比表

4. 色彩描述與管理 Color Space

雖然著色、光照模型以及材質(zhì)渲染對 3D 表現(xiàn)有著最為直觀的影響,但 3D 工作流仍有一個隱秘而關(guān)鍵的環(huán)節(jié)——色彩管理。

真實世界中按照物理定律,如果光的強(qiáng)度增加一倍,那么亮度也會增加一倍,這是線性的關(guān)系。理想狀態(tài)下,像素在顯示屏上的亮度也應(yīng)為線性關(guān)系,才能符合人眼對真實世界的觀察效果(如圖 b:橫坐標(biāo)為像素的物理亮度,縱坐標(biāo)為像素顯示時的實際亮度)。

但是顯示器的成像由于電壓的影響,導(dǎo)致輸出亮度與電壓的關(guān)系是一個亮度等于電壓的 1.7-2.3 次冪的非線性關(guān)系,這就導(dǎo)致了當(dāng)電壓線性變化時,亮度的變化在暗處轉(zhuǎn)換時變慢,如果顯示器不經(jīng)過矯正,暗部成色也會整體偏暗(如圖 c)。目前大多數(shù)顯示器的 Gamma 值約為 2.2,所以也可以理解 Gamma2.2 是所有顯示器自帶的一個遺傳病。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 15-紅色上曲線=Gamma0.45=sRGB Space;綠色下曲線=Gamma2.2=顯示器真實成像缺陷;藍(lán)色斜線=Gamma1.0=Linear Space 真實物理世界線性關(guān)系

為了矯正顯示器的非線性問題(從圖 c 校正回圖 b),我們需要對它進(jìn)行一個 2.2 次冪的逆運(yùn)算(如圖 a),在數(shù)學(xué)上,這是一個約 0.45 的冪運(yùn)算(Gamma0.45)。經(jīng)過 0.45 冪運(yùn)算,再由顯示器經(jīng)過 2.2 次冪輸出,最后的顏色就和實際物理空間的一致了,這套校正的操作就是伽馬校正(Gamma Correction)。

而我們常見的 sRGB 就是 Gamma0.45 所在的色彩空間,是 1996 由微軟與惠普共同開發(fā)的標(biāo)準(zhǔn)色彩空間。當(dāng)照片素材一開始儲存成 sRGB 空間,相當(dāng)于自帶一個 Gamma0.45 的遺傳病抗體,當(dāng)它被顯示器顯示時,就自動中和了顯示器 Gamma2.2 的缺陷,從而顯示出與物理世界相符的亮度。

另一個校正原因是因為人眼在接受光線時的敏感度也不是線性的,人對于暗部的感知更敏感,對高亮區(qū)域感知較弱,而且人眼感知光強(qiáng)度與光的物理強(qiáng)度也剛好是對數(shù)關(guān)系。為了在暗部呈現(xiàn)更多人眼可感知的細(xì)節(jié),Gamma0.45 的色彩空間中(如圖 a),像素的實際亮度也會高于它的物理亮度。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 16-人眼感知光強(qiáng)度與發(fā)射光真實物理強(qiáng)度對比

上面那一大段確實有點繞,但也就說回來為什么建議渲染時使用線性空間(Linear Space)了。因為在計算機(jī)圖形中,著色器的運(yùn)算基本上都是基于物理世界的光照模型來保證渲染真實性的,如果模型的紋理輸入值是非線性的(sRGB),那么運(yùn)算的前提就不統(tǒng)一,輸出的結(jié)果自然就不那么真實了。

而在大多數(shù)工作流及渲染軟件中,大部分貼圖資源都是默認(rèn)輸出 sRGB 的(設(shè)計師作圖環(huán)境一般也在 sRGB,所見即所得),而法線貼圖、光線貼圖等紋理(純數(shù)值類紋理,只用于計算)又是 Linear 的,這個部分就需要我們根據(jù)渲染引擎本身的特性,來判斷是否需要對不同的貼圖進(jìn)行不同的“去 Gamma 化”處理了(WebGL、Unity、Octane 等)。

將所有貼圖進(jìn)行去 Gamma 化,統(tǒng)一為 Linear 空間后,再在渲染輸出時由引擎統(tǒng)一進(jìn)行 Gamma 校正,這個時候在顯示屏里顯示的就是接近真實世界的效果了。

更多色彩空間的實際效果比較,大家可以看下 Unity 的文檔:《Linear/Gamma 渲染比較》:https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html

回到 H5 所用的 Three.js,它的著色器計算也是默認(rèn)在 Linear 空間,如果最終渲染時不轉(zhuǎn)化為 sRGB,在設(shè)備顯示時可能會造成色彩失真。在 three.js 中色彩管理的工作流會根據(jù)導(dǎo)入模型 Asset 的差異而有所不同,如果貼圖與模型是分別導(dǎo)入場景,則建議可嘗試以下流程:

1. 輸入貼圖數(shù)據(jù) sRGB to Linear: 含色彩的貼圖(基礎(chǔ)材質(zhì)、環(huán)境、發(fā)光)設(shè)編碼為 sRGB(texture.encoding = sRGBEncoding),或?qū)秩驹O(shè)置 renderer.gammaInput 設(shè)為 True,可將原為 sRGB 的貼圖轉(zhuǎn)換為 Linear,而原純數(shù)值類貼圖(法線、凹凸等)仍舊保持 Linear;這一操作可保證貼圖輸入數(shù)據(jù)的正確性與統(tǒng)一性。

2. 刷新材質(zhì):當(dāng)材質(zhì)編碼類型被修改后,需要設(shè)置 Material.needsUpdate 為 True,以重新編譯材質(zhì)。

3. 輸出渲染 Linear to sRGB: 校正渲染輸出值的 Gamma:

renderer.gammaOutput = true; renderer.gammaFactor = 2.2;以供顯示屏正確顯色。

《Part1-理論篇》就先告一段落啦,如果你偶發(fā)失眠,建議可以反復(fù)咀嚼延伸閱讀的內(nèi)容。

《Part2-實踐篇》會繼續(xù)完善 three.js 場景、材質(zhì)貼圖的制作思路、以及 gltf 工作流,并動態(tài)討論項目常常遇到的還原問題。

2022,咱們需求再見。

附錄

1. 著色器差異

像素著色器 Pixel Shader

也稱為片元/片段著色器(Fragment Shader), 為二維著色器。它記錄了每一個像素的顏色、深度、透明度信息。最簡單的像素著色器可用于記錄顏色,像素著色器通常使用相同的色階來表示光照屬性,以實現(xiàn)凹凸、陰影、高光、透明度等貼圖。同時,他們也可以用來修改每個像素的深度(Z-buffering)。

但是在 3D 圖像中,像素著色器可能無法實現(xiàn)一些復(fù)雜的效果,因為它只能控制獨立的像素而并不含有場景中模型的頂點信息。不過,像素著色器擁有屏幕的坐標(biāo)信息,可以依據(jù)屏幕或鄰近像素的的材質(zhì)進(jìn)行采樣并增強(qiáng),例如,Cel Shader 的邊緣強(qiáng)化或一些后期的模糊效果。

頂點著色器 Vextex Shader

是最常見的 3D 著色器,他記錄了模型每個頂點的位置、紋理坐標(biāo)、顏色等信息。它將每個頂點的 3D 位置信息轉(zhuǎn)換成 2D 屏幕坐標(biāo)。頂點著色器可以處理位置、顏色、紋理的坐標(biāo),但是無法增加新的頂點。

幾何著色器 Geometry Shader

是最近新興的著色器,在 Direct3D 10 和 Open GL3.2 中被引用。這種著色器可以在圖元外生成新的頂點,從而轉(zhuǎn)換成新的圖元(例如點、線、三角等),而優(yōu)勢也是在于可以直接在著色中增加模型細(xì)節(jié),減低 CPU 負(fù)擔(dān)。集合著色器的常用場景包括點精靈(Point Sprite)生成(粒子動畫),細(xì)分曲面,體積陰影等。

細(xì)分曲面著色器 Tessellation Shader

在 OpenGL4.0 和 Direct3D 11 中出現(xiàn),它可以在圖元內(nèi)鑲嵌更多三角體。為傳統(tǒng)模型新增了兩個著色步驟(一是細(xì)分控制著色,又稱為 Hull Shader,二是細(xì)分評估著色,又稱為 Domain Shader),兩者結(jié)合可以讓簡單的模型快速獲得細(xì)分曲面。(例如,含細(xì)分曲面效果的模型加上置換貼圖就可以獲得極其逼真細(xì)膩的模型)

2. 一些術(shù)語的簡單理解

GL: Graphics Library, 圖形函數(shù)庫。

webGL:Web Graphics Library,Html 5 可接入的 3D 繪圖協(xié)議/函數(shù)庫,可以為 H5 Canvas 提供 3D 渲染的各類 API。

Z-Buffering:深度緩沖,3D 圖像在渲物體的時候,每一個生成的像素的深度會存儲在緩沖區(qū)中。如果另一個物體也在同一個像素中產(chǎn)生渲染結(jié)果,那么 GPU 會比較兩個物體的深度,優(yōu)先渲染距離更近的物體,這個過程叫做 Z-Culling。當(dāng)兩個物體靠很近的時候(16-bit),可能會出現(xiàn) Z-Fighting,也就是交疊閃爍的現(xiàn)象,使用 24 或 32bit 的 Buffer 可以有效緩解。

Rendering Pipeline:渲染管線/渲染流水線/像素流水線,為 GPU 的處理工作流,是 GPU 負(fù)責(zé)給圖形配上顏色的專門通道。管線越多,畫面越流暢精美。

硬核干貨!3D to H5工作流應(yīng)用手冊:理論篇

圖 17-渲染管道細(xì)節(jié)工作流 [ F12 ]

Rasterization:光柵化/點陣化/柵格化,就是將管線處理完的圖元轉(zhuǎn)換成一系列屏幕可視的像素,過程包括:圖元拼裝(Primitive assembly)-三角形遍歷(Triangle Traversal)- Pixel Processing-Merging。

文章來源:優(yōu)設(shè) 作者:ISUX


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


深度解析|流量時代私域H5營銷設(shè)計的流量密碼

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









一、由銷售演變成運(yùn)營


在我看來,當(dāng)今互聯(lián)網(wǎng)行業(yè)的經(jīng)營實際上與傳統(tǒng)行業(yè)的銷售并無區(qū)別,我們可以從以下兩個行業(yè)的業(yè)務(wù)結(jié)構(gòu)圖看出,互聯(lián)網(wǎng)行業(yè)的經(jīng)營實際上是從傳統(tǒng)行業(yè)的銷售模式轉(zhuǎn)變而來。



1.1 傳統(tǒng)行業(yè)的銷售

按照傳統(tǒng)行業(yè)的業(yè)務(wù)結(jié)構(gòu)可分為“采購、生產(chǎn)、加工、銷售、財務(wù)”四個環(huán)節(jié)。一提起銷售大家肯定都不陌生,指的是企業(yè)生產(chǎn)的產(chǎn)品通過銷售人員的銷售手段,將企業(yè)的產(chǎn)品賣出來兌換成貨幣,流入企業(yè)的財務(wù)。



1.2 互聯(lián)網(wǎng)行業(yè)的運(yùn)營

在互聯(lián)網(wǎng)行業(yè)中業(yè)務(wù)結(jié)構(gòu)還可分為“采購、PM/開發(fā)、運(yùn)營、財務(wù)”。就流程而言,互聯(lián)網(wǎng)行業(yè)的經(jīng)營實際上存在著傳統(tǒng)銷售的影子,在將企業(yè)的產(chǎn)品(成品)轉(zhuǎn)化為財務(wù)的這一環(huán)節(jié)之前,需要經(jīng)歷銷售或運(yùn)營這兩個環(huán)節(jié)。


不像傳統(tǒng)企業(yè)銷售,運(yùn)營不直接負(fù)責(zé)賣,更多地是負(fù)責(zé)推廣。不直接負(fù)責(zé)銷售,更多的是負(fù)責(zé)推廣。換言之,互聯(lián)網(wǎng)企業(yè)的產(chǎn)品并不直接兌換成貨幣,而是通過“引流、活動、轉(zhuǎn)化、流失”等一系列運(yùn)營操作,提升用戶體驗,將產(chǎn)品好服務(wù)賣給用戶。


·引導(dǎo)用戶使用產(chǎn)品:我們可以將傳統(tǒng)銷售中的初次拜訪客戶當(dāng)作運(yùn)營中的引流;

·保持用戶黏性:把傳統(tǒng)銷售中的維護(hù)客戶關(guān)系當(dāng)作運(yùn)營中做的活動和轉(zhuǎn)化;

·用戶流失管理:將傳統(tǒng)銷售中挽回客戶這個動作當(dāng)作運(yùn)營中用戶流失這個動作。

因此,互聯(lián)網(wǎng)行業(yè)更加重視運(yùn)營而不是銷售。






二、運(yùn)營設(shè)計的核心目標(biāo)


在簡單了解了互聯(lián)網(wǎng)的運(yùn)營之后,我們再談一談最新出現(xiàn)的一個新詞“運(yùn)營設(shè)計”。



2.1 運(yùn)營設(shè)計并不是運(yùn)營

運(yùn)營設(shè)計在我看來是一個相對模糊的詞匯,我能清楚地講明白什么是品牌設(shè)計、界面設(shè)計、工業(yè)設(shè)計、平面設(shè)計、產(chǎn)品設(shè)計,但總覺得說不明白什么是運(yùn)營設(shè)計。


比如說品牌設(shè)計是品牌,界面設(shè)計設(shè)計的是界面,而運(yùn)營設(shè)計不是運(yùn)營設(shè)計,好像運(yùn)營設(shè)計無法用一個專業(yè)的方向來描述。


但在國內(nèi)的互聯(lián)網(wǎng)市場中,產(chǎn)品的運(yùn)營又是一件必不可少的事情,從企業(yè)盈利的角度來看運(yùn)營設(shè)計的地位不亞于UI設(shè)計和產(chǎn)品設(shè)計。在我看來運(yùn)營設(shè)計是介于“運(yùn)營”與“設(shè)計”之間的一個崗位。


·菜鳥運(yùn)營設(shè)計師:多是幫助運(yùn)營經(jīng)理完成運(yùn)營活動的投放物料,按時上線。

·老鳥運(yùn)營設(shè)計師:通過較為多樣的手段(合理的規(guī)劃)和技能(設(shè)計感覺形式)更好地實現(xiàn)“用戶獲取&用戶付費”等目的,并且在這個過程中可以“更好實現(xiàn)已有用戶的維系”。



2.2 增長設(shè)計(海盜模型)

實際上,運(yùn)營設(shè)計也被稱為增長設(shè)計,一提到增長,我的第一反應(yīng)就是《增長黑客》中的海盜模型,也就是AAARR模型。


AARRR(海盜模型)是《增長黑客》中最為重要的理論——用戶生命周期的模型,因為這個模型和運(yùn)營設(shè)計有許多相似之處,也有人將其作為業(yè)務(wù)流程的模型。運(yùn)營的流程需要經(jīng)歷:先拉新,再促活,接著提高留存,然后獲取收入,最后實現(xiàn)自我傳播這5個環(huán)節(jié),可以和模型中的概念一一對應(yīng)上。


*對于海盜模型的知識點,我在這篇文章《一文讀懂|數(shù)據(jù)好體驗就好嗎?—數(shù)據(jù)認(rèn)知篇》里面講過,這里我就不做過多地贅述了。


對用戶生命周期AAARR模型的理解是一方面,最重要是要學(xué)會用模型中的關(guān)鍵數(shù)據(jù)指標(biāo)去衡量活動,畢竟我們做運(yùn)營設(shè)計的最重要的是以最低的設(shè)計成本來獲得最大的運(yùn)營收益。模型只是一種工具,對于不清楚怎么使用模型的同學(xué),我建議看看我寫的《史上最全|數(shù)據(jù)體驗好就好嗎?—體驗度量篇》。



2.3 以運(yùn)營目標(biāo)推導(dǎo)運(yùn)營形式

運(yùn)營經(jīng)理的運(yùn)營手段可謂是百花齊放,變化莫測,這里我們不展開討論。一般運(yùn)營活動屬于推廣這個動作,在推廣的這個環(huán)節(jié)里面不會特指某一個目標(biāo),而是包含多個目標(biāo),所以對于運(yùn)營設(shè)計師而言目標(biāo)不能是一個,而應(yīng)該多個。常規(guī)的以產(chǎn)品運(yùn)營為核心提出來運(yùn)營目標(biāo)大致是“拉新、促活、回流、營收”等這四種。


如果把運(yùn)營的目標(biāo)需求轉(zhuǎn)換成我們設(shè)計師的目標(biāo)需求的話,逃不出我們常見的“用戶增長、品牌傳達(dá)、營銷策略、商品成交量”這四個范疇。


把運(yùn)營側(cè)的目標(biāo)轉(zhuǎn)換為產(chǎn)品是為了幫設(shè)計更準(zhǔn)確理解運(yùn)營經(jīng)理的需求,以目標(biāo)確定活動類型、以類型快速定位適合的風(fēng)格,提高運(yùn)營活動質(zhì)量,促進(jìn)用戶轉(zhuǎn)化,如圖


·基于用戶的活動運(yùn)營:如果是以用戶為目標(biāo)的活動,設(shè)計應(yīng)該偏向于符合用戶屬性的風(fēng)格,比如我們的用戶都是年輕的用戶,那在頁面的設(shè)計上就應(yīng)該多有“年輕化、博人眼球的、好玩有趣”等元素的呈現(xiàn)。


·基于營收的活動運(yùn)營:如果是以營收為目標(biāo)的活動,設(shè)計應(yīng)該偏向活動場景對于入口的設(shè)計優(yōu)化,比如Banner、落地頁等物料設(shè)計。通過優(yōu)化入口,提高轉(zhuǎn)化率,完成產(chǎn)品體驗的優(yōu)化的目標(biāo)。


·基于品牌的活動運(yùn)營:如果是以品牌宣傳為目標(biāo)的活動,設(shè)計應(yīng)該偏向企業(yè)品牌形象的樹立以及傳播,把產(chǎn)品的特色傳遞給用戶,與其他競品拉開差距,提升自己產(chǎn)品的核心競爭力。





三、私域的精細(xì)化運(yùn)營

與運(yùn)營有關(guān)的“私域”這倆詞,最近火得不行,哪里都可以見到。為什么互聯(lián)網(wǎng)企業(yè)這么重視私域的運(yùn)營呢?主要是因為在互聯(lián)網(wǎng)時代,大家都認(rèn)同有了私域流量就相當(dāng)于有了盈利這個觀點。


3.1 什么是公域運(yùn)營

首先我要簡單地描述一下什么叫流量,流量的本質(zhì)就是指用戶,但是“用戶”這個詞過于抽象了,常常都用閱讀量,粉絲量,點贊量,播放量等這些數(shù)據(jù)維度去衡量流量的體積。


打個不恰當(dāng)?shù)谋扔?,流量就像是一條河,如果無人管理的話,那就叫公域交通。您在河邊挖一條水溝,將河水引到自己事先制作好的蓄水池里面,這個蓄水池里面的河水就叫做私域流量。


3.2 什么是私域流量

如上例所說,我們將能夠自主運(yùn)營的流量或用戶(蓄水池),可以反復(fù)觸達(dá)、“騷擾”、交流,獲取反饋的流量統(tǒng)稱為私域流量。典型的產(chǎn)品形態(tài)有微商、拼團(tuán)群、朋友圈、微信公眾號。私域流量相對于公域流量來說,是一種更精準(zhǔn),更容易被轉(zhuǎn)化的流量。


簡單的理解就是可以為所欲為的流量,比如我在我自己的微信公眾號里面可以隨意地刪減用戶的評論,典型產(chǎn)品形態(tài)有微信公眾號、微商、拼團(tuán)群、朋友圈等。


如今許多互聯(lián)網(wǎng)產(chǎn)品都是私域流量與公域相結(jié)合的產(chǎn)品,比如說大家經(jīng)常使用的站酷這個平臺,如果我發(fā)布的作品沒有上首頁的推薦,只會在我的個人主頁展示,獲得的粉絲就屬于私域流量;反之我的作品獲得了首頁推薦,在站酷首頁展示,獲得粉絲增長量就屬于公域流量。


許多企業(yè)老板都明白這樣一個道理“用戶在哪里,私域流量就在哪里,生意就在哪里,企業(yè)的盈利就在哪里?!?/strong>因此,企業(yè)老板們都希望把公域流量吸引到自己產(chǎn)品的中,成為私域流量,這樣企業(yè)的流量即相對公域流量而言更加可控、高效、精準(zhǔn),后期盈利也有保障。



3.3 精細(xì)化的運(yùn)營模式

正是因為許多企業(yè)開始注意到私域流量的重要性,互聯(lián)網(wǎng)從之前的流量粗放運(yùn)營模式,逐漸變成用戶精細(xì)化運(yùn)營模式,這是流量思維到用戶思維的轉(zhuǎn)變。精細(xì)化運(yùn)營簡單理解就是基于龐大的數(shù)據(jù)分析,讓企業(yè)的產(chǎn)品為不同的用戶推送不同的運(yùn)營內(nèi)容(或者是用戶感興趣的內(nèi)容)。


提出“精細(xì)化運(yùn)營”這一個概念行業(yè)里面最早最有名氣的應(yīng)當(dāng)是號稱一分鐘出8000張Banner的鹿班平臺,鹿班平臺最大的意義不在于取代設(shè)計師這一個崗位,而是阿里巴巴在精細(xì)化運(yùn)營的第一次嘗試,為不同的用戶推送自己所需要的商品內(nèi)容。當(dāng)然了,除了鹿班平臺京東集團(tuán)也有羚瓏營銷內(nèi)容創(chuàng)意平臺,有興趣的同學(xué)可以查看一下。


在精細(xì)化運(yùn)營中還有一個很專業(yè)的名詞叫“千人千面營銷策略”,這個營銷策略的概念是指每一個用戶看到的每一個內(nèi)容都是不一樣的,仔細(xì)想想這是人力所不能及,只有AI的大數(shù)據(jù)才能做到的,例如用戶A的收藏夾是襯衫品類比較多,那淘寶Feed流推送的商品襯衫比重會多一些,用戶B的購物車首飾品類比較多,那產(chǎn)品中推送的內(nèi)容珠寶首飾占多數(shù);用戶C喜歡電子產(chǎn)品,那么產(chǎn)品推送的將會是電子類產(chǎn)品比較多。





四、了解運(yùn)營設(shè)計師的工作內(nèi)容

在公司里,產(chǎn)品體驗設(shè)計師(又被稱為界面設(shè)計師、UI設(shè)計師)在公司中扮演著美化產(chǎn)品的角色,隨著互聯(lián)網(wǎng)行業(yè)的業(yè)務(wù)擴(kuò)張、人才涌入后會把UI設(shè)計師這一角色進(jìn)行更加精細(xì)化的分類,在互聯(lián)網(wǎng)企業(yè)中會把設(shè)計師按照工作內(nèi)容進(jìn)行兩種類型的分類,分別是產(chǎn)品體驗設(shè)計師和運(yùn)營視覺設(shè)計師。



4.1 產(chǎn)品體驗設(shè)計師

工作職責(zé):產(chǎn)品體驗設(shè)計師的工作職責(zé),主要以提升產(chǎn)品功能體驗為主。在分析產(chǎn)品邏輯和交互邏輯后,從視覺層面把控產(chǎn)品界面設(shè)計,并通過視覺設(shè)計高效傳達(dá)有效的信息,并制造出愉悅的用戶體驗。

設(shè)計工具:Figma、Sketch、Axure、問卷工具等。



4.2 運(yùn)營視覺設(shè)計師

工作職責(zé):運(yùn)營設(shè)計工作職責(zé)是在短期內(nèi)達(dá)成提升相關(guān)運(yùn)營活動的指標(biāo)。他們以運(yùn)營活動設(shè)計為主,運(yùn)用視覺語言吸引用戶參加對應(yīng)的活動,加深用戶對產(chǎn)品的印象,從而促使用戶參與活動,完成活動中完成引流、成交、復(fù)購、傳播等行為。

設(shè)計工具:PS、AI、AE、C4D等。



4.3 運(yùn)營設(shè)計師需要具備的能力

運(yùn)營設(shè)計師的主要工作內(nèi)容就是協(xié)助企業(yè)中的運(yùn)營經(jīng)理做好產(chǎn)品的用戶運(yùn)營、內(nèi)容運(yùn)營、產(chǎn)品運(yùn)營和活動運(yùn)營。運(yùn)營設(shè)計師應(yīng)該參與到運(yùn)營活動的策劃中去,幫助運(yùn)營經(jīng)理想一些更有趣更好的設(shè)計策略,并且在這個過程中更好地提高自己的運(yùn)營策略、數(shù)據(jù)分析、文案能力和視覺表現(xiàn)能力。


4.4 運(yùn)營設(shè)計的工作范疇

運(yùn)營設(shè)計師這個一個崗位更多的是內(nèi)容驅(qū)動型(音樂、視頻、教育應(yīng)用等)、交易驅(qū)動型(電商、o2O服務(wù)等)產(chǎn)品中。它的工作范疇是一個很繁雜的事情,不僅需求數(shù)量大而且頻率高,最繁雜的一點是需求種類比較多,比如有廣告位Banner、專題頁面設(shè)計 、活動專題、Icno圖標(biāo)等內(nèi)容,并且需要批量處理的各種資源入口圖,線下活動的海報、印刷物料等等。










如今運(yùn)營活動可謂鋪天蓋地,手機(jī)端也能經(jīng)常見到各大企業(yè)產(chǎn)品的優(yōu)惠活動設(shè)計,比如活動圖,落地頁,優(yōu)惠券,戰(zhàn)略樓層等設(shè)計。國內(nèi)的運(yùn)營設(shè)計推廣形式多以落地頁(H5)的形式幫助企業(yè)做推廣企業(yè)產(chǎn)品或者樹立企業(yè)形象的活動。


由于,這類狂轟濫炸式的運(yùn)營活動,讓用戶倍感無味,致使運(yùn)營活動流量不高,設(shè)計師在實際的工作中往往會遇到以下三類問題,導(dǎo)致我們的運(yùn)營活動流量不高,達(dá)不到預(yù)期的運(yùn)營目的,如圖





一、用形式解決內(nèi)容過長問題

近些年在市面上落地頁的推廣形式多以長頁面為主,比如電商的推薦頁、商品的宣傳頁。由于企業(yè)想要表達(dá)的內(nèi)容過多,使落地頁的長度越來越長,這種形式雖然可以更全面地介紹商品優(yōu)勢,但是在快節(jié)奏的互聯(lián)網(wǎng)市場,用戶自然會覺得很臃腫。


針對落地頁內(nèi)容過長,視覺呈現(xiàn)不佳的問題,我們最快能想到的辦法就是刪減字段,但是如果運(yùn)營經(jīng)理不同意刪減字段那怎么辦?因此,刪減這是一個辦法,但不是最好的辦法。


既然不能刪減,我們不妨換個思路來解決這個問題。剛剛談到內(nèi)容過長導(dǎo)致用戶感覺臃腫,感覺臃腫的核心所在是“內(nèi)容”對用戶沒意義,按著這思路延展下去解決問題的關(guān)鍵在于“突出重點”,這里我提供四個方法幫助大家解決困擾。



1.1 優(yōu)化頭圖的尺寸

許多設(shè)計設(shè)計師由于沒有考慮清楚手機(jī)到最終的預(yù)覽效果,導(dǎo)致很多重要的元素出現(xiàn)在低活躍的區(qū)域 ,用戶第一眼看不到能吸引自己的內(nèi)容,從而失去往下滑動了解更多內(nèi)容的動作,造成運(yùn)營推廣的效果大打折扣。


因此在設(shè)計這種長圖時要事先考慮好首屏要呈現(xiàn)什么內(nèi)容,一般的運(yùn)營頭部高度一般定在600px-750px左右,如果是內(nèi)容較多的話,我建議把頭圖的高度控制在460左右,這樣可以促使用戶在首屏看到更多的信息,引導(dǎo)用戶有興趣向下滑動,用戶的點擊率也隨之上升。


1.2 手機(jī)海報的表現(xiàn)形式

除了縮減頭圖的高度之外,實際上利用海報宣傳的方式進(jìn)行設(shè)計也是可以的。在朋友圈或其他社交平臺上經(jīng)常看到這種帶有二維碼的宣傳海報,用戶通過掃碼直接進(jìn)入運(yùn)營活動中心。


這類海報形式有著短小精悍,言簡意賅、便于傳播的優(yōu)點,是一種提高運(yùn)營活動流量很好的表現(xiàn)形式。



1.3 九宮格拼圖的表現(xiàn)形式

雖然現(xiàn)在是抖音的天下,但是這類九宮格拼圖的表現(xiàn)形式,在微博(微信、微淘)如日中天的時代也是風(fēng)靡一時的,這里提出九宮格拼圖的形式也是給大家提供一個思路,是否采用還需要考慮企業(yè)主要運(yùn)營的平臺。



1.4 閃屏的表現(xiàn)形式

閃屏這種表現(xiàn)形式雖然點擊率并不高,但是一種很好蹭熱度的方法。對閃屏的設(shè)計,設(shè)計師只需要思考好用什么呈現(xiàn)表現(xiàn)形式為閃屏物料注入新的活力,例如用下面這種只突出主體物和標(biāo)題的表現(xiàn)形式,把內(nèi)容更加精簡、準(zhǔn)確地傳遞給用戶,這種表現(xiàn)形式就很好。





二、了解興趣低的原因

在第二部分里,我想分為4個模塊——了解興趣低的原因、用形式提高用戶興趣、讓標(biāo)題文案更加突出、用獵奇心理引起用戶興趣,來談一談我對“用戶興趣”的理解。


2.1 解決用戶興趣的方法

早期的互聯(lián)網(wǎng)產(chǎn)品以工具為主,例如百度就是用來搜索的、QQ就是用來聊天的、淘寶就是用來買東西的,這些產(chǎn)品呈現(xiàn)的感覺都以簡潔清晰為主,但隨之互聯(lián)網(wǎng)越來越普及,娛樂產(chǎn)品出現(xiàn)與工具類產(chǎn)品越來越多的差異性趨勢發(fā)展,尤其對于運(yùn)營設(shè)計,簡潔清晰變得沒那么重要,個性、趣味才是占據(jù)主導(dǎo)。想要運(yùn)營設(shè)計做得讓用戶有興趣,不妨試一試我下面所說的四個技巧。



2.2 為什么要“動”會引起用戶興趣

以圖片+內(nèi)容的這種展現(xiàn)形式在市場出現(xiàn)很久了,對用戶的吸引度不免有減弱的趨勢,在這一階段我們需要尋找一種更加有趣的形式來吸引用戶。


興趣可以用更為科學(xué)的方法“注目度”來解釋,當(dāng)我們眼睛在看到某一個事物的時候,大腦會根據(jù)事物的形態(tài)給一個由“強(qiáng)”到“弱”的排序,去支配眼睛去觀察事物,如下圖所示,我們可以直觀地看到“動畫”這個類目是排在前面的。大部分用戶在看到運(yùn)營活動內(nèi)容的精神狀態(tài)(注目度)是分散的,所以要搶占用戶的時間,設(shè)計用戶第一眼的吸引力。




三、用形式提高用戶興趣


3.1 加入更多的動效

根據(jù)上面的結(jié)論,在提高用戶興趣這個問題上,我們完全可以增加展示效果的動效來做到,很多產(chǎn)品也是這樣做的。


比如今年拼多多的Banner上,做了一些標(biāo)題旋轉(zhuǎn)、優(yōu)惠券飛出的動畫效果:

  


像京東購物節(jié)中做一些開場的動畫效果:

  



在活動流程上面的動效,比如在一些抽獎環(huán)節(jié)模擬真實物體的運(yùn)動軌跡:

  




在圖標(biāo)或者標(biāo)簽上面加一些位移、漸隱漸顯的動畫效果:

  


在一些彈窗上面加上一圈光效,也是一個不錯的選擇:

  


如今在運(yùn)營活動上加入更多的動效是設(shè)計師必備技能之一,最常規(guī)的就是把畫面中的某一個元素變大,像是下面的按鈕,采用放大縮小的動效。

  


或者是按鈕旁邊加上一個手指的元素,也可以起到吸引用戶的目的。

  


元素圍繞主題物周邊沿著運(yùn)動軌跡活動。

  


關(guān)于動效的案例,這里我就不一一舉例說明了,大家可以登錄螞蟻設(shè)計服務(wù)平臺 - 犸良這個平臺獲取靈感。



2.2 以靜制動

對于不會動效軟件的同學(xué)也沒有關(guān)系,也可以著重對畫面的張力進(jìn)行設(shè)計,以靜至動,以下我就分享幾個以靜至動的方法。


·元素之間的動勢:合理的運(yùn)營元素之間的組合關(guān)系可以營造出有動的感覺,如果單單放一個開飛機(jī)的場景可能并沒有感覺在飛,但如果加上飛翔的紅包、模糊的背景,那就感覺真的在開飛機(jī)。


·有力的指引力:如果單單地放一張優(yōu)惠券,不會產(chǎn)生吸引人的觀感,但設(shè)計四只手從四個方向爭搶的畫面,就會感覺畫面有力量有爭搶的感覺。


·以破形產(chǎn)生動感:畫面中從左側(cè)設(shè)計一張卡片,遠(yuǎn)處門的入口塑造的,大膽地破形處理,很容易營造出一種動態(tài)感覺。


·夸張的構(gòu)圖設(shè)計:當(dāng)然了不同的視角和構(gòu)圖也可以讓畫面感覺生動,如下面這樣的構(gòu)圖就會給用戶營造出一種畫面外還有畫面的感覺。


·營造運(yùn)動畫面感:下面這套海報采用硬朗的直線和運(yùn)營動作的完美結(jié)合,通過營造強(qiáng)烈的運(yùn)動感給用戶傳達(dá)動的感覺。



2.3 視頻推廣的形式

由于短視頻領(lǐng)域的興起,朋友圈中轉(zhuǎn)發(fā)視頻的用戶也日益增加,如果設(shè)計師可以給運(yùn)營經(jīng)理在以視頻形式進(jìn)行運(yùn)營活動的推廣的需求上出謀劃策的話,也是一個很專業(yè)的設(shè)計師了。





四、讓標(biāo)題文案更加突出


造成用戶不感興趣的原因還有可能是信息傳遞效率不高,用戶無法通過標(biāo)題知道這是什么活動,怎么可能引起用戶的興趣而點擊?

標(biāo)題的文案可謂是用戶判斷信息的首要思想要素,他能迅速讓用戶了解活動主題,傳達(dá)活動興趣點,激發(fā)用戶參與。


4.1 選擇識別度高的字體

設(shè)計師是一個創(chuàng)造美的職業(yè),但是也要有取舍,在我看來漂亮固然重要但高效的信息傳遞更為重要,尤其是在運(yùn)營活動的標(biāo)題設(shè)計上應(yīng)該盡量選擇一些識別度高的字體,先讓用戶清楚地知道該活動是干什么的,再用特殊的技法去吸引用戶點擊。


在標(biāo)題字體上我比較推薦使用無襯線字體,因為黑體去掉過多的襯線裝飾,是橫平豎直,筆畫粗細(xì)均衡,使字更為精練并且醒目。例如下面這張效果圖,都是在黑體的字體基礎(chǔ)上做的設(shè)計,光看標(biāo)題就可以清楚活動大致是個什么類型的了。



4.2 給字體加點效果

如果覺得以上的方法并不能給用戶起到視覺沖擊力的效果,不妨給標(biāo)題的字體加一點效果圖,比如立體效果、加裝飾物、更改字體結(jié)構(gòu)等等,如圖

我推薦一個我自己作圖的習(xí)慣,就是先做標(biāo)題文案的樣式設(shè)計,再做配圖元素的設(shè)計,我覺得這個方法既可以突出標(biāo)題文案字體設(shè)計又很高效。博大精深,有機(jī)會后期會寫一篇字體設(shè)計的文章,敬請期待吧。





五、用獵奇心理引起用戶興趣


以下內(nèi)容不算是設(shè)計技法的內(nèi)容了,算是運(yùn)營思維方面的小竅門,我認(rèn)為身為運(yùn)營設(shè)計師,還是有必要知道的。



5.1 倒計時營造緊張感

如果在手機(jī)海報的表現(xiàn)形式上,加入以下這種“倒計時”主題,有助于激發(fā)起用戶期待感和代入感,起到事半功倍的效果。


5.2 明星的效應(yīng)

如果活動中有明星素材可以使用,千萬不要放過這個機(jī)會,因為明星自帶流量和話題,也是吸引用戶興趣,提高流量的好辦法。


5.3 節(jié)日的熱點

一年中有很多節(jié)日或者節(jié)氣的時間節(jié)點,這些時間節(jié)點自帶吸睛功能,可以把他們當(dāng)成借勢營銷的主題,有的放矢地制作活動宣傳圖,增加曝光度,保證營銷的新鮮度。


接下來,讓我們談一談第三個問題——用戶審美疲勞。









隨著市場上充斥大量運(yùn)營活動,對用戶來說不免會造成審美疲勞,而用戶出現(xiàn)審美疲勞的情況也是造成運(yùn)營數(shù)據(jù)下降一個重要的因素。



一、了解什么叫審美疲勞


1.1 審美疲勞的概念

所謂審美疲勞,源于一個經(jīng)典的心理學(xué)概念——刺激適應(yīng)(Sensory Adaptation),就是用戶長時間接觸一種類型或者表現(xiàn)形式的事物而產(chǎn)生的厭倦、麻木的心理,最終都會被“適應(yīng)”(即令人無感覺)。


這里我列一個例子,比如每天打你一棍子,你當(dāng)然很不爽。但是連續(xù)打你一年后,你并不會感覺到不爽了,因為它變成了你生活的一部分,你已經(jīng)沒有感覺了——這就是刺激適應(yīng)。


1.2 為什么會出現(xiàn)審美疲勞

審美疲勞的出現(xiàn),有其客觀必然性,多數(shù)情況造成用戶審美疲勞的原因可以分為兩種:


內(nèi)容上眼花繚亂:是指一方面市場的運(yùn)營活動太多,另一方面是活動內(nèi)容讓用戶提不起興趣,久而久之自然就會產(chǎn)生審美疲勞的心理。


時間上的心生厭倦:這是人正常的心理狀態(tài),當(dāng)人從外部獲得了幸福感(升值、金錢、美食)多會隨著時間的推移最終回到基礎(chǔ)水平。

這里我列一個例子,比如剛收到名校錄取通知書的大學(xué)生,感覺到幸福感爆棚,但也最多持續(xù)幾個月——等他入學(xué)后,日復(fù)一日地上課下課和高中生活一樣,慢慢地覺得索然無味。



二、審美疲勞的解決方法

對于內(nèi)容讓用戶提不起興趣這一點,我在前一章我已經(jīng)闡述了自己的觀點,這里不做過多贅述了。但是我們可以就“時間上的心生厭倦”這一問題出發(fā),來討論設(shè)計方面的解決方法。


在我看來設(shè)計側(cè)的解決方法其實就一個詞——新穎,我總結(jié)設(shè)計師可以從以下5個方面著手進(jìn)行設(shè)計方案的確立——夸張視角、細(xì)致刻畫、多種風(fēng)格、故事性、游戲化。



2.1 設(shè)計一些新奇的視角

這種方法屬于吸引眼球而追求的形式上的“奇特”,比如我們看看第一幅設(shè)計稿(植美村的頁面),夸張的魚眼大透視配合風(fēng)格感十足的原畫級頁面,至少第一眼就把我震撼了。


或者以微觀視角看世界的視角去做設(shè)計稿,比如說OPPO的運(yùn)營圖設(shè)計,正常視角中人永遠(yuǎn)都是比手表大的,但如果反過來去觀察,就好比自己像是一個小微生物去觀察這個視覺,會給用戶一種很新奇的感覺。



2.2 把刻畫發(fā)揮到極致

形、色、質(zhì)、構(gòu)是搭建一個畫面的基礎(chǔ),其中質(zhì)感是拉開差距的關(guān)鍵,它是細(xì)微的,往往有質(zhì)感的視覺感受會給用戶一種高級的感覺,吸引用戶點擊或者是向下滑動瀏覽更多的內(nèi)容。身為設(shè)計應(yīng)該更專注于自己觀察方法和技法的提升,一個圖層達(dá)不到想要的效果,那兩個圖層呢?那把其中一個圖層的圖層樣式調(diào)整成“正片疊底”呢?


質(zhì)感雖然是一個相對抽象的詞,但是做出質(zhì)感并沒有想象中的那么難,最重要的就是有耐心多做一些層次,如下圖,不管是以文字或者圖像為主形象的效果,都是因為考慮了字體變形、字體結(jié)構(gòu)、投影、高光、色塊對比等細(xì)節(jié),才會讓整體的效果給人一種很有質(zhì)感的感覺。


*設(shè)計技法的提升是一個很漫長的過程,比較注重于直覺和感性的認(rèn)知能力的培養(yǎng),要多觀察、多嘗試,要相信自己總會有成功的那一天的。



如果你會3D類型的軟件那就太好了,因為3D類型的工具最終呈現(xiàn)的畫面本身就帶有空間關(guān)系并且由于可以渲染不同種類質(zhì)感的材質(zhì),畫面天生帶有一種質(zhì)感,比如下面這兩張圖如果單單地鋪上一個大色塊點綴一些圖形元素和3D類型的作品對比來看,質(zhì)感還是差一截子。左側(cè)是質(zhì)感相對較弱的落地頁,右側(cè)是質(zhì)感較好的落地頁,如果你是用戶的話,你會點擊哪個?又會向下劃動查看哪個呢?


并且現(xiàn)在的移動端設(shè)備的性能都有提升,并且5g的技術(shù)也在市場中出現(xiàn),以前的3D場景加載卡頓的問題也逐漸在消失,我們不妨事先在運(yùn)營活動中多加入一些3D的效果,來博取用戶眼球。


就目前來看視覺觀感偏向越來越立體化,而不是簡單的平視扁平效果,以下這種成系列的設(shè)計稿,是深受用戶所喜歡的,并且成系列的設(shè)計稿,也很容易讓用戶產(chǎn)生記憶點,是一個我非常推薦的做法。



2.3 多種風(fēng)格的探索

為什么要做多種風(fēng)格的運(yùn)營設(shè)計呢?從設(shè)計美學(xué)的角度上來講,用戶的審美性質(zhì)在發(fā)生變化,由過去“專注式”的審美在強(qiáng)大的信息流影響下變成娛樂式的“快餐式”審美,所以做多種風(fēng)格這是適應(yīng)市場趨勢的必然結(jié)果。


每個企業(yè)的目標(biāo)并不是為了用戶設(shè)計出更好的視覺作品,企業(yè)的目的是在于用“創(chuàng)意”快速吸引用戶眼球。有點兒像是鉛筆和鋼筆的關(guān)系,不是為了最好的鉛筆而是鋼筆,而是為了設(shè)計出可以代替鉛筆的鋼筆。


例如下圖中的描邊MBE風(fēng)格、孟菲斯、噪點插畫、復(fù)古等風(fēng)格都可以運(yùn)營到設(shè)計中。


今年大火的酸性設(shè)計(最早出現(xiàn)在西方60年代迷幻搖滾(Aicd Rock)文化中)是一種打破傳統(tǒng)美感的設(shè)計,暗調(diào)的背景和鐳射材質(zhì)的素材搭配鏤空的字體設(shè)計,在視覺感受上制造出一種迷幻絢爛的氛圍,特別適合用在一些需要體現(xiàn)“潮流、新銳、個性”的視覺設(shè)計中。文章結(jié)尾我也給大家準(zhǔn)備了素材,需要的去獲取吧。



2.4 有故事性活動延展

大多數(shù)用戶都喜歡聽故事,在故事中包裝自己的產(chǎn)品,告訴用戶可獲得什么好處的這種方法也是提高運(yùn)營活動的數(shù)據(jù)的一種好辦法。


這種形式早在2017年的offo就有用過,當(dāng)時ofof的產(chǎn)品有借助于《神偷奶爸3》中小黃人的形象,設(shè)計了一系列新的自行車造型,以一系列報紙的形式設(shè)計,以小黃人車潛入車間為主要故事,了解 OFO小黃人版是如何造出來的,某種程度上說很好地宣傳了 OFO。


例如《德芙Dove x故宮》的H5項目中,用長卷的表現(xiàn)形式繪制了從清朝至現(xiàn)代的過年場景,意指“以前宮里人也吃德芙,現(xiàn)在將德芙的福氣傳到千家萬戶”,讓用戶眼前一亮的同時,也宣傳了企業(yè)產(chǎn)品。


《當(dāng)代清明上河圖》,快手品牌宣傳H5項目中,設(shè)計師將現(xiàn)代與古代結(jié)合,通過長圖繪制生活百態(tài),用不同的故事來講述勵志故事和暖心故事,是故事性宣傳企業(yè)品牌的經(jīng)典案例。



2.5 活動ip的游戲化

用戶對簡單的商品宣傳(運(yùn)營活動)是沒有什么興趣的,但是如果把運(yùn)營活動包裝成一個游戲,卻能俘獲用戶的芳心。很多企業(yè)正是抓出用戶的這個心理,在自己企業(yè)的ip形象上做足了功夫,阿里巴巴集團(tuán)就是這樣一個典型的企業(yè),只要是過節(jié),ip形象總能參與其中發(fā)揮其最大的商業(yè)價值,是典型把ip形象加入運(yùn)營活動游戲化的企業(yè)。


每年支付寶都會有積攢5福的游戲,在2021年他們還升級了自己的ip形象,讓用戶體驗更加升級。ip形象的游戲化,未來也會成為一個趨勢,每年應(yīng)該都會有吉祥物來送錢。




三、構(gòu)圖好就成功了一半

畫面清晰、構(gòu)圖合理應(yīng)該是做運(yùn)營設(shè)計的第一準(zhǔn)則,尤其是大家都審美疲勞的今天,有一個好的構(gòu)圖,可以起到事半功倍的效果。


接下來我就介紹運(yùn)營活動中常用的四種構(gòu)圖方法,便于大家在工作中有規(guī)律有節(jié)奏地排版畫面上的圖形、文字、元素之間的關(guān)系。



3.1 上下構(gòu)圖法

“上下的構(gòu)圖法”是將布局分成上、下兩個部分,或使整個畫面元素呈上下分布的趨勢,主要信息(標(biāo)題)常常融入圖片中,放在主空間成為主體,閱讀性文字放在次空間,這種構(gòu)圖的特點是內(nèi)容的沖擊力比較強(qiáng)。



3.2 左右構(gòu)圖法

“左右構(gòu)圖法”是占據(jù)圖片和文字的一部分,形成左右兩個獨立的空間,產(chǎn)生良好的閱讀體驗。很實用的一種構(gòu)圖方式。這種構(gòu)圖的特點所占圖幅較小,但要求文案的數(shù)量需要精簡,盡量不超過6個字。



3.3 三分構(gòu)圖法

“三分構(gòu)圖法”是將畫面中的內(nèi)容三等分,并突出c位的信息,旁邊有裝飾元素圍繞增添畫面的氣氛,具有穩(wěn)定性又可以避免使用中心構(gòu)圖形成的呆板感。



3.4 中心構(gòu)圖法

“中心構(gòu)圖法”是把主體放置于畫面視覺中心,形成視覺焦點,再利用其他信息烘托與呼應(yīng)主體。其特點是能夠突出重點信息,讓用戶一目了然。



3.5 對角構(gòu)圖法

“中心構(gòu)圖法”是指對畫面進(jìn)行等值分割,并將所要表達(dá)的信息對角排列。這種構(gòu)圖方式,會讓頁面顯得更靈活,有動勢,讓畫面有更多可能性。



3.6 傾斜構(gòu)圖法

“傾斜構(gòu)圖法”是版面整體或部分元素以傾斜的角度呈現(xiàn)在畫面上,能很好地營造出輕松、動感、刺激等氣氛感,一般游戲類活動也會比較常用。









好的運(yùn)營活動會為企業(yè)帶來可觀的短期收益這是眾多互聯(lián)網(wǎng)企業(yè)所認(rèn)同的,也是每一個企業(yè)所需要的,以下是我對運(yùn)營設(shè)計的一些經(jīng)驗心法,希望對你有所幫助




一、如何最大限度地規(guī)避返工風(fēng)險

對于設(shè)計者來說,最苦惱的是改稿,特別是那種做許多疊加質(zhì)感光效的效果圖,改起來成本很高,改稿這件事對運(yùn)營設(shè)計師來說可以說是最頭疼的事。


針對這種返工改稿的情況,我個人認(rèn)為問題多數(shù)出在“溝通”這個環(huán)節(jié)。在溝通環(huán)節(jié)中最要解決的核心問題就是要進(jìn)行有效的溝通,如果需求方(運(yùn)營經(jīng)理)和設(shè)計師之間的溝通是無效的,改稿那是必然結(jié)果,下面是我對于“高效溝通”上的3點經(jīng)驗。



1.1 明確項目的目標(biāo)

身為設(shè)計師的你遇到一次兩次交付后要改稿的情況倒是沒有關(guān)系,有些協(xié)同的同事是初次合作,難免有些觀點不對齊的情況,這屬于正常的,但是經(jīng)常遇到這種情況就要引起重視了。


需要反思一下是不是自己對項目的目標(biāo)沒有搞清楚,在做項目之前我建議直接讓需求方說出痛點,多問問目標(biāo)用戶群體是誰?投放平臺和渠道是哪些?上線時間和排期?尺寸大小等問題,把目標(biāo)明確下來。


1.2 從抽象化到具象化

人和人受到教育不同,理解能力是不同的,有的需求方上來就說了很多概念詞匯,比如我希望這次運(yùn)營活動是高端、大氣、上檔次的,這很難讓設(shè)計師正確地理解。


對于這種情況,我建議找一些可用的真實案例給到需求方,將抽象的概念具象化,事先搞清楚需求方心中的畫面是什么樣子的,特別是要明確設(shè)計風(fēng)格、配色方案、背景元素、圖文板式結(jié)構(gòu)等信息。



1.3 提前弄清楚運(yùn)營活動的要求

關(guān)于版權(quán)的問題是有可能導(dǎo)致項目無法上線的,我之前的一個項目就因為C4D這款軟件侵權(quán)收到了一份律師函,需要將帶有3D效果的在線元素全部替換。


因此在項目啟動前可與需求方確認(rèn)有關(guān)字體版權(quán)、圖片版權(quán)、軟件使用權(quán)等問題,避免在效果圖出來后再去調(diào)整,耗費公司人力成本。



1.4 除了溝通還應(yīng)該設(shè)立審核環(huán)節(jié)

這個并不屬于交流的范疇,但是我覺得他也是影響設(shè)計師反復(fù)改圖的重要原因之一,還是有必要說一下的。


運(yùn)營活動上線都是有明確時間節(jié)點的排期安排的,所以設(shè)計稿審核的環(huán)節(jié)要特別重視,尤其是大型的運(yùn)營活動不要等到最后的環(huán)節(jié)再去審核,因為如果審核不通過有可能會重新做,所以在設(shè)計過程之中應(yīng)多設(shè)立幾個審核環(huán)節(jié),保持和需求方的想法是時時同步的,千萬不要等交付時間快到了再進(jìn)行審核,到時候誰加班誰痛苦。詳細(xì)審核環(huán)節(jié)設(shè)置,大家可以參照下面的圖片:






二、運(yùn)營設(shè)計其實也可以增效

“增效”這個詞近幾年火得不行,尤其是和老板說增效的事情,他會非常感興趣的。以下是我親身經(jīng)歷的一個項目,也正是從這個時候開始,我開始思考團(tuán)隊增效的事情。



2.1 明白運(yùn)營經(jīng)理想要什么

以前遇到一個運(yùn)營活動落地頁的項目,需求方說;“我們不需要繪制復(fù)雜的插畫放在Banner里,簡單畫點喜慶的元素,把活動標(biāo)題展現(xiàn)清楚就好了,設(shè)計同學(xué)也不需要花那么多時間來設(shè)計,你們能多久給到我呢??!?


我相信有不少小伙伴曾經(jīng)遇到過這個情況,通過以上案例,不難看出設(shè)計師想要的跟運(yùn)營經(jīng)理想要的并不一樣。大部分運(yùn)營經(jīng)理更在意的是文案的露出、能多快地交付;而大部分運(yùn)營設(shè)計師更在意的是圖片美不美、炫不炫,整體的圖形表達(dá)最終給用戶的感覺是否和設(shè)計師所想的一致。



2.2 增效的兩種方式

在理解了運(yùn)營經(jīng)理他們所在意的事情之后,我發(fā)現(xiàn)針對有嚴(yán)格交付時間的運(yùn)營項目而言,運(yùn)營設(shè)計的增效是很有必要的。一般來說“增效”有兩種方式,一種是提高輸出效率,另外一種是降低人工成本。


提高輸出效率:我知道在行業(yè)內(nèi),58集團(tuán)自主研發(fā)的運(yùn)營頁面設(shè)計平臺——斑馬智能物料設(shè)計審核平臺和靈動編輯器算是兩款增效的工具,這兩款工具為運(yùn)營工作提供高效且高質(zhì)量的輸出環(huán)境。


降低人工成本:我相信大多數(shù)同學(xué)的公司是沒有這類平臺資源,不用擔(dān)心,沒有我們可以自己搭建簡略版的組件代替,比如公司里有些運(yùn)營活動要跟上新聞熱點,如果我們事先做好3-5個尺寸一致的模版套件,當(dāng)新聞熱點來的時候只需要插入圖片更新標(biāo)題就可以先推送出去,這種做法會極大地降低設(shè)計師的制作成本。


再比如組內(nèi)成員可以利用平時的工作時間做一些通用的組件如紅包、優(yōu)惠券等,在要求快速完成運(yùn)營活動的時候,可以挑選風(fēng)格合適的樣式替換。





三、做好運(yùn)營需要了解用戶心理

縱觀市場,會發(fā)現(xiàn)大部分設(shè)計師都是作圖高手,那些能夠在前期參與策劃運(yùn)營活動,幫助運(yùn)營經(jīng)理想一些更有趣好玩兒的idea的人才是鳳毛麟角的。



3.1 需要有正向、反向思考角度

記得看過一次求職類節(jié)目,一位求職者推銷頸椎治療儀的案例讓我印象深刻。因為他的推銷過程很精彩,他用了兩種方法去推銷產(chǎn)品。


第一種思路:介紹產(chǎn)品的優(yōu)點,表示你買了我們的頸椎儀脖子的酸痛問題會得到緩解。

第二種思路:如果你不買我們的頸椎儀,你很有可能因為頸椎不舒服而失去良好的睡眠質(zhì)量。


當(dāng)然那個應(yīng)聘者也得到了心儀的企業(yè)offer,那時候我就覺得這位應(yīng)聘者很聰明,聰明的點在于對猶豫不決、不想買的用戶都設(shè)計了自己的對策。


對猶豫不決的用戶來說,通過正向介紹產(chǎn)品優(yōu)勢,從而獲取用戶青睞;對于不想買的用戶則利用反向思維講述這個產(chǎn)品會和你睡眠質(zhì)量有關(guān)系。


設(shè)計師是一個很重視用戶同理心的一個職業(yè),當(dāng)我們越是了解用戶的想法,就會知道用戶最需要什么,做的設(shè)計也就能更好地貼合用戶需求,最終完成提高運(yùn)營活動的數(shù)據(jù)的運(yùn)營目標(biāo)。



3.2 觸發(fā)點擊行為和用戶心理有關(guān)系

2009年,斯坦福大學(xué)行為科學(xué)教授福格(Fogg)提出了一種人體行為模型,簡稱為 FBM。根據(jù)這一模型,他提出促使一個人的行為的發(fā)生離不開三個因素:行為動機(jī)(Motivation),行為能力(Ability)和觸發(fā)條件(Triggers),用公式表達(dá)就是B=MAT。用戶行為的產(chǎn)生需要動機(jī)、能力、觸發(fā)等有機(jī)結(jié)合,通過對動機(jī)、能力、觸發(fā)等干預(yù)可以影響使用者的行為。


引發(fā)用戶點擊行為,本就是運(yùn)營設(shè)計師必須要做的事情,但是觸發(fā)用戶點擊這個行為就要洞察到用戶心理所想。這里我推薦《飛書官方-認(rèn)知偏差知識手冊》,大家可以從這本書里面了解一些用戶基礎(chǔ)的心理學(xué)知識。


這里我還想補(bǔ)充一點,設(shè)計師為什么要學(xué)習(xí)心理學(xué)。如果有人問你設(shè)計是什么,很多人都會回答設(shè)計就是解決問題,這是一個很標(biāo)準(zhǔn)的答案。在我看來,設(shè)計解決兩個問題,第一個就是實現(xiàn),把以前沒有的東西做出來,第二個就是推廣,把已有的東西賣出去讓更多人知道。很明顯運(yùn)營屬于第二種。


但是需要大家注意的是主語,上一句話的主語是“設(shè)計”而不是“設(shè)計師”。設(shè)計師更像是一個翻譯官的角色,其本質(zhì)在于精準(zhǔn)地表達(dá),設(shè)計師利用擅長的圖形、色塊等元素給用戶傳遞信息,比如說格式塔原理就在于能幫助設(shè)計師,清晰地規(guī)劃出用戶先看到什么,提早預(yù)測出用戶看到這張圖會產(chǎn)生什么感受,做到可以通過設(shè)計技巧,讓用戶感受到設(shè)計師想傳遞的信息和感受,這就是我們要學(xué)習(xí)心理學(xué)的原因——為了更科學(xué)地了解用戶使用習(xí)慣(如格式塔原則可以科學(xué)地構(gòu)建效果圖的閱讀順序),做貼合用戶需要的設(shè)計,讓用戶滿意,從而完成盈收的運(yùn)營目標(biāo)。總結(jié)一句話,運(yùn)營設(shè)計師不僅要詢問用戶想要什么,更要詢問運(yùn)營經(jīng)理想表達(dá)什么。



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

文章來源:站酷 作者:斜杠7濕兄
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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




最新安卓規(guī)范入門解析

資深UI設(shè)計者

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析


安卓英文名是 Android,它是系統(tǒng)級源碼的總稱,而谷歌官方為這套系統(tǒng)提供的設(shè)計規(guī)范,叫做 Material Design (下稱 MD),我們了解官方的設(shè)計規(guī)范,即了解 Material Design 的過程。

目前,Material Design 已經(jīng)更新到第 3 代,與 Andoirid 12 代共同發(fā)布,它的設(shè)計進(jìn)行了大量的更新和調(diào)整,雖然我寫作的時候這代 MD 設(shè)計還沒有正式上線,但下文也將以該版本做說明。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

建議學(xué)習(xí)前先下載安卓官方的組件文件(MD2 版本,以后會更新的)和對應(yīng)字體,可以通過下方官方鏈接獲取。也可以在這個網(wǎng)址中用網(wǎng)頁翻譯查看官方的規(guī)范介紹。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

1. 安卓布局規(guī)范

安卓和 iOS 類似,也包含狀態(tài)欄、頭部標(biāo)題、底部導(dǎo)航欄以及 …… 底部指示器,我們簡單對它們做個介紹。

首先,頂部狀態(tài)欄在 MD2 中,是有背景色的,而在 MD3 則改成了和 iOS 一樣的透明背景。它的高是 52dp(安卓的單位,和 PT 就名字的差別),使用方式和 iOS 狀態(tài)欄基本一致。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

頂部標(biāo)題欄上,MD 提供了 4 種模式,依次為 center-aligned, small, medium, large,在實際界面中可以根據(jù)自己的需要選擇。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

在 MD3 中,基本取消了安卓過去在頂部放導(dǎo)航的 “優(yōu)良傳統(tǒng)”,所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar,不過我們依然可以用中文稱呼它為底部導(dǎo)航欄。

它和 iOS 底部導(dǎo)航類似,提供了 3-5 個選項的不同版本,可以根據(jù)自己的需要選擇。并且使用底部指示器的過程中,需要將導(dǎo)航底部延長,覆蓋底部指示器的高 28dp。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

在 MD3 中,官方默認(rèn)使用的畫布是 412*892,左右頁邊距默認(rèn)為 24。所以如果我們要創(chuàng)建一個以 MD3 規(guī)范為標(biāo)準(zhǔn)的頁面,就可以通過置入所需的官方元素完成基礎(chǔ)布局,進(jìn)行后續(xù)設(shè)計。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

至于其它的官方組件,可以在源文件和官方的規(guī)范文檔中查看,就不在這里展開了。

2. 安卓規(guī)范細(xì)節(jié)

MD3 和 MD2 看起來完全像 2 套規(guī)范,原因就在于細(xì)節(jié)層面變化太大。MD3 一改以往直男的設(shè)計風(fēng)格和配色,搖身一變成年輕人喜聞樂見的網(wǎng)紅風(fēng)……

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

而相比起來,顏色填充的邏輯比色彩風(fēng)格的變化更大。在安卓 12 中,提供了用戶自定義系統(tǒng)色彩風(fēng)格,和色彩根據(jù)場景自動化生成和填充的強(qiáng)大特性……

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

這套規(guī)范異常的復(fù)雜,這是一個針對 MD3 色彩配置的萬字干貨才能講清楚的特性,我只在這邊做一些最基本的講解。

首先就是 MD3 中,也強(qiáng)調(diào)了色彩的角色:

  • 主色 Primary Key Color
  • 二級主色 Secondary Key Color
  • 三級主色 Tertiary Key Color
  • 中性色 Neutral Color
  • 錯誤色 Error Color

只要這些角色的色值被確定,系統(tǒng)就會自動幫助我們生成不同的明度等級,并應(yīng)用在不同的場景,比如下方左側(cè)是我們設(shè)置的角色色值,右側(cè)是系統(tǒng)會自動生成的關(guān)聯(lián)色彩。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

下面是色彩應(yīng)用的示例:

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

這些角色的具體色值,可是是我們作為 APP 開發(fā)方定義的,也可以完全交給客戶端自動生成(獨立設(shè)置或背景生成)。

所以當(dāng)我們使用 MD3 規(guī)范做設(shè)計的時候,就要借助官方的插件來完成角色色值的生成。感興趣的同學(xué)可以在 Figma 官方社區(qū)搜索 Material Theme Builder 插件,并根據(jù)下方介紹了解它的使用方法。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

除色彩外,MD3 使用了更多、更大的圓角,讓界面元素變得更圓潤。圓角使用 4 的倍數(shù),根據(jù)元素尺寸分別應(yīng)用了 4、8、12、16、28 等圓角。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

在使用了圓角的同時,還棄用了 MD2 中核心材質(zhì) —— 投影(我忍它很久了)。讓元素之間通過色彩的對比來實現(xiàn)分隔,而不是應(yīng)用一大堆厚重的投影來突出元素。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

除此之外,MD3 中篇幅最多的還包括設(shè)備適配有關(guān)的規(guī)范,就不在這邊介紹,留到后面的分享中講解。

如果是面向國內(nèi)市場的 UI 設(shè)計師,針對 MD3 只需要停留在了解的層面就行,在真實的工作環(huán)境里基本沒有應(yīng)用場景。

3. 國產(chǎn)安卓設(shè)計現(xiàn)狀

為什么我們作為 UI 設(shè)計師可以對 MD3 停留在了解的層面,而不是真實的實踐?

因為面向國內(nèi)市場的安卓界面設(shè)計,基本不遵守谷歌官方的設(shè)計規(guī)范!這里面包含了非常多復(fù)雜的歷史問題,有谷歌自己規(guī)范做的不清不楚(對比 iOS)的關(guān)系,也有每個廠商各自為戰(zhàn)推出自己的設(shè)計系統(tǒng)的原因。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

更底層的因素,是谷歌系統(tǒng)在國外才能獲取完整的體驗,沒有進(jìn)入國內(nèi)(被墻),缺乏了廠商去支持和適配它的基本動力。同時在商業(yè)層面上,如果我們每設(shè)計一個 APP,iOS 和 Andorid 使用各自的規(guī)范,會對產(chǎn)品規(guī)劃、設(shè)計、開發(fā)和測試都造成非常大的壓力,是一般公司完全承受不起的。

再者,國內(nèi)的安卓項目,多數(shù)是在完成 iOS 端的設(shè)計后,安卓工程師直接參照該設(shè)計稿適配到安卓端中。只有少數(shù)安卓特定的需求需要為其設(shè)計獨立的頁面。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

所以常規(guī)情況下,我們只需要提供標(biāo)準(zhǔn)的 iOS 界面即可。只有在產(chǎn)品經(jīng)理提供的特殊需求和頁面,要根據(jù)它輸出安卓尺寸的對應(yīng)界面,但設(shè)計風(fēng)格、元素依舊可以保持 iOS 版本的樣式。

要提升對安卓官方系統(tǒng)的理解,就一定要在你們的安卓手機(jī)上刷原生的系統(tǒng),同時安裝 Google 三件套,否則你們體驗的就只有魔改版 iOS。

零基礎(chǔ) UI 入門六:最新安卓規(guī)范入門解析

今天的分享到這里結(jié)束!仔細(xì)研究了下 MD3 的新增規(guī)范花了不少的精力,個人意見,MD3 實在是非常難做出能讓我們滿意的設(shè)計……

文章來源:優(yōu)設(shè)   作者:酸梅干超人

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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




日歷

鏈接

個人資料

存檔