首頁(yè)

試圖顛覆在線文檔協(xié)作的微軟 Fluid Framework,到底有什么獨(dú)特之處?

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

一次會(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ù)

無(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)單純凈的畫(huà)布,一個(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è)時(shí)代的交互模式

作為一個(gè)尚且處于早期階段的服務(wù),目前Fluid Framework 還只是打通了 Office 自家的文檔體系。但是即便如此,這意味著你可以將任何一個(gè)文檔當(dāng)中帶有相應(yīng)功能的內(nèi)容,無(wú)縫地與人在 諸如筆記工具 OneNote 隨時(shí)隨地嵌入 Excel 的模塊和豐富的表單、即時(shí)通訊工具 Teams 中加入演示文稿,并且和同事一起修改其中的樣式,替換圖片,增刪動(dòng)畫(huà)而無(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,寫(xiě)文本的時(shí)候也不必去限定工具必須為 Word,而可視化內(nèi)容的展示也不再拘泥于 PowerPoint,你可以在任何地方用任何類型的內(nèi)容,我要說(shuō)的是,我們不再有文檔了,我們擁有一個(gè)無(wú)所不能的畫(huà)布。」

而這個(gè)全新的東西,最近剛剛開(kāi)始對(duì)外開(kāi)放了申請(qǐng)入口:

Fluid Framework Developer Preview

從3G時(shí)代就開(kāi)始的探索

當(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è)畫(huà)布之下,進(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。

文章來(lái)源:優(yōu)設(shè)

為什么要進(jìn)行競(jìng)品分析以及關(guān)鍵準(zhǔn)則

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

競(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ī)器填寫(xiě)快遞信息的功能,從而大大提高用戶填寫(xiě)訂單的效率、準(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)榇蟛糠秩耸褂糜沂謫问植僮?,而在IPAD端的閱讀產(chǎn)品,目錄置于左下角,因?yàn)橛脩粢话阈枰p手持設(shè)備,此時(shí)左手點(diǎn)擊目錄更符合用戶習(xí)慣。


當(dāng)然,不僅僅要考慮用戶操作習(xí)慣,更要考慮用戶的心理預(yù)期。這就要用到隱喻,例如按鈕按下后模擬出下沉的視覺(jué)效果,再如最早的閱讀類產(chǎn)品模擬真實(shí)書(shū)架,還原用戶習(xí)慣的書(shū)架瀏覽查找書(shū)籍然后閱讀的體驗(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)證碼部分只允許填寫(xiě)數(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)證碼、填寫(xiě)驗(yàn)證碼、登錄成功。


7.靈活性和效率

使用更少的交互,讓用戶更便捷的完成目標(biāo),例如使用縮寫(xiě)、語(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ō)明書(shū))也能讓用戶正常使用和產(chǎn)品和解決遇到的問(wèn)題。但我們?nèi)匀恍枰欢ǖ恼f(shuō)明文檔,來(lái)解釋特殊情況或常見(jiàn)問(wèn)題,以保證用戶在需要時(shí)能輕易找到解決方案。

文章來(lái)源:UI中國(guó)

組件化設(shè)計(jì):彈窗的使用邏輯

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

彈窗其實(shí)是一個(gè)很泛的概念,幾乎所有在頁(yè)面中有彈出的行為的操作都能稱之為彈窗,其實(shí)是有點(diǎn)混亂,本文旨在梳理它們之間的關(guān)系


轉(zhuǎn)自:站酷-備哥


遞推和遞歸的區(qū)別

seo達(dá)人

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第一課

seo達(dá)人

HTML基本概況





HTML文檔基本格式

樣式如下:



注意:文章以下出現(xiàn)的“《》”書(shū)名號(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)和顏色。基本語(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)記






關(guān)于 XSS攻擊

seo達(dá)人

XSS攻擊是什么

簡(jiǎn)介

攻擊原理

例子

防御方法

簡(jiǎn)介

XSS(Cross Site Scripting, 跨站腳本攻擊)又稱是 CSS, 在 Web攻擊中比較常見(jiàn)的方式, 通過(guò)此攻擊可以控制用戶終端做一系列的惡意操作, 如 可以盜取, 篡改, 添加用戶的數(shù)據(jù)或誘導(dǎo)到釣魚(yú)網(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=&lt;script&gt;alert(“Javascript代碼塊”)&lt;/script&gt;

http://example.com/list?memo=&lt;strong οnclick=‘a(chǎn)lert(“驚喜不斷”)’>誘惑點(diǎn)擊語(yǔ)句</strong>

http://example.com/list?memo=&lt;img src=’./logo.jpg’ οnclick=‘location.href=“https://blog.csdn.net/qcl108”;’/&gt;

以上例子只是大概描述了方式, 在實(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)譯后 &amp;), (< 轉(zhuǎn)譯后 &lt;), (> 轉(zhuǎn)譯后 &gt;), (" 轉(zhuǎn)譯后 &quot;), (\ 轉(zhuǎn)譯后 &#x27;), (/ 轉(zhuǎn)譯后 &#x2F;), (;)等


一文讀懂2020年最全設(shè)計(jì)趨勢(shì)

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

寫(xiě)在前面

過(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)畫(huà), 對(duì)于2020年,我們認(rèn)為運(yùn)動(dòng)設(shè)計(jì)是主要趨勢(shì),因?yàn)槲覀冊(cè)谒性O(shè)計(jì)領(lǐng)域都遇到動(dòng)畫(huà),從小的交互到徽標(biāo)和UI,一切都在變化。動(dòng)畫(huà)內(nèi)容正在進(jìn)入現(xiàn)代世界,在現(xiàn)代世界中,書(shū)面內(nèi)容沒(méi)有以前那么吸引人。 動(dòng)作設(shè)計(jì)正確實(shí)施后,可使廣告系列的信息更快,更正確地傳達(dá)給受眾。

undefined

01. theQoos品牌插圖由  閔慶  02  軍團(tuán)賽季 3由  尼克Scarcella   03.  溶劑-使大麻銀行公開(kāi)賽由  BluBlu工作室  04  云服務(wù)(動(dòng)畫(huà)圖標(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)越多的暗模式。

undefined


1.2粗體顏色

在過(guò)去的兩年(到2020年)中,強(qiáng)烈的色彩已成為重要的趨勢(shì)。大膽的色彩豐富,明亮,甚至極富活力。它們可以是主要或次要顏色。 


undefined

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á)信息。

undefined

01.  海妖重新設(shè)計(jì),以  西爾Theyssens ,  安東尼科拉德  02  浮雕-醫(yī)療項(xiàng)目由  馬丁Pankiewicz  葛爾若,  米沃什Po?arkowski  03.  abuk:圖書(shū)封面設(shè)計(jì)有聲書(shū)商店到  謝爾蓋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)方式有所不同。

undefined01.  余吳-旅行計(jì)劃應(yīng)用由  朱莉張庭  02.  UX / UI | 食品外賣應(yīng)用由  康斯坦丁Seredkin  03.  COOC通過(guò)  cuneyt仙


1.5動(dòng)畫(huà)圖形和微交互

正如我們所說(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;


undefined

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)畫(huà)或經(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)變得更輕松。它使用戶可以更快地找到信息。

undefined01.斯基林貿(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中正式消失。

undefined

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),插圖,甚至用于排版。

undefined

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è)很好的例子。

undefined

01.  新微小的事情?兒童圖畫(huà)書(shū)由  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ù)制筆刷和工具。 

undefined

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ì)象暗。

undefined

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ì)。

undefined

01.  龐克市由  溫祚_  02  FastCompany -等距號(hào)由  阿圖爾Tenczynski  03和05.  抗體亞型由  馬里奧·德?梅耶爾  04.  松弛插圖由  京張 


2.5 3D

隨著效率越來(lái)越高的軟件和工具的出現(xiàn),3d渲染已逐漸發(fā)生變化。3D插圖非常受歡迎,因?yàn)榕c2D插圖不同,它提供了更逼真的圖像。

undefined

01. 游戲巴伊亞之家由  Miagui  02  天平 由  卡韋薩Patata工作室  03.  城堡毀滅者由  穆罕默德Chahin  04.  Eyoo家庭3D插圖由  Baianat  05.  個(gè)人插圖第1卷由  巴勃羅·馬林 06.  一個(gè)人旅行通過(guò)  亂伊萊恩


2.6超大膽的色彩

大膽的顏色非常適合插圖。它們營(yíng)造出歡樂(lè)的氛圍,使角色脫穎而出,并在圖像背后展現(xiàn)故事。

undefined

01.  瑪莎·希肖娃(Masha Shishova)攝于莫斯科的  STRTFD咖啡壁畫(huà)  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。

undefined

01.  龐克市由  溫祚_ ,  視覺(jué)設(shè)計(jì)藝術(shù)的影響  


3.2視頻+動(dòng)畫(huà)插圖(混合媒體)

拍攝的視頻,動(dòng)畫(huà)插圖以及有時(shí)是靜止的照片的結(jié)合可以產(chǎn)生非凡的效果。2d或3d插圖可創(chuàng)建令人難忘的視頻,從幾行運(yùn)動(dòng)到3D真實(shí)人物甚至是現(xiàn)實(shí)生活中不存在的復(fù)雜視覺(jué)效果。

undefined

undefined

01.  Coppel /回到學(xué)校通過(guò)  大量工作室  02  PWR  由安娜·霍查,  Edvina元 


3.3 2D動(dòng)畫(huà)-說(shuō)明性視頻

2D動(dòng)畫(huà)專注于創(chuàng)建故事和角色,并在創(chuàng)作過(guò)程中使用矢量。當(dāng)您想要廣告系列或產(chǎn)品的說(shuō)明性視頻時(shí),2D可能是理想的選擇。在一個(gè)總是忙碌而又沒(méi)有時(shí)間閱讀的世界中,說(shuō)明性視頻對(duì)于任何網(wǎng)站都是必不可少的。

undefined

01.  Freelive  由  工作室Infografika ,  謝爾蓋·薩多斯基 ,  阿納斯塔西婭Alterka ,  Arsentiy Lesnik賓館 ,  尤里·阿姆斯特朗 ,  阿林好,  喬治VALD ,馬克西姆Tleubaev  


3.4動(dòng)畫(huà)徽標(biāo)

您已經(jīng)了解到動(dòng)畫(huà)是2020年的“必備”,為了保持競(jìng)爭(zhēng)力,我們還必須將它們集成到徽標(biāo)設(shè)計(jì)中。許多公司已開(kāi)始對(duì)其徽標(biāo)進(jìn)行動(dòng)畫(huà)處理,以引起人們的注意。這也是徽標(biāo)設(shè)計(jì)的主要趨勢(shì)。

undefined


01.  杯茶由  維多利亞伍  02 - 07.  運(yùn)動(dòng)野獸?Logomachine。動(dòng)畫(huà)標(biāo)志的  運(yùn)動(dòng)設(shè)計(jì)學(xué)院,  維克托Villamarin的,  波格丹·杜米特留,  Logomachine .NET ,  亞歷山大·庫(kù)茲涅佐夫,  扎克李,  丹尼斯Siurin ,  斯坦尼斯拉夫·馬爾琴科,  莉扎薇塔Tsareva ,  Supremus Levenus ,  安東·福明,  埃米爾Khafizov ,  膽堿哈達(dá)           


3.5混合動(dòng)畫(huà)2D和3D集成

這一趨勢(shì)不是一個(gè)新趨勢(shì),但絕對(duì)值得一提?;旌蟿?dòng)畫(huà)就是使用為此創(chuàng)建的特定軟件將2D與3D結(jié)合在一起。 

undefined


4.平面設(shè)計(jì)


4.1平面設(shè)計(jì)中的3D 

盡管2d壟斷了設(shè)計(jì)的這一分支,但3d可以為最終概念添加額外的內(nèi)容。3d渲染可以采用插圖,動(dòng)畫(huà)或字體的形式。

undefined

01.  畫(huà)像由  費(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ì)更高。

undefined

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)圖形的想法,這是最合適的方法。

undefined

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)。 

undefined

01.  GOOSE赫爾-海報(bào)由  Ewelina鵝  02  CAT酒吧和舞廳/ 2019至  kissmiklos,  Eszter薩拉 


4.5動(dòng)畫(huà)海報(bào)

動(dòng)畫(huà)無(wú)處不在,我們?cè)谠O(shè)計(jì)的各個(gè)領(lǐng)域都可以找到它們,當(dāng)然它們也存在于數(shù)字海報(bào)中。動(dòng)畫(huà)可以將2D與3D混合在一起,效果令人著迷。

undefined

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)始流行。

undefinedundefined

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)單的線條,體積和顏色。

undefined


01.  瑞士海報(bào)01(版式方面)由  Mehman Mammedov  02.  黃視VOL.3通過(guò)  維奧萊納齊名


4.8大的不間斷彩色空間 

大型,不間斷的色彩空間將在明年成為非常流行的趨勢(shì)。它們與大膽的字體搭配使用,可以在圖形設(shè)計(jì),產(chǎn)品設(shè)計(jì)以及ui中找到。

undefined

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)單的配色方案和一些基本的幾何形狀。

undefined

01.  Heim雜志,第3頁(yè),  Sasha Yaguza撰寫(xiě)  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)畫(huà)連接到特殊的“標(biāo)記”。 

有關(guān)更具體的AI規(guī)則,請(qǐng)閱讀Apple指南,以提供“將真實(shí)的虛擬對(duì)象與現(xiàn)實(shí)世界無(wú)縫融合的沉浸式,引人入勝的體驗(yàn)”。

undefined


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ì)和編寫(xiě)腳本聊天機(jī)器人,是出色的UX設(shè)計(jì)人員的魔力可以發(fā)揮作用的地方。

大多數(shù)使用聊天機(jī)器人的公司都選擇說(shuō)明助手來(lái)為AI做鬼臉。以下是一些在其UI設(shè)計(jì)中使用聊天機(jī)器人的品牌:Spotify,星巴克,萬(wàn)事達(dá)卡,絲芙蘭,Lyft,必勝客。

undefined


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)或建筑。 

undefined


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)品包裝的大膽選擇。

undefined




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ì)。

undefined





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ì),使版式脫穎而出。

undefined

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)品令人賞心悅目。

undefined

01. Zerbet冰糕由  才林賈爾斯  02.  貝利啤酒  由  埃德大廳 悉尼,  葉卡捷琳娜Leontyeva ,  波阿斯孫


6.5大膽的顏色

大膽的顏色和漸變?nèi)匀皇欠浅?qiáng)烈的趨勢(shì),這種趨勢(shì)將在2020年持續(xù)。使用這些顏色,您可以創(chuàng)建令人難忘的產(chǎn)品。

undefined

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)典。 

undefined

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)。

undefined

01.  喙接通過(guò)  骨干品牌推廣   02.  Colorea用t  骨干品牌


7.版式


7.1粗體印刷

粗體印刷術(shù)是設(shè)計(jì)中的重要趨勢(shì),它取代了圖像作為主要元素。勇敢的排版可以在網(wǎng)頁(yè)設(shè)計(jì)和圖形設(shè)計(jì)中發(fā)揮作用。

undefined

01.  埃里克·林格(Eirik Lyng),作者:  埃里克· 赫斯特雷(ErikHerrstr?m);  02.  包豪斯(Bauhaus_100)(x3),作者:  BunkerType(JesúsMorentin)

03.  UCCA當(dāng)代藝術(shù)中心北京由  布魯斯·莫設(shè)計(jì)(BMD)  ,耶勒馬雷夏爾 


7.2小寫(xiě)

越來(lái)越多的應(yīng)用程序使用完全小寫(xiě)的文本,非常易于閱讀,并且完美地融入了簡(jiǎn)約和現(xiàn)代的設(shè)計(jì)中。在明年,我們絕對(duì)必須關(guān)注這一趨勢(shì)。

undefined

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ú)特。 

undefined

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)畫(huà)在設(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)存中。

undefined

undefined

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ì)。

undefined




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)入圖片或搜索圖片。

undefined


8.2繁殖

 Procreate是 由Savage Interactive針對(duì)iOS開(kāi)發(fā)和發(fā)布的   用于  數(shù)字繪畫(huà)的  光柵圖形編輯器 應(yīng)用程序。針對(duì)iPad的藝術(shù)可能性而設(shè)計(jì)  ,并且適合從初學(xué)者到專業(yè)人士的藝術(shù)家。


 它提供130多種逼真的畫(huà)筆,多層,  混合模式,  蒙版,   過(guò)程視頻的4K分辨率導(dǎo)出  ,  自動(dòng)保存以及許多其他經(jīng)典和原始的  數(shù)字藝術(shù)  工具。除光柵圖形外,該軟件的編輯和渲染文本和矢量圖形能力有限  。(來(lái)源:Wikipedia)Procreate是2018年App Store上最暢銷的應(yīng)用程序。

undefined


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)源:維基百科)

undefined


作者授權(quán)


總結(jié)

每一年每一個(gè)時(shí)間段都會(huì)有新的趨勢(shì),學(xué)會(huì)的辯證的眼光去看待便是最大的智慧。世界一直都在變,趨勢(shì)也是。保持學(xué)習(xí)和探索的心不變就是對(duì)自己熱愛(ài)的事情最好的回應(yīng),念念不忘,必有回響。共勉!

轉(zhuǎn)自:站酷-木七木七 

PRD:倒推數(shù)據(jù)可視化APP——Chartistic產(chǎn)品需求文檔

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

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智能剪貼畫(huà)編輯頁(yè)

4.4X軸Y軸編輯頁(yè)(柱狀圖/折線圖/面積圖/餅圖)

4.5設(shè)置編輯頁(yè)

4.5.1柱狀圖/折線圖/面積圖設(shè)置編輯頁(yè)

4.5.2餅圖設(shè)置編輯頁(yè)

4.5.3智能剪貼畫(huà)設(shè)置編輯頁(yè)

4.6圖表完成頁(yè)

五、總結(jié)

一、文檔綜述

1.1 文檔輸出環(huán)境

1.2 產(chǎn)品簡(jiǎn)介

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)次 。

1.3 產(chǎn)品總結(jié)

目標(biāo)用戶:需要對(duì)少量數(shù)據(jù)迅速進(jìn)行可視化處理的辦公人群

產(chǎn)品定義:快速、簡(jiǎn)單的移動(dòng)端數(shù)據(jù)可視化工具應(yīng)用,導(dǎo)出圖表作為PPT等演示工具的補(bǔ)充。

產(chǎn)品特征:

  1. 無(wú)需登錄
  2. 交互式編輯
  3. 外觀選擇多樣性

二、全局說(shuō)明

2.1 鍵盤說(shuō)明

在不同頁(yè)面需要輸入編輯時(shí),對(duì)應(yīng)的彈出鍵盤的類型,數(shù)字鍵盤只能輸入正數(shù)

2.2 按鈕說(shuō)明

圖表編輯頁(yè)面:

  • 圖表上默認(rèn)的隨機(jī)數(shù)值除外,標(biāo)題編輯按鈕、X軸編輯按鈕、Y軸編輯按鈕在未輸入值前呈現(xiàn)灰色
  • 圖表類型按鈕:當(dāng)前類型按鈕為黑色,未選擇類型為灰色

X軸Y軸編輯頁(yè)面:

  • Y軸默認(rèn)的隨機(jī)數(shù)值除外,X軸名稱編輯框、Y軸名稱編輯框、X軸的值編輯框在未輸入有效值前預(yù)填文字呈現(xiàn)灰色

設(shè)置編輯頁(yè)面:

  • 圖表樣式選擇按鈕:當(dāng)前樣式按鈕為黑色,未選擇樣式為灰色

2.3 默認(rèn)設(shè)置

新建圖表時(shí)

  1. 默認(rèn)已有8組數(shù)據(jù),Y軸數(shù)值在【0~1000】范圍內(nèi)隨機(jī),X軸不賦值待編輯
  2. 標(biāo)題默認(rèn)可見(jiàn)、居中對(duì)齊
  3. Y軸默認(rèn)最大值為1000,最小值為0,不顯示小數(shù)
  4. 網(wǎng)格可見(jiàn),行計(jì)數(shù)10,每一間隔的值100,對(duì)齊線不顯示、簡(jiǎn)單圖表不開(kāi)啟
  5. 邊框默認(rèn)選擇無(wú)邊框
  6. X軸標(biāo)題/Y軸標(biāo)題/X軸圖例/Y軸圖例默認(rèn)顯示
  7. 背景/風(fēng)格/樣式隨機(jī)
  8. 單擊增加一組數(shù)據(jù)按鈕,增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī),X軸不賦值待編輯

2.4 限制設(shè)定

  1. 最多可輸入12組數(shù)據(jù)
  2. Y軸最大值可編輯范圍為1-10000,最小值編輯范圍為0-9999,最大值需要大于最小值
  3. Y軸數(shù)值的編輯需在【最大值~最小值】范圍內(nèi)
  4. 首先確定的是(最大值-最小值)/行計(jì)數(shù)=每一間隔的值 ,行計(jì)數(shù)的數(shù)量需要在【0~15】。因此每一間隔的值需要在【0.07*(最大值-最小值)~ (最大值-最小值)】這個(gè)范圍內(nèi),確保最多只能有14行,考慮到(最大值-最小值)/輸入的間隔值得到的行數(shù)有可能不是整數(shù)的問(wèn)題,實(shí)際顯示的行數(shù)為(最大值-最小值)/輸入的間隔值四舍五入取整后的行數(shù)
  5. 最大值、最小值、行計(jì)數(shù)、每一間隔的值僅可編輯為整數(shù)

2.5 頁(yè)面交互

  1. 彈屏?xí)r底部頁(yè)面虛化,單擊彈屏以外的虛化界面,彈層關(guān)閉,返回上一頁(yè)面;
  2. 圖表編輯頁(yè)面下滑展開(kāi)X軸Y軸編輯頁(yè)面,從屏幕下方上滑關(guān)閉;
  3. 圖表編輯頁(yè)面左滑展開(kāi)設(shè)置編輯頁(yè)面,從屏幕左側(cè)右滑關(guān)閉。

三、產(chǎn)品說(shuō)明

3.1 產(chǎn)品操作流程圖

3.2 產(chǎn)品功能導(dǎo)圖

3.3 頁(yè)面流程

四、頁(yè)面詳細(xì)功能說(shuō)明

4.1 歡迎頁(yè)

  • 頁(yè)面名稱:歡迎頁(yè)
  • 入口:打開(kāi)App進(jìn)入
  • 頁(yè)面說(shuō)明:打開(kāi)App自動(dòng)進(jìn)入歡迎頁(yè),停留0.5秒后自動(dòng)進(jìn)入首頁(yè)

4.2 首頁(yè)

圖一

圖二

圖三

圖四

頁(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:

  • 點(diǎn)擊進(jìn)入圖表編輯頁(yè)
  • 長(zhǎng)按或者左滑出現(xiàn)復(fù)制、導(dǎo)出、刪除三個(gè)快捷處理按鈕(如圖四)

序號(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 圖表編輯頁(yè)

4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁(yè)

圖5

圖6

圖7

圖8

圖9

頁(yè)面名稱:柱狀圖/折線圖/面積圖/餅圖圖表編輯頁(yè)

入口:

  • 點(diǎn)擊圖表完成頁(yè)編輯按鈕跳轉(zhuǎn)
  • 新建圖表類型彈屏中點(diǎn)擊圖表類型對(duì)應(yīng)按鈕進(jìn)入

頁(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:

  • 點(diǎn)擊一次增加一組數(shù)據(jù)按鈕,增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī),X軸不賦值待編輯
  • 最多可增加至12組數(shù)據(jù),增加至12組數(shù)據(jù)后按鈕變灰,點(diǎn)擊無(wú)反應(yīng)

序號(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)樽笙颍瑔螕艉笠陨习粹o出現(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 智能剪貼畫(huà)編輯頁(yè)

頁(yè)面名稱:智能剪貼畫(huà)編輯頁(yè)

入口:

  • 點(diǎn)擊首頁(yè)圖表縮略圖跳轉(zhuǎn)
  • 新建圖表類型彈屏中點(diǎn)擊圖表類型對(duì)應(yīng)按鈕進(jìn)入

頁(yè)面說(shuō)明:

主頁(yè)面:左滑展開(kāi)展開(kāi)設(shè)置編輯頁(yè)面

序號(hào)1:按住上下滑動(dòng)更改有色部分的高度,左側(cè)占比數(shù)值一起更改,更改范圍為0%-100%

4.4 X軸Y軸編輯頁(yè)(柱狀圖/折線圖/面積圖/餅圖)

頁(yè)面名稱:X軸Y軸編輯頁(yè)面

入口:

  • 圖表編輯頁(yè)面下滑展開(kāi)
  • 編輯X軸名稱按鈕,編輯Y軸名稱按鈕,編輯X軸按鈕,下拉按鈕點(diǎn)擊展開(kāi)

頁(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:

  • 點(diǎn)擊一次增加一組數(shù)據(jù)按鈕,增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī),X軸不賦值待編輯
  • 最多可增加至12組數(shù)據(jù),增加至12組數(shù)據(jù)后按鈕變灰,點(diǎn)擊無(wú)反應(yīng)

序號(hào)4:

  • 初始狀態(tài)為隱藏,單擊刪除按鈕即序號(hào)5后出現(xiàn),點(diǎn)擊刪除對(duì)應(yīng)的該組數(shù)據(jù),點(diǎn)擊屏幕其他任意位置再次隱藏
  • 當(dāng)刪除至只剩一組數(shù)據(jù)時(shí)自動(dòng)隱藏,不可再刪除

序號(hào)5:點(diǎn)擊編輯文本框與數(shù)值框之間出現(xiàn)小刪除按鈕即序號(hào)4,點(diǎn)擊刪除對(duì)應(yīng)的該組數(shù)據(jù)

異常提示:

  • Y軸編輯的數(shù)值>最大值時(shí),彈屏【警告 所輸入的值大于最大值】,輸入框內(nèi)容回到修改前的值;
  • Y軸編輯的數(shù)值<最小值時(shí),彈屏【警告 所輸入的值小于最小值】,輸入框內(nèi)容回到修改前的值;

4.5 設(shè)置編輯頁(yè)

頁(yè)面名稱:設(shè)置編輯頁(yè)面

入口:

  • 圖表編輯頁(yè)面左滑展開(kāi)
  • 圖表編輯頁(yè)面設(shè)置按鈕點(diǎn)擊展開(kāi)

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ù)

異常提示:

  • 最大值>10000時(shí),彈屏【無(wú)效值 請(qǐng)輸入小于10000的值】,輸入框內(nèi)容回到修改前的值;
  • 最大值<=最小值時(shí),彈屏【無(wú)效值 請(qǐng)輸入大于最小值的值】,輸入框內(nèi)容回到修改前的值;
  • 最小值>=最大值時(shí),彈屏【無(wú)效值 請(qǐng)輸入小于最大值的值】,輸入框內(nèi)容回到修改前的值;

網(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ù)

異常提示:

  • 輸入的每一間隔的值不在【0.07*(最大值-最小值)~ (最大值-最小值)】這個(gè)范圍內(nèi)時(shí),彈屏【警報(bào) 請(qǐng)輸入0.07*(最大值-最小值)到(最大值-最小值)之間的值】,輸入框內(nèi)容回到修改前的值;
  • 輸入的行計(jì)數(shù)不在【0~15】范圍內(nèi)時(shí),彈屏【警報(bào) 請(qǐng)輸入小于15的值】,輸入框內(nèi)容回到修改前的值;

邊框設(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 智能剪貼畫(huà)設(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ō)明:

智能剪貼畫(huà)樣式說(shuō)明如圖

4.6 圖表完成頁(yè)

頁(yè)面名稱:圖表完成頁(yè)

入口:

  • 點(diǎn)擊首頁(yè)圖表縮略圖跳轉(zhuǎn)
  • 圖表編輯頁(yè)點(diǎn)擊完成按鈕跳轉(zhuǎn)

頁(yè)面說(shuō)明:

序號(hào)1:點(diǎn)擊返回首頁(yè)

序號(hào)2:點(diǎn)擊進(jìn)入圖表編輯頁(yè)面

序號(hào)3:點(diǎn)擊導(dǎo)出保存到本地或者分享

五、總結(jié)

以上便是我本次倒推撰寫(xiě)的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è)方向嘗試:

  1. 增加“編輯兩組不同指標(biāo)數(shù)據(jù)”的功能,因?yàn)樵诤芏鄨?chǎng)景下是需要將兩組數(shù)據(jù)進(jìn)行對(duì)比的,比如銷售額與成本額的走向?qū)Ρ龋?
  2. 在折線圖與柱狀圖的編輯中可以將數(shù)值編輯為負(fù)值,例如毛利率這種類型的數(shù)據(jù)可能會(huì)有負(fù)值出現(xiàn),而且負(fù)值是需要在數(shù)據(jù)可視化圖表中突出表現(xiàn)的數(shù)據(jù)。

這是本人第一次撰寫(xiě)的產(chǎn)品需求文檔,一定有諸多不足,希望各位前輩不吝賜教,感激不盡!希望可以成為一名產(chǎn)品經(jīng)理,創(chuàng)造出對(duì)用戶有價(jià)值的產(chǎn)品,不求做改變世界的產(chǎn)品,只求改變自己,改變眼前。

 文章來(lái)源:人人都是產(chǎn)品經(jīng)理

學(xué)會(huì)這個(gè)體系化的設(shè)計(jì)思路,讓你做出專業(yè)全面的方案!

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

大部分交互設(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ì)思路大綱如下:

  • 拆解目標(biāo)
  • 確定設(shè)計(jì)方法
  • 設(shè)計(jì)方案過(guò)程
  • 方案細(xì)化和走查
  • 數(shù)據(jù)跟蹤
  • 后續(xù)迭代

拆解目標(biāo)

作為一個(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ù)背景寫(xiě)清晰,這時(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)品的用戶畫(huà)像得到,并推算出使用這個(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)題等。

確定設(shè)計(jì)方法

對(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)。

設(shè)計(jì)方案過(guò)程

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)的提示。

操作失?。寒惓G闆r導(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ù)類型一共有三類:

  • 初始狀態(tài)的定義:初始化狀態(tài),沒(méi)有任何內(nèi)容,需要用戶進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面。
  • 清空狀態(tài)的定義:通過(guò)刪除或其他用戶操作,清空當(dāng)前的頁(yè)面內(nèi)容,產(chǎn)生了空界面,這時(shí)候需要有明確的提示,且告知用戶該如何處理。
  • 出錯(cuò)狀態(tài)的定義:由于網(wǎng)絡(luò)、服務(wù)器或者沒(méi)有找他其他結(jié)果等原因?qū)е聼o(wú)法加載內(nèi)容,產(chǎn)生了空界面,這時(shí)候需要有明確的提示,且告知用戶該如何處理。用戶操作反饋的無(wú)結(jié)果界面也可以用這樣的思路來(lái)設(shè)計(jì)。

數(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)的。

后續(xù)迭代

設(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(一)

seo達(dá)人

網(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é)課的腦圖





注:本文參考自菜鳥(niǎo)教程


日歷

鏈接

個(gè)人資料

存檔