顯然,我們不應(yīng)該在這里太過分了-動畫總有可能使原本令人愉悅的體驗(yàn)變得不知所措,尤其是對于那些具有認(rèn)知障礙或?qū)幼髅舾械娜恕?/div>
但是做得好,即使是微妙的動畫也可以在正確的時間將訪問者的注意力引向正確的內(nèi)容,從而幫助確保他們不會錯過重要的復(fù)制行或轉(zhuǎn)換驅(qū)動形式。
以Heco Partners為代理機(jī)構(gòu)Black Sheep建立的這個華麗網(wǎng)站為例。向下滾動時,“當(dāng)前”行的突出顯示有助于您專注于寫得很好的副本。然后,一系列大膽設(shè)計(jì)的工具提示開始吸引您的注意,并大聲疾呼讓您停止閱讀,然后單擊另一頁。這是對構(gòu)建內(nèi)置導(dǎo)航系統(tǒng)的挑戰(zhàn)的創(chuàng)造性解決方案,但它也可能給某些用戶帶來不必要的緊張感。
從我們自己的Interactions 2.0到Airbnb的Lottie,我們還看到了許多工具可以簡化更復(fù)雜的動畫和交互的創(chuàng)建,這在數(shù)字設(shè)計(jì)師的工具包中是一個空白。
以Anna Eshwood的網(wǎng)站為例。網(wǎng)站上的每張照片都會正常運(yùn)行,直到您滾動瀏覽它們?yōu)橹?,然后它們以比您的滾動速度更快的速度迅速上升。這給現(xiàn)場帶來了一種有趣的空靈感,可以與樸素,單色的照片及其嚴(yán)格的模型很好地搭配。
在一個充滿美麗動畫的網(wǎng)絡(luò)中,它有可能清楚地告訴我們“此頁面上的某些內(nèi)容已發(fā)生變化”,無論您在哪個網(wǎng)站上,從一個頁面轉(zhuǎn)到另一個頁面總是讓人感覺有些奇怪。 。
狀態(tài)更改動畫可能使您離開一頁,而另一頁在新頁上向您打招呼,但這些都是謹(jǐn)慎的,沒有必要將它們鏈接在一起。過渡本身看起來就像其他任何從頁面切換到頁面的切換一樣:一秒鐘空白,然后加載新頁面。
但是,我們開始看到越來越多的網(wǎng)站使這種狀態(tài)變化看起來很美。例如,在代理商3drops的網(wǎng)站上進(jìn)行以下轉(zhuǎn)換:
在此,頁面過渡可保持體驗(yàn)的凝聚力和品牌效應(yīng)。您并不是要“導(dǎo)航到新頁面”,而是要訪問視圖庫中的另一個“視圖”。完善以設(shè)計(jì)為中心的品牌展示會是一種很好的波蘭方式。
您可以稱其為野蠻行為的一種-實(shí)際上,我在野獸網(wǎng)站上找到了上述所有網(wǎng)站,但我們認(rèn)為,即使您認(rèn)為野蠻之外,也可以說會有更多的極簡主義網(wǎng)站出現(xiàn)。隨著我們越來越精通數(shù)字技術(shù),某些站點(diǎn)對訪問者的期望會越來越高是很自然的。
7. Serif竭盡全力
回到過去非視網(wǎng)膜屏幕和糟糕的字體支持的糟糕時代,在您的Web界面中堅(jiān)持使用無襯線字體非常有意義。但是隨著屏幕和字體渲染技術(shù)(更不用說自定義字體支持)變得越來越強(qiáng)大,我們開始看到越來越多的精美字體成為中心焦點(diǎn)?;蛘咧辽?,更重要的輔助角色。
固定導(dǎo)航已成為注重轉(zhuǎn)換的網(wǎng)站(因?yàn)楹诵腃TA在您滾動時可以堅(jiān)持使用)或菜單龐大的網(wǎng)站的支柱。通過始終將導(dǎo)航控件始終放在用戶的指尖,這是一種簡化網(wǎng)站體驗(yàn)的好方法。
從視覺上看,最明顯的方法是在導(dǎo)航欄上添加陰影,并將其移動到站點(diǎn)頂部下方,如上面Reseau的站點(diǎn)所示。但是,它也可以在更扁平的設(shè)計(jì)中使用,就像您在Anchor&Orbit網(wǎng)站上看??到的那樣。
類似于離網(wǎng)設(shè)計(jì),這允許在設(shè)計(jì)內(nèi)自然(或有目的地)出現(xiàn)有趣的并置,這帶來了有趣的創(chuàng)意挑戰(zhàn)。
9. 元素
當(dāng)您嘗試以視覺格式傳達(dá)復(fù)雜的信息時,靜態(tài)圖像通常不會。畢竟,復(fù)雜度往往會隨著時間的流逝而發(fā)展-UI的靜態(tài)圖像只會告訴您其中包含的內(nèi)容,而不是告訴您如何使用它。
即使在圖像中有許多顏色,漸變和細(xì)節(jié)的情況下,它也仍然具有很高的質(zhì)量-GIF很難做到這一點(diǎn),而尺寸卻沒有呈指數(shù)級增長
當(dāng)我們要發(fā)布長格式內(nèi)容時,可能會很想在頁面上扔一個長文本字段并稱其為一天-特別是當(dāng)我們的長格式內(nèi)容由CMS支持時,其中一個布局會為內(nèi)容從200字的簡介到詳細(xì)的,短篇幅的教程。
但是有些設(shè)計(jì)師和作家英勇地抗拒誘惑,并返回專題報(bào)道的概念-將自定義布局與為演示文稿量身定制的副本結(jié)合起來,講述引人入勝的冗長故事,通過視頻,聲音,圖表和圖形,地圖,以及更多。
公平地講,這幾乎不是“新”趨勢-實(shí)際上,我將其稱為圍繞Web發(fā)布進(jìn)行長期對話的基石-但隨著目前出現(xiàn)的所有Web發(fā)布工具(包括我們自己),似乎就像是這個方面在2018年變得更加突出的好時機(jī)。
這個故事幾乎可以將您帶到那里。對于一個看起來仍然非常抽象的問題(甚至是不現(xiàn)實(shí)的),這對于至關(guān)重要的問題而言至關(guān)重要。它還巧妙地將一個復(fù)雜的主題變成了一系列易于消化的段落。您永遠(yuǎn)不會對內(nèi)容的總量感到不知所措,因?yàn)樗粫鹑藗儗ψ陨淼年P(guān)注。相反,您會發(fā)現(xiàn)自己正在閱讀每個單詞,因?yàn)樗媸翘菀琢硕液芪恕?/div>
請注意,我在這里并不是在批評CMS:實(shí)際上,可以通過CMS提供這類體驗(yàn)。這只需要一點(diǎn)點(diǎn)才智-這個故事的所有視覺效果都可以通過背景圖像和視頻來傳遞-并在編寫,設(shè)計(jì)和開發(fā)它們時仔細(xì)注意各個故事的一致性。是的-一種與您的標(biāo)準(zhǔn)“博客文章”不同的內(nèi)容模型。
如果您要尋找更具吸引力的長版,我不能推薦紐約時報(bào)的“ Tuam失落的孩子們”。
值得注意的是,這些更多樣化的長形方法可以在破碎的網(wǎng)格或標(biāo)準(zhǔn)列上使用,如上面的《紐約時報(bào)》所見。
11.可變字體!
縱觀當(dāng)今的網(wǎng)絡(luò),很難相信僅僅幾年前,我們被迫依靠稀疏的幾種字體來提供我們所有的文字內(nèi)容。
如今,網(wǎng)絡(luò)上到處都是各種各樣的華麗字體,這引起了人們對字體,字體設(shè)計(jì)和字體的大量消費(fèi)的革命性興趣。
隨著可變字體的發(fā)布,它只會變得更好。蘋果(Apple),谷歌(Google),微軟(Microsoft)和Adobe(Adobe)這兩個技術(shù)界(和印刷術(shù)界)知名人士的聯(lián)合項(xiàng)目—可變字體項(xiàng)目實(shí)現(xiàn)了一種全新的字體設(shè)計(jì)形式。作為OpenType格式的正式補(bǔ)充,它:
允許類型設(shè)計(jì)人員沿多達(dá)64,000個變化軸(粗細(xì),寬度等)內(nèi)插字體的整個字形集或單個字形,并將設(shè)計(jì)空間中的特定位置定義為命名實(shí)例(“粗體”,“壓縮”等) )。
如果(像我一樣)這句話讓您有點(diǎn)撓頭,請關(guān)注約翰·哈德森(John Hudson)更為直接的版本,他說可變字體是:
行為類似于多個字體的單個字體文件。
但是,當(dāng)討論諸如字母設(shè)計(jì)之類的視覺藝術(shù)時,最好堅(jiān)持視覺:
來自Typekit博客的Erik van Blokland。
簡而言之,這就是可變字體:單個字體文件,可以在jiff中從Thin變?yōu)锽lack。無需在CSS中調(diào)用16種不同的字體。
它會很大。
12.內(nèi)容中心-還是webook?—變酷
(要明確:內(nèi)容一直很酷。.)
作為一個內(nèi)容極客,我很高興看到一堆美麗的,以內(nèi)容為中心的網(wǎng)站在2017年提供了大量有用的,精心編寫的信息,而且我想我們會在2018年看到更多2017年批次的所有成功都可見一斑。
看到許多品牌都拋棄了熟悉的門控PDF方法進(jìn)行電子書分發(fā),并完全利用網(wǎng)絡(luò)發(fā)布我喜歡稱之為“ webooks”的長篇內(nèi)容的潛力,這也令人著迷。
我指的是什么?好:
條紋地圖集指南
空氣宇宙。
DesignBetter.co
對講機(jī)書籍
我們自己的電子書網(wǎng)站。
我需要繼續(xù)嗎?
13. CSS網(wǎng)格!
CSS-Tricks的Robin Rendle提供的CSS網(wǎng)格演示。
正如羅賓·雷德爾(Robin Rendle)雄辯地將其放在CSS-Tricks上一樣:
嗯,CSS Grid是第一個用于Web的實(shí)際布局系統(tǒng)。它旨在將內(nèi)容組織為列和行,并且最終為開發(fā)人員提供了對我們面前的屏幕幾乎類似于上帝的控制。
提示邪惡的笑聲。
注意:Webflow 將支持CSS網(wǎng)格,但尚無正式日期。
14.對好數(shù)字設(shè)計(jì)工具的追求
2017年是深入討論設(shè)計(jì)工具的性質(zhì)以及它們對我們工作的適應(yīng)程度的重要一年。
Spectrum的Bryn Jackson提出了以下理由:
設(shè)計(jì)工具與工程工具之間的一種中間格式,可以為產(chǎn)品團(tuán)隊(duì)(尤其是設(shè)計(jì)師)提供更高效,更強(qiáng)大的工具。
在名為“ Interface ” 的帖子中。他繼續(xù)說:“當(dāng)今可用的所有流行設(shè)計(jì)工具都已針對插圖進(jìn)行了優(yōu)化。”
(盡管應(yīng)該注意的是,他將“插圖”歸類為產(chǎn)生“沒有本地交互性的圖像,圖標(biāo),插圖,字體,廣告,印刷媒體或其他視覺傳達(dá)媒介”的任何設(shè)計(jì)作品,這是有爭議的主張)畢竟,不是閱讀和看到互動形式嗎?)
除了關(guān)注插圖和交互性的定義外,不難看出杰克遜的觀點(diǎn):從根本上說,大多數(shù)現(xiàn)代設(shè)計(jì)工具都專注于圖像的產(chǎn)生,而不是界面的產(chǎn)生。
設(shè)計(jì)師兼工程師Adam Michela在“ 我是Facebook的設(shè)計(jì)師,這就是當(dāng)今設(shè)計(jì)工具中缺少的東西 ”中提到了許多相同的注解。他認(rèn)為,在那里,大多數(shù)設(shè)計(jì)師將大部分時間都花在創(chuàng)建幾乎沒有甚至沒有實(shí)際價值的人工制品上,因?yàn)樗鼈儍H代表最終產(chǎn)品-數(shù)字接口迅速脫離了上述表示形式。
他以充滿希望的音符結(jié)束了這篇文章,他說:“有機(jī)會創(chuàng)建融合(而不是橋接)設(shè)計(jì)和實(shí)現(xiàn)的工具。”
正是我們要在Webflow上構(gòu)建的。像MICHELA,我們設(shè)想一個設(shè)計(jì)交付不是一個網(wǎng)站的示意圖,但是是網(wǎng)站本身。不是接口的文檔,而是接口本身。不斷發(fā)展,與網(wǎng)站保持好同步,但是不斷生成版本的時間表,只需單擊一下按鈕,就可以查看甚至恢復(fù)版本。
我們還沒有到達(dá)終點(diǎn),但是在您的幫助下,這就是我們前進(jìn)的方向。
15.多樣性和包容性是設(shè)計(jì)挑戰(zhàn)
Webflow是平等機(jī)會的雇主。我們致力于建立一個團(tuán)隊(duì),不僅歡迎而且鼓勵他們思想和身份的多樣性。
–我們的工作清單
在Webflow所在的美國這里,日益激烈的政治氣氛促使人們更加關(guān)注多樣性和包容性在設(shè)計(jì)中的作用。
我們承認(rèn),設(shè)計(jì)選擇,因?yàn)榭此坪苄〉臎Q定性別的下拉列表中包含哪些選項(xiàng)-在所有甚至包括性別的下拉列表中-無論深深我們的許多同胞的。我們將再次看到錯誤消息的措辭和數(shù)據(jù)驗(yàn)證機(jī)制在人機(jī)交互動態(tài)中的強(qiáng)大作用。我們意識到,在廣告工具中使種族成為過濾器會帶來徹頭徹尾的種族主義影響,從而維護(hù)我們許多人都希望看到的顛覆性的現(xiàn)有權(quán)力關(guān)系。
而且我們意識到,如果我們的團(tuán)隊(duì)不是多元化和包容性的,那么我們的設(shè)計(jì)解決方案也不可能。
無論如何,我們中的一些人。
另一方面,我們還看到性別偏見以明顯矛盾和邊緣化的方式擺在丑陋的頭上,把我們通常認(rèn)為最善良的對話(例如提供反饋)變成了雙重標(biāo)準(zhǔn)的明顯例子。
最終,作為用戶體驗(yàn)(UX)專業(yè)人員,我們的工作是為每個人(無論他們的具體情況如何)提供可用的,理想的愉快體驗(yàn)。
換句話說:我們的工作全是包容性。讓我們讓2018年成為我們所有人專注于大程度地完成工作的一年。
16.“視頻轉(zhuǎn)軸”播放
盡管事實(shí)上我們當(dāng)中幾乎沒有人熱衷于要求視頻成為網(wǎng)絡(luò)發(fā)行媒體,但是發(fā)行商仍然對這種轉(zhuǎn)變持驚人的樂觀態(tài)度。
您到處都可以看到它:從新聞網(wǎng)站上,這些網(wǎng)站實(shí)際上堅(jiān)持要觀看視頻,而不是閱讀由Snapchat,Instagram和Facebook推動的簡短“故事”。Excel肯定會很快加入潮流的!
但是,就像大多數(shù)技術(shù)一樣,這并不是中立的發(fā)展。成千上萬的記者失去了工作,這是從文本轉(zhuǎn)向動態(tài)圖像的關(guān)鍵。
而且對于進(jìn)行轉(zhuǎn)換的網(wǎng)站而言,前景可能也不是那么好。根據(jù)《哥倫比亞新??聞評論》:
專注于視頻的發(fā)行商在僅僅一年的時間里,散發(fā)出大量未分類的,平淡無奇的大量“快餐”視頻,就沒收了大部分來之不易的本地觀眾。
不管是什么,獨(dú)立新聞事業(yè)都在遭受苦難-謝謝特朗普,但是向視頻的轉(zhuǎn)變并沒有真正的幫助。
一個積極的注解:根據(jù)Digiday的說法,“視頻每千次展示費(fèi)用遠(yuǎn)遠(yuǎn)大于顯示每千次展示費(fèi)用”(每千次展示費(fèi)用為“每次展示費(fèi)用”)。在理想的世界中,這意味著報(bào)紙可以在其故事中加入較少的廣告而擺脫困境。
但是,當(dāng)然不會發(fā)生。
面對所有這些情況,值得記住的是,文本既是創(chuàng)意媒體又是信息媒體,它們的優(yōu)點(diǎn)是:
生產(chǎn)相對較快
很便宜
它仍然是網(wǎng)絡(luò)上大多數(shù)交流的主要格式
最后一點(diǎn)可能會讓您抓狂。但我鼓勵您跳到主要的社交網(wǎng)絡(luò)并滾動瀏覽。除非您使用Instagram,Pinterest或Snapchat,否則您很有可能會看到大量寫作。即使在那些以視覺為先的平臺上,文本仍然扮演著重要的輔助角色。
因?yàn)楸M管一張圖片在捕捉場景時可能“價值一千個單詞”,但它們卻很少捕捉上下文-誰,什么,何時,何地,為什么以及如何使圖像有意義。
這很自然地將我們引向了下一點(diǎn):
17. UX編寫器的崛起仍在繼續(xù)
影響設(shè)計(jì)成真的任何人都是設(shè)計(jì)師。這包括開發(fā)人員,項(xiàng)目經(jīng)理,甚至公司法律。都是設(shè)計(jì)師。
–Jared線軸
我在去年的設(shè)計(jì)趨勢文章中略微提及了這一點(diǎn),但今天,我想將更多精力集中在稱為“ UX寫作”的門徒的崛起上。
簡而言之,UX編寫者專注于UI中找到的內(nèi)容,主要是針對大型數(shù)字產(chǎn)品和Web應(yīng)用程序。現(xiàn)在,當(dāng)我解釋說我為Webflow等公司(過去是LinkedIn)編寫產(chǎn)品內(nèi)內(nèi)容時,人們傾向于說“什么?”。
但是請放心:UI 包含了書面內(nèi)容。該內(nèi)容通常在您理解中起關(guān)鍵作用:
在UI中可以做什么
怎么做那些事
您可能會遇到哪些限制和復(fù)雜性
但是,UX編寫的功能遠(yuǎn)不止這些。界面中的文字也可以成為塑造我們最喜歡的UI背后的品牌認(rèn)知度的強(qiáng)大工具。只要想一想您所看到的所有推文,都可以突出顯示網(wǎng)絡(luò)應(yīng)用程序中的一條熱鬧的副本行,或者所有404頁的展示臺上都帶有機(jī)智的消息,旨在在次佳的時刻推動行動。
這在稱為聊天機(jī)器人的UI格式中最為明顯。一般而言,這些用戶界面僅由文字組成。文字成為用戶界面。聊天機(jī)器人的個性(或品牌)只能通過語言表達(dá)。加上一些精心挑選的表情符號來調(diào)味。
作為一個經(jīng)驗(yàn)豐富的UX作家,我很高興看到這個關(guān)鍵角色獲得了更多當(dāng)之無愧的認(rèn)可。
我們也是設(shè)計(jì)師。我們只是以音節(jié)和字母形式工作。我們等不及與您合作。
18.設(shè)計(jì)。系統(tǒng)化。
既然設(shè)計(jì)已經(jīng)贏得了“競爭者的地位”,那么對話已經(jīng)從價值主張轉(zhuǎn)移到了更成熟的分析,即如何使設(shè)計(jì)的成功在整個品牌的眾多產(chǎn)出和環(huán)境中變得更加系統(tǒng),可擴(kuò)展且更具凝聚力。
設(shè)計(jì)系統(tǒng)專注于將品牌美感和功能性方法轉(zhuǎn)化為模塊化的組件,這些組件可以進(jìn)行混合和匹配以滿足(理想情況下)任何UI的獨(dú)特需求。將設(shè)計(jì)語言系統(tǒng)化后,它可以簡化決策制定,減少開發(fā)時間,并使設(shè)計(jì)師可以騰出時間從事尚未建立設(shè)計(jì)模式的知名項(xiàng)目。
按照慣例,品牌總是緊隨潮流。UXPin推出了Systems,這是用于創(chuàng)建和維護(hù)設(shè)計(jì)系統(tǒng)的工具。Shopify之所以推出Polaris,是因?yàn)槠鋬?nèi)容,設(shè)計(jì)和開發(fā)指南的獨(dú)特融合(我對此非常有熱情),因此受到了高度贊揚(yáng)。UX Power Tools推出了一個庫,試圖使Sketch成為可行的設(shè)計(jì)系統(tǒng)工具(我們將會看到?。?。
期待看到很多更多的這個在2018年。
19.原則至上的設(shè)計(jì)
長期以來,設(shè)計(jì)界一直沉迷于其中一種“先有雞還是先有蛋”的辯論:內(nèi)容優(yōu)先或設(shè)計(jì)優(yōu)先。
我一直在爭論的內(nèi)容優(yōu)先方面。不僅因?yàn)槲沂且粋€“內(nèi)容豐富的人”。在我看來,在決定如何打包消息之前先確定消息是純邏輯。
但是最近,隨著我從為特定交付物設(shè)計(jì)內(nèi)容策略,轉(zhuǎn)向面向更多系統(tǒng)的工作(品牌級內(nèi)容策略),我開始感到這樣的想法,即我們的工作不應(yīng)從設(shè)計(jì)或內(nèi)容開始。
它應(yīng)該從原則開始。
其他所有內(nèi)容-它的外觀,如何工作,聽起來如何-都應(yīng)源自并依賴于一組定義明確且明確表達(dá)的原則。
或如Shopify資深UX負(fù)責(zé)人Amy Thibodeau在她美麗的文章“ Locating Polaris”中所說:
如果創(chuàng)建該系統(tǒng)是為了支持實(shí)際工作,則它應(yīng)反映組織如何做事以及它重視什么。例如,不包含任何有關(guān)原理或內(nèi)容方法的設(shè)計(jì)系統(tǒng),在日常工作中可能不會優(yōu)先考慮這些內(nèi)容。
原則為所有其他決策提供了框架,從英雄中的副本應(yīng)該多長時間到內(nèi)容提供背景的圖像。畢竟,品牌是建立在原則之上的:使命,愿景和承諾。這些事物中的每一個都需要基本的信念來使其活躍,使其與他人相關(guān)。
換句話說:原則提供了原因。
例如:在Webflow,我們的使命是使設(shè)計(jì)師,企業(yè)家和創(chuàng)意專業(yè)人士能夠在網(wǎng)絡(luò)上實(shí)現(xiàn)他們的想法。從瑞安(Ryan)為我們創(chuàng)建的美學(xué)方法到我設(shè)計(jì)的語音和音調(diào)標(biāo)準(zhǔn),這一使命都為我們所做的一切注入了活力。
正是這些標(biāo)準(zhǔn)指導(dǎo)了我們的初稿,彼此之間提供了反饋,并有望使每篇博客文章,電子郵件,營銷頁面等得到滿足。到目前為止,這是一個很好的起點(diǎn)。
新聞名稱:成都企業(yè)建網(wǎng)站多少錢
鏈接地址:http://muchs.cn/news18/184968.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、域名注冊、全網(wǎng)營銷推廣、電子商務(wù)、企業(yè)網(wǎng)站制作、建站公司
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)