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