一次會(huì)議的演示文稿,通常是一個(gè) .pptx 格式的文檔,而日常來(lái)往的郵件附件里的文檔則多是 .docx 和 .pdf 格式的文檔。當(dāng)然,設(shè)計(jì)師更熟悉的可能是在 Adobe Photoshop 中可以打開(kāi)的 .psd 格式的源文件。
我們熟悉了這種各司其職的格式體系。
而網(wǎng)絡(luò)正在改變這種格式體系。各種服務(wù)和功能大都「在線化」,大家都熟悉在線看視頻,已經(jīng)不會(huì)去分它是 .mp4 還是 .flv,在線音樂(lè)是 .mp3 還是 .flac 已經(jīng)無(wú)人在意。而更為重要的文檔和效率類的服務(wù)也是如此,且不說(shuō)微軟的 Office 365 和相對(duì)更加輕量的 Google Doc,國(guó)內(nèi)的 騰訊文檔和石墨文檔等在線文檔工具,讓我們?cè)絹?lái)越少地接觸帶有.docx 后綴的本地文檔。當(dāng)然,這并不是意味著本地文檔就此消亡,但是這種去本地化的趨勢(shì)非常明顯。
如果文件的格式已經(jīng)不再清晰可見(jiàn)了,那么概念的界限自然也會(huì)逐漸淡化。一個(gè)記錄文本的文檔和記錄表單的文檔為什么不干脆融合到一起,并且適應(yīng)用來(lái)展示的需求?當(dāng)然可以。
今年年中在 Microsoft Build 大會(huì)上微軟展示的 Fluid Framework 就做的更加徹底。
無(wú)論是源自 Word 里面的富文本還是 Excel 當(dāng)中的表格,它們甚至不用以單一完整的文件而存在,它們?cè)诰W(wǎng)絡(luò)上傳遞的時(shí)候,將會(huì)是一段簡(jiǎn)短的鏈接。但是在 Fluid Framework 的支持之下,呈現(xiàn)出來(lái)的,則是一段可交互的、具備編輯功能的、帶有內(nèi)容的模塊。
說(shuō)起來(lái),并不難理解。在有 Fluid Framework 支持之下,任何網(wǎng)絡(luò)環(huán)境都會(huì)是一個(gè)簡(jiǎn)單純凈的畫布,一個(gè)可以承載不同類型文檔和功能的空間。整個(gè) Office 龐雜功能體系,你都可以按需取用,提取出來(lái)拉到 Fluid Framework 中使用。
「我們確實(shí)需要在關(guān)鍵領(lǐng)域,針對(duì)核心技術(shù)進(jìn)行創(chuàng)新,」 Microsoft 365 負(fù)責(zé)人Jared Spataro在接受The Verge采訪時(shí)說(shuō)道:「 Fluid Framework 是我們既是協(xié)作創(chuàng)新的新方式,也是未來(lái)承載各色內(nèi)容的文檔的新載體。」這種新的文檔框架讓用戶能夠拆解不同類型的內(nèi)容,并在不同的應(yīng)用場(chǎng)景和不同文檔中輕松地取用。
Spataro 還說(shuō)道:「Fluid Framework 沿用了一部分以往文檔的概念,但是將這些格式和文件徹底拆碎、打散,然后用云端的網(wǎng)址鏈接將它們逐一代替代。不同的鏈接承載放置不同的內(nèi)容和組件,因此從文字到表格,再到圖形化的可視化內(nèi)容,所有這些都可以隨意地整合,輕松集結(jié)在一個(gè)地方。然后,F(xiàn)luid Framework 讓你實(shí)時(shí)訪問(wèn)所有這些內(nèi)容,因此它是動(dòng)態(tài)的,可交互的,是完全可協(xié)作的,并且可以便捷共享的」。
作為一個(gè)尚且處于早期階段的服務(wù),目前Fluid Framework 還只是打通了 Office 自家的文檔體系。但是即便如此,這意味著你可以將任何一個(gè)文檔當(dāng)中帶有相應(yīng)功能的內(nèi)容,無(wú)縫地與人在 諸如筆記工具 OneNote 隨時(shí)隨地嵌入 Excel 的模塊和豐富的表單、即時(shí)通訊工具 Teams 中加入演示文稿,并且和同事一起修改其中的樣式,替換圖片,增刪動(dòng)畫而無(wú)需離開(kāi),你甚至可以直接在你網(wǎng)頁(yè)的 Outlook 郵箱里面,直接編輯當(dāng)月網(wǎng)站數(shù)據(jù)所生成的表單和相應(yīng)的柱狀圖。
當(dāng)然,這還不止。人工智能功能的加入,讓 Fluid Framework 可以做到更多事情,比如發(fā)布會(huì)現(xiàn)場(chǎng)所演示的,實(shí)時(shí)發(fā)布信息,然后 AI 協(xié)助將信息實(shí)時(shí)翻譯成不同的語(yǔ)言,分發(fā)給不同國(guó)家的同事。
這種全新的功能,讓內(nèi)容協(xié)作中間大量復(fù)雜的概念和環(huán)節(jié)都被移除了,這種程度的變化是驚人的,它意味著交互的模式,從最底層的概念到呈現(xiàn)的方式,都發(fā)生了改變,而這種改變還會(huì)隨著產(chǎn)品迭代和時(shí)間推移,而進(jìn)化得更加智能、無(wú)縫、微妙。
Spataro 總結(jié)道:「不同格式的文檔,一直是人們思考如何制作內(nèi)容的思維框架。但是 Fluid 往后退了一步,重新審視了一下這個(gè)既有的體系,然后展現(xiàn)了一個(gè)新的可能:我們不再需要這些主導(dǎo)一切的文檔格式和不同類型的文件。我們不用在處理表格的時(shí)候就必須聯(lián)想到 Excel,寫文本的時(shí)候也不必去限定工具必須為 Word,而可視化內(nèi)容的展示也不再拘泥于 PowerPoint,你可以在任何地方用任何類型的內(nèi)容,我要說(shuō)的是,我們不再有文檔了,我們擁有一個(gè)無(wú)所不能的畫布。」
而這個(gè)全新的東西,最近剛剛開(kāi)始對(duì)外開(kāi)放了申請(qǐng)入口:
Fluid Framework Developer Preview
當(dāng)然,如今看起來(lái)頗為具有想象力的 Fluid Framework ,它的核心思路其實(shí)并不是什么新鮮東西。
在線協(xié)作的概念由來(lái)已久,《連線》雜志前主編凱文凱利在他1994年出版的《失控》當(dāng)中早已提及相關(guān)的概念和想法,但是在如今實(shí)際上要打通新的領(lǐng)域,納入一個(gè)新的格式,加入一個(gè)新的功能,都需要足夠的基礎(chǔ)才行。
Google Wave 是這個(gè)領(lǐng)域的先行者。在一個(gè)畫布之下,進(jìn)行多格式、多樣式、多人在線協(xié)作,幾乎完全無(wú)界的在線協(xié)作模式是令人炫目也讓人無(wú)所適從的,這一產(chǎn)品最終失敗了,但是它在技術(shù)和架構(gòu)上的遺產(chǎn)足以反哺出 Google Doc、Google Drive 這種級(jí)別的產(chǎn)品。
Google Wave 的想法在當(dāng)時(shí)確實(shí)略有一點(diǎn)天馬行空,實(shí)際應(yīng)用場(chǎng)景和需求并沒(méi)有跟上,對(duì)于網(wǎng)絡(luò)帶寬的要求在當(dāng)時(shí)也相當(dāng)苛刻。而如今上線的 Fluid Framework ,應(yīng)該也是從這些失敗的前輩身上汲取了不少經(jīng)驗(yàn)。
立足于微軟最扎實(shí)的 Office 365 這一云端服務(wù)來(lái)進(jìn)行鋪設(shè)和測(cè)試功能,在服務(wù)群體上,則選擇了需求更加清晰具體的企業(yè)用戶(尤其是協(xié)作服務(wù)),來(lái)作為初始的切入點(diǎn)。這樣的限制,足以說(shuō)明微軟的審慎和重視,他們甚至準(zhǔn)備好了以年為單位來(lái)進(jìn)行迭代。
微軟對(duì) Fluid Framework 充滿了期待,他們相信這個(gè)東西能夠重塑行業(yè),甚至重塑網(wǎng)絡(luò)本身,也許到明年5月的開(kāi)發(fā)者大會(huì)上,能夠看到一個(gè)截然不同的 Fluid Framework。
競(jìng)品分析是UX設(shè)計(jì)師的標(biāo)準(zhǔn)工具之一, 且用戶體驗(yàn)設(shè)計(jì)師的主要交付品之一就是競(jìng)品分析報(bào)告。在設(shè)計(jì)一個(gè)新的方案之前,我們往往會(huì)查看其他類似的產(chǎn)品,了解其他人做的相關(guān)工作,希望從中找到任何弱點(diǎn)或者優(yōu)點(diǎn),并期望在此基礎(chǔ)上進(jìn)行改進(jìn),這將利于你的設(shè)計(jì)。事實(shí)上,競(jìng)品分析已經(jīng)不再局限于一種工具方法,更是一種思維模式,如何對(duì)比分析,如何批判性的進(jìn)行比較以及從差異中獲取價(jià)值。
UX設(shè)計(jì)項(xiàng)目會(huì)遇到哪些類型的競(jìng)爭(zhēng)對(duì)手?
這個(gè)問(wèn)題可以理解為,我們要分析哪些競(jìng)爭(zhēng)對(duì)手?一般來(lái)講,所有UX項(xiàng)目都面臨兩種競(jìng)爭(zhēng),一種是直接競(jìng)爭(zhēng)對(duì)手,即業(yè)務(wù)有直接沖突,涉及到具體的利益沖突,商業(yè)沖突。例如滴滴和uber,淘寶和京東。另一種則是“間接競(jìng)爭(zhēng)對(duì)手”,往往針對(duì)某些相似的產(chǎn)品模塊,這里的競(jìng)爭(zhēng)并沒(méi)有準(zhǔn)確的定義,只是為了比較而給與的一個(gè)名稱。 例如你在進(jìn)行自家產(chǎn)品登錄注冊(cè)模塊的設(shè)計(jì),此時(shí)你不僅僅可以研究一些直接競(jìng)品,也可以研究其他擁有此功能模塊的產(chǎn)品。而該產(chǎn)品與你的產(chǎn)品并沒(méi)有構(gòu)成競(jìng)爭(zhēng)的關(guān)系,只是提供了一個(gè)參考方向。
為什么要進(jìn)行比較?
關(guān)于這個(gè)問(wèn)題有兩個(gè)答案,首先,調(diào)研競(jìng)品發(fā)掘哪些功能或服務(wù)是他們不能做或者沒(méi)有實(shí)現(xiàn)的,這就是我們的產(chǎn)品可以利用的機(jī)會(huì)點(diǎn),以提供新穎的或者說(shuō)更強(qiáng)大的功能,從而提高產(chǎn)品競(jìng)爭(zhēng)力。例如順豐快遞首先開(kāi)創(chuàng)了機(jī)器填寫快遞信息的功能,從而大大提高用戶填寫訂單的效率、準(zhǔn)確度和滿意度,進(jìn)一步提高品牌競(jìng)爭(zhēng)力和服務(wù)水平。
其次,檢查其他設(shè)計(jì)師對(duì)相同需求的解決方案必然會(huì)對(duì)你有所啟發(fā),有利于你從中獲取靈感來(lái)優(yōu)化自家產(chǎn)品。例如信息架構(gòu)的優(yōu)化、或者簡(jiǎn)單地操作流程的優(yōu)化。參考競(jìng)品意味著你可以不斷從中學(xué)習(xí),把競(jìng)品的每個(gè)模塊、步驟拆解開(kāi)來(lái),分析其背后的設(shè)計(jì)原因及它們?nèi)绾伟l(fā)揮作用,這將有利于你的產(chǎn)品設(shè)計(jì)。
參考競(jìng)品首先意味著你能夠達(dá)到和競(jìng)品同一水平的用戶體驗(yàn),因?yàn)橛辛藚⒄諛?biāo)準(zhǔn)相當(dāng)于指路明燈,競(jìng)品的優(yōu)秀體驗(yàn)也會(huì)督促你不斷優(yōu)化自己的產(chǎn)品。但競(jìng)品雖然為你創(chuàng)造了一個(gè)標(biāo)準(zhǔn),同時(shí)也會(huì)限制你的思路和想法,使你可能錯(cuò)過(guò)一些更優(yōu)秀的解決方案,參考競(jìng)品能讓你追趕別人,但無(wú)法讓你完全超越他人。因此僅僅復(fù)制是不夠的,必須融入自己的見(jiàn)解且時(shí)刻保持創(chuàng)新意識(shí)。
對(duì)直接競(jìng)爭(zhēng)對(duì)手進(jìn)行分析
通常,競(jìng)品分析發(fā)生在項(xiàng)目的早期,你或許會(huì)尋找市面上是否會(huì)有競(jìng)爭(zhēng)對(duì)手,然后嘗試著從競(jìng)品中尋找優(yōu)點(diǎn)和弱點(diǎn),以推動(dòng)自己的產(chǎn)品。如果沒(méi)有競(jìng)爭(zhēng)對(duì)手時(shí),往往可以從目標(biāo)用戶入手,因?yàn)橛脩魧?shí)際上擁有自己的解決方案或者說(shuō)策略,例如在滴滴流行起來(lái)之前,對(duì)應(yīng)的用戶群往往使用出租車來(lái)代替出行方式。目標(biāo)用戶在這之前是如何解決他們的需求的?你應(yīng)該可以獲得一些間接可比的方案,收集用戶的相關(guān)想法有利于推動(dòng)你的產(chǎn)品設(shè)計(jì)。
在產(chǎn)品上線后的運(yùn)行階段,仍然需要做競(jìng)品分析,此時(shí)或許存在一些新興的的競(jìng)品,雖然是后來(lái)者,但往往會(huì)在交互、體驗(yàn)或者運(yùn)營(yíng)策略等方面碰撞出一些新的創(chuàng)意。根據(jù)競(jìng)品的功能策略,你需要進(jìn)行一定的調(diào)整,不斷對(duì)產(chǎn)品迭代優(yōu)化。除此之外,產(chǎn)品有時(shí)需要做一些追隨趨勢(shì)的更新,例如視覺(jué)風(fēng)格、新的交互設(shè)計(jì)語(yǔ)言等。
如何從間接競(jìng)爭(zhēng)對(duì)手那里獲得靈感
間接競(jìng)爭(zhēng)對(duì)手也會(huì)給你一定的啟發(fā),作為一個(gè)用戶體驗(yàn)各種產(chǎn)品時(shí),留心那些優(yōu)秀的設(shè)計(jì),可能是視覺(jué)方面也可能是交互方面,總之這些優(yōu)雅的設(shè)計(jì)將會(huì)成為你的靈感之源。然而所有的設(shè)計(jì)都有其適用場(chǎng)景及背后的設(shè)計(jì)原理支撐,在海外設(shè)計(jì)經(jīng)驗(yàn)中一再?gòu)?qiáng)調(diào)的 context(上下文)就是這個(gè)意思。
優(yōu)秀的設(shè)計(jì)都是最適合自己的產(chǎn)品和策略的設(shè)計(jì),而不是最美觀或最的。因?yàn)樵O(shè)計(jì)不僅僅包涵體驗(yàn)更是要兼顧業(yè)務(wù)。同一個(gè)設(shè)計(jì)在一個(gè)地方發(fā)揮作用并不意味著移植到其他地方仍然有效。
例如一個(gè)簡(jiǎn)單的登錄模塊的設(shè)計(jì),按照常規(guī)經(jīng)驗(yàn),以目前微信的受眾數(shù)量做參考,可以無(wú)腦選擇微信快捷登錄,這無(wú)疑是最便捷的方案,但為什么很多產(chǎn)品仍然采用手機(jī)登錄?因?yàn)橐粋€(gè)注冊(cè)的手機(jī)號(hào)碼能為公司的未來(lái)帶來(lái)極大的增值,每個(gè)號(hào)碼背后都是一個(gè)用戶,且通過(guò)手機(jī)號(hào)可以對(duì)這個(gè)用戶進(jìn)行持續(xù)的推廣營(yíng)銷,如拼多多的短信推廣,移動(dòng)聯(lián)通的電話推廣。
所以,一切的設(shè)計(jì)都應(yīng)以設(shè)計(jì)背景,業(yè)務(wù)訴求為基本原則來(lái)進(jìn)行,盲目的追尋極限的視覺(jué)和效率,盲目的信奉設(shè)計(jì)潮流趨勢(shì)都是不可取的。好的設(shè)計(jì)和時(shí)尚的設(shè)計(jì)不同,好的設(shè)計(jì)有持久的價(jià)值,是美學(xué)和體驗(yàn)的結(jié)合,并以基于心理學(xué)社會(huì)學(xué)的用戶研究為后盾。這樣的設(shè)計(jì)符合用戶的需求同時(shí)能為企業(yè)帶來(lái)收益。而時(shí)尚的設(shè)計(jì)則會(huì)隨著時(shí)間流逝而銷聲匿跡。
一味追尋潮流的應(yīng)用程序設(shè)計(jì),公然違背基本的可用性慣例,違背交互設(shè)計(jì)的基本原理,很有可能在市場(chǎng)中失敗?!狿rototyper.io UX首席負(fù)責(zé)人Miklos Philips
競(jìng)品分析時(shí)謹(jǐn)記五個(gè)原則
為了保證你所進(jìn)行的競(jìng)品分析的有效性,需要謹(jǐn)記以下五個(gè)原則。
1.理解背后的需求
分析任何設(shè)計(jì)之前都需要理解設(shè)計(jì)背后的核心需求,這并不是簡(jiǎn)單的查看表面內(nèi)容,除了交互體驗(yàn)上的思考,更要深入產(chǎn)品本身,去更多的理解業(yè)務(wù)層商業(yè)策略等方面的內(nèi)因。每個(gè)設(shè)計(jì)都有對(duì)應(yīng)的場(chǎng)景、上下文甚至各種限制條件。只有理解這些你才清楚這個(gè)設(shè)計(jì)是否適合你的產(chǎn)品,或者是否有一定的參考意義。
比如觀察淘寶的搜索功能你會(huì)發(fā)現(xiàn)首頁(yè)的搜索和店鋪的搜索有很大差異,即首頁(yè)的搜索比重要遠(yuǎn)遠(yuǎn)大于店鋪的搜索。店鋪中的搜索按鈕僅僅展示一個(gè)雙指面積的btn,而首頁(yè)則是展示一個(gè)接近通欄的搜索條。那么分析下來(lái),店鋪的搜索btn小巧精致,簡(jiǎn)易美觀是否應(yīng)該借鑒,答案是看情況。淘寶首頁(yè)入口提供的是一級(jí)搜索,涵蓋了淘寶百億級(jí)別的商品,因此搜索功能的優(yōu)先級(jí)極高。而店鋪商品有限,用戶瀏覽商品往往按照分類,很少使用搜索功能,這種情況下搜索的優(yōu)先級(jí)很低。
因此,理解設(shè)計(jì)背后的理念,解決的問(wèn)題、如此設(shè)計(jì)的原因才是競(jìng)品分析重點(diǎn)關(guān)注的方向。切記浮于表面。
2.確定真正的競(jìng)爭(zhēng)者
認(rèn)清自己的競(jìng)爭(zhēng)者,他們往往并不僅僅是表面的直接對(duì)手。事實(shí)上應(yīng)用程序只是一種幫助用戶達(dá)成目標(biāo)的技術(shù)手段從用戶角度,有很多可選方向,而你的產(chǎn)品想要獲得成功,你就要做那個(gè)體驗(yàn)最好,滿意度最高的選項(xiàng)?;叵胍幌?,便利貼的功能應(yīng)用程序是否能實(shí)現(xiàn)?答案是肯定的,但現(xiàn)在為止并沒(méi)有任何應(yīng)用程序能夠撼動(dòng)便利貼的霸主地位。因此,滴滴的競(jìng)品真的只是其他網(wǎng)約車公司嗎,事實(shí)上滴滴最大的競(jìng)品是出租車。通常,你最強(qiáng)大的對(duì)手并一定不是和你一樣的科技產(chǎn)品。
3.通過(guò)標(biāo)準(zhǔn)來(lái)判斷,而不是個(gè)人臆測(cè)
每次進(jìn)行比較都意味著根據(jù)某個(gè)標(biāo)準(zhǔn)來(lái)進(jìn)行判斷,如何決定兩者的功能孰優(yōu)孰劣,最好的方法是引入標(biāo)準(zhǔn)或者用數(shù)據(jù)說(shuō)話。例如競(jìng)品某個(gè)模塊轉(zhuǎn)化率高,那必然有其內(nèi)因。另外,我們可以根據(jù)業(yè)界的標(biāo)準(zhǔn)來(lái)評(píng)判產(chǎn)品的可用性體驗(yàn),如尼爾森的啟發(fā)式評(píng)估原則(后面會(huì)詳細(xì)講到)。
4.盲目模仿是導(dǎo)致失敗的罪魁禍?zhǔn)?/strong>
在特定環(huán)境中行之有效的方法在另一環(huán)境中可能根本行不通。每個(gè)設(shè)計(jì)解決方案不僅是針對(duì)眼前的問(wèn)題,而且還針對(duì)目標(biāo)受眾。請(qǐng)記住,良好的設(shè)計(jì)是仔細(xì)的分析研究產(chǎn)生的,需要付出大量的努力來(lái)與用理解用戶,定義問(wèn)題,并 根據(jù)上下文構(gòu)思,最終產(chǎn)出最終設(shè)計(jì)和評(píng)估解決方案。
你可能會(huì)說(shuō),別人已經(jīng)驗(yàn)證了的功能,我們沒(méi)必要花費(fèi)時(shí)間去重復(fù)測(cè)試,但他人的功能是針對(duì)特定的場(chǎng)景特定的業(yè)務(wù)目標(biāo),或許并不適用你的產(chǎn)品。所以,在模仿之前,請(qǐng)仔細(xì)考慮您的問(wèn)題與原始設(shè)計(jì)師的方案匹配程度。
5.用戶測(cè)試無(wú)可替代
在競(jìng)品研究中我們需要時(shí)刻保持懷疑的態(tài)度,在將競(jìng)品的設(shè)計(jì)應(yīng)用于自己的產(chǎn)品之前,需要評(píng)估設(shè)計(jì)背后的需求、場(chǎng)景,以判斷會(huì)否適合自家產(chǎn)品。這個(gè)過(guò)程可以沒(méi)有用戶參與,例如選擇專家進(jìn)行的可用性評(píng)估。但最終,在你決定將設(shè)計(jì)投入自己的產(chǎn)品時(shí),你需要意識(shí)到只有真實(shí)場(chǎng)景下的用戶測(cè)試,才能判斷該設(shè)計(jì)是否成功。
無(wú)處不在的“漢堡菜單”按鈕。最初是Facebook率先取得成功的設(shè)計(jì),現(xiàn)在有大量證據(jù)表明該設(shè)計(jì)帶來(lái)了很大的可用性問(wèn)題。通過(guò)將圖標(biāo)與其他導(dǎo)航方式(例如ios的菜單導(dǎo)航)進(jìn)行比較的A / B測(cè)試,發(fā)現(xiàn)了這些問(wèn)題。
時(shí)刻留意競(jìng)爭(zhēng)對(duì)手的產(chǎn)品設(shè)計(jì)有利于你不斷更新和迭代,從而保持競(jìng)爭(zhēng)優(yōu)勢(shì),但你必須知道,研究競(jìng)品只能讓你和它處于一個(gè)水平,他不會(huì)教給你如何開(kāi)辟新的想法,如何解決未解決的問(wèn)題。并且能從競(jìng)品分析中收獲的有效信息完全取決于你的個(gè)人能力和經(jīng)驗(yàn)。因此保持質(zhì)疑,持續(xù)思考,以創(chuàng)新意識(shí)探索更可能是UX設(shè)計(jì)師長(zhǎng)遠(yuǎn)的目標(biāo)。
NNG的十項(xiàng)UI界面啟發(fā)評(píng)估的原則
前面提到我們應(yīng)該通過(guò)標(biāo)準(zhǔn)來(lái)衡量產(chǎn)品的設(shè)計(jì),而不是個(gè)人的主觀臆測(cè)。尼爾森的啟發(fā)式評(píng)估原則就是這樣一套可實(shí)踐的評(píng)估標(biāo)準(zhǔn),共有十項(xiàng),主要涉及到用戶體驗(yàn)、可用性的評(píng)估。使用這是個(gè)標(biāo)準(zhǔn)能夠評(píng)估出大部分的可用性問(wèn)題。
1系統(tǒng)狀態(tài)的可見(jiàn)性
任何情況下都應(yīng)該顯示易于理解的界面信息和系統(tǒng)狀態(tài),以保證用戶正確執(zhí)行操作。
這其中其實(shí)不僅僅要求“可見(jiàn)”,也要求“隱藏”。因?yàn)橄到y(tǒng)界面的展示目的是使用戶易于理解其中的信息,因此要清晰展示有效信息,同時(shí)隱藏?zé)o效信息和干擾項(xiàng)。概括來(lái)說(shuō)這一項(xiàng)原則的關(guān)鍵在于視覺(jué)傳達(dá)的效率,如CTA按鈕高亮來(lái)聚焦注意力,文字鏈按鈕添加下劃線或箭頭來(lái)傳達(dá)可點(diǎn)擊的狀態(tài)等。
2.系統(tǒng)與用戶習(xí)慣的匹配
設(shè)計(jì)師應(yīng)根據(jù)目標(biāo)用戶的經(jīng)驗(yàn)習(xí)慣進(jìn)行界面設(shè)計(jì),如使用符合用戶認(rèn)知的語(yǔ)言、概念、預(yù)測(cè)用戶的常規(guī)行為方式如單手操作,減輕認(rèn)知負(fù)擔(dān),并使系統(tǒng)更易于使用。
在電腦屏幕右鍵彈出的菜單窗口恰好在鼠標(biāo)附近,因?yàn)橛脩舢?dāng)時(shí)視覺(jué)聚焦于此。移動(dòng)端閱讀類產(chǎn)品的目錄按鈕總在右下角,因?yàn)榇蟛糠秩耸褂糜沂謫问植僮鳎贗PAD端的閱讀產(chǎn)品,目錄置于左下角,因?yàn)橛脩粢话阈枰p手持設(shè)備,此時(shí)左手點(diǎn)擊目錄更符合用戶習(xí)慣。
當(dāng)然,不僅僅要考慮用戶操作習(xí)慣,更要考慮用戶的心理預(yù)期。這就要用到隱喻,例如按鈕按下后模擬出下沉的視覺(jué)效果,再如最早的閱讀類產(chǎn)品模擬真實(shí)書架,還原用戶習(xí)慣的書架瀏覽查找書籍然后閱讀的體驗(yàn)。
3.用戶控制和自由
產(chǎn)品應(yīng)該允許用戶自由控制自己的操作行為,例如可以撤銷重做,或在不同內(nèi)容間自由跳轉(zhuǎn)。
4.一致性
界面設(shè)計(jì)人員應(yīng)確保在相似的平臺(tái)之間維護(hù)圖形元素和術(shù)語(yǔ)的統(tǒng)一。例如,代表一個(gè)類別或概念的圖標(biāo)在不同的設(shè)備上使用時(shí)不應(yīng)代表不同的概念。垃圾桶應(yīng)當(dāng)代表刪除、回收等操作,而不是其他的語(yǔ)義。
5.防錯(cuò)
提前預(yù)測(cè)可能發(fā)生的錯(cuò)誤,嘗試盡量避免它們,將潛在的錯(cuò)誤保持在水平。用戶不樂(lè)意處理錯(cuò)誤同時(shí)不擅長(zhǎng)處理錯(cuò)誤,為了減少用戶遇到錯(cuò)誤的,試著消除問(wèn)題部分。例如驗(yàn)證碼部分只允許填寫數(shù)字,且自動(dòng)喚起數(shù)字鍵盤無(wú)法切換字母鍵盤,這樣就防止用戶輸入錯(cuò)誤信息格式的可能。
6.降低用戶認(rèn)知負(fù)荷
人類注意力是有限的,不要嘗試一次行給用戶灌輸過(guò)多信息,試著一次只展示一個(gè)核心功能或內(nèi)容,每個(gè)步驟只用來(lái)做一件主要的事情。目前主流的注冊(cè)流程都遵循這個(gè)原則,一次只進(jìn)行一個(gè)步驟,輸入手機(jī)號(hào)、發(fā)送驗(yàn)證碼、填寫驗(yàn)證碼、登錄成功。
7.靈活性和效率
使用更少的交互,讓用戶更便捷的完成目標(biāo),例如使用縮寫、語(yǔ)音輸入、自動(dòng)填充等技巧。目前有些產(chǎn)品通過(guò)自動(dòng)填充手機(jī)號(hào)碼來(lái)提高登錄注冊(cè)效率,或自動(dòng)填充短信驗(yàn)證碼來(lái)提高驗(yàn)證效率,這就是一種優(yōu)化交互來(lái)提高產(chǎn)品使用效率的方式。(但這種方式對(duì)權(quán)限要求較高)
8.美學(xué)原則與極簡(jiǎn)設(shè)計(jì)
減少混亂和多余的元素,不要爭(zhēng)奪用戶注意力,提供清晰可見(jiàn)的導(dǎo)航。根據(jù)海外的調(diào)研,有三到四成用戶離開(kāi)一個(gè)網(wǎng)站的原因是導(dǎo)航混亂不易理解。
9.幫助用戶識(shí)別、診斷錯(cuò)誤并恢復(fù)
采用通俗的語(yǔ)言解釋錯(cuò)誤的情況并提供解決方案或說(shuō)明情況。
10.幫助文檔
我們期望不需要說(shuō)明文檔(類似說(shuō)明書)也能讓用戶正常使用和產(chǎn)品和解決遇到的問(wèn)題。但我們?nèi)匀恍枰欢ǖ恼f(shuō)明文檔,來(lái)解釋特殊情況或常見(jiàn)問(wèn)題,以保證用戶在需要時(shí)能輕易找到解決方案。
文章來(lái)源:UI中國(guó)
彈窗其實(shí)是一個(gè)很泛的概念,幾乎所有在頁(yè)面中有彈出的行為的操作都能稱之為彈窗,其實(shí)是有點(diǎn)混亂,本文旨在梳理它們之間的關(guān)系
1,從程序上看,遞歸表現(xiàn)為自己調(diào)用自己,遞推則沒(méi)有這樣的形式。
2,遞歸是從問(wèn)題的最終目標(biāo)出發(fā),逐漸將復(fù)雜問(wèn)題化為簡(jiǎn)單問(wèn)題,最終求得問(wèn)題
是逆向的。遞推是從簡(jiǎn)單問(wèn)題出發(fā),一步步的向前發(fā)展,最終求得問(wèn)題。是正向的。
3,遞歸中,問(wèn)題的n要求是計(jì)算之前就知道的,而遞推可以在計(jì)算中確定,不要求計(jì)算前就知道n。
4,一般來(lái)說(shuō),遞推的效率高于遞歸(當(dāng)然是遞推可以計(jì)算的情況下)
最容易理解就是結(jié)合一個(gè)經(jīng)典的例子:斐波那契數(shù)列
遞歸求解
int fib(n){
return n < 2 ? 1 : fib(n-1)+f(n-2);
}
遞推求解
int fib(int n){
int fn = 1;
int fn_1 = 0;
for(int i=0; i<n; i++) {
int t = fn
fn = fn + fn_1;
fn_1 = t;
}
return fn;
}
遞推 Inductive 是從1 往 n推(未知)
遞歸Recursive是從n(未知)往1推, 再層層返回
HTML基本概況
HTML文檔基本格式
樣式如下:
注意:文章以下出現(xiàn)的“《》”書名號(hào)僅代表大于號(hào)“>”和小于號(hào)“<”。
主要包括:<!DOCTYPE>文檔類型聲明、《html》根標(biāo)記、《head》頭部標(biāo)記、《bady》主題標(biāo)記。
1.<!DOCTYPE>標(biāo)記
標(biāo)記位于文檔的最前面,用于向?yàn)g覽器說(shuō)明 當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范。
2.《html》標(biāo)記
《html》標(biāo)記位于<!DOCTYPE>標(biāo)記之后,也稱根標(biāo)記。用于告知瀏覽器其本身是一個(gè)HTML文檔?!秇tml》標(biāo)記標(biāo)志著HTML文檔的開(kāi)始,《/html》標(biāo)記標(biāo)志著HTML文檔的結(jié)束,在他們之間的是文檔的頭部和主體內(nèi)容。
3.《head》標(biāo)記
《head》標(biāo)記用于定義HTML文檔的頭部信息,也稱頭部信息。緊跟在《html》標(biāo)記之后,主要用來(lái)封存其他位于文檔頭部的標(biāo)記,一個(gè)HTML文檔只能有一對(duì)《head》標(biāo)記。
4.《body》標(biāo)記
《body》標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容,也稱主體標(biāo)記。瀏覽器中所要顯示的所有文本、圖像、音頻、和視頻等信息都必須位于《body》標(biāo)記內(nèi)。一個(gè)HTML文檔只能有一對(duì)《body》標(biāo)記。
HTML標(biāo)記
所謂標(biāo)記就是放在”<>"標(biāo)記中表示 某個(gè)功能的編碼命令,也稱為HTML標(biāo)簽或HTML元素。
1.單標(biāo)記和雙標(biāo)記
雙標(biāo)記:也稱體標(biāo)記,是指由開(kāi)始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)記?;菊Z(yǔ)法格式如下:
<標(biāo)記名>內(nèi)容</標(biāo)記名>
單標(biāo)記:也稱空標(biāo)記,是指用一個(gè)標(biāo)記符號(hào)即可完整的描述某個(gè)功能的標(biāo)記?;菊Z(yǔ)法格式如下:
<標(biāo)記名/>
2.注釋標(biāo)記
注意:注釋標(biāo)記中不能嵌套注釋標(biāo)記
標(biāo)記屬性
《h1 align = center》標(biāo)題文本《h1》其中align為屬性名,center位屬性值,表示“標(biāo)題文本”居中對(duì)齊,對(duì)于標(biāo)題標(biāo)記還可以設(shè)置文本左對(duì)齊、右對(duì)齊,對(duì)應(yīng)的屬性值是left和right。
在鑲嵌結(jié)構(gòu)中,HTML 元素總是遵循“就近原則”。
HTML文檔頭部相關(guān)標(biāo)記
1.設(shè)置頁(yè)面標(biāo)題標(biāo)記
《title》標(biāo)記用于定義HTML頁(yè)面的標(biāo)題,必須位于《head》標(biāo)記之內(nèi)。一個(gè)HTML文檔只能有一對(duì)《title》《/title》標(biāo)記,《title》《/title》之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中,基本語(yǔ)法格式如下:
《title》網(wǎng)頁(yè)標(biāo)題名稱《/title》
2.定義頁(yè)面元信息標(biāo)記《meta/》
《meta/》標(biāo)記用于定義頁(yè)面的元信息,可重復(fù)在《head》頭部標(biāo)記中,在HTML中是一個(gè)單標(biāo)記。
基本語(yǔ)法格式:
1.1《meta name=“名稱” content="值“/》
(1)設(shè)置網(wǎng)頁(yè)關(guān)鍵字
《meta name=“keywords” content="…"》
content屬性的值用于定義關(guān)鍵字的具體內(nèi)容,多個(gè)關(guān)鍵字內(nèi)容之間可以用“,”分隔。
(2)設(shè)置網(wǎng)頁(yè)描述
《meta name=“description” content=“…"》
content屬性的值是用于定義描述的具體內(nèi)容。需要注意的是網(wǎng)頁(yè)描述的文字不必過(guò)多。
(3)設(shè)置網(wǎng)頁(yè)作者
《meta name=“auther” content=“…”》
content屬性的值是用于定義具體的作者信息。
2.1《meta http-equiv=“名稱“ content=”值“
(1)設(shè)置字符集
《meta http-equiv=“Content-Type” content=“text/html;charset=utf-8“/》
(2)設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)
《meta http-equiv=“refresh” content=“10;url=http;//www.itcast.cn“/》
HTML文本控制標(biāo)記
1.標(biāo)題和段落標(biāo)記
(1)標(biāo)題標(biāo)記
HTML提供了6個(gè)等級(jí)的標(biāo)題,即《h1》《h2》《h3》《h4》《h5》《h6》.基本語(yǔ)法格式如下:
《hn align=“對(duì)齊方式“》標(biāo)題文本《/hn》
(2)段落標(biāo)記
段落的標(biāo)記就是《/p》基本語(yǔ)法格式如下:
《p align=“對(duì)齊方式”》段落文本《/p》
(3)水平線標(biāo)記《hr/》
含義 屬性值
屬性名:align,設(shè)置水平線的對(duì)齊方式 可選擇left、right、center三種值,默認(rèn)為center,居中對(duì)齊
屬性名:size,設(shè)置水平線的粗細(xì) 以像素為單位,默認(rèn)為2像素
屬性名:color,設(shè)置水平線的顏色 可用顏色名稱、十六進(jìn)制#RGB、right(r,g,b)
屬性名:width,設(shè)置水平線的寬度 可以是確定的像素值,也可以是瀏覽器窗口的百分比,默認(rèn)為100%
(4)換行標(biāo)記《br/》
使用Enter鍵換行的段落在瀏覽器中實(shí)際上并沒(méi)有換行,只是多出來(lái)了一個(gè)字符的空格,而使用換行標(biāo)記的段落卻實(shí)現(xiàn)了強(qiáng)制換行的效果。
2.文本樣式標(biāo)記
文本樣式標(biāo)記《font》,用來(lái)控制網(wǎng)頁(yè)中的字體、字號(hào)和顏色?;菊Z(yǔ)法格式如下:
《font 屬性=“屬性值”》文本內(nèi)容《/font》
屬性名 含義
face 設(shè)置文字的字體,例如微軟雅黑、黑體、宋體等
size 設(shè)置文字的大小,可以取1~7之間的整數(shù)值
color 設(shè)置文字的顏色
注意:XHTML中不贊同使用《font》標(biāo)記,可使用CSS樣式代替《font》來(lái)定義文本的字體、大小和顏色。
3.文本格式化標(biāo)記
標(biāo)記 顯示效果
《i》《/b》 字體以粗體方式顯示
《i》《/i》 字體以斜體方式顯示
《s》《/s》 字體以加刪除線方式顯示
《u》《/u》 字體以加下劃線方式顯示
4.特殊字符標(biāo)記
XSS攻擊是什么
簡(jiǎn)介
攻擊原理
例子
防御方法
簡(jiǎn)介
XSS(Cross Site Scripting, 跨站腳本攻擊)又稱是 CSS, 在 Web攻擊中比較常見(jiàn)的方式, 通過(guò)此攻擊可以控制用戶終端做一系列的惡意操作, 如 可以盜取, 篡改, 添加用戶的數(shù)據(jù)或誘導(dǎo)到釣魚網(wǎng)站等
攻擊原理
比較常見(jiàn)的方式是利用未做好過(guò)濾的參數(shù)傳入一些腳本語(yǔ)言代碼塊通常是 JavaScript, PHP, Java, ASP, Flash, ActiveX等等, 直接傳入到頁(yè)面或直接存入數(shù)據(jù)庫(kù)通過(guò)用戶瀏覽器閱讀此數(shù)據(jù)時(shí)可以修改當(dāng)前頁(yè)面的一些信息或竊取會(huì)話和 Cookie等, 這樣完成一次 XSS攻擊
例子
http://example.com/list?memo=<script>alert(“Javascript代碼塊”)</script>
http://example.com/list?memo=<strong οnclick=‘a(chǎn)lert(“驚喜不斷”)’>誘惑點(diǎn)擊語(yǔ)句</strong>
http://example.com/list?memo=<img src=’./logo.jpg’ οnclick=‘location.href=“https://blog.csdn.net/qcl108”;’/>
以上例子只是大概描述了方式, 在實(shí)際攻擊時(shí)代碼不會(huì)如此簡(jiǎn)單
防御方法
防止 XSS安全漏洞主要依靠程序員較高的編程能力和安全意識(shí)
去掉任何對(duì)遠(yuǎn)程內(nèi)容的引用 如 樣式或 JavaScript等
Cookie內(nèi)不要存重要信息為了避免 Cookie被盜, 最好 Cookie設(shè)置 HttpOnly屬性防止 JavaScript腳本讀取 Cookie信息
不要信任用戶的輸入, 必須對(duì)每一個(gè)參數(shù)值做好過(guò)濾或轉(zhuǎn)譯: (& 轉(zhuǎn)譯后 &), (< 轉(zhuǎn)譯后 <), (> 轉(zhuǎn)譯后 >), (" 轉(zhuǎn)譯后 "), (\ 轉(zhuǎn)譯后 '), (/ 轉(zhuǎn)譯后 /), (;)等
寫在前面
過(guò)去幾年中,我們的積極反應(yīng)促使我們繼續(xù)探索和分析主要設(shè)計(jì)領(lǐng)域的新趨勢(shì)。盡管大多數(shù)趨勢(shì)都是去年發(fā)生的變化,但到2020年,我們?nèi)杂幸恍┬纶厔?shì)值得追求。最重要的趨勢(shì)是與技術(shù)有關(guān)的趨勢(shì),以及它們的發(fā)展趨勢(shì),以及它們?nèi)绾斡绊懺O(shè)計(jì)領(lǐng)域。
總體趨勢(shì)
2020年的主要趨勢(shì)動(dòng)作設(shè)計(jì)與動(dòng)畫, 對(duì)于2020年,我們認(rèn)為運(yùn)動(dòng)設(shè)計(jì)是主要趨勢(shì),因?yàn)槲覀冊(cè)谒性O(shè)計(jì)領(lǐng)域都遇到動(dòng)畫,從小的交互到徽標(biāo)和UI,一切都在變化。動(dòng)畫內(nèi)容正在進(jìn)入現(xiàn)代世界,在現(xiàn)代世界中,書面內(nèi)容沒(méi)有以前那么吸引人。 動(dòng)作設(shè)計(jì)正確實(shí)施后,可使廣告系列的信息更快,更正確地傳達(dá)給受眾。
01. theQoos品牌插圖由 閔慶 02 軍團(tuán)賽季 3由 尼克Scarcella 03. 溶劑-使大麻銀行公開(kāi)賽由 BluBlu工作室 04 云服務(wù)(動(dòng)畫圖標(biāo))由 亞歷山大Baleev 05. 病毒性肝炎由 昂布爾集體 , 蒂博ZELLER , 喬納森Plesel 06 。 UXC_Design2020_Project研究通過(guò) Donerzozo
目錄
1. UI / UX
2.插圖
3.動(dòng)態(tài)圖形
4.平面設(shè)計(jì)
5.基于技術(shù)的趨勢(shì)
6.包裝
7.版式
8.趨勢(shì)工具
1. UI / UX
1.1暗模式(Android Q和iOS 13)
暗模式是2020年的新趨勢(shì),Android引入了兩種類型的暗模式,分別稱為“強(qiáng)制暗模式”和“系統(tǒng)暗模式”。微軟通過(guò)在其電子郵件應(yīng)用程序中展示其暗模式擊敗了谷歌,但谷歌迅速推出了自己的針對(duì)Android 10的Gmail應(yīng)用程序的暗版本模式。
有了介紹此更新的大公司,許多設(shè)計(jì)師將選擇在他們的應(yīng)用程序或站點(diǎn)中使用暗模式,因此希望在來(lái)年看到越來(lái)越多的暗模式。
1.2粗體顏色
在過(guò)去的兩年(到2020年)中,強(qiáng)烈的色彩已成為重要的趨勢(shì)。大膽的色彩豐富,明亮,甚至極富活力。它們可以是主要或次要顏色。
01. EMART UX / UI可再生的通過(guò) 加X(jué), 李寶藍(lán) , Sabum卞 , 熙榮, 尤金全度妍 , ? ? ?, Bongho彩 02 NSH通過(guò) 索菲婭費(fèi)多托娃 03. 埃爾多拉多賭場(chǎng)-移動(dòng)Web UI,應(yīng)用程序ü用 的Loredana PAPP-Dinea , Mihai Baldean , Milo主題 04. mmcité+網(wǎng)站由 工作室9 茲林,帕維爾Valek 05. 自動(dòng)哈克系列#21-25由 安德烈福 06. Flipd應(yīng)用程序通過(guò) ESTUDIO PUM
1.3 UI中的插圖
多年來(lái),插圖一直是設(shè)計(jì)中最強(qiáng)勁的趨勢(shì)之一。插圖是對(duì)概念的直觀解釋,可以使用戶更好地理解產(chǎn)品背后的思想。除了一些精美的插圖使這一概念獨(dú)具匠心外,它們還可以更快地傳達(dá)信息。
01. 海妖重新設(shè)計(jì),以 西爾Theyssens , 安東尼科拉德 02 浮雕-醫(yī)療項(xiàng)目由 馬丁Pankiewicz 葛爾若, 米沃什Po?arkowski 03. abuk:圖書封面設(shè)計(jì)有聲書商店到 謝爾蓋Valiukh, Tubik工作室 04.我llustration系統(tǒng)GOL到 ESTUDIO PUM 05 。 智能家居的應(yīng)用程序- IOS到 瑪麗亞Osadcha 06.斯基林貿(mào)易(skilling.com) - Loredana酒店P(guān)APP-Dinea , 米哈伊Baldean
1.4講故事
設(shè)計(jì)中的講故事是關(guān)于幫助用戶在平臺(tái)上的旅程,從而使他的體驗(yàn)盡可能輕松和流暢(在UX設(shè)計(jì)中)。一個(gè)好的故事可以幫助用戶更輕松地了解產(chǎn)品。為了講述一個(gè)故事,我們可以使用一個(gè)特別創(chuàng)建的角色,將這個(gè)角色賦予他個(gè)性,我們創(chuàng)建一個(gè)故事和一個(gè)沖突,最終由我們的產(chǎn)品(UI設(shè)計(jì))解決。這是產(chǎn)品設(shè)計(jì)中講故事的基礎(chǔ)。講故事在UI和UX中都使用,并且基于相同的原理,但實(shí)現(xiàn)方式有所不同。
01. 余吳-旅行計(jì)劃應(yīng)用由 朱莉張庭 02. UX / UI | 食品外賣應(yīng)用由 康斯坦丁Seredkin 03. COOC通過(guò) cuneyt仙
1.5動(dòng)畫圖形和微交互
正如我們所說(shuō),動(dòng)態(tài)圖形是今年的趨勢(shì),它在UI設(shè)計(jì)中也有很強(qiáng)的表現(xiàn),它為插圖增添了力量,使創(chuàng)意更易于吸收并保留在用戶的記憶中。
微交互在2018年成為第一流,但這一趨勢(shì)值得在2020年關(guān)注。它們是UI設(shè)計(jì)中極其重要的趨勢(shì),這使基本應(yīng)用程序/網(wǎng)站與非凡的應(yīng)用程序/網(wǎng)站有所不同。微交互在使用戶了解系統(tǒng)的工作原理并引導(dǎo)其獲得更好的體驗(yàn)方面起著至關(guān)重要的作用。
如果您是UI設(shè)計(jì)師,但尚未在工作中使用微交互,建議您這樣做,因?yàn)榈?020年,沒(méi)有UI的任何UI設(shè)計(jì)都將是非?;镜摹?nbsp;
01. UI / UX | 智能藥房應(yīng)用的 阿納斯塔西婭中號(hào), 謝爾蓋Nikonenko UX 02. 氣候與動(dòng)物:滅絕危機(jī)網(wǎng)站UI / UX 由 丹尼爾·譚, 達(dá)芙妮龍 03 飛素食者由 帕特里夏賴納斯 04. UKRPOSHTA。烏克蘭國(guó)家郵政局的移動(dòng)應(yīng)用程序,伊洛娜·金( Ilona Kim) 05 . Tagir Tikeev 的聾人報(bào)警應(yīng)用程序
1.6用戶界面中的視頻
到2020年,信息必須非??斓氐竭_(dá)用戶手中,最好通過(guò)視頻內(nèi)容來(lái)完成。您選擇通過(guò)動(dòng)畫或經(jīng)典電影來(lái)解釋產(chǎn)品,視頻內(nèi)容對(duì)于任何網(wǎng)站或應(yīng)用程序都是必不可少的。
1.7功能
UI設(shè)計(jì)中的一個(gè)重要部分是功能,即,根據(jù)其目的和功能選擇每個(gè)元素。許多人認(rèn)為您必須在設(shè)計(jì)和功能之間進(jìn)行選擇,但是在新技術(shù)的幫助下,這兩種技術(shù)可以很好地融合在一起并相互補(bǔ)充。設(shè)計(jì)負(fù)責(zé)引起對(duì)站點(diǎn)或應(yīng)用程序的注意,其功能使體驗(yàn)變得更輕松。它使用戶可以更快地找到信息。
01.斯基林貿(mào)易(skilling.com) - Loredana酒店帕普用餐 , 邁克爾Baldean
1.8注意細(xì)節(jié)
在UI設(shè)計(jì)中,對(duì)細(xì)節(jié)的更多關(guān)注非常重要。從按鈕,圖標(biāo),加載到導(dǎo)航到細(xì)微的細(xì)節(jié),都可以打造出非凡的設(shè)計(jì)。隨著新技術(shù)的出現(xiàn),我們?cè)赨I中必須注意的細(xì)節(jié)始終在變化。
在明年,我們將看到越來(lái)越少的按鈕,以及更多基于手勢(shì)的導(dǎo)航。例如,后退按鈕(Android的導(dǎo)航常用)在Android 10中正式消失。
01. FLYR的視覺(jué)形象和營(yíng)銷網(wǎng)站的 Ramotion
02. 鬧鐘應(yīng)用聾人通過(guò) Tagir Tikeev
1.8漸變
幾年來(lái),我們一直在談?wù)撛O(shè)計(jì)中的漸變,這種趨勢(shì)在2020年將繼續(xù)保持強(qiáng)勁,因此值得一提。新鮮的色彩是成功漸變的完美選擇。它們可以用于按鈕,圖標(biāo),插圖,甚至用于排版。
01. Wavecut - IOS應(yīng)用程序通過(guò) Eleken局 02. 抗憂郁癥的應(yīng)用程序-產(chǎn)品設(shè)計(jì)(UX / UI)由 安娜Arutiunian
03. 保羅回腸-電影音樂(lè)作曲家,制作人,DJ,Perfomer 通過(guò) 的Loredana PAPP-Dinea , 米哈伊Baldean , 米洛主題 04. ITEXIA通過(guò) 下一頁(yè)局 , 亞歷克斯海鷗 , Jegor Walowski
2.插圖
2.1角色設(shè)計(jì)
角色設(shè)計(jì)包括定義一個(gè)支持整個(gè)概念的角色。最重要的是,通過(guò)繪圖,設(shè)計(jì)師向角色灌輸了強(qiáng)烈的個(gè)性。您在應(yīng)用程序或網(wǎng)站中遇到的虛擬助手是角色設(shè)計(jì)的一個(gè)很好的例子。
01. 新微小的事情?兒童圖畫書由 Vuon插圖 , 榮阮 , 榮范 02 的Adobe X Createfulness由 邁特弗蘭基, 馬蒂厄Tarwane 03。 3D人物V2由 安東尼奧·佩蒂特Cwirko 04. Malayali由 丹尼·何塞
2.2紋理
插圖和紋理很好地結(jié)合在一起,可以創(chuàng)造出令人難忘的構(gòu)圖。從粒狀紋理到預(yù)制的筆觸,您可以找到許多想法來(lái)為插圖添加紋理,也可以手動(dòng)創(chuàng)建它們。瀏覽網(wǎng)絡(luò)時(shí),您可以找到許多可以在插圖中使用的紋理,預(yù)制筆刷和工具。
01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 飯 太稀
2.3平面插圖
在過(guò)去的幾年中,我們到處都可以看到平面插圖。它們?nèi)匀惶幱谮厔?shì)中,但現(xiàn)在有了一個(gè)新的組成部分:對(duì)每個(gè)元素應(yīng)用細(xì)線。大多數(shù)藝術(shù)家都選擇使用細(xì)的黑色筆觸,但也可以將其上色,使其陰影比所涉及的對(duì)象暗。
01. BILLY KENNY -剛剛為音樂(lè)通過(guò) 桑戈BANG 02 Babelia - Lecturas對(duì)維拉諾由 米格爾·安赫爾Camprubí 03. 拳擊貓-第一滴血由 Felms 04. COUSCOUS STUDIO | 解釋器VIDEO 由 哈立德abdelazi ?
2.4等軸測(cè)圖
是的,等軸測(cè)圖仍然在這里。它們主要可以在UI設(shè)計(jì)中找到。隨著人們對(duì)加密貨幣的興趣不斷增加,這種趨勢(shì)似乎已經(jīng)生效,但是在2019年它已經(jīng)發(fā)展了,現(xiàn)在我們?cè)谄渌麡I(yè)務(wù)領(lǐng)域中發(fā)現(xiàn)了這一趨勢(shì)。
01. 龐克市由 溫祚_ 02 FastCompany -等距號(hào)由 阿圖爾Tenczynski 03和05. 抗體亞型由 馬里奧·德?梅耶爾 04. 松弛插圖由 京張
2.5 3D
隨著效率越來(lái)越高的軟件和工具的出現(xiàn),3d渲染已逐漸發(fā)生變化。3D插圖非常受歡迎,因?yàn)榕c2D插圖不同,它提供了更逼真的圖像。
01. 游戲巴伊亞之家由 Miagui 02 天平 由 卡韋薩Patata工作室 03. 城堡毀滅者由 穆罕默德Chahin 04. Eyoo家庭3D插圖由 Baianat 05. 個(gè)人插圖第1卷由 巴勃羅·馬林 06. 一個(gè)人旅行通過(guò) 亂伊萊恩
2.6超大膽的色彩
大膽的顏色非常適合插圖。它們營(yíng)造出歡樂(lè)的氛圍,使角色脫穎而出,并在圖像背后展現(xiàn)故事。
01. 瑪莎·希肖娃(Masha Shishova)攝于莫斯科的 STRTFD咖啡壁畫 02. 作家- 利奧·夏目( Leo Natsume)的移動(dòng)互聯(lián)網(wǎng)思想 03. 可口可樂(lè)圓罐插圖由塔尼亞·雅庫(kù)諾娃( Tania Yakunova)
3.動(dòng)態(tài)圖形
3.1 3D視頻
在2020年,無(wú)法想象沒(méi)有3D設(shè)計(jì)的運(yùn)動(dòng)。設(shè)計(jì)的這個(gè)分支打開(kāi)了一個(gè)世界的大門,在這個(gè)世界中,只有想象力是極限。我們可以在廣告,電影,游戲,廣告活動(dòng)等中找到3d。
01. 龐克市由 溫祚_ , 視覺(jué)設(shè)計(jì)藝術(shù)的影響
3.2視頻+動(dòng)畫插圖(混合媒體)
拍攝的視頻,動(dòng)畫插圖以及有時(shí)是靜止的照片的結(jié)合可以產(chǎn)生非凡的效果。2d或3d插圖可創(chuàng)建令人難忘的視頻,從幾行運(yùn)動(dòng)到3D真實(shí)人物甚至是現(xiàn)實(shí)生活中不存在的復(fù)雜視覺(jué)效果。
01. Coppel /回到學(xué)校通過(guò) 大量工作室 02 PWR 由安娜·霍查, Edvina元
3.3 2D動(dòng)畫-說(shuō)明性視頻
2D動(dòng)畫專注于創(chuàng)建故事和角色,并在創(chuàng)作過(guò)程中使用矢量。當(dāng)您想要廣告系列或產(chǎn)品的說(shuō)明性視頻時(shí),2D可能是理想的選擇。在一個(gè)總是忙碌而又沒(méi)有時(shí)間閱讀的世界中,說(shuō)明性視頻對(duì)于任何網(wǎng)站都是必不可少的。
01. Freelive 由 工作室Infografika , 謝爾蓋·薩多斯基 , 阿納斯塔西婭Alterka , Arsentiy Lesnik賓館 , 尤里·阿姆斯特朗 , 阿林好, 喬治VALD ,馬克西姆Tleubaev
3.4動(dòng)畫徽標(biāo)
您已經(jīng)了解到動(dòng)畫是2020年的“必備”,為了保持競(jìng)爭(zhēng)力,我們還必須將它們集成到徽標(biāo)設(shè)計(jì)中。許多公司已開(kāi)始對(duì)其徽標(biāo)進(jìn)行動(dòng)畫處理,以引起人們的注意。這也是徽標(biāo)設(shè)計(jì)的主要趨勢(shì)。
01. 杯茶由 維多利亞伍 02 - 07. 運(yùn)動(dòng)野獸?Logomachine。動(dòng)畫標(biāo)志的 運(yùn)動(dòng)設(shè)計(jì)學(xué)院, 維克托Villamarin的, 波格丹·杜米特留, Logomachine .NET , 亞歷山大·庫(kù)茲涅佐夫, 扎克李, 丹尼斯Siurin , 斯坦尼斯拉夫·馬爾琴科, 莉扎薇塔Tsareva , Supremus Levenus , 安東·福明, 埃米爾Khafizov , 膽堿哈達(dá)
3.5混合動(dòng)畫2D和3D集成
這一趨勢(shì)不是一個(gè)新趨勢(shì),但絕對(duì)值得一提。混合動(dòng)畫就是使用為此創(chuàng)建的特定軟件將2D與3D結(jié)合在一起。
4.平面設(shè)計(jì)
4.1平面設(shè)計(jì)中的3D
盡管2d壟斷了設(shè)計(jì)的這一分支,但3d可以為最終概念添加額外的內(nèi)容。3d渲染可以采用插圖,動(dòng)畫或字體的形式。
01. 畫像由 費(fèi)爾南多·多明格斯Cózar 02. NASA | 太空時(shí)代的 工作室-JQΔ 03. 美國(guó)宇航局X BBC | 不自然世界的 工作室,JQΔ
4.2雙色
精益求精的概念可以完美描述這一趨勢(shì),設(shè)計(jì)師在其中創(chuàng)造出大膽的元素,并帶有優(yōu)雅的手感和強(qiáng)烈的對(duì)比。這種趨勢(shì)是創(chuàng)建更易于訪問(wèn)的打印的理想選擇,因?yàn)槟承┐蛴〖夹g(shù)如果顏色更多,則價(jià)格會(huì)更高。
01. 冬季公開(kāi)賽'18由 Kinoto Studio, Romina Rios, Luc Geoffroy 02 Synticate©由 斯捷潘索洛德科夫 03. TIGER在博物館由 de_form工作室, 諾拉demeczky , 的Eniko DERI 04. 刻字系列IX由 拉斐爾·塞拉
4.3光學(xué)感知藝術(shù)
歐普藝術(shù)作品是抽象的,有許多知名的黑白作品。通常,它們給觀看者留下動(dòng)感,隱藏的圖像,閃爍和振動(dòng)的圖案或腫脹或翹曲的印象。(來(lái)源:wikipedia.org)。
這種趨勢(shì)給人以動(dòng)靜的印象,但是以一種靜態(tài)的方式。如果要實(shí)現(xiàn)在印刷海報(bào)中移動(dòng)圖形的想法,這是最合適的方法。
01 02 東京電影節(jié)共混物由 梅賽德斯巴桑 , 的Adobe住 03. 海報(bào)-第一卷由 Xtian米勒
4.4平面設(shè)計(jì)中的插圖
插圖在設(shè)計(jì)的所有領(lǐng)域都非常重要,因此我們?cè)趫D形設(shè)計(jì)中也可以找到它們。2D插圖在現(xiàn)在已經(jīng)非常流行了幾年,并且即使在2020年,也將繼續(xù)成為設(shè)計(jì)師的最愛(ài)。
01. GOOSE赫爾-海報(bào)由 Ewelina鵝 02 CAT酒吧和舞廳/ 2019至 kissmiklos, Eszter薩拉
4.5動(dòng)畫海報(bào)
動(dòng)畫無(wú)處不在,我們?cè)谠O(shè)計(jì)的各個(gè)領(lǐng)域都可以找到它們,當(dāng)然它們也存在于數(shù)字海報(bào)中。動(dòng)畫可以將2D與3D混合在一起,效果令人著迷。
01 節(jié)地鐵地鐵由 Bzoing, 維吉尼貝達(dá)德 02. 失敗的Windows由 皮埃爾Kleinhouse, 轄Zivony
4.6復(fù)古合成波
復(fù)古合成波是一種在80年代出現(xiàn)的趨勢(shì),但一旦好萊塢開(kāi)始發(fā)行該十年的電影后便開(kāi)始重新出現(xiàn)。隨著《陌生人事物》系列的成功,這一潮流再次開(kāi)始流行。
01. 雞尾酒和夢(mèng)想通過(guò) Gjorgji Despodov 02. CINEMAX由 杰森巴爾巴 03.奇怪的事情(Netflix.com)
4.7瑞士設(shè)計(jì),達(dá)達(dá)主義,包豪斯
20世紀(jì)最重要的圖形設(shè)計(jì)運(yùn)動(dòng)始終是最好的設(shè)計(jì)師的靈感來(lái)源。這些樣式值得一提,因?yàn)樗鼈兪冀K是的,遵循它們所施加的規(guī)則幾乎不可能在設(shè)計(jì)中犯錯(cuò)誤??偟膩?lái)說(shuō),這些運(yùn)動(dòng)強(qiáng)調(diào)版式,無(wú)襯線字體(Helvetica于1957年在包豪斯舞臺(tái)上創(chuàng)建),幾何形狀,簡(jiǎn)單的線條,體積和顏色。
01. 瑞士海報(bào)01(版式方面)由 Mehman Mammedov 02. 黃視VOL.3通過(guò) 維奧萊納齊名
4.8大的不間斷彩色空間
大型,不間斷的色彩空間將在明年成為非常流行的趨勢(shì)。它們與大膽的字體搭配使用,可以在圖形設(shè)計(jì),產(chǎn)品設(shè)計(jì)以及ui中找到。
01. Synticate©由 斯捷潘索洛德科夫 02 Havaianas人字品牌內(nèi)容由 約翰Vernizzi 03. Kekkil?-BVB的 Kurppa Hosk
4.9超極簡(jiǎn)主義
極簡(jiǎn)主義的設(shè)計(jì)僅使用必需品,非常有限的調(diào)色板和簡(jiǎn)單的形狀來(lái)打造令人難忘的身份。放棄多余的元素,使所有設(shè)計(jì)項(xiàng)目都有目的。要?jiǎng)?chuàng)建超極簡(jiǎn)主義的設(shè)計(jì),您需要使用盡可能多的白色/負(fù)空間,簡(jiǎn)單的配色方案和一些基本的幾何形狀。
01. Heim雜志,第3頁(yè), Sasha Yaguza撰寫 02. Andrei Gheorghe- DADA-通過(guò) moodley品牌標(biāo)識(shí)發(fā)布
5.基于技術(shù)的趨勢(shì)
技術(shù)通過(guò)智能設(shè)備和嶄新的理念正在徹底改變我們的生活。這些新技術(shù)使設(shè)計(jì)師已經(jīng)開(kāi)發(fā)出進(jìn)入當(dāng)前趨勢(shì)的新功能。人工智能,機(jī)器學(xué)習(xí),虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)正在影響設(shè)計(jì)師的思維方式和創(chuàng)作方式。
5.1增強(qiáng)現(xiàn)實(shí)的移動(dòng)應(yīng)用
隨著蘋果和谷歌推出自己的AR開(kāi)發(fā)平臺(tái)ARKit和ARCore,很明顯,整個(gè)世界將面向增強(qiáng)現(xiàn)實(shí)技術(shù)。
許多大品牌已經(jīng)在其應(yīng)用程序中采用了這項(xiàng)技術(shù),而那些尚未采用這種技術(shù)的公司必須認(rèn)真考慮如何使用戶在這種新現(xiàn)實(shí)中與之交互。
有一些AR交互可用于創(chuàng)建直觀的應(yīng)用程序。第一個(gè)是將應(yīng)用程序固定在手機(jī)屏幕上時(shí)。另一個(gè)是AR UI與用戶周圍的環(huán)境相關(guān)聯(lián)時(shí)。最常用的互動(dòng)方式之一
是當(dāng)UI與對(duì)象相關(guān)并通過(guò)掃描特定項(xiàng)目觸發(fā)時(shí)。該動(dòng)作將數(shù)字動(dòng)畫連接到特殊的“標(biāo)記”。
有關(guān)更具體的AI規(guī)則,請(qǐng)閱讀Apple指南,以提供“將真實(shí)的虛擬對(duì)象與現(xiàn)實(shí)世界無(wú)縫融合的沉浸式,引人入勝的體驗(yàn)”。
5.2 AI,ML,聊天機(jī)器人和虛擬助手
聊天機(jī)器人是一種 通過(guò)聽(tīng)覺(jué)或文本方法 進(jìn)行 對(duì)話的 軟件。[1] 此類程序通常旨在令人信服地模擬人類作為對(duì)話伴侶的行為,盡管截至2019年,它們?nèi)赃h(yuǎn)遠(yuǎn)不能通過(guò) 圖靈測(cè)試。[2] 資料來(lái)源:維基百科
人們還不習(xí)慣與AI對(duì)話,因此設(shè)計(jì)師(和開(kāi)發(fā)人員)的工作很大一部分是使流程簡(jiǎn)單并建立信任。他們需要幫助人們了解系統(tǒng)可以做什么以及如何使用它。
使用AIML(人工智能標(biāo)記語(yǔ)言)設(shè)計(jì)和編寫腳本聊天機(jī)器人,是出色的UX設(shè)計(jì)人員的魔力可以發(fā)揮作用的地方。
大多數(shù)使用聊天機(jī)器人的公司都選擇說(shuō)明助手來(lái)為AI做鬼臉。以下是一些在其UI設(shè)計(jì)中使用聊天機(jī)器人的品牌:Spotify,星巴克,萬(wàn)事達(dá)卡,絲芙蘭,Lyft,必勝客。
5.3 VR
大多數(shù)人將VR與游戲行業(yè)聯(lián)系在一起是有充分理由的,但是隨著所有大型科技公司開(kāi)發(fā)VR套件和應(yīng)用程序,我們可以肯定地說(shuō),我們將發(fā)現(xiàn)使用和享受這項(xiàng)技術(shù)的新方法。VR已經(jīng)用于教育,醫(yī)療保健,旅游,房地產(chǎn)或建筑。
5.4語(yǔ)音用戶界面(VUI)
語(yǔ)音用戶界面(VUI)使用語(yǔ)音識(shí)別 來(lái)理解語(yǔ)音命令和問(wèn)題,通常是文本到語(yǔ)音以播放答復(fù),從而 使語(yǔ)音與計(jì)算機(jī)的人機(jī)交互成為可能 。語(yǔ)音命令設(shè)備(VCD)是受語(yǔ)音用戶界面控制的設(shè)備。資料來(lái)源:維基百科
去年,使用互聯(lián)網(wǎng)連接的設(shè)備的人中有40%每月至少使用一次語(yǔ)音助手,與去年相比,這一數(shù)字增加了10%。
6.產(chǎn)品設(shè)計(jì)
6.1包裝中的圖案
在過(guò)飽和的包裝市場(chǎng)中,很難創(chuàng)造出可以脫穎而出的新產(chǎn)品,因此設(shè)計(jì)師要回到根源并創(chuàng)造出使產(chǎn)品在擁擠的零售貨架上脫穎而出的樣式。幾何,花卉,浪漫或單色圖案是任何產(chǎn)品包裝的大膽選擇。
01. 飛行山羊咖啡由 妮可LaFave 02. VITA SPA皮膚 由 DWYW 03. 巧克力包裝設(shè)計(jì)由 算術(shù) 04. 100手繪無(wú)縫的圖案和形狀 的 Arseny Samolevsky
6.2包裝插圖
插圖一直是包裝設(shè)計(jì)中的重要元素。通過(guò)他們,我們可以講述一個(gè)故事,使目標(biāo)受眾可以更好地理解該概念背后的歷史。平面插圖已經(jīng)存在了數(shù)十年,并且很可能會(huì)一直處于流行趨勢(shì)。
01. 布里格斯原件由 熙宰金 02 天鵝絨咖啡杯 由 安東Malishev, 呵呵卡羅拉 03. 廢物不包括廚房-品牌打造的 嘗試和真正的DESIG ň04 家,甜蜜的壽司兒童 通過(guò) 精明的機(jī)構(gòu), 馬里亞納星火 05. Cerveza塔Maleante通過(guò) Antonay
6.3留白
極簡(jiǎn)主義是設(shè)計(jì)的基本原則,而今天它又是新事物。它放棄了設(shè)計(jì)中不需要的所有內(nèi)容,并用負(fù)空間代替了它。這種趨勢(shì)將功能帶到了最前沿,并專注于簡(jiǎn)潔的設(shè)計(jì),使版式脫穎而出。
01. 香味精油 由Y u型簡(jiǎn)林, 黃惡嗯-祥 , 智泰蓮 02. 重塑品牌理念,為BodriPincészet由 克里斯托夫Gáthi
6.4單色和兩種顏色
首先,在調(diào)色板中僅使用1或2個(gè)色調(diào)似乎有些限制,但它們可以創(chuàng)建非常強(qiáng)烈的視覺(jué)識(shí)別感。僅使用一種或兩種顏色,就可以保持簡(jiǎn)約的外觀,放棄所有多余的東西。結(jié)果是精美,高雅的產(chǎn)品令人賞心悅目。
01. Zerbet冰糕由 才林賈爾斯 02. 貝利啤酒 由 埃德大廳 悉尼, 葉卡捷琳娜Leontyeva , 波阿斯孫
6.5大膽的顏色
大膽的顏色和漸變?nèi)匀皇欠浅?qiáng)烈的趨勢(shì),這種趨勢(shì)將在2020年持續(xù)。使用這些顏色,您可以創(chuàng)建令人難忘的產(chǎn)品。
01. 極簡(jiǎn)主義和享樂(lè)主義:Fabula Branding 重新設(shè)計(jì)了 千年品牌
02 紋身商城 通過(guò) Openmint工作室, 葉卡捷琳娜Teterkino , 煙, 葉戈?duì)朘umachov
03. Organic by Larissa Kendrik 和 加布里埃爾· 沙茨曼
04. VIZOU -老花眼鏡 的 工作室開(kāi)頭語(yǔ), 阿克塞爾杜馬克
05. 包裝的調(diào)味開(kāi)心果由 米拉Katagarova
6.6注意細(xì)節(jié)(受新藝術(shù)風(fēng)格啟發(fā))
注重細(xì)節(jié)的包裝比以往任何時(shí)候都更受歡迎。設(shè)計(jì)師選擇這種趨勢(shì)是因?yàn)樗x予了產(chǎn)品真實(shí)性。這種趨勢(shì)使我們以現(xiàn)代方式思考經(jīng)典。
01. HYWILDE由 查德·邁克爾·工作室 02 AMSTEL KARGO IPA通過(guò) 卡帕羅設(shè)計(jì)船員
03. 大島咖啡烘焙-咖啡咬傷的 農(nóng)場(chǎng)設(shè)計(jì)
6.7包裝中的講故事
到2020年,品牌將不得不重新考慮其產(chǎn)品和包裝。品牌必須講述一個(gè)故事,以幫助客戶體驗(yàn)產(chǎn)品的本質(zhì)。這可以通過(guò)為包裝創(chuàng)建視覺(jué)和敘述身份來(lái)實(shí)現(xiàn)。
01. 喙接通過(guò) 骨干品牌推廣 02. Colorea用t 骨干品牌
7.版式
7.1粗體印刷
粗體印刷術(shù)是設(shè)計(jì)中的重要趨勢(shì),它取代了圖像作為主要元素。勇敢的排版可以在網(wǎng)頁(yè)設(shè)計(jì)和圖形設(shè)計(jì)中發(fā)揮作用。
01. 埃里克·林格(Eirik Lyng),作者: 埃里克· 赫斯特雷(ErikHerrstr?m); 02. 包豪斯(Bauhaus_100)(x3),作者: BunkerType(JesúsMorentin)
03. UCCA當(dāng)代藝術(shù)中心北京由 布魯斯·莫設(shè)計(jì)(BMD) ,耶勒馬雷夏爾
7.2小寫
越來(lái)越多的應(yīng)用程序使用完全小寫的文本,非常易于閱讀,并且完美地融入了簡(jiǎn)約和現(xiàn)代的設(shè)計(jì)中。在明年,我們絕對(duì)必須關(guān)注這一趨勢(shì)。
01. Autea品牌和網(wǎng)頁(yè)設(shè)計(jì)由 米哈爾Markiewicz 02 山大食品公司 CI由 臣藤田/ tegusu公司 03. Aquality品牌的 哈坎Fidan的
7.3自定義字體
盡管自定義字體沒(méi)有什么新意,但我們將看到這種趨勢(shì)越來(lái)越多地出現(xiàn)在設(shè)計(jì)中,尤其是在徽標(biāo)和海報(bào)中。這種做法在大品牌中更常見(jiàn),因?yàn)樯a(chǎn)專用字體可能會(huì)非常昂貴,但是設(shè)計(jì)人員可以對(duì)現(xiàn)有字體進(jìn)行少量調(diào)整,結(jié)果可能會(huì)非常獨(dú)特。
01. Think8全球研究院通過(guò) 勃洛克設(shè)計(jì) 02 ZINEZ?//設(shè)計(jì)周期由 芭芭拉·卡托納 , 媒體與設(shè)計(jì)系埃格爾 03. 式設(shè)計(jì)'19通過(guò) TRüF創(chuàng)意 04. Cako字體由 維奧萊納齊名
7.4動(dòng)力學(xué)排版
就像我們說(shuō)的那樣,動(dòng)畫在設(shè)計(jì)中無(wú)處不在,因此在排版中也很常見(jiàn)。動(dòng)態(tài)字體使用小的和簡(jiǎn)單的交互作用來(lái)移動(dòng)和移動(dòng)屏幕上的字體。這種簡(jiǎn)單的技術(shù)可以處理文本并創(chuàng)建最終產(chǎn)品,該產(chǎn)品保留在查看器的內(nèi)存中。
01和02. Grafika , Gimmick Studio設(shè)計(jì) 。03&04. 增強(qiáng)現(xiàn)實(shí)與動(dòng)作排版,作者: Alex Slobzheninov
7.5堆疊字體
堆疊文本可能是一種現(xiàn)代化的解決方案,可以吸引您注意基本信息。我們可以在網(wǎng)頁(yè)設(shè)計(jì),應(yīng)用程序設(shè)計(jì)和圖形設(shè)計(jì)中看到這種趨勢(shì)。
01. L'嗡通過(guò) Atipus巴塞羅那 02 期刊由 杰瑪馬奧尼 03. 海報(bào)收藏| VOL.8由 羅馬發(fā)表 04. SMLXL由 梅麗莎Baillache, 墊新郎, 杰森·利特爾
8.趨勢(shì)工具
8.1 Adobe Spark
Adobe Spark是Adobe Systems 開(kāi)發(fā)的 用于移動(dòng)和Web的媒體創(chuàng)建應(yīng)用程序的集成套件 。[1] 它包含三個(gè)獨(dú)立的設(shè)計(jì)應(yīng)用程序: Spark Page, Spark Post和 Spark Video。(來(lái)源:WIkipedia)
他的免費(fèi)Adobe Spark Web應(yīng)用程序可與Spark Page,Spark Post和Spark Video iOS移動(dòng)應(yīng)用程序同步 ,從而使用戶可以從任何設(shè)備創(chuàng)建,編輯和共享其視覺(jué)故事。
[3] 這三個(gè)設(shè)計(jì)應(yīng)用程序允許用戶創(chuàng)建和設(shè)計(jì)可用于企業(yè),教育,社交媒體營(yíng)銷人員等的視覺(jué)內(nèi)容。[4] Spark Gallery突出顯示了使用該應(yīng)用程序的人們所做的不同項(xiàng)目。使用這三個(gè)應(yīng)用程序時(shí),用戶可以導(dǎo)入圖片或搜索圖片。
8.2繁殖
Procreate是 由Savage Interactive針對(duì)iOS開(kāi)發(fā)和發(fā)布的 用于 數(shù)字繪畫的 光柵圖形編輯器 應(yīng)用程序。針對(duì)iPad的藝術(shù)可能性而設(shè)計(jì) ,并且適合從初學(xué)者到專業(yè)人士的藝術(shù)家。
它提供130多種逼真的畫筆,多層, 混合模式, 蒙版, 過(guò)程視頻的4K分辨率導(dǎo)出 , 自動(dòng)保存以及許多其他經(jīng)典和原始的 數(shù)字藝術(shù) 工具。除光柵圖形外,該軟件的編輯和渲染文本和矢量圖形能力有限 。(來(lái)源:Wikipedia)Procreate是2018年App Store上最暢銷的應(yīng)用程序。
8.3 Adobe XD
Adobe XD是 由Adobe Inc開(kāi)發(fā)和發(fā)布的 用于 Web應(yīng)用程序 和 移動(dòng)應(yīng)用程序的基于矢量的 用戶體驗(yàn)設(shè)計(jì)工具。它適用于 macOS 和 Windows,盡管有適用于iOS 和 Android的版本 可幫助直接在移動(dòng)設(shè)備上預(yù)覽工作結(jié)果。XD支持 網(wǎng)站線框圖,并創(chuàng)建簡(jiǎn)單的交互式點(diǎn)擊型原型。(來(lái)源:維基百科)
作者授權(quán)
總結(jié)
每一年每一個(gè)時(shí)間段都會(huì)有新的趨勢(shì),學(xué)會(huì)的辯證的眼光去看待便是最大的智慧。世界一直都在變,趨勢(shì)也是。保持學(xué)習(xí)和探索的心不變就是對(duì)自己熱愛(ài)的事情最好的回應(yīng),念念不忘,必有回響。共勉!
轉(zhuǎn)自:站酷-木七木七
Chartistic是一款通過(guò)交互快速編輯數(shù)據(jù)可視化圖表的app。本文通過(guò)對(duì)“Chartistic”app進(jìn)行產(chǎn)品體驗(yàn)與分析后產(chǎn)出的PRD文檔。該文檔由幾個(gè)板塊組成:全局說(shuō)明、產(chǎn)品說(shuō)明、頁(yè)面詳細(xì)功能說(shuō)明等。
一、文檔綜述
1.1文檔輸出環(huán)境
1.2產(chǎn)品簡(jiǎn)介
1.3產(chǎn)品總結(jié)
二、全局說(shuō)明
2.1鍵盤說(shuō)明
2.2按鈕說(shuō)明
2.3默認(rèn)設(shè)置
2.4限制設(shè)定
2.5頁(yè)面交互
三、產(chǎn)品說(shuō)明
3.1產(chǎn)品操作流程
3.2產(chǎn)品功能導(dǎo)圖
3.3頁(yè)面流程
四、頁(yè)面詳細(xì)功能說(shuō)明
4.1歡迎頁(yè)
4.2首頁(yè)
4.3圖表編輯頁(yè)
4.3.1柱狀圖/折線圖/面積圖/餅圖圖表編輯頁(yè)
4.3.2智能剪貼畫編輯頁(yè)
4.4X軸Y軸編輯頁(yè)(柱狀圖/折線圖/面積圖/餅圖)
4.5設(shè)置編輯頁(yè)
4.5.1柱狀圖/折線圖/面積圖設(shè)置編輯頁(yè)
4.5.2餅圖設(shè)置編輯頁(yè)
4.5.3智能剪貼畫設(shè)置編輯頁(yè)
4.6圖表完成頁(yè)
五、總結(jié)
Chartistic,一款備受好評(píng)的小眾數(shù)據(jù)可視化app。
在這個(gè)到處都充斥著數(shù)據(jù),以數(shù)據(jù)為導(dǎo)向的年代,日常辦公中隨時(shí)隨地都有可能需要對(duì)或多或少的數(shù)據(jù)進(jìn)行可視化處理來(lái)幫助分析與演示。
雖然有很多的功能強(qiáng)大的工具可以創(chuàng)建圖表,但是卻沒(méi)有多少工具可以使創(chuàng)建更簡(jiǎn)單、更具有交互性。
Chartistic無(wú)需登錄,打開(kāi)即用,在移動(dòng)端以交互的方式編輯數(shù)據(jù),一分鐘內(nèi)創(chuàng)建漂亮的柱狀圖、折線圖、區(qū)域圖和餅狀圖。將圖表以圖像的形式導(dǎo)出,并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!
交互便捷,操作簡(jiǎn)單的它已在43個(gè)國(guó)家/地區(qū)投入使用。在新加坡、泰國(guó)、菲律賓和越南,名列App Store的年度十佳應(yīng)用榜單。上線起至今共入選 App Store 精品推薦 9 次,下載量累計(jì)24萬(wàn)次 。
目標(biāo)用戶:需要對(duì)少量數(shù)據(jù)迅速進(jìn)行可視化處理的辦公人群
產(chǎn)品定義:快速、簡(jiǎn)單的移動(dòng)端數(shù)據(jù)可視化工具應(yīng)用,導(dǎo)出圖表作為PPT等演示工具的補(bǔ)充。
產(chǎn)品特征:
在不同頁(yè)面需要輸入編輯時(shí),對(duì)應(yīng)的彈出鍵盤的類型,數(shù)字鍵盤只能輸入正數(shù)
圖表編輯頁(yè)面:
X軸Y軸編輯頁(yè)面:
設(shè)置編輯頁(yè)面:
新建圖表時(shí)
圖一
圖二
圖三
圖四
頁(yè)面名稱:首頁(yè)
入口:歡迎頁(yè)后自動(dòng)跳入
頁(yè)面說(shuō)明:
序號(hào)1:點(diǎn)擊出現(xiàn)其他鏈接彈層,首頁(yè)頁(yè)面置于底部并虛化(如圖三)
序號(hào)2:點(diǎn)擊出現(xiàn)新建圖表類型彈層,首頁(yè)頁(yè)面置于底部并虛化(如圖二)
序號(hào)3:
序號(hào)4,5:點(diǎn)擊關(guān)閉彈屏,首頁(yè)頁(yè)面置于頂部并解除虛化
序號(hào)6:點(diǎn)擊快捷處理按鈕消失,回到首頁(yè),在首頁(yè)圖表列表第一個(gè)位置添加復(fù)制的圖表
序號(hào)7:點(diǎn)擊彈屏關(guān)閉,快捷按鈕消失,回到首頁(yè),該圖表刪除,列表中該圖表后面的圖表前移填充空缺位置
4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁(yè)
圖5
圖6
圖7
圖8
圖9
頁(yè)面名稱:柱狀圖/折線圖/面積圖/餅圖圖表編輯頁(yè)
入口:
頁(yè)面說(shuō)明:
主頁(yè)面:左滑展開(kāi)展開(kāi)設(shè)置編輯頁(yè)面,下滑展開(kāi)X軸Y軸編輯頁(yè)面
序號(hào)1:點(diǎn)擊返回首頁(yè)
序號(hào)2:點(diǎn)擊進(jìn)入圖表完成頁(yè)面
序號(hào)3:點(diǎn)擊圖表類型切換為折線圖,數(shù)值背景等設(shè)置不變,折線顏色為柱狀圖同一風(fēng)格的單個(gè)顏色(如圖6)
序號(hào)4:點(diǎn)擊圖表類型切換為面積圖,數(shù)值背景等設(shè)置不變,折線與面積顏色為柱狀圖同一風(fēng)格的單個(gè)顏色,折線的顏色比面積顏色深一個(gè)色號(hào)(如圖7)
序號(hào)5:點(diǎn)擊圖表類型切換為餅圖,數(shù)值背景等設(shè)置不變,配色也不變(如圖8)
序號(hào)6:?jiǎn)螕舁C切換圖表顏色風(fēng)格
序號(hào)7,17,18:按住上滑/下滑–修改圓點(diǎn)高度,上方或者下方的對(duì)應(yīng)數(shù)值一起修改,左側(cè)提示目前高度對(duì)應(yīng)的數(shù)值,修改值在設(shè)定的Y軸最大值與最小值之間
序號(hào)8,9,10,12:輸入值之前按鈕為灰色,輸入后字體顏色由背景設(shè)置決定;點(diǎn)擊展開(kāi)X軸Y軸編輯頁(yè)面
序號(hào)11:
序號(hào)13:點(diǎn)擊后小圈即序號(hào)7變成刪除符號(hào)如圖9,單擊刪除符號(hào)刪除該組數(shù)據(jù),當(dāng)刪除至只剩一組數(shù)據(jù)時(shí)刪除符號(hào)變回小圈,不可再刪除
序號(hào)14:點(diǎn)擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設(shè)置按鈕,隱藏后圖表變?yōu)樽笙?,單擊后以上按鈕出現(xiàn)
序號(hào)15:點(diǎn)擊展開(kāi)設(shè)置編輯頁(yè)面
序號(hào)16:輸入值之前按鈕為灰色,輸入后字體顏色由背景設(shè)置決定;點(diǎn)擊輸入標(biāo)題
序號(hào)19:點(diǎn)擊餅圖需要修改占比的目標(biāo)扇形后出現(xiàn)兩個(gè)半圓形按鈕,按住按鈕滑動(dòng)分隔線調(diào)整目標(biāo)扇形角度,按鈕相鄰一邊的扇形同時(shí)被增大/減小角度,餅圖中間提示目前目標(biāo)扇形角度對(duì)應(yīng)的占比
4.3.2 智能剪貼畫編輯頁(yè)
頁(yè)面名稱:智能剪貼畫編輯頁(yè)
入口:
頁(yè)面說(shuō)明:
主頁(yè)面:左滑展開(kāi)展開(kāi)設(shè)置編輯頁(yè)面
序號(hào)1:按住上下滑動(dòng)更改有色部分的高度,左側(cè)占比數(shù)值一起更改,更改范圍為0%-100%
頁(yè)面名稱:X軸Y軸編輯頁(yè)面
入口:
頁(yè)面說(shuō)明:
餅圖沒(méi)有編輯X軸名稱按鈕與編輯Y軸名稱按鈕
序號(hào)1:點(diǎn)擊保留編輯結(jié)果,收起X軸Y軸編輯頁(yè)面,回到圖表編輯頁(yè)
序號(hào)2:點(diǎn)擊屏幕下半部分或者從下半部分上滑,收起X軸Y軸編輯頁(yè)面,回到圖表編輯頁(yè)
序號(hào)3:
序號(hào)4:
序號(hào)5:點(diǎn)擊編輯文本框與數(shù)值框之間出現(xiàn)小刪除按鈕即序號(hào)4,點(diǎn)擊刪除對(duì)應(yīng)的該組數(shù)據(jù)
異常提示:
頁(yè)面名稱:設(shè)置編輯頁(yè)面
入口:
4.5.1 柱狀圖/折線圖/面積圖設(shè)置編輯頁(yè)
標(biāo)題設(shè)置功能
頁(yè)面說(shuō)明:
序號(hào)1:屏幕左側(cè)頁(yè)面點(diǎn)擊或者右滑返回圖表編輯頁(yè)
值設(shè)置功能
頁(yè)面說(shuō)明:
序號(hào)2:最大值最高可設(shè)置為10000,最大值設(shè)置的值需要大于最小值,僅可編輯為整數(shù)
序號(hào)3:最小值最小可設(shè)置為0,最小值設(shè)置的值需要小于最大值,僅可編輯為整數(shù)
異常提示:
網(wǎng)格設(shè)置功能
頁(yè)面說(shuō)明:
序號(hào)4:可見(jiàn)性為關(guān)閉狀態(tài)時(shí),行數(shù)與每一間隔的值無(wú)法選擇與編輯
序號(hào)5:初始默認(rèn)值為10,可編輯范圍為【0~15】,僅可編輯為整數(shù)
序號(hào)6:對(duì)齊條開(kāi)啟狀態(tài)見(jiàn)圖,在圖表編輯頁(yè)面滑動(dòng)所編輯的數(shù)據(jù)對(duì)應(yīng)到Y(jié)軸上的數(shù)值(圖中的0、100、200、300等數(shù)值)時(shí)停頓一下,左側(cè)提示所對(duì)應(yīng)的數(shù)值;滑動(dòng)編輯的數(shù)值(如323、546等)不在Y軸上時(shí),不顯示左側(cè)的數(shù)值提示
序號(hào)7:簡(jiǎn)單圖表僅保留圖表主體形狀,如上圖
序號(hào)8:初始默認(rèn)值為100,僅可編輯為整數(shù),每一間隔的值需要在 【0.07*(最大值-最小值)~ (最大值-最小值)】這個(gè)范圍內(nèi),考慮到(最大值-最小值)/輸入的間隔值 得到的行數(shù)有可能不是整數(shù)的問(wèn)題,實(shí)際顯示的行數(shù)為(最大值-最小值)/輸入的間隔值四舍五入取整后的行數(shù)
異常提示:
邊框設(shè)置功能
圖例設(shè)置功能
背景設(shè)置功能
頁(yè)面說(shuō)明:
序號(hào)10:主題文字注釋
序號(hào)11:四種主題單選,設(shè)計(jì)出圖標(biāo)作為按鈕外觀,下方會(huì)出現(xiàn)對(duì)應(yīng)文字注釋,所選擇的背景按鈕外層加一圈黑色示意
圖表樣式設(shè)置功能
頁(yè)面說(shuō)明:
序號(hào)9:柱狀圖/折線圖/面積圖樣式說(shuō)明如圖
4.5.2 餅圖設(shè)置編輯頁(yè)
標(biāo)題設(shè)置功能
頁(yè)面說(shuō)明:
序號(hào)1:屏幕左側(cè)頁(yè)面點(diǎn)擊或者右滑返回圖表編輯頁(yè)
表格設(shè)置功能
頁(yè)面說(shuō)明:
豎向表僅可選擇左對(duì)齊或者右對(duì)齊,橫向表可選擇左對(duì)齊/右對(duì)齊/居中。
值設(shè)置功能
背景設(shè)置功能(同4.5.1柱狀圖/折線圖/面積圖)
圖表樣式設(shè)置功能
頁(yè)面說(shuō)明:
餅圖樣式說(shuō)明如圖
4.5.3 智能剪貼畫設(shè)置編輯頁(yè)
圖像搜索功能
頁(yè)面說(shuō)明:
序號(hào)1:僅可輸入英文名稱搜索,無(wú)編輯內(nèi)容時(shí)文本框內(nèi)容為Search,字體淺灰色,輸入內(nèi)容后字體變?yōu)楹谏?
異常提示:
當(dāng)移動(dòng)端無(wú)網(wǎng)絡(luò)時(shí),搜索框下方“在線搜索圖像”更改為“連接中斷”,搜索框點(diǎn)擊無(wú)反應(yīng)
標(biāo)題設(shè)置功能
值設(shè)置功能
背景設(shè)置功能(同4.5.1柱狀圖/折線圖/面積圖)
圖表樣式設(shè)置功能
頁(yè)面說(shuō)明:
智能剪貼畫樣式說(shuō)明如圖
頁(yè)面名稱:圖表完成頁(yè)
入口:
頁(yè)面說(shuō)明:
序號(hào)1:點(diǎn)擊返回首頁(yè)
序號(hào)2:點(diǎn)擊進(jìn)入圖表編輯頁(yè)面
序號(hào)3:點(diǎn)擊導(dǎo)出保存到本地或者分享
以上便是我本次倒推撰寫的Chartistic的產(chǎn)品需求文檔,格式參考倒推“潮汐”APP的產(chǎn)品需求文檔。
這款A(yù)pp是一款很實(shí)用的手機(jī)應(yīng)用,交互很有特色,因?yàn)檫^(guò)于追求操作的簡(jiǎn)便,導(dǎo)致功能局限比較大,對(duì)于App的未來(lái)優(yōu)化方向,筆者認(rèn)為可以在以下幾個(gè)方向嘗試:
這是本人第一次撰寫的產(chǎn)品需求文檔,一定有諸多不足,希望各位前輩不吝賜教,感激不盡!希望可以成為一名產(chǎn)品經(jīng)理,創(chuàng)造出對(duì)用戶有價(jià)值的產(chǎn)品,不求做改變世界的產(chǎn)品,只求改變自己,改變眼前。
文章來(lái)源:人人都是產(chǎn)品經(jīng)理
大部分交互設(shè)計(jì)師接到需求后,就開(kāi)始分析下競(jìng)品、然后結(jié)合自己產(chǎn)品和自己的想法,就著手交互原型制作了,在這樣一個(gè)設(shè)計(jì)流程中,交互設(shè)計(jì)師很難有體系化的思考。
有沒(méi)有一套體系化的設(shè)計(jì)思路,讓交互設(shè)計(jì)師做出的方案又專業(yè)、又全面、又經(jīng)得起挑戰(zhàn)和用戶檢驗(yàn)的設(shè)計(jì)方案呢?
本文是我梳理的一套體系化設(shè)計(jì)流程與思路,希望可以幫到大家。體系化設(shè)計(jì)思路大綱如下:
作為一個(gè)交互設(shè)計(jì)師。在我們接到需求之后,首先需要弄清楚的是產(chǎn)生需求的業(yè)務(wù)背景是什么。其次是基于業(yè)務(wù)背景了解產(chǎn)品的目標(biāo)是什么。最后弄清楚產(chǎn)品的用戶人群有哪些,用戶目標(biāo)是哪些。
交互設(shè)計(jì)師通過(guò)從產(chǎn)品經(jīng)理或者其他需求發(fā)起方那里了解需求生產(chǎn)的業(yè)務(wù)背景,了解為什么要做這個(gè)需求。在了解清楚之后,追溯需求最原始本質(zhì)。
在我們實(shí)際工作的大部分情況下,大部分產(chǎn)品經(jīng)理不會(huì)在需求文檔中將業(yè)務(wù)背景寫清晰,這時(shí)候我們交互設(shè)計(jì)師就可以將業(yè)務(wù)背景在交互文檔中輸出,并清晰的展示出來(lái)。
1. 業(yè)務(wù)背景是什么?
業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個(gè)功能。通過(guò)做這個(gè)功能,對(duì)業(yè)務(wù)有什么幫助。通過(guò)業(yè)務(wù)背景,我們可以推演出業(yè)務(wù)訴求,并得到對(duì)應(yīng)的產(chǎn)品目標(biāo)。
2. 產(chǎn)品目標(biāo)是什么?
產(chǎn)品目標(biāo)是產(chǎn)品能得到什么樣的結(jié)果,對(duì)產(chǎn)品來(lái)說(shuō)可以獲得什么樣的好處。所以在交互文檔的設(shè)計(jì)中要重點(diǎn)體現(xiàn)出產(chǎn)品目標(biāo)。通過(guò)明確產(chǎn)品目標(biāo),可以清晰的指導(dǎo)我們做交互方案。
3. 用戶人群是哪些?
用戶人群主要是通過(guò)我們對(duì)現(xiàn)有產(chǎn)品的用戶畫像得到,并推算出使用這個(gè)需求的用戶人群是哪一類人,通過(guò)明確的用戶人群,這樣我們?cè)谧鲈O(shè)計(jì)過(guò)程中,可以很清晰知道這個(gè)需求為誰(shuí)而做。
4. 用戶目標(biāo)是什么?
用戶希望通過(guò)使用這個(gè)功能達(dá)到什么樣的好處或目的。
5. 設(shè)計(jì)目標(biāo)是什么?
通過(guò)業(yè)務(wù)背景、用戶人群、用戶目標(biāo)和產(chǎn)品目標(biāo)拆解出對(duì)應(yīng)的設(shè)計(jì)目標(biāo)。
以登錄注冊(cè)為例。業(yè)務(wù)背景是目前產(chǎn)品的登錄和注冊(cè)的效果不理想。對(duì)應(yīng)的用戶人群分為兩類,分別為新用戶的注冊(cè)流程和老用戶的登錄流程。用戶目標(biāo)是方便快速的完成登錄注冊(cè)流程,越簡(jiǎn)單越快越好。產(chǎn)品目標(biāo)是提升登錄注冊(cè)的完成率。
設(shè)計(jì)目標(biāo)是拆解,如何能提高登錄注冊(cè)的完成率。那么設(shè)計(jì)師可以拿到登錄注冊(cè)的完成流程,看看登錄注冊(cè)過(guò)程中,哪些步驟轉(zhuǎn)化率低,那么對(duì)轉(zhuǎn)化率低的地方進(jìn)行設(shè)計(jì)優(yōu)化。
目標(biāo)拆解就是對(duì)頁(yè)面進(jìn)行數(shù)據(jù)提升具體優(yōu)化方案,例如文案問(wèn)題、視覺(jué)布局問(wèn)題、交互路徑問(wèn)題等。
對(duì)于設(shè)計(jì)師來(lái)說(shuō)設(shè)計(jì)方法有很多種。例如常見(jiàn)的有:目標(biāo)導(dǎo)向、數(shù)據(jù)分析、用戶調(diào)研、設(shè)計(jì)走查、場(chǎng)景化設(shè)計(jì)、用戶體驗(yàn)地圖、競(jìng)品分析等。
在做設(shè)計(jì)方案過(guò)程中,一般不會(huì)將上述的方法全部用到,更多的是使用其中的一種或者幾種混合使用。
根據(jù)具體的需求選擇適合的方法。例如在做登錄注冊(cè)這個(gè)優(yōu)化流程方案過(guò)程中,可以通過(guò)數(shù)據(jù)分析找到轉(zhuǎn)化率低和設(shè)計(jì)走查思考如何提升數(shù)據(jù),就可以完成設(shè)計(jì)目標(biāo)。
1. 不同場(chǎng)景梳理
我們需要以場(chǎng)景的思維做場(chǎng)景分析,通過(guò)場(chǎng)景分析就可以清晰地描述這些場(chǎng)景,從而確定用戶的需求,并在這基礎(chǔ)上用交互方案滿足需求。
舉個(gè)栗子,產(chǎn)品提出一個(gè)需求:應(yīng)用添加「商品列表按照價(jià)格從低到高排序」的功能,這還是老思維,是在「定義我們的應(yīng)用」;
而如果從場(chǎng)景的角度來(lái)思考,用戶搜索某種商品,在列表頁(yè)會(huì)列出一長(zhǎng)串商品,而用戶此時(shí)只想快速找到符合他的要求的那一個(gè);而有些用戶在挑選的時(shí)候,會(huì)需要買價(jià)格便宜的,此時(shí)排序功能就是用戶的需求。
這樣從場(chǎng)景來(lái)理解,會(huì)更清楚地理解需求發(fā)生的環(huán)境,便于做出好設(shè)計(jì)。
比如,順著排序的場(chǎng)景,可以進(jìn)一步想:有這樣需求的用戶在我們的應(yīng)用里多嗎?如果多,那么意味著用戶經(jīng)常需要進(jìn)行排序的操作,所以在設(shè)計(jì)的時(shí)候,可以把排序的入口放的明顯一點(diǎn),好操作一點(diǎn),方便用戶輕松地進(jìn)行排序。
對(duì)于使用滴滴快車的用戶,整個(gè)流程包含三個(gè)階段,分別為上車前,坐車中和下車后。每個(gè)階段都存在多種用戶使用場(chǎng)景。
2. 不同角色用戶
有時(shí)候需要考慮不同角色的用戶,例如后臺(tái)系統(tǒng),需要同時(shí)考慮普通用戶、管理員角色和超級(jí)管理員。
三個(gè)不同角色的使用權(quán)限也是完全不同的。權(quán)限:普通用戶 < 管理員角色 <超級(jí)管理員。三種角色的主操作流程也是不一樣的,在設(shè)計(jì)過(guò)程中需要差異化設(shè)計(jì)。
3. 設(shè)計(jì)不同流程
明確設(shè)計(jì)目標(biāo)、設(shè)計(jì)方法確定、弄清楚不同場(chǎng)景。接下來(lái)就是設(shè)計(jì)不同的流程。
一般先設(shè)計(jì)功能入口流程,接下來(lái)就是主流程和支線流程。最后才設(shè)計(jì)異常流程。
4. 方案細(xì)化和走查
在涉及到異常場(chǎng)景,且可以全局性復(fù)用的情況,則只需要全局性組件說(shuō)明即可,不用每個(gè)流程都展示其異常場(chǎng)景組件或者頁(yè)面。
全局組件指的是整個(gè)產(chǎn)品通用的組件,例如全局?jǐn)嗑W(wǎng),操作成功、操作失敗、加載、空數(shù)據(jù)界面,404 等
全局?jǐn)嗑W(wǎng):一般是在首頁(yè)使用 tips 提示。用戶在其他界面點(diǎn)擊操作時(shí),也會(huì)出現(xiàn) toast 反饋提示用戶。也有一些 app 在用戶進(jìn)入后出現(xiàn)對(duì)話框提示用戶網(wǎng)絡(luò)異常。相對(duì)于對(duì)話框,使用 tips 對(duì)用戶的干擾度更小。
操作成功:一般操作成功都是根據(jù)具體的使用場(chǎng)景出現(xiàn)對(duì)應(yīng)的提示。
操作失敗:異常情況導(dǎo)致操作失敗,這時(shí)需要統(tǒng)一的提示,通常使用 toast,也有一些使用對(duì)話框強(qiáng)提示用戶。
加載:涉及到全局加載和局部加載,全局加載在設(shè)計(jì)中要統(tǒng)一說(shuō)明,例如上一個(gè)界面點(diǎn)擊進(jìn)入下一個(gè)界面,使用的全局加載就需要說(shuō)明。如果是一些小場(chǎng)景的加載,那么需要特殊說(shuō)明。例如上拉加載,下拉加載,局部小區(qū)域加載等。
空數(shù)據(jù)類型一共有三類:
通過(guò)核心指標(biāo)判斷設(shè)計(jì)方案是否符合預(yù)期,以此驗(yàn)證設(shè)計(jì)方案是否成功,并為后續(xù)產(chǎn)品的迭代優(yōu)化做依據(jù)。
1. 關(guān)注設(shè)計(jì)的核心指標(biāo)
設(shè)計(jì)過(guò)程中,要關(guān)注設(shè)計(jì)的核心指標(biāo),針對(duì)于核心指標(biāo),進(jìn)行針對(duì)性的設(shè)計(jì)。
如果改版的最重要(核心)的指標(biāo)是任務(wù)流程完成率,先查看用戶操作流失率,然后分析找出流失原因,給出對(duì)應(yīng)的優(yōu)化方案。等到優(yōu)化方案的產(chǎn)品版本上線后,對(duì)比完成率數(shù)據(jù)變化。
如果改版的最重要(核心)指標(biāo)是人均觀看次數(shù),則要思考可通過(guò)哪些設(shè)計(jì)策略可提升產(chǎn)品的人均播放次數(shù)。
舉個(gè)例子,新浪微博,以前版本用戶看完視頻后,視頻會(huì)有重播按鈕和推薦視頻,用戶只有進(jìn)行下一步點(diǎn)擊才能播放下一個(gè)視頻。
改版后看完視頻會(huì)自動(dòng)切換到下一個(gè)視頻。這樣的設(shè)計(jì)策略雖然綁架了用戶的行為,用戶從一個(gè)主動(dòng)接收者,變成了一個(gè)被動(dòng)接收者,但是這種策略能有效的提升人均播放次數(shù)。
2. 核心指標(biāo)帶來(lái)的價(jià)值/收益
當(dāng)驗(yàn)證了核心指標(biāo)往好的方向發(fā)展,這時(shí)候,就需要總結(jié)核心指標(biāo)帶來(lái)的價(jià)值和收益,這樣的話設(shè)計(jì)價(jià)值才可以直接被量化。
舉個(gè)例子:一個(gè) banner 的點(diǎn)擊率達(dá)到 3% 的時(shí)候,每天 GMV 約 200 萬(wàn),當(dāng)重新設(shè)計(jì)了這個(gè) banner,同時(shí)其他條件保持不變,點(diǎn)擊率提升到了 6%,這時(shí)候通過(guò)數(shù)據(jù)查看每天的 GMV 是多少,如果達(dá)到了 400 萬(wàn),那么這增加的 200 萬(wàn)的 GMV 則是通過(guò)設(shè)計(jì)優(yōu)化所帶來(lái)的。
設(shè)計(jì)師在交付稿件后,容易松懈,以為項(xiàng)目告一段落,就疏于后續(xù)的跟進(jìn)工作。其實(shí)后續(xù)的跟進(jìn)也很重要。產(chǎn)品測(cè)試版上線后,交互設(shè)計(jì)師應(yīng)該跟進(jìn)后續(xù)的走查和設(shè)計(jì)問(wèn)題的反饋。
通過(guò)數(shù)據(jù)分析,確定上線的方案有哪些問(wèn)題需要優(yōu)化,建立需求池方便后續(xù)跟進(jìn)優(yōu)化,不斷完善產(chǎn)品設(shè)計(jì)。
文章來(lái)源:優(yōu)設(shè)
網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)之HTML(一)
1.Web的基本概念
web(World Wide Web)即全球廣域網(wǎng),也稱為萬(wàn)維網(wǎng),它是一種基于超文本和HTTP的、全球性的、動(dòng)態(tài)交互的、跨平臺(tái)的分布式圖形信息系統(tǒng)。是建立在Internet上的一種網(wǎng)絡(luò)服務(wù),為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問(wèn)的直觀界面,其中的文檔及超級(jí)鏈接將Internet上的信息節(jié)點(diǎn)組織成一個(gè)互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。
主要包含結(jié)構(gòu),表現(xiàn)和行三個(gè)方面
2.HTML簡(jiǎn)介
<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁(yè)面的根元素
<head> 元素包含了文檔的元(meta)數(shù)據(jù)
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見(jiàn)的頁(yè)面內(nèi)容
<h1> 元素定義一個(gè)大標(biāo)題
<p> 元素定義一個(gè)段落
<標(biāo)記名>內(nèi)容</標(biāo)記名> 雙標(biāo)記,也稱標(biāo)記體
<標(biāo)記名/> 單標(biāo)記,也稱空標(biāo)記
<!--注釋內(nèi)容--> 注釋標(biāo)記
<標(biāo)記名 屬性1="屬性值1" 屬性2="屬性值2">內(nèi)容<//標(biāo)記名>
<title>網(wǎng)頁(yè)標(biāo)題名</title> 設(shè)置頁(yè)面標(biāo)題標(biāo)記
<meta/> 定義頁(yè)面原信息
<link> 引用外部文件標(biāo)記
1
2
3
4
5
6
7
8
9
10
11
12
13
14
注意元素的就近原則
補(bǔ)充:link的屬性 請(qǐng)參考此網(wǎng)址
3.HTML入門
①HTML的概念:HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
②HTML的文本控制標(biāo)記
1.標(biāo)題標(biāo)記:
標(biāo)題(Heading)是通過(guò)<h1> - <h6>標(biāo)簽進(jìn)行定義的。
對(duì)齊方式:
left:設(shè)置標(biāo)題文字左對(duì)齊
center:設(shè)置標(biāo)題文字居中
ringt: 設(shè)置標(biāo)題文字右對(duì)齊
使用方法 <h2 align="left">二級(jí)標(biāo)題 左對(duì)齊</h2>
2.段落標(biāo)記
段落是通過(guò) <p>標(biāo)簽定義的;其他同標(biāo)題標(biāo)記一致。
3.水平線標(biāo)記<hr/>
相關(guān)屬性
使用方法<hr color="red" align="left" size="5" width"600"/>
4.換行標(biāo)記<br/>
1.1文本樣式標(biāo)記
font的屬性
1.2文本格式化標(biāo)記
詳情請(qǐng)點(diǎn)我
1.3特殊字符標(biāo)記
詳情請(qǐng)點(diǎn)我,并查看HTML字符實(shí)體部分
4.附上本節(jié)課的腦圖
注:本文參考自菜鳥教程
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn