首先，為什么要動？可能你會想到以下幾條理由：
呵呵，你要這么想就完了。
那么該如何衡量一個動效是否應該出現(xiàn)呢，我們認為有幾個考核標準：
1. 這個動效是否會影響性能？
首先，這個動效是否會影響性能？這個是最重要的，添加任何動效前都要考慮是否會影響產品的性能，如果一個很酷炫的動效會拖累性能，使體驗變得卡頓不流暢，那么必須毫不猶豫的砍掉或簡化。
例子：化身間諜
比如這個例子，這是一個穿越情景的過場動畫，隨著年份的倒轉背景出現(xiàn)各個歷史大事件，給人以歷歷在目的感覺，設計師考慮到了多張圖片會出現(xiàn)卡頓的可能性，所以特意降低了每張圖的清晰度，因為內容本身就是老照片的風格，所以這種降低畫質的手法反而增強了畫面的真實感。
2. 這個動效是否會提高產品的可用性？
任何動效的出現(xiàn)都必須帶有明確的目的性，能夠解決用戶在使用過程中的困惑，而不是炫技。單純的炫技只會分散用戶的注意力，弱化內容，變得適得其反。
例子：翻頁提示
比如這個上滑提示。不用解釋，用戶一看知道該做什么。動效增加了產品的可用性，所以這樣的動效是非常有意義的！
3. 這個動效是否會給你的產品帶來獨特氣質？
這里所說的氣質是動效本身會有助于增強用戶對于產品的認知和情緒帶入。一個相得益彰的動效會為你的產品錦上添花，深化你的主題和功能，注意，一定是與主題相關的，牽強的搭配只會叫人覺得莫名其妙，毫無意義。
例子：人生四時
再看這個例子，人生四時，四根火柴依次燃燒，慢慢燃盡，這種油盡燈枯的感覺很切合的體現(xiàn)了產品生老病死的主題。
4. 重新審視第一條，看你的動效是否影響性能
所以，合理的動效不應是花拳繡腿，而應該是解決問題的手段。
好，我們再看看哪里需要動效，這里舉幾個例子：
1. 加載
首先是出現(xiàn)在加載環(huán)境，不管是網頁還是H5都不可避免的會出現(xiàn)讓用戶等待的情況，在等待的過程中為了讓用戶知道他的手機沒有死機以及網絡是通暢的，我們應該在這個時候加入一些與主題相關的動效來提醒他內容正在加載中。
例子：化身間諜H5 loading
這是一個穿越類的H5，所以設計師在設計loading的時候選用了蟲洞的理念，與內容本身緊密貼合。
2. 轉場
第二個情景是轉場。具有意義的轉場會降低產品割裂感，我們看兩個例子就明白了。
例子：QQ會員觀影特權
這個例子里元素在默認狀態(tài)下會做上下浮動的效果，當我們滑動時候，元素很自然的做了一個出場入場的效果。很自然，沒有割裂感。對吧？
3. 頁面元素的互動
也可以為網頁元素增加一些必要的動效。
例子：好聲音第四季首頁：
看下好聲音的專題頁面，在網頁上的能夠點擊的按鈕或者文字鏈，在鼠標經過時都有點變化，這個十分必要。因為表面上的變化會給用戶一種心理暗示，那就是點擊后也會有變化。
4. 心理需要
這里所說的心理需求是指氣氛和情景的營造，例如節(jié)日，游戲活動等產品，是需要一些動效去滿足用戶心理需求的。大家都知道在微信里輸入“生日快樂”是會掉下生日蛋糕的，這個動效就比干巴巴的文字有趣多了。
例子：一封家書
一封家書，注意看，背景有飄落的雪花，漫天大雪勾起思鄉(xiāng)情，對吧，合情合理，有情有義！
好，說完哪里動，我們現(xiàn)在看看怎么動。
1. 基于真實形態(tài)的模擬
基于真實的動畫會叫人看起來自然流暢，符合規(guī)律，比如物體運動時的加速度現(xiàn)象。
例子：Look
注意看這個筆畫的動勢，是有快有慢的，模擬了寫字時起筆收筆的那種節(jié)奏感，所以看起來是自然真實的。
2. 人物動作夸張化
在H5的設計中，經常會出現(xiàn)各種各樣的人物形象，夸張的人物動作會生動你的形象，增加趣味性，給用戶以驚喜。
例子：巴菲特這一年
巴菲特老爺爺，動作很親切。
3. 給元素賦予彈性
有彈性的物體會叫用戶覺得具有生命感和真實性，彈的程度取決于你對元素軟硬度的設定。
例子：拍個大頭鬼
三個小鬼一跳一跳，彈性賦予了他們頑強的生命力。
4. 蒙太奇
這是一種類似蒙太奇的手法，通過快速切換的畫面來形成一種奇妙后現(xiàn)代感覺。
例子：傳奇硬箱
炫酷了，節(jié)奏很快，提氣！
好，以上只是一些基本的動效手法，在實際的應用中其實有很多手段，在這里我建議大家可以去看看迪士尼和皮克斯的動畫，應為動畫本身是一種對于動作行為高度概括的手段。雖然這些都是電影，但是他們使用的手段和遵循的理念是非常值得我們去學習和借鑒的。注意觀察這些大牛們的作品，你會發(fā)現(xiàn)他們的作品中充滿了走心的細節(jié)。
簡單來說，當用戶打開一個界面，注意力首先會被動態(tài)的物體吸引，然后才會把注意力轉向顏色對比強的部分，最后才是形狀。這一過程是人在進化過程中形成的本能反應，基本適用所有用戶。同時一個非常重要且容易被忽略的原則：用戶的注意力是有限的，而且越來越少。很可能在用戶注意到一段動效之后，注意力和耐心已經用盡，無法看到其他內容就著急去下一個界面了。
所以，對于動效這樣一個非常強勢的工具，一定要用在希望用戶注意的部分，并且認真打磨。真正做到“不為動而動”。
文章來源：優(yōu)設 作者:程遠
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文字和排版可以追溯到五千年前，而圖形化界面僅僅只有40年的歷史。最關鍵的轉折點出現(xiàn)在1973年的施樂，最早的圖形化界面出現(xiàn)在了他們的Alto電腦上，而這個設計就是現(xiàn)如今圖形化界面設計的基礎。在Alto 的界面誕生后的10年里，幾乎是它一家獨大，并且它也被大家視作為數(shù)字技術的未來。
早期的Alto 在80年代進化為著名的施樂之星，而施樂的這個設計方案也成為了第一個商用的操作系統(tǒng)圖形化界面。
不過不論是Alto 還是施樂之星，都沒能真正意義上崛起。不過施樂的圖形化界面最終深深的影響了蘋果和微軟的道路，比爾蓋茨和喬布斯先后在施樂的研發(fā)中心觀摩了施樂之星的運作，而喬布斯更是在1984年先人一步發(fā)布了著名的Macintosh 系統(tǒng)，也就是后來我們所熟知的Mac OS。
Macintosh 的發(fā)布不僅僅意味著相對成熟的GUI的出現(xiàn)，而且它為大眾帶來了真正意義上的自定義字體的功能。這款系統(tǒng)內置了許多以著名城市命名的字體，也正是在此之后才有越來越多的著名字體的數(shù)字版本在數(shù)字平臺上發(fā)布并應用。
仔細觀察這些早期的字體，我們能夠發(fā)現(xiàn)，雖然已經是圖形化的界面，但是其中絕大多數(shù)的界面元素都還是以純文本的形式而存在，它們以一種奇妙的方式被整合到一個界面當中。循著界面的發(fā)展歷程沿路看過來，不難發(fā)現(xiàn)，文本和排版幾乎是貫穿始終的主線，它是一個不容忽視的核心類別。
界面中的每一個文字、每一個字符都很重要。好的文本是好的設計。文本是最根本的界面，是我們設計師來塑造和打磨這些信息。
看看下面的天氣界面的設計，想象一下將所有界面元素都擺在桌上會是什么樣的效果：無非就是兩張圖，幾個圖標和一大堆文本。
作為設計師，工作并不是將一堆隨機的內容和元素排布在屏幕上，讓它們看起來夠漂亮就行了。真實的情況是，我們要從最核心的內容和文本開始著手，然后從這里著手細化，并完善出其他的部分。這就是我們工作的核心。
文本的清晰度同樣扮演著關鍵性的角色。如果我們的大腦花費一兩秒鐘單純只是分辨一個字形，那么清晰度上的微小差異是無傷大雅的?？墒钱斔鼈兘M合成為大段的文本，不同的字母組合構成不同的詞匯、段落的時候，清晰度的影響就更大了，排版的重要性也顯得更加明顯了。
當然，影響界面設計的文本屬性還有很多，比如平衡性，定位和層次結構，但是好的文案和排版的影響至少占據(jù)整體影響的95%。
在偉大的設計師眼里，文本不僅承載內容，而且可以構成界面。
– Oliver Reichenstein
既然屏幕上的文本顯示是如此的重要，那么我們應當先了解人們是如何閱讀的，而文本顯示又是如何影響我們設計決策的。
讀過Billy Whited 的文章《Setting Type for User Interface》之后，讓我對于文本閱讀的效率有了更深的認知。一個少于20個字母的獨立單詞放在句子中會更快被理解，而單獨放置的時候我們需要耗費更長的時間來識別。
其實這個研究結果也表明我們閱讀較長句子的時候，并非是逐個單詞地閱讀，而是跳躍著閱讀功能性的詞匯，我們將這種閱讀方式稱為離散跳躍式閱讀，俗稱掃視。
掃視讓我們的閱讀能力更強，我們甚至會跳過短的功能性詞匯。
我們應當記住這一關鍵特征，因為我們的界面中所承載的詞匯大多是孤立的單詞。簡單說來，界面是無法利用掃視這種方式來獲取信息的。
總的來說，單詞在閱讀中發(fā)揮著無比重要的作用，無論是作為內容還是作為界面元素，均是如此。無疑，選擇合適的字體就相當重要了。
過去，人們常常認為眼睛和大腦是通過單詞的外輪廓（Bouma Shape）來識別單詞，當然，后來的研究證明這個想法是錯的，單詞的可讀性和易讀性的影響因素不止是外輪廓，字母本身的形態(tài)、細節(jié)和清晰度同樣深入的影響著它的識別度。
其實這個問題一開始并不是那么好回答。閱讀很大程度上依賴于我們的習慣，越常見的內容對我們而言越容易識別。這樣一來，我們就不那么容易判斷讓字母清晰易讀的影響因素了。為了了解這一點，我們需要將句子分割為單詞，分解單詞為字母，在字母中查看細節(jié)。
早在2008年，維多利亞大學心理學系根據(jù)測試結果得出結論，大寫和小寫的拉丁文字母是最容易識別的，也最易于閱讀。
這項研究有趣的地方在于，它揭示了一個事實：每個字母延伸出來的線性端點是最易于識別的地方，也是每個字母的特點所在。
上面的圖片標識出了這些最易于識別的部分。每一款字體在這些部分應當設計為最通用、最為人所熟悉的樣式，同樣的，它們也應該強調每個字母的差異。
在2010年的時候，另一項由 Sofie Beier 和 Kevin Larson 開啟了一個新的研究項目，這項研究專注于測試經常被誤讀的字母和字符的識別度。
這項研究表明，在相同的字體和相同的尺寸、相同字重的情況下，有些字體或者變體的細節(jié)確實比其他的更加清晰、更易于識別。這項研究的結果說明，纖細的字體加粗之后識別度效果會明顯會增強，而字母的X高度如果能夠占據(jù)上伸區(qū)或者下探區(qū)的空間，識別度會更好。
為了更好的理解字體的清晰度的概念，你可以下載我所開發(fā)的這款工具 Legibility APP 來測試不同字體在模糊、炫光等多種不同情況下的清晰度和辨識度。這是一款處于測試階段的工具，可以在Chrmoe、Opera和Safari 中運行。
理解了用戶閱讀的方式和字體可讀性的影響因素之后，我們應當開始了解UI中的字體的幾個關鍵因素。下面是UI中字體使用的10個關鍵因素。
可讀性是UI中字體所需考慮的首要因素。字母字形必須清晰可辨，作為UI元素，其中不同的字母必須可以被用戶輕松辨別出差異。許多經典的字體，甚至包括 Helvetica ，都沒辦法清晰分辨 字母 i 的大寫形態(tài) I，和大寫字母 L的小寫形態(tài) l，這在界面設計中無疑是有影響的。
上圖中，左邊的字體為 Source Sans Pro , 右邊為 Helvetica，無疑對于 Illiterate 這個詞Helvetica 字體下前三個字母完全無法分辨。有部分用戶也同意Helvetica 并不適合作為UI界面的顯示字體而存在，因為這款字體終究是為平面印刷顯示而設計的，并非為屏幕而生。
在iOS 7 時代，蘋果短暫地將 Helvetica 作為系統(tǒng)的主要顯示字體的時候，曾對特定的用戶群體造成過信息識別的困擾。這也最終催生了我們現(xiàn)在所看到的蘋果官方字體 San Francisco。舊金山是為UI界面而生的字體，它的x高度比Helvetica 更高，字母間距更寬，字母間的識別度更高。
一款理想的UI界面所用的字體，不應當過于“顯眼”，而該是悄無聲息，“隱型”的。當用戶在試圖完成某項任務的時候，字體不應當給用戶以“出戲”或者“顯眼”的感覺，也就是說，字體不應當超出用戶的認知負荷，而內容和信息才應該成為真正的關注點。
給UI界面使用的字體應當具有靈活性。我們曾經為 Medium 做過用戶體驗設計，作為一個網頁博客平臺，我們很難去控制用戶的能力、內容、瀏覽器、屏幕尺寸、網絡帶寬和連接速度，包括輸入法。
所以我們最終為它所選取的字體應當支持大量不同的內容，在不同的尺寸下?lián)碛辛己玫淖R別度，能夠兼容不同的設備，尤其是在小屏幕上。Sans serifs 字體就是專門為小尺寸低分辨率屏幕而定制的。
x高度的參考標準是小寫字母x的高度，同等尺寸下，x高度更大的字體更易于識別。不過x高度也不是越大越好，當x高度超過一定限度的時候，小寫字母n和小寫字母h就很難分辨了，這一點應當注意。
字母的寬度和高度的比例也是相當重要的一個屬性。寬度和高度比例越高，字母在小屏幕上的識別度就越高。
字母之間的間距和字母內部的空間同樣是影響字母可讀的因素。字母間距太小同樣會影響整體的可讀性，而好的顯示字體會更好的控制字母間距，確保單詞在視覺上的“透氣性”，甚至可以營造出一種韻律感。
不過字間距不是越寬松越好，太過寬松會讓整個單詞看起來過于松散。有一個值得參考的標準，就是字母之間的間距應當比字母內的開口縫隙略小一點。
許多字體不同的筆畫粗細不同，而對于UI界面而言，筆觸間的對比度越小識別度越好。較大的筆觸對比度下，字體在小尺寸屏幕上，較細的筆畫會難于分辨。
OpenType 功能對于字體而言是相當重要的。支持OpenType的字體擁有更大的靈活性，對于不同的語言和特殊的字符有著更為優(yōu)良的兼容性。
接下來要說的情況可能大家多少都碰到過。網頁在完全加載出來之前，部分內容因為字體沒有加載而無法顯示。
其實這可以通過先加載本地字體，顯示內容，等網頁字體加載好了之后再行替換，以達到無阻塞顯示。這種方法的缺陷是需要預先設定一個可調用的本地備用字體。
Hinting 指的是為了字體為了保證最大的可讀性而針對顯示器狀況進行調整的過程。Hinting 可以通過匹配顯示器的像素柵格讓字體顯示更加清晰，降低誤讀的可能性。
這項技術最初是由蘋果公司所提出的，不過因為TrueType 字體技術的出現(xiàn)，Hinting 正在消失。
隨著新的UI標準、排版技術的提升，字體技術也在不斷的進步，在不遠的未來，字體會從傳感器獲得信息，更好的兼容不同的環(huán)境、隨著亮度、設備、距離而進行智能化的調整，甚至復雜而龐大的中文字體，也可能作為靈活的網頁字體而存在。
字體會讓我們的工作更加便捷
讓界面交互更快，更加觸手可及
讓UI更加易用
更加便捷
也更加清晰而高效
文章來源：優(yōu)設 作者:陳子木
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為大家概括性地介紹5種流行移動應用中常見的界面設計模式以供大家在自己的項目中參考。這些設計模式有助于大家提高設計的可用性，讓界面變得更加直觀。文章將側重介紹能夠幫助大家進行下列各方面設計的模式：
在這個社交網絡盛行的時代，我們是不是真的還需要用這種陳舊的方式提交個人資料？社交登陸這一設計模式完全可以讓用戶輕松快捷的登陸，從而取代注冊、填寫表單之類的麻煩工作。
用戶可以直接登陸自己的社交網絡賬號（Facebook、Twitter或者Google等），無需另外創(chuàng)建一個以后不太可能繼續(xù)使用的賬戶，這樣可以大大提高注冊效率。除此之外，這一設計模式還有下列好處：
注：在國內這一設計演變成了：您可以使用QQ/微博合作帳號登錄，然后給你綁定，繼續(xù)回到注冊界面 – –
通知功能可突出顯示近期的活動和操作。我們每天要接觸大量的信息，但百忙之中卻沒有時間（或者不愿意把時間）花費在手機上。我們都喜歡在盡可能短的時間內完成要做的事，然后馬上知道是否有新的活動或者情況能夠引起自己的關注。因此，對于通知設計模式的透徹理解和妥當實施非常重要。
很多知名公司的移動應用采用了下列幾種不同的方法實施其通知設計：
你可以模仿一下你最喜歡的解決辦法，試試這個辦法是否適合于你和你的用戶。
通知欄該怎么設計，具體方法右戳學習：《怕打擾用戶？來看看怎樣設計通知欄不會討人厭》
彈窗（也叫層疊窗口）是一種常用于互聯(lián)網廣告的方法。彈窗會在不創(chuàng)建新窗口的情況下遮蓋住主要內容，無法使用攔阻軟件進行攔截，因此用戶非看不可。一般來說這種情況很讓用戶討厭，但在有些情況下，彈窗打斷用戶的使用反而能給用戶帶來幫助。例如，用戶可能會希望在不丟失當前用戶界面的情況下查看某些信息。
下面是一些彈窗設計模式幫助解決問題的案例：
在習慣了使用Facebook、Twitter或Google等社交網站后，我們都會很自然的使用下拉手勢進行內容更新。第一個使用這個設計模式的公司是Apple，在此之后這一設計就廣為流行開來了。
當用戶需要顯示一列非靜態(tài)，但不能自動刷新的內容時，就可以適用下拉刷新模式。下拉刷新時，屏幕會滾動到頂部，刷新完成后新內容將從頂部開始顯示。這種設計模式可以節(jié)約空間（不需要使用按鈕）而且簡單易懂。這種方式還不僅局限于更新內容，其還可以用于在一系列短信、圖片或資料更新中加載早先的內容。
除了下拉刷新手勢外，滑動也是智能手機上最為常用的手勢之一。很多應用都允許用戶在文章上左右滑動來了解詳細信息或執(zhí)行其他操作。與依賴于點擊鼠標的傳統(tǒng)web應用相比，這一方法充滿創(chuàng)新意義。
在Android和iOS上有大量采用了滑動、點擊及其他特定用戶交互方式的移動應用，你可以在自己的項目過程中予以參考。每個應用對于自己的用戶來說都有不同的意義和價值。你應當在畫線框圖的過程中做好規(guī)劃再投入設計或開發(fā)流程。在測試過程中花點時間思考用戶的反饋、建議和批評。
文章來源：優(yōu)設 作者:程遠
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
iPhone X 在 2017 年上市以來，全面屏手機就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現(xiàn)，物理 Home 鍵都被舍棄改成虛擬按鍵，甚至是沒有虛擬按鍵的手勢滑動操作。
而這些手機都有一個共同的特點，就是屏幕尺寸越來越大。屏幕尺寸變大后，手握手機的方式和界面交互操作方式也隨之改變，那對于設計而言，是否也應該隨之進行改變呢？
想單手點擊屏幕的操作，需要手足夠靈活進行一輪操作才能夠到屏幕上方，過程中稍有不慎，手機隨時會砸地上。作者的手機屏幕已經修了幾次，差不多趕上一臺二手機的價格了。
在 2013 年，國外設計師 Steven Hoober 發(fā)表了一篇《手機界面設計》的研究報告中，對一千三百名手機使用者進行量化研究數(shù)據(jù)：
據(jù)當時研究的數(shù)據(jù)可以看出，有近半的用戶是單手使用手機（現(xiàn)在肯定不止）。當用戶單手操作的時候，實際拇指可以觸摸到的區(qū)域是如下圖這樣的。綠色區(qū)域是拇指的正常操作區(qū)域，黃色區(qū)域是拇指能觸碰到的最大限度范圍，紅色區(qū)域是觸摸比較困難的區(qū)域。
然而這份研究報告的數(shù)據(jù)是在 2013 年發(fā)布，當時還沒有全面屏的出現(xiàn)，如果把上面研究結論的區(qū)域，套用到如今的手機屏幕尺寸上，頂部的紅色區(qū)域會占更大比例。以 iPhone 11 尺寸比例作為參考，如下圖：
拇指可操作范圍大約在 3 分之 2 的區(qū)域，可見想要觸碰到紅色區(qū)域是有一定難度的。也正是因為這份報告只適合當時的手機市場情況，在當今已經不適用了，因此需要重新去考慮如何為大屏幕手機進行界面設計。
根據(jù) 2020 年手機UX設計趨勢，大屏幕設計將會成為熱點。根據(jù)數(shù)據(jù)報告中有說明，2018 年 10 月使用大屏手機的用戶比例是16.3%，到 2019 年 12 月，該數(shù)據(jù)已經上升到 41%，并且會在未來更多新機型的出現(xiàn)中持續(xù)上漲。
那隨著大屏幕手機的普及，就意味著設計師在設計界面的時候，要為大屏幕手機的使用場景進行界面調整，避免用戶難以使用的體驗問題。以下是我整理的一些設計建議方案：
1. 頭部區(qū)域設計更高
通過將標題欄的信息區(qū)域放大，盡量把主要操作內容向拇指區(qū)域靠近。
2. 常用導航與操作居于底部
比起導航欄放在頂部，更適合大屏幕手機的方式是將導航和重要操作盡量往屏幕底部放置。
3. 手勢操作頁面切換與返回
抖音和 Instagram story 等短視頻應用界面都是通過手勢滑動屏幕的方式，對頁面進行切換，操作的學習成本很低，而且主要操作也在屏幕底部。這種操作方式也會在今年越來越多地被使用。
4. 提示彈窗從底部升起
常用的彈窗，很多是設計在屏幕中間彈出，為了適配大屏幕，不妨嘗試從底部彈出，關鍵選項都能輕松選擇，提高轉化率。
5. 使用大卡片
屏幕尺寸變大以后，使用整張大卡片可以讓用戶瀏覽內容更專注，大面積的配圖和留白，也能提高用戶的點擊欲望。
除此以外，作為手機廠商，在發(fā)布大屏幕手機的時候，就有對界面操作做了一些對應系統(tǒng)級的設計調整，比如界面下拉懸停，鍵盤單手模式，屏幕邊緣滑動返回等等。
大屏幕尺寸已經是趨勢，屏幕大意味著內容可以更大限度地得到展示，有利于產品提供更多的服務，不再糾結首屏無法展示完主要內容。在這個信息爆炸的時代，用戶也不再滿足于小屏幕的瀏覽方式。可以說，大屏幕已經是無法改變的趨勢。與其擔心問題到來，設計師更應該思考如何去適應產品的快速迭代，不斷更新自己的設計思維模型，更全面思考問題，產出更合理、體驗更好的設計方案。
文章來源：優(yōu)設 作者:布萊恩臣
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Peter Drucker 說過：「量化才能管理。」這個格言后來成為了我的信條。我決定將我的目標量化，將它分解成為最基礎的習慣來執(zhí)行，并且以每天一定量的執(zhí)行，來實現(xiàn)最終的目標。
我們先構建了一個免費的 Chrome 插件 Confetti ，這是一個能夠幫你追蹤日常習慣的工具，每次完成一個任務，都會有五彩繽紛的紙屑效果出現(xiàn)，祝賀你守住了習慣，達成目標。
以下見解希望對你有所幫助!
一開始，我和 Wilson 就決定使用3屏的主要功能，并構建了一個粗糙的原型。但是，我們沒有足夠的遠見，無法設想我們的產品最終的方向，也沒有對全部的想法進行深入的打磨。
最終，我們向后退了一步。我們回過頭來，確定了最小可執(zhí)行原型的發(fā)布日期，以及真正的核心功能。我們在 Notion 上創(chuàng)建了一個文檔，并且開始梳理和管理哪些功能是「必需品」，哪些功能「如果有了會更好」。比如，登錄、注冊、新用戶引導是必不可少的功能。但是，我們認為「重新排列習慣」是一個提升體驗但是并不亟需的功能。
我們基于這一點，我們開始抓住核心功能，盡可能讓它們足夠易用，強化核心特性。通過確定核心功能的優(yōu)先級，并且確定發(fā)布日期，借此緩解我們的精神壓力，確定我們不會被成堆的功能所淹沒。這也似地我們有足夠的動力解決核心功能。
在設計產品的時候，我經常被提醒要處理好每一個邊緣情況，填好每一個坑，確保體驗的順暢。從零開始構建產品是一把雙刃劍：基于自己的構想來創(chuàng)造產品是令人興奮的，但是相應的，我需要經常在舒適區(qū)以外處理問題。
我一直在 Skookum 從事產品設計的工作，而這些工作通常都是在一定的約束條件下進行的，但是現(xiàn)在所要處理的產品則不同。之前的產品都可以借助現(xiàn)成的設計系統(tǒng)，有早已搭建好的設計語言，有完整的組件，有明確的 UI 狀態(tài)，有非常明確的基礎架構，但是這次是我自己的產品，所有的這些都沒有。而且，這個產品還可能會存在幾種極端的情況、流程和狀態(tài)。
比如，在注冊流程中，按鈕會有默認、禁用、激活、填充、錯誤、懸停等幾種狀態(tài)，但是除了這些之外，我還需要考慮諸如密碼重置的流程和體驗，這可能會涉及到 6 個高度相似的 UI 界面狀態(tài)：
這個過程中，有很多東西都令我一度感到迷惑，這也引發(fā)出我下一個要說的要點……
項目開始之后，我很快就遭遇了組織架構問題。因為我是在工作之余來創(chuàng)建這個產品，這導致我犯了一個非常嚴重的錯誤：我沒有按照傳統(tǒng)的產品流程來創(chuàng)建產品，這隨后導致了一系列的問題。
按照標準的產品設計流程，我需要從用戶流程開始創(chuàng)建，定義用戶可能會執(zhí)行的流程，并且針對主要的流程界面進行必要的總結說明。因為這個項目和之前的工作不一樣，我一開始就忘記了遵循流程這件事情，我錯誤地將它視作為一個包含幾個簡單界面的簡單項目（是不是聽著特別耳熟？很多所謂的小項目翻車都是從這里開始的）。這樣一來，當我開始處理諸多按鈕的不同狀態(tài)和界面變化的時候，整個用戶流程變得混亂不堪，并且我很難確定其中的體驗漏洞有哪些。
最終我停止了這種隨性的設計方式，并且在 Whimsical 當中創(chuàng)建了完整的用戶流程。于是我很快清楚了那些環(huán)節(jié)有所缺失，以及整個界面流程的走向。
按照用戶流程來梳理界面的時候，可以對于整個產品的屏幕狀態(tài)有所了解，并且隨著產品的發(fā)展膨脹，用戶流程的重要性會隨之增長，成為至關重要的部分。
的確，在完成整個 UI 之前，不應該開始向著項目當中添加動畫。但是，不添加并不意味著你無需考慮。實際上，不同的微交互和動畫對于實際的體驗影響是巨大的。你在思考 UI 設計的時候，就應該考慮到微交互和動畫的使用，避免在后續(xù)動效和交互落地的時候，進行不必要的修改。
比如，當我在設計「達成成就」這一體驗的時候，我就考慮到了需要用到的微交互的效果，所以在我設計 UI 的時候可以順著我自己的喜好來進行設計，并且將可能會用到的動效拖到某個角落暫時記下來，避免在設計 UI 的階段，影響了整體的流程和效果。而后續(xù)加入動效的時候，就會方便很多。
我認為，將 UI 和交互結合起來考慮是非常重要的，因為兩者共通塑造了體驗。如果在設計 UI 的環(huán)節(jié)直接加動效，會讓整個設計過程變得復雜臃腫。
其實這也是我在這個項目中犯的一個大錯：等了太長時間才獲得反饋。
我通常是在晚上回家和周末才有空推進這個項目，在很長的一段時間內，我沒有真正告訴任何人。
當我終于同我的家人、朋友、用戶以及網上樂于嘗鮮的用戶公布了這一產品之后，他們在使用過程中，開始注意到了很多細節(jié)上顯而易見、但是我并沒有發(fā)現(xiàn)的問題。我意識到我作為產品的設計者，是很容易陷入并沉迷用戶體驗當中比較孤立的一部分，反而會忽略很多顯著的問題。
回想一下，如果我能盡早向用戶和朋友展示設計和原型，那么我會在更早的時候發(fā)現(xiàn)問題，并且在獲得反饋之后才進入開發(fā)階段，彌補大量的損失。
很多設計師會認為，所有的想法都必須是原創(chuàng)的才行，否則就是欺詐。但是稍微想想，其實徹底的原創(chuàng)其實很少的。當你看到一個優(yōu)秀的產品，它優(yōu)秀的配色和恰到好處的交互可能會讓你覺得：「已經有人做出來了，我的想法在它面前完全沒法比擬?！?
這種思維方式其實有著極大的缺陷，并且抑制了你的創(chuàng)造力。
當我發(fā)現(xiàn)我的設計有缺陷的時候，我會竭盡全力去搜索和了解更多網上已有的設計。我會觀察和思考別的公司和產品是如何設計新用戶引導流程的，如何管理用戶個人信息的。我從來都沒有復制被人的體驗，但是會隔三差五去鉆研別人所創(chuàng)造出來的優(yōu)秀細節(jié)，然后將這些細節(jié)借鑒到我的設計當中。
我最喜歡的一個范例，是從模態(tài)狀態(tài)下，旋轉退出的效果。這是我偶然在一個網站上看到的效果，因此我決定將它添加到 Confetti 當中，我還在著陸頁的按鈕中加入了類似的特效。
事實上，一切設計都是混搭創(chuàng)造出來的。你借鑒細節(jié)并不意味著抄襲，不要害怕去發(fā)掘和學習別人的優(yōu)勢和亮點，你要學會有機地拆解和借鑒，靈活地運用到自己的設計當中，它就像調制雞尾酒一樣有趣。
當我們開始設計的產品的時候，我和 Wilson 頭頂上的身份就一直在變。我們是 UI設計師，要負責UX，要做交互，也制作動效，要進行平面設計，還要考慮市場營銷，要管理產品，我們也要扮演其他的角色。
職責如此之多，以至于我們不可避免地遇到我們能力范圍之外各種新問題。我們必須承認自己陷入了困境，尋求外部幫助成了必要的選擇。
專注于自己專業(yè)的領域，其他不專業(yè)的方面來尋求外部幫助是非常合理的。比如在一個項目當中，一位藝術家負責了絕大多數(shù)的風景插畫，另一位藝術家則完成了肖像畫的部分，這很正常。
我希望產品的外觀和功能能夠保持高度的一致性，并且我確實做到了。但是不要誤會我的意思，我并非是不敢走出舒適區(qū)去學習代碼開發(fā)，而是在這樣的項目當中，我并不適合從UI和UX領域延伸出去，畢竟完成項目的開發(fā)優(yōu)先級比學習代碼更高。
盡管給 MVP 安排好了發(fā)布時間，可以防止這個項目被無限膨脹的功能特性和工作量所淹沒，但是這樣依然無法防止我們基于已有的功能進行改進。
很多人都喜歡 Reid Hoffman 的一句話：「如果你對于產品的第一版感覺不尷尬，那你一定是發(fā)布晚了?！共贿^，我們正式發(fā)布的第一版的產品，并不會顯得太尷尬，但是目前來看，當時那種簡單直觀的狀態(tài)，比起再花費好幾個月時間反復打磨之后再發(fā)布，來得更好。
在發(fā)布新產品之前，我們必須考慮2個問題：
這些問題讓我們最終能夠達成目標，且按時發(fā)布，避免分心。專注交付最核心的功能，而不是被一堆冗余的次要特性所壓倒。
從項目一開始我就一直在做項目的管理和組織設計素材，以便后面進行開發(fā)。不過，由于我一開始就使用了 Zeplin 這樣的協(xié)同工具，確保了我可以輕松地將所有的素材都順暢地交給負責開發(fā)的 Wilson。作為一款設計系統(tǒng)工具，Zeplin 讓我無需浪費時間對素材進行分類，非常便捷。
在交接的過程中，我還做了一些優(yōu)化：
在設計 UI 的時候，界面中的文案部分是臨時編寫的，這促使了一次設計完成之后，整體的文案是不一致、不協(xié)調的。
我很希望一開始就創(chuàng)建了一個單獨的文檔，一次性將文案部分全部重寫，包括提醒、注釋、標簽、彈出框提醒等等。而實際上，我的文案都是在設計 UI 的時候附帶著寫下來的，導致整體的一致性嚴重缺乏。
這種文案本身在調性上的缺乏，導致了整個產品在語氣和用詞上是混搭式的，一致性很差。
所以，在產品上線發(fā)布之后，一直在對文案進行修修補補。
文章來源：優(yōu)設(陳子木) 作者:Danny Sapio
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
之前一直沒有太多關注過如何定義一個 APP 的配色，或者如何畫一個漂亮的 icon。曾經的上級指示都是這些基礎對商業(yè)的不可量化。于是我在思考一個問題，就是沒有直觀商業(yè)價值的設計要素都失去了意義變成了所謂基礎的事情嗎？
半年前面試字節(jié)的時候，面試官問了我有關配色的定義，細節(jié)到為什么是這個色值。當時十分震驚于這么細節(jié)的問題，之后我就想起了之前有位朋友給我發(fā)送過一份有關支付寶「藍」的定義 pdf，洋洋灑灑幾十頁就是為了解釋他們?yōu)樯队眠@個有點臟的藍色#108ee9 當主色。
所以其實 APP 的配色/圖標與主品牌是一脈相承的，它是品牌的延續(xù)與象征。它以最直觀的態(tài)度傳達給用戶，這個產品以及品牌的調性，并以此建立最強有力的視覺識別性。所以我覺得它是可以有條件地展示在我們設計方案里的，但一定注意它的篇幅和表達的方式，維度在品牌傳達這一層就對了。
至于如何展示和定義你的 APP 配色，一般 2 類情況。
1. 在品牌主視覺配色基礎上的適配
這種情況一般適用品牌主視覺方案已經設計完畢，APP 端作為延續(xù)。這個時候一般注意配色從 CMYK 模式到 RGB 的轉換，所以作為 APP 的配色，具體色值上可以稍作調整，使它更適配于 LED 屏的用戶感知與舒適度。
另外可以使用透明度進行色彩分階段，一般從 0-100% 分為 10 階就足夠我們日常界面設計使用了。
2. 0-1定義APP配色
這種情況下我們從感性和理性 2 個角度去定義顏色。
從感性的角度分析：情緒板應該大家都熟知的了，根據(jù)不同的行業(yè)和用戶定位得到相應的關鍵詞。對應不同的關鍵詞再搜集對應的圖片，從圖片和自然感知中提煉出主色。
從理性的角度分析：我們把色彩分為對比色、近似色、復合色、單一色、三角對立色和漸變色六種。根據(jù)產品的類型和定位，我們決定使用什么樣的配色。比如一個年輕大學生專用的社交型 APP，我們可能就傾向更多地使用對比色這樣的撞色得到更多潮流與青春的味道。
至于圖標的話我就更不用多說了，大家肯定都記得那些非常基礎的繪制圖標的法則。個人認為圖標也不太需要放一個單獨的篇幅去展示，除非它有一些新奇有趣的亮點。
在之前的文章中有寫過，匹配產品定位的界面框架一旦輸出，對整個 APP 之后的迭代與功能設計都有很直接的影響。定義整體的UX 框架方案，是實踐設計目標與策略的過程，基本圍繞著這 3 個出發(fā)點：匹配產品定位、滿足業(yè)務拓展性、符合舒適度美學 。
首先我們從宏觀角度分析，一方面產品的業(yè)務線處于什么情況，是相對獨立的業(yè)務主線產品（舉例：拉勾）？還是平臺級產品（里面包含了許多垂直的業(yè)務線，舉例淘寶）？如果是平臺級產品在整體框架設計時就需要考慮跨端跨業(yè)務的框架拓展型。
舉個例子，就是在定義平臺框架的時候要考慮這個框架與容器是不是同時適用于底下的子業(yè)務線，同時當這個框架到了 H5、小程序、PC 的時候需要做哪些適配調整，是否都可以很好地進行兼容適配。
另一方面，整體框架設計的類型是否符合設計目標。舉個例子，無框式超大留白的框架設計雖然看上去很厲害，但在大部分商業(yè)產品中它的實用性卻非常低的。假設說我們今天需要做一個電商類的 app，設計目標是希望能夠提升業(yè)務轉化以及購買效率，那么展示效率與功能分區(qū)就顯得尤為重要，它就更適合一個相對緊湊的卡片式為主的框架設計。
其次從微觀的角度來說，遍地就都是細節(jié)了。舒適度美學這一說，其實難免有些抽象，我們把它轉為相對合理一些的落地原理就會清晰很多，像大家熟知的間距 4 倍數(shù)原理、對齊原則等等。但是這些微觀的內容不建議大家放到方案展示里，因為它并沒有針對單個方案的特殊性，更像一種大眾共識。
△ 多說無益，直接上最終的效果圖，方便大家參考
我們特地把單獨的容器部分拿出來解析，是因為自定義容器是展示核心業(yè)務最主要思考呈現(xiàn)，同時還可以配合運營做很多提升業(yè)務效率的配置。在做具體設計的時候，我們需要區(qū)分「端上固定」模塊和「運營配置」模塊之間的差別。
「端上固定」模塊
顧名思義就是開發(fā)端上需要寫死的模塊。寫死的模塊意味著，無論一個配圖還是一句文案，也只有開發(fā)童鞋修改后通過發(fā)版才能實現(xiàn)內容變更。一般適用于相對固定的產品功能以及 UGC 用戶生產內容。比如：拉勾上傳簡歷功能、斗魚的直播間列表。
「運營配置」模塊
相對「端上固定」，「運營配置」就不需要跟著發(fā)版，可以隨時后臺上傳替換模塊內的內容，適用于需要 PGC 生產的內容。說到這里很多童鞋可能馬上就聯(lián)想到 banner，彈窗的運營位了，但其實除了這些之外還有很多容器模塊是需要靈活配置為「運營配置」模塊才能更有效地提升運營業(yè)務價值。
我們可以這樣來區(qū)分「運營配置」模塊類型。
一種是純運營配置模塊，即設計與開發(fā)輸出框架、定好配置字段限制之后，運營可以獨立完成后臺配置的。比如：資訊 app 0-1 前期的資訊列表內容。
另一種是運營設計配合模塊，即需要設計配合運營輸出一定的設計圖才可以進行后臺配置的。比如：常見的 banner、彈窗、熱門推薦專題等。
在 0-1 的設計方案中，更推薦大家展示「運營配置」模塊的內容與解析，因為 0-1 是個以拉新為主的階段，運營顯得尤為重要，所以我們的設計需要側重考慮整體的運營效率與轉化。
在我們概述完大部分的整體思考路徑與設計方案后，我們需要由面到點，從全局提煉細節(jié)，突出自己的設計方案亮點。
而如何提煉這個亮點呢？是挑一個我設計的最好看的界面呢？還是直接放最復雜的那個流程？以下是推薦選擇的亮點設計：
1. 完成理論實踐，并可以量化價值的設計case
大家應該都了解，一些和設計息息相關的數(shù)據(jù) UV/PV/GMV/ 相關業(yè)務指標等，以及一系列在實踐中很好應用來解釋設計方案的理論支撐比如 5W1H、GSM 與五度分析……這些數(shù)據(jù)和理論是支撐我們設計更飽滿更有說服力的重要支點。
雖然在 0-1 的項目里，我們基本不太用得上優(yōu)化數(shù)據(jù)比對（因為產品初期用戶數(shù)量少，產品體驗路徑也是一直處于不斷試錯階段），但是我們還是可以借用上文所述的一些方法論或者 A/B test 來完成我們的方案思考過程展示。
那些你在完成踐行設計策略完成設計目標時獲得的數(shù)據(jù)指標要提前預知，養(yǎng)成習慣之后，你就可以快速輕松地察覺到哪里有可以做 A/B test、進行埋點數(shù)據(jù)比對的地方了。
2. 影響上中下游環(huán)節(jié)的設計case
除了對業(yè)務提升價值的項目外，我們有時候也需要注意對品牌設計、產品、運營、技術等上中下游造成影響力的設計項目。通常這類設計大部分也都是設計自驅發(fā)起的，能起到提升各方人效和業(yè)務效率的作用。
舉例的話，我能馬上聯(lián)想到的就是多方協(xié)作的大型線上組件庫，可以參考阿里的 Ant design、滴滴的魔方，在之后的版本拓展中甚至可以延展成功能更加強大的多方協(xié)作 UX 設計資源中心。
感覺近期面過的 80% 的公司都對組件庫的定義非常關注，所以我們要做的不僅僅只是放一個視覺規(guī)范或者組件庫的全景圖，而需要對組件庫進行拆解。
文章來源：優(yōu)設(土撥鼠) 作者:Nana的設計錦囊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
界面交互動效是展現(xiàn)界面間的轉換和界面內元素變化的交互反饋。而效果就表現(xiàn)在觸發(fā)與結束的過程中，表現(xiàn)清晰的層級關系，自然的引出與結束。交互動效有著承上啟下的重要作用。
第一種：為銜接類型動畫
主要針對不同界面直接的銜接，為帶來更流暢的操作觀感所做的設計，彌補兩個界面直接的差異所帶來的用戶感知落差。
第二種：特效類動畫
特效的核心目的是為了吸引用戶的注意力，提高信息敏感度，在游戲界面設計當中使用更為廣泛，能夠帶來更加絢麗的動態(tài)畫面。
第一類：界面內的交互動效
在一個界面內的交互動效特別多，例如點擊加號出現(xiàn)下拉菜單，出現(xiàn)浮層動畫提示，點擊舵式導航出現(xiàn)選擇類型和遮罩，點擊按鈕出現(xiàn)評論點贊，當前頁面的展開收起，加載等等。如下圖所示：
第二類：界面間的交互動效
幾個界面之間的的交互動效通常是平緩過渡到下一頁。常見的有以下幾類：
△ 硬切到下一頁
△ 下一頁從右往左推入（上一頁從左往右推出）
△ 下一頁從下往上彈出
△ 上一頁的元素過渡到下一頁
總結：
“時間”作為人機交互界面中經常出現(xiàn)的元素，本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯(lián)網產品時會發(fā)現(xiàn)，關于“時間”的顯示狀態(tài)或形式在不同場景、不同頁面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來聊一聊，如何在產品設計中把握“時間”顯示的訣竅，讓其在頁面中發(fā)揮最大的作用。
按照“時間”元素在頁面中的出現(xiàn)場景和所起到的作用，可以大致歸為以下幾類：
時間作為描述整個事件的重要組成部分，缺失后會對原本所要傳達的內容產生嚴重的影響，進而影響用戶的使用預期和結果，比方說用戶可能不能以一個較低的價格完成商品購買，或錯過了產品發(fā)布會的時間。
指用戶本人作為行為主體或行為的接收對象，在某一動作發(fā)生后為其所打上的時間標記，比方說“我”購買商品下單的時間或收到一封郵件的時間。
用戶在使用產品進行內容消費時，時間作為該條內容的附屬信息，起到補充說明的作用，比方說一條短視頻或新聞的發(fā)布時間。
在上面的案例中，我們會發(fā)現(xiàn)“時間”在對應場景里所發(fā)揮的作用不同，用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時，要根據(jù)具體場景和用戶訴求判斷“時間”元素的重要性和優(yōu)先級，通常情況下：時間作為事件的關鍵構成要素＞行為的時間標記＞內容的附屬信息，之后再思考用什么樣的設計形式去展示來達到我們的目標。
“時間”的呈現(xiàn)方式和運用技巧
在討論“時間”元素的設計之前，我們先共識一些有關時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度，類似我們高中物理時學過的“時刻”和”時間間隔“的概念。
拿開會舉例子：“下午 4:30 會議開始”、“下午 6:00 會議結束”描述的是事件開始、結束的時間點，而“整個會議持續(xù) 1.5 小時”、“會議時間為下午 4:30-6:00”描述的是事件過程的時間段；但是，我們在會議開始時也可以這樣講“會議將在 1.5 小時后結束”。
通過上面的例子我們可以發(fā)下，同樣是描述一件事情，運用不同的時間點、時間段的方式去表達，意思一樣但卻傳遞出不一樣的情感，并且兩者存在如下的“換算”關系：
1）時間段加上定語會變成時間點（但同樣是時間點，“下午 6:00”是絕對時間，而“1.5 小時后”是相對時間，剛好對應到我們設計時兩種時間戳類型）；
2）兩個時間點之間則表示時間段。
所以，我們在平時表達或設計時，要先想清楚用“時間”是想側重表達某一事件、動作發(fā)生的即刻時間節(jié)點？還是想描述其所持續(xù)的時間過程？之后我們再針對不同語境去選取合適的文案和呈現(xiàn)方式。
時間的呈現(xiàn)方式離不開：時間戳類型、時間顯示格式、時間顆粒度。其中，時間顆粒度指的是描述時間的最小單位，往往顆粒度越細，給用戶傳達的確定感越強（如轉賬時間是 12 日 15:15:20），對用戶的激勵作用越明顯（如距搶購結束僅剩 00 時 01 分 23.6 秒）。
1. 絕對時間戳
絕對時間可理解為事物發(fā)生時的確切時間，由具體日期（年、月、日）和時間（時、分、秒）組成。使用絕對時間戳的優(yōu)勢是信息傳達精準，顯得正式，給人確定感和安全感，同時排布規(guī)整，便于形成認知習慣；但缺點是內容顯示過長不利于閱讀，并且占用空間較大。
在時間顯示格式的選擇上，為了避免混淆，推薦使用文字格式或“-”分隔符來分隔日期，而“/”分隔符在不同國家有不同的展示順序習慣，容易造成誤解，盡量少用。
時間顆粒度的選擇依情況而定，一般場景總結如下：
2. 相對時間戳
相對時間在產品設計領域通常是指內容生產、到達、或狀態(tài)發(fā)生改變時，距當前時間點的時間差值，多用于 push 通知、信息流產品，側重強調內容的時效性；而“倒計時”也算相對時間的一種，側重營造時間的緊迫感。使用相對時間戳的優(yōu)勢是用戶辨識、理解成本低，不用通過計算來判斷時間過去或還剩下多久；缺點是不夠精確、正式，并很難衡量兩個時間點的臨近性。
在使用相對時間時，要注意格式友好。時間單位可隨著時間的推移自動改變；數(shù)字不要過多，盡量取整；并且可設置其與絕對時間轉換的臨界點。
在設計界面中的“時間”元素時，要遵循場景貼合、便于閱讀理解的總體原則；之后根據(jù)場景和目標，再選取合適的“時間”呈現(xiàn)方式（包括時間戳類型、時間顯示格式、時間顆粒度）。
當時間作為“A.事件的關鍵構成要素”時
一般情況下使用絕對時間，并且要看是為了強調某一關鍵時間節(jié)點，還是側重表達整個持續(xù)過程。此外，選用關聯(lián)場景的文案或者運用倒計時（相對時間）的形式，可一定程度上促進用戶更加集中注意力，提升對信息的關注度，并達到特殊的激勵作用和轉化效果。
當時間作為“B.行為的時間標記”時
該場景通常是為了追求確定感，通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點（段）去查找、回顧相應內容，因此大多數(shù)采用絕對時間，時間顆粒度依具體情況而定。
當時間作為“C.內容的附屬信息”時
如果所設計的產品供給內容的更新速度快，用戶活躍度高，并且此時內容的時間信息準確性不那么重要反而更側重于內容的時效性，那么通常會使用相對時間。部分信息流產品（比如新聞資訊類、社區(qū)類）會在列表頁使用相對時間，在詳情頁使用絕對時間，時間顆粒度也是依情況而定；并且會隨著時間推移，在某一時間節(jié)點前把相對時間轉換為絕對時間。
文章來源：優(yōu)設 (VMIC UED)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
復雜應用大多情況下是偏專業(yè)和B端的一些UI界面，它們大多出現(xiàn)在桌面端使用環(huán)境，并且終端用戶類型多樣，涉及流程、鏈條、業(yè)務也大多呈現(xiàn)出多變復雜的特征。這篇文章，來自UX設計領域的頂級存在NNGroup，作者為凱特·卡普蘭。
我們之前將「復雜應用」界定為特定專業(yè)領域當中，需要經過廣泛培訓之后使用的，有著非結構化目標、非線性工作流程的任何應用程序。這個概念可能聽起來有點抽象，不過這么說你可能會 更容易理解：從科學研究到專業(yè)人員，諸如金融分析師，它們常用的那些專業(yè)軟件應用。這類應用通常有著這些特點：
盡管不同的復雜應用之間差異很大，但是他們的共同點是，專業(yè)的從業(yè)人員對于這類工具有著極強的依賴性。
考慮到設計師和開發(fā)者在面對這類工具的時候的挑戰(zhàn)，我梳理總結了 8 個復雜應用的設計原則和指南。
很多研究表明，對于復雜的應用和工具，用戶更加青睞可以立刻上手開始使用而不受它復雜度影響的那類工具。
與大量的教程、文檔、幫助和設置說明相比，能夠立刻開始的任務和項目，對于用戶有著莫大的吸引力。這種現(xiàn)象被稱為「活躍用戶悖論」。
雖然在專業(yè)領域當中，倚靠摸索和試錯學習是不恰當也不安全的，但是一定程度的邊做邊學是必須的，因為不可能在培訓和手冊當中涵蓋所有的使用場景。
所以，在設計的時候應該提供「跳過教程」的直接上手的偏好設置，同時進行相應的安全性設置，避免新手的莽撞操作導致?lián)p失。比如可以限制這個階段的用戶執(zhí)行長流程多任務的操作，讓控制面板實時顯示操作結果或者預覽結果，這樣用戶無需執(zhí)行全部操作就可以知道大概的結果。
在 Salesforce 控制面板當中，就可以實時預覽面板編輯的效果。
絕大多數(shù)用戶都不是進階的專家級用戶，他們在絕大多數(shù)時候會使用基礎但是效率沒那么高的操作和執(zhí)行方案。很多用戶形成習慣之后，通常不會主動做出改變，而這在日積月累之后導致大量的時間浪費，效率低下。
值得一提的是，這個時候依賴冗長的文檔和教程其實很難達成效果，更合理的方式是結合用戶所處的上下文環(huán)境，通過界面工具提示的方式，適時地告知用戶「有更高效方便的方法」。
通常，可以使用懸停提示，或者是彈出式工具提示來實現(xiàn)這一功能。
ArcMap 是一款地理信息系統(tǒng)類工具，它通常會通過上下文環(huán)境下的信息引導，來幫助用戶了解技巧。
復雜的應用程序，通常會有很多功能是分散的而非線性的，不同的功能組合起來可以實現(xiàn)特定的功能。在這類工具當中，用戶日?？赡芤膊皇呛艽_切知道最終的目標是什么，而需要通過數(shù)據(jù)分析來逐步推進，同時，在知道確切目標的情況下，也應該可以遵循不同的路徑靈活地達成目標。
設計師這些應用的時候，設計師應該避免使用固定、唯一、 僵化的實現(xiàn)路徑，迫使用戶必循嚴格按照某一固定路徑來做事情。一方面，允許用戶跳過某個步驟，或者回滾到更早的路徑，另一方面，允許用戶遵循不同的方式和路徑來達成目標。
比如萬事達卡的自助服務就可以通過交互式的圖表來引導用戶完成不同的任務。
復雜的任務，通常意味著它需要很多步驟，不同的環(huán)節(jié)，而在實際的應用場景中，某個分析步驟耗費幾個小時甚至幾天，都是有可能的。在高度復雜的現(xiàn)實生活中，某個步驟可能會換人接手，可能會因為硬件、 網絡等問題而暫停甚至丟失，這也意味著「可追溯性」是很重要的。
所以，在這樣的復雜應用當中，應該允許用戶在使用過程中，可以便捷清晰地記錄、保存、 導出內容和記錄，允許用戶中斷，中斷后可以恢復特定的任務。在任務進行過程中可以進行注釋、保存相關的說明。
在決策建模軟件TreeAge 當中，用戶可以在分析和建模過程中進行開放式的注釋，可以后續(xù)在底部快速訪問這些筆記。
復雜的應用通常還會面臨一個狀況，就是工具本身的不足，用戶需要在多個工作空間上使用工具和內容的時候，它需要具備切換的功能。對于不具備的功能，應用程序應該允許使用第三方的應用來作為補充。
比如當軟件不支持某個操作的時候，應該允許用戶從線上的其他數(shù)據(jù)庫中獲取并導出數(shù)據(jù)來使用，可以依托外部文檔作為支持，允許用戶在應用中做注釋和評論。
減輕工作負擔的一個要點，是盡量使用通用的API、接口和標準，盡量兼容行業(yè)標準軟件，比如 Excel、Powerpoint ，盡量使用標準格式，等等。
微軟的商業(yè)分析軟件 PowerBI 就提供了標準化的導出和復制功能，非常方便
復雜應用通常旨在保持泛用性。使用場景多樣，多種不同的功能，一家汽車生產廠家，可能會和蜜蜂養(yǎng)殖機構采用同樣的工具和軟件來監(jiān)測機器故障。但是，這種泛用性的另外一面，就是混亂性。復雜的應用可能會同時兼顧到基礎型的小白用戶和進階型的專家用戶，而后者用到的功能很小概率會被基礎用戶用到。
所以，設計者需要在不降低功能性的情況下，基于應用場景、 用戶需求來進行簡化和優(yōu)化，在保持功能完整易用的前提之下，降低復雜度和混亂度。
分階段和層級展現(xiàn)就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務、特定階段、特等級別之后，再呈現(xiàn)特定功能，是有效的設計方法。
即使降低了混亂度，在復雜應用當中，信息量可能依然是過載的。通常，對于這種情況可以通過區(qū)分信息層級的主次來進行快速的區(qū)分，不過，從交互上來說，這可能依然不夠。
對于諸如控制面板一樣的界面，用戶可能需要時刻查看面板上的信息，需要了解次級信息但是又不能離開界面，這就體現(xiàn)出主次信息之間的過渡呈現(xiàn)的重要性了。
一般而言，使用類似與懸停顯示的方式，能夠比較柔和地將次級信息呈現(xiàn)出來，允許用戶查看詳細的定量數(shù)據(jù)。下面這個案例當中就是，懸停顯示更多次級信息。
復雜應用通常在界面上包含由大量的信息，而這個時候關鍵性的數(shù)據(jù)如果不在視覺上做突出顯示，會被用戶錯過。通過視覺區(qū)分、提示警報的方式，讓用戶及時注意到，才有可能規(guī)避可能存在的問題。
值得注意的是，讓關鍵信息和元素凸顯的方式，并不一定非得是使用鮮艷的色彩和較粗的字體，簡單的放大呈現(xiàn)，使用圖形化的元素輔助提示，或者是提供足夠的留白都可以達到目的，就像下面的案例一樣：
復雜的應用多種多樣，支持的服務和功能也千差萬別，但是無論如何呈現(xiàn)，此類復雜應用的設計都是非常挑戰(zhàn)設計師的設計功底的，需要設計師了解業(yè)務，了解用戶，并且能夠通過設計更好地提供服務。
文章來源：優(yōu)設(陳子木) 作者：Kate Kaplan
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
放眼過去大量同質化或跟風的網站風格，空有一副美觀的皮囊，卻少了些什么，為何不交互創(chuàng)新一下呢？具有創(chuàng)意的交互必然能使一副黑白的畫面瞬間點亮色彩。
你可能想有創(chuàng)意的交互能為網頁帶來什么？
挺多的，我舉例：一個連微動效都沒有的靜態(tài)網頁你進去后也就看見的這樣，那么如果這個網頁進去時，內容會有入場動效，你是不是馬上能感覺到這個網站有點兒東西，要抄起鼠標探索一番？換言之，好的交互創(chuàng)意甚至能讓你產生心流模式，你通過鼠標到處點擊，頁面上不斷的給出動畫效果，然后你收獲驚喜，最終促使你進行更多的嘗試。
好了，說多了，就是希望為更多設計師提供設計思路或執(zhí)行概念，幫助大家找到更多的創(chuàng)意靈感。
Web 端交互圍繞計算機為中心。主要涉及鍵盤鼠標兩類設備的交互，個別網站的產品可能會涉及麥克風聲音采集或攝像頭應用。
1. 鼠標允許的交互
現(xiàn)在的鼠標可以支持更多功能，但是通常來講需要嚴格的考慮兼容問題，所以僅以鼠標左右鍵滾輪滾動以及光標映射選取為主；
以上所有交互都可以根據(jù)實際場景進行設定，不過鑒于用戶習慣，一般不會用到快速的連擊交互以及右鍵的雙擊、長按或拖拽，這不符合交互手勢的舒適度或簡化易用的初衷。
2. 鍵盤交互支持
鍵盤支持大量的按鍵交互，除去一些全局的功能按鍵和組合快捷鍵，在網頁交互應用中常見的還可以分為以下幾種情況；
在應用鍵盤按鍵功能的時候，除去那些作用明確大眾悉知的按鍵功能，其他的按鍵操作應該保證界面上有指引有提示。
組合的交互動作常配合不能簡單直接完成的任務，這里的組合指有兩個及以上交互動作完成的類型，復雜的交互動作盡量少用，且盡可能的為用戶提供操作指引，若非必要，費力不討好；
組合動作主要分為以上 9 類，鼠標拖拽的組合動作通常會細分來應對界面場景的應用，例如通過橫向拖拽將一個豎放的圓柱物體旋轉起來，那么垂直的拖拽必然是沒辦法轉動起來的，而且左右還會決定拖拽的方向。
簡單來講，無非就是看得見的元素、聽得見的元素。聽得見的元素無非就一個聲音，講深一點，也就涉及一些音效的交互控制。而看得見的元素則會相對豐富很多，如果再次細分的話還可以歸為以下幾種情況；
1. 常見變化形式
位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉效果、特效變化
web 端的交互概念即觸發(fā)到呈現(xiàn)的過程。用戶可以使用交互設備進行事件觸發(fā)或變量，頁面則將內容進行對應的呈現(xiàn)。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉場切換“構成。
頁面內容呈現(xiàn)通常分為“默認時“、“選擇時“、“運行時”三個時態(tài)（鼠標短暫的點擊時屬于“選擇時”，若長按有內容影響則屬于“運行時”），因此在網頁交互的過程中，我們需要考慮好這三種完整的狀態(tài)時呈現(xiàn)形式，另外在考慮補充合適的動效進行過濾或信息反饋。歸根到底網頁的交互概念就是控制內容呈現(xiàn)罷了，這是網頁價值的本質。
web 端內容呈現(xiàn)的結構應該算是頁面交互的范疇吧，其實上網頁的頁面并不只是長頁面的形式，實際上會有更多種結構可用。因為電腦顯示器更大的緣故，web 端結構上比移動端更加靈活，同時根據(jù)產品的性質也有需要考慮移動端響應式的需求，一般來講這些頁面結構可以分為以下六類：
網頁的組成區(qū)塊通常分為五大類型，即導航、面包屑、背景、內容呈現(xiàn)、彈出框。菜單導航欄通常分為頂部導航、側邊導航、底部導航、組合導航四大類，也有個別是通過點擊彈出的導航。內容布局則更是五花八門了，是板式與技巧的呈現(xiàn)了。
個別產品本身也是創(chuàng)意的一部分，有一些可能界面交互平平，但是卻有著魔性或引人關注的產品內容。而這里整理了些比較典型的視覺展現(xiàn)形式和交互創(chuàng)意形式的案例，這些方式通?？梢愿鶕?jù)產品的定位與特色進行組合設計和開發(fā)呈現(xiàn)，讓你的網站更富有創(chuàng)意和較好的視覺體驗；
1. 幾何色塊搭配文案
色塊搭配標題文案，簡約大氣有視覺沖擊力，再也不用擔心沒有圖片或插畫素材了
2. 精美大圖背景搭配內容
采用精美大圖背景搭配文案或交互控件，精美的圖片本身就很搶眼，再搭配標題大字，瞬間就使得頁面有沖擊感有層次，常見于游戲官網或活動專題
3. 關聯(lián)插畫或圖標搭配文案
采用小范圍的插畫或圖標來表達服務或產品優(yōu)勢，搭配文案說明，風格統(tǒng)一精致耐看。常見于服務描述或產品說明模塊應用
4. 留白大圖搭配文案
將某個產品或其他元素放大顯示再結合極簡的排版說明，有較好的視覺沖擊力和產品凸顯效果，同時留白保證呼吸感和減少視覺噪點，使得用戶能夠更加專注產品圖
5. 動態(tài)的背景或微動效裝飾
應用動態(tài)背景或微動效的元素裝飾，有較好的內容吸引力或氛圍渲染力，可以展現(xiàn)更多的產品細節(jié)或豐富畫面層次感，不過也比較考驗視頻本身或動效裝飾自身質量
6. 點線面裝飾與文案排版
應用簡單點線面元素去裝飾界面，再結合有對比有版式的文案排版。頁面簡潔美觀，適合簡約干凈少圖的頁面模塊
7. 柵格化應用與板式跳躍率
應用柵格化與版式跳躍率，使界面整體充滿平面藝術，富有節(jié)奏感且不顯凌亂。在日本的網頁設計上有大量應用
9. 充滿個性的視覺裝扮
采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風、手繪插畫等視覺風格，來打造符合產品的特殊視覺效果，為網頁印象加分，提升品牌感染力
10. 引用 3D 視覺裝飾
運用 3D 視覺搭建頁面場景，常見的有 3D 圖標、3D 動效或 3D 產品大圖等，有較強畫面立體感和表達能力，視覺新穎讓人眼前一亮，也是當前的一種視覺趨勢效果
11. 產品元素或其他元素來填充背景
將品牌元素進行弱化處理后作為背景墻，凸顯個性和豐富畫面，結合微動效可以有進一步的效果增強
12. 矩形陳列或卡片陳列
將內容模塊用矩形陳列顯示或卡片陳列，Win10 菜單或 WP 系統(tǒng)的手機桌面有較好體現(xiàn)，特點是干凈利落模塊分明，適合同類模塊較多的場景進行排列顯示
13. 極致的簡約
采用極簡的方式呈現(xiàn)內容核心，可以是一張圖一段字、一段文案排版等，總之就這么簡單的搞定了
14. 魔幻或神秘感界面呈現(xiàn)
如示例網址一樣，魔幻且神秘，有著迷之吸引力和趣味性，不過需要慎用，比較惡搞。而適當給出一些神秘感，可以使得頁面內容更有吸引力，用戶更愿意去點擊嘗試。
主要是關于頁面內容元素交互時的創(chuàng)意形式講解，這里不對交互動效或特效細節(jié)進行過多說明，因為怎么去動又或者用什么樣的特效去呈現(xiàn)實在數(shù)不清說不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗合集地址。
1. 光標跟隨動畫
會使頁面上的元素根據(jù)光標的位置或移動產生相應變換，增加頁面的互動性與趣味，適用于裝飾或加強背景層次感，在特定的場景也可以使整套控制 UI 往鼠標移動的方向微微靠近，結合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）
2. 鼠標懸浮動畫
簡單易用的鼠標懸浮動畫，用于聚焦顯示或 Tooltip 說明，常用與內容選中狀態(tài)區(qū)分或元素細節(jié)展示，加上一組好的動效創(chuàng)意非常能夠凸顯個性，使用戶感到驚喜為體驗加分
如果是一個完整動畫緩慢播放完會更有敘述性
3. 鼠標點擊特效
由鼠標點擊進行觸發(fā)，基本樣式即點擊狀態(tài)顯示，觸發(fā)后的特效可以是圖標動畫、光效、音效、界面動畫等，游戲場景中較為常見，點擊后不僅有光效反饋還有音效附和，這是一種觸發(fā)反饋效果。
4. 鼠標長按特效
當鼠標長按某個按鈕時持續(xù)出現(xiàn)的特殊效果，一般是持續(xù)鼠標點擊的特效或維持某個元素的變化效果，通常對數(shù)值持續(xù)增減動作較為常見，可以代替連續(xù)的點擊，交互更輕松。也或者是需要一定的加載時間所以用長按配合
通過長按持續(xù)增加細菌圓點
5. 鼠標拖拽特效
通過鼠標點擊長按某個元素進行移動的組合交互，一般用于拖拽移動、內容繪制、元素連接等。應用場景廣，互動性較高，能為用戶帶來更多的參與感和趣味性，甚至制造小驚喜
示例內容：阿里內測的 Real 3D
6. 鼠標滾輪巧妙的聯(lián)動效果
主要用于頁面某個值的控制或頁面滾動，在頁面滾動的時候可以配合控制元素變化來實現(xiàn)更具創(chuàng)意的展現(xiàn)效果，通常元素透明度、位置、大小、序列圖都可以控制
國內官網
7. 鼠標選中自動展開
鼠標經過選項時自動展開選項并聚焦，可以省去鼠標點開的動作，但不適用于選項內容較多且內容密集的場景
8. 按鍵與鼠標配合觸發(fā)
通過指定按鍵和鼠標配合交互進行觸發(fā)，適用于同界面的復雜交互場景，且存在某些變量需要鼠標控制。如果你的網頁內交互豐富且包含變量元素，不妨試試看
9. 模塊或分頁加載動效
在頁面滑動或分頁信息加載時，界面構成元素有序的緩入進場。采用流暢的動效演示數(shù)據(jù)加載的過程，緩解數(shù)據(jù)加載渲染壓力的同時，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現(xiàn)更加精致優(yōu)雅
10. 趣味轉場或加載等候
應用轉場效果與 Loading 動畫，運用某個元素變大覆蓋或頁面移動交替轉場，而非生硬的直接替換，使得頁面切換更有趣味和層級關系體現(xiàn)。再對加載較慢的內容補充 Loading 動畫，緩解用戶焦慮的同時還能延展品牌信息
11. 大圖或多圖輪播應用
精美的圖片總是想要放大看，看了還想看。運用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析
12. 內容穿插滾動
運用特殊的圖層順序結構，在頁面滾動查看時，形成奇妙的元素穿梭視感。通常會穿梭替換背景或讓元素接力，這樣相比靜態(tài)寫實的頁面滾動時會更有層次感
13. 內容自動生成
輸入關鍵內容后，頁面自動生成結果進行呈現(xiàn)，整個過程可以是緩慢有序的，適用于降壓或畫面創(chuàng)意生成的產品，可以讓用戶感受整個過程與細節(jié)變化
14. 游戲互動模式
將產品內容以游戲的形式或交互呈現(xiàn)，讓內容充滿趣味和互動性，使得用戶在參與游戲互動的過程中打破了常規(guī)的閱讀體驗
15. 三維或全景空間
建立一個三維或者全景空間進行查看或操作，再賦予操作按鈕或說明，實現(xiàn) 3D 場景的交互與視覺效果，常用與地圖全景查看或 3D 游戲應用，可以巧妙的結合產品 3D 模型，打造非凡的互動體驗
16. 一鏡到底的視角呈現(xiàn)
打造一個非平面的視覺場景。用鼠標點擊或滾輪聯(lián)動交互利用分層的元素變化，營造出由近到遠或由上至下的一鏡到底的視角穿梭體驗。界面場景切換更加自然，還有超強的空間感與趣味性，讓人難以忘懷如臨其境。
17. 按鍵交互效果
將某些功能或任務引用按鍵進行交互或觸發(fā)。常使用字母、數(shù)字、空格、方位鍵，界面需要有提示對用戶進行指導。
18. 個性的模塊展現(xiàn)方式
常見的有彈窗、抽屜、卡片展開、轉盤等，通過個性輕松的顯示結構與交互方式也能讓人眼前一亮。
19. 可交互的顏色或圖形
對一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進行意料之外的交互或配置能力，提升網頁趣味性或用戶個性化需求滿足。
20. 音視頻媒體控制
圍繞產品介紹的媒體內容，常見有視頻或音頻且支持基本交互控制，結合場景需求可以豐富交互的形式或更多媒體控制功能，例如長按快進、倒退、剪輯、混音等，常用于娛樂互動場景或音視頻類產品。
21. 內容或窗口抖動
通過抖動進行報錯或反饋，常見為密碼輸入錯誤時或游戲中受到傷害的場景，可伴隨音效提示一起。使用場景不廣泛，但是也可以進行創(chuàng)意應用，例如抖掉灰塵小游戲，長按元素抖動干凈為止。
22. 打造儀式感
結合現(xiàn)實場景中的交互方式，打造相似的線上場景幫助用戶共情帶入，再配合交互和動效完成類似的動作，為用戶帶來儀式感和共情效果。
23. 有聲交互
通過麥克風采集聲音來影響交互，是一種聲音的交互，如果網站支持，甚至可以語音交互，是一種少見的網頁交互形式，并非傳統(tǒng)的音視頻控制而已。
24. 鏡頭交互
通過攝像頭授權獲取鏡頭畫面進行交互，通常是一些鏡頭濾鏡效果或者增強現(xiàn)實技術結合做交互創(chuàng)意，網頁上少見新穎。
找對方法去創(chuàng)新很重要！在實際工作中，我們不僅要衡量界面設計與交互效果，同時還要兼顧開發(fā)資源、實現(xiàn)難度以及產品架構本身考慮。對此我們也需要了解一下開發(fā)實現(xiàn)的概念，之后再研究如何進行創(chuàng)新設計。
在進行創(chuàng)意設計時不考慮開發(fā)，那不是自嗨就是對開發(fā)耍流氓。靜態(tài)界面開發(fā)或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動、重力等效果)、3D 交互效果相對會復雜許多。大多的動效不能依賴 GIF 或 Lottie 進行解決，這對交互控制或性能優(yōu)化都是挑戰(zhàn)，而代碼能夠更好的保障這倆點，所以大量的交互動效還是需要開發(fā)者支持，而代碼實現(xiàn)顯然會比設計師產出復雜。
那么如何解決呢？
CSS 進行實現(xiàn)，部分動畫元素可以由設計師通過第三方軟件或在線生成 CSS、Svga、lottie 文件（相對下 lottie 更消耗性能，在線生成 icon 動畫代碼： https://loading.io/ ，在線 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主繪制導出 lottie： http://airbnb.io/lottie/ ，Svga 在線創(chuàng)造： https://www.svgator.com/ ，2D 動畫制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊動效，其實會有可用的第三方庫或代碼資源來解決，首先就是保證你所設計出來的動效是可行的，過于逆天可能還是有難度，剩下的便是提供動效關鍵詞方便開發(fā)查找相關資源，或者你給出參考來源。常見的代碼動效素材網有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（歡迎補充哈，別藏著掖著）。對于 3D 效果的前端開發(fā)呢，暫推薦新開源的 Oasis 引擎或 Three js 這些來實現(xiàn)，當然其他引擎也沒問題。2. 網頁創(chuàng)新設計的策略考慮
考慮到創(chuàng)新開發(fā)的背景情況不一致，這里我提供了一些創(chuàng)新研發(fā)的策略提供參考：
傳統(tǒng)改版：
1.明確改版目的，挖掘價值點
會議說明，清楚改版需求的背景與痛點，挖掘價值找到設計發(fā)力點
制定改版目標，明確分工計劃，同步項目情況
2. 構建原型框架，評審優(yōu)化
設計新版架構，確認范圍層細節(jié)（功能型：功能規(guī)格支持。信息型：內容需求），完善流程與信息框架，然后拉攏項目相關人員進行評審優(yōu)化，直到新版框架大體定型后，再進行視覺層輸出
3. 明確產品定位，建立設計語言
要保障產品氣質與視覺風格的契合，即一個資訊網站肯定不適合采用電商視覺進行輸出。然后根據(jù)內容占比，考慮呈現(xiàn)的布局方式，即不同模塊中的視頻、圖片、文字比例情況。然后你可以結合上文的視覺層創(chuàng)意形式進行套用，當主要的靜態(tài)視覺設計完成后即可進入評審階段
4. 高保真評審，挖掘交互創(chuàng)新點
對網頁高保真進行評審，確認頁面信息框架或界面設計可行。然后對交互創(chuàng)新方案探討，結合網頁的板式設計，提出交互創(chuàng)新的細節(jié)，與開發(fā)者同步，確保實現(xiàn)的可行性與項目工時可控，同時披露交互細節(jié)幫助開發(fā)者進行調研或準備
5. 交互創(chuàng)新對齊開發(fā)，進入研發(fā)階段
準備提供交互的細節(jié) Demo 或參考內容，在基礎內容開發(fā)完成后或開發(fā)者認為適合介入的時機，進行交互創(chuàng)新內容的對齊，使創(chuàng)新方案在最小可行的基礎上進行開發(fā)實現(xiàn)。之后建議設計同學耐心的陪同開發(fā)小哥進行還原，確保效果
6. 測試驗收，預發(fā)上線
最后進行成果驗收，確?；镜膬热菔欠穹蠘藴?，再根據(jù)工時情況或上線計劃等，考慮交互創(chuàng)新部分的細節(jié)還原調試，適公司實際情況可以考慮再迭代一版。之后根據(jù)產品情況自行考慮是否 A/B 測試、灰度上線等，上線后就是線上數(shù)據(jù)跟進或用戶調研了，希望你的新版本收獲一片叫好 哈哈
敏捷開發(fā)：
對于想要敏捷實現(xiàn)目標的話，可以采用谷歌沖刺法（Google Sprint)，當前基本分為六個階段進行，分析理解階段、定義階段、發(fā)散思考階段、決策階段、原型產出階段、測試驗收階段。這里我結合交互創(chuàng)新的方法，對多個階段進行了補充，內容如下：
1. Understand 理解
明確建站目的、需求背景、梳理業(yè)務或用戶需求。通過用戶研究或競品分析等手段，更好的理解產品、行業(yè)現(xiàn)狀以及痛點機會，也為后面階段提供可靠的依據(jù)或支撐
2. Define 定義
基于對此次建站需求與背景深度理解，定義產品設計目標，挖掘價值點
3. Diverge 發(fā)散
讓參與者們集思廣益，發(fā)散思考，將不同的點子記錄下來，最好圖文并茂的畫一下，然后形成自己的方案。在這個過程中不必共處一室，獨立進行即可，這樣可以避免被帶偏或擾亂
4. Decide 決策
方案決策環(huán)節(jié)，產品經理、設計師、開發(fā)小哥等將各自的方案進行展示說明，這個過程中不要急著評價對方，只要投票選出最佳方案即可，這是一個方案的根基，之后再進行優(yōu)化和細節(jié)完善
5. Prototype 原型
建議先將方案框架進行原型繪制或 demo 產出，然后經過一輪初步測試評審后可以再次優(yōu)化復盤。在原型繪制的過程中，主要是確認流程與信息框架，不必著急視覺層的問題。若準備進入視覺設計，則可以帶入這幾個問題進行思考；
6.Validate 驗證
首先通過內部自測優(yōu)化，再根據(jù)產品類型考慮是否找利益相關者進行可用性測試驗證，或者找專家做顧問。之后再進行下一步的優(yōu)化完善即可
也許講了這么多，你還是不知道前面諸多的創(chuàng)意方式怎么用，沒關系，這里我進行了簡單的整理對標，希望你看完還有救！
網站本身即視為一個產品，一個產品的風格定向一定是由產品本身屬性或用戶屬性影響，了解產品定位或目標用戶也是重要的環(huán)節(jié)，這些環(huán)節(jié)可以制定更符合產品或用戶的信息框架或視覺表現(xiàn)。通常我們可以將網站類型分為企業(yè)官網、品牌官網、營銷官網、門戶網站、論壇相關、綜合網站六大類，這里簡單講一下這些網站定位與視覺特征；
通常一個網頁怎么設計版式、如何調整布局結構、調整基礎交互，都是需要參考原型的信息框架。信息框架中的元素情況會直接影響視覺輸入和基本交互。如信息框架中有很多圖，那么設計時就需要考慮是平鋪直敘還是輪播顯示。
信息框架設計學習：《Web 信息框架》
那么關于不同的信息架構有什么好的布局方法嗎？這一點通過內容的搭配形式，整理了幾種方式供參考：
文の處理：
通常一個純文本的界面是很難設計的，因為過于單調，對此可采用
圖の處理：
純圖片的形式不多見，但是不能否定，一般可能是圖本身有一定的信息傳達，或者是圖片瀏覽類型的服務
圖文の處理：
少量圖文配套是比較好處理的，手法也比較多，根據(jù)配套數(shù)量情況還可以調換位置形成錯位區(qū)分模塊
視頻の處理：
視頻的處理分為自動跟手動控制，自動即作為背景自動播放，可進行簡單的切換，手動則要注意相關按鈕布局和顯示遮擋問題
圖文視頻の混合：
通常圖文視頻混合的情況很少見，視覺焦點不好控制，其中視頻做背景是最好處理的，但內容信息不易過多
三維の處理：
因為是三維的場景，所以需要考慮到三維場景下的視角形式與操作方式
按鈕の處理：
按鈕是網頁中最常見的交互控件，是頁面扭轉或功能啟用的基礎
控件の處理：
控件組適用于復雜場景的任務交互，通常由多個按鈕或控件單元組成，特點就是控件單元多模塊占比大
結合信息框架對不同元素類型進行視覺設計調整后，再對頁面內容的基本交互進行考慮，例如輪播、切換、彈出、展開收起、轉場等。之后才是更加細膩的交互創(chuàng)意思考。
基本交互發(fā)力點
鼠標經過反饋：常見且重要的交互方式，通過鼠標經過時反饋選中狀態(tài)或提示相關信息
按鈕點擊反饋：在鼠標點擊后，按鈕或控件的顏色形狀變換效果，用于反饋點擊成功，實現(xiàn)眼手體驗一致
按鈕長按效果：長按狀態(tài)的動效示意，通過對長按目標加動畫響應進度或持續(xù)的狀態(tài)，而非單純的變色或樣式切換
完善 Loading 動畫：如點擊上傳下載更新等，出現(xiàn)對應進度條或 loading 動畫幫助用戶完善體感
內容入出場動效：頁面切換加載或滑動頁面后，內容采取動效有序的進入場景定格，而非生硬的靜態(tài)切換
多內容輪播應用：對 Banner 或其他多個內容展現(xiàn)，進行輪播交互完善和時間細節(jié)控制
錦上添花交互發(fā)力點
按鈕切換動畫：通過 icon 的路徑動畫表達按鈕切換，而非直接的圖標對換，更具個性和視覺觀賞性
鼠標跟蹤動畫：可以適當?shù)淖鲆恍┦髽烁櫴录?，讓一些背景或界面元素跟隨鼠標律動起來，增強互動
特殊滾輪聯(lián)動效果：通過鼠標滾動聯(lián)動其他元素進行交互變化，來呈現(xiàn)更有創(chuàng)意的場景切換或內容展示
內容穿插滾動：將內容分層控制，頁面滾動時將元素固定或交替顯示，產生穿梭感提升界面層次
響應式展開收起：主要用于二級或下級內容的自動展開，由鼠標經過自動展開并聚焦，減少用戶操作
結合音視頻媒體控制：在頁面中植入音視頻內容通過按鍵或鼠標進行交互或切換，打造互動性更高的媒體傳達
趣味轉場或頁面加載：對頁面轉場或加載深度優(yōu)化。采取更有創(chuàng)意的方式或動畫來過渡，讓視覺體驗提升億點點
內容或窗口抖動報錯：合理采用抖動效果進行報錯反饋或特殊場景應用，使呆板提示更靈動
可 DIY 的顏色或圖形：提供主題或模塊的 DIY 空間，滿足用戶編輯符合自己喜好的視覺效果
結合產品的場景創(chuàng)意
打造個性的模塊呈現(xiàn)方式：結合產品的應用場景打造有個性的呈現(xiàn)方式
打造游戲互動的呈現(xiàn)：將有劇情有故事的產品或內容游戲化，可以讓用戶趣味互動更加深刻
打造一鏡到底的轉場：結合鼠標滾輪聯(lián)動做鏡頭創(chuàng)意，突出產品細節(jié)或內容呈現(xiàn)
打造三維或全景場景：根據(jù)產品屬性考慮用三維的場景來增強互動與突出產品
打造儀式感交互：利用視覺和交互變化來制作符合產品的應用效果，實現(xiàn)儀式感線上體驗
有聲交互：比較少見，視產品情況應用，可以使聲音產生互動或視覺影響
鏡頭交互：適合有鏡頭針對性應用的產品采用，需要授權，要做好隱私說明
補充按鈕交互觸發(fā)：在場景更為復雜交互需求更多后，進行的常規(guī)解決方法
補充按鍵與鼠標配合交互：適合按鍵觸發(fā)且需要鼠標控制變量的復雜交互
文章來源：優(yōu)設 作者：泡泡bing
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://sillybuy.com