本文介紹了幾個(gè)關(guān)于用戶體驗(yàn)度量的模型，UES模型、適合網(wǎng)站的 PLUSE、谷歌的 HEART、螞蟻的 PTECH和GSM模型，它們各有切入點(diǎn)，也各有其適應(yīng)場(chǎng)景。對(duì)各個(gè)模型的概念和它們相應(yīng)的維度做了詳細(xì)的介紹。
失敗的網(wǎng)頁(yè)設(shè)計(jì)各不相同，但是優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)則有著共通的特點(diǎn)。你需要思考人們想要的是什么，什么東西能夠觸動(dòng)他們，讓他們欲罷不能，無(wú)法忘懷。
聽(tīng)起來(lái)似乎很簡(jiǎn)單，不是嗎？取悅用戶的關(guān)鍵在于像用戶一樣思考。并不是每一次創(chuàng)新、每一次重塑、每一種新技術(shù)都能讓用戶愉悅，那些真正易于理解、便于使用、降低難度的技術(shù)、設(shè)計(jì)手法和抓人的視覺(jué)元素，才是一切的關(guān)鍵。下面總結(jié)的7項(xiàng)秘訣，會(huì)讓你的網(wǎng)頁(yè)脫穎而出的。
定制化，或者說(shuō)個(gè)性化，是今天網(wǎng)頁(yè)設(shè)計(jì)中最典型的趨勢(shì)之一。用戶希望瀏覽網(wǎng)頁(yè)的時(shí)候獲得更加私人的瀏覽體驗(yàn)，無(wú)論是玩頁(yè)游還是購(gòu)物。
看看世界上最著名的那些網(wǎng)站是怎么做的吧。Amazon 為用戶提供基于購(gòu)買(mǎi)歷史的產(chǎn)品推薦，Netflix 則會(huì)推薦相關(guān)的作品、有待觀看的下一部，并且基于用戶 Twitter 上的內(nèi)容來(lái)進(jìn)行推薦。
每一個(gè)微小的自定義設(shè)計(jì)，都能讓用戶感覺(jué)這些用戶體驗(yàn)設(shè)計(jì)是為他們而做的。同時(shí)，這種設(shè)計(jì)也會(huì)給用戶一種參與感和溝通的體驗(yàn)，從而加深用戶的忠誠(chéng)度。如此一來(lái)，用戶會(huì)更好地融入整個(gè)網(wǎng)站的用戶群或者社區(qū)。
另外一個(gè)大熱的流行趨勢(shì)，就是動(dòng)效設(shè)計(jì)。它不僅能為用戶帶來(lái)驚喜，而且具備強(qiáng)大的引導(dǎo)性。
動(dòng)效設(shè)計(jì)的精髓在于簡(jiǎn)單。令人頭暈或者不知所措的動(dòng)效，應(yīng)該不是你要的東西吧？動(dòng)效應(yīng)該是有目的性的，和其他所有的設(shè)計(jì)元素一樣，有針對(duì)性，達(dá)成目標(biāo)是它存在的意義。
對(duì)動(dòng)效或者說(shuō)動(dòng)畫(huà)最熟悉的，無(wú)疑是迪士尼。Frank Thomas 的《生命的錯(cuò)覺(jué)：迪士尼動(dòng)畫(huà)》中，就詳細(xì)總結(jié)了創(chuàng)造今天動(dòng)畫(huà)的12個(gè)原則：
·擠壓和拉伸
·預(yù)期
·登臺(tái)
·連續(xù)動(dòng)作和姿態(tài)對(duì)應(yīng)
·緩進(jìn)緩出
·弧形運(yùn)動(dòng)
·次要?jiǎng)幼?br /> ·時(shí)序
·夸張
·立體刻畫(huà)
·吸引力
對(duì)于常見(jiàn)的問(wèn)題，設(shè)計(jì)模式就是可靠且可復(fù)用的解決方案。簡(jiǎn)而言之，最常見(jiàn)的信息和交互方式被整合到一個(gè)界面當(dāng)中，比如點(diǎn)擊按鈕，滾動(dòng)頁(yè)面，滑動(dòng)解鎖，它們都是設(shè)計(jì)師模式。
你需要熟悉這些常見(jiàn)的設(shè)計(jì)模式，并且在設(shè)計(jì)界面和交互的時(shí)候?qū)⑺鼈冇眠M(jìn)去。這符合用戶在體驗(yàn)上的訴求，也是易用性的最基本構(gòu)成。
同時(shí)你也要在自己的設(shè)計(jì)中創(chuàng)造設(shè)計(jì)模式，在不同的頁(yè)面中使用相同、相似或者規(guī)則化的設(shè)計(jì)，讓用戶習(xí)慣。比如，不同頁(yè)面中的CTA按鈕的色彩保持一致，卡片式的元素使用相同的樣式，等等等等。
沒(méi)人會(huì)喜歡單調(diào)無(wú)聊的設(shè)計(jì)。你的網(wǎng)站應(yīng)當(dāng)同你的品牌保持一致的性格，擁有獨(dú)特的氣息。
要做到這一點(diǎn)，通常需要用到微妙走心的文案和親切自然的語(yǔ)調(diào)如果你真的不知道怎么做，可以看看MailChimp 是怎么做的。（請(qǐng)注意他們的文本和圖片是如何無(wú)縫地連接到一起的）
用戶同網(wǎng)站交互都是在屏幕內(nèi)進(jìn)行的，無(wú)論是桌面端還是移動(dòng)端，整個(gè)體驗(yàn)都是圍繞著屏幕進(jìn)行的。
這并不是一句廢話。屏幕是一個(gè)區(qū)域，它界定范疇，賦予概念，創(chuàng)造隱喻。這也解釋了為什么視差滾動(dòng)和卡片式界面是如此的流行。這兩種概念將一定量的信息合理地放置到屏幕這個(gè)容器中，讓用戶隨之同下一個(gè)元素進(jìn)行互動(dòng)。
如何運(yùn)用好這個(gè)概念其實(shí)并不是那么容易。一個(gè)屏幕內(nèi)應(yīng)當(dāng)承載多少信息，需要仔細(xì)考慮。一個(gè)桌面端頁(yè)面所能承載的信息量在移動(dòng)端屏幕上，可能需要?jiǎng)澐值綆讉€(gè)頁(yè)面當(dāng)中去。
從屏幕的角度來(lái)考慮問(wèn)題，可能會(huì)讓你的計(jì)劃更加龐大復(fù)雜，但是這種考量是有價(jià)值的，這種基于屏幕或者基于設(shè)備的考慮能讓用戶感覺(jué)更加便捷貼心。
視頻、游戲、測(cè)試都爭(zhēng)取讓用戶能與之進(jìn)行互動(dòng)，這種互動(dòng)的目的在于驅(qū)動(dòng)用戶參與到設(shè)計(jì)中來(lái)。用戶與界面交互的越多，用戶所獲得的體驗(yàn)就越好。
不過(guò)，有趣的元素能讓這一切截然不同。
讓交互內(nèi)容盡量簡(jiǎn)單，不要牽扯太多，讓用戶可以一目了然，讓他們輕松獲得反饋的信息，不用在冗雜的體驗(yàn)中淪陷。這其實(shí)和美劇的5分鐘原則有著異曲同工之妙。
最后一個(gè)秘訣并非不重要，它甚至可以說(shuō)是最基礎(chǔ)的原則：讓你的設(shè)計(jì)保持干凈、整潔和有序。使用柵格可以讓每一個(gè)頁(yè)面元素都有準(zhǔn)確的位置。將響應(yīng)式設(shè)計(jì)落實(shí)到每一個(gè)元素，能讓頁(yè)面能從一個(gè)設(shè)備兼容到另一個(gè)設(shè)備。
簡(jiǎn)約風(fēng)和極簡(jiǎn)風(fēng)能成為設(shè)計(jì)趨勢(shì)是有道理的。用戶可以更輕松理解這一切。簡(jiǎn)約的視覺(jué)設(shè)計(jì)更容易交互。沒(méi)有復(fù)雜信息并且被精心設(shè)計(jì)的界面能更好地運(yùn)作，賦予更好的體驗(yàn)。
蘋(píng)果的官方App Store 和Google Play 都推薦過(guò)的游戲 Two Dots 就是個(gè)典型案例。誰(shuí)都可以拿起手機(jī)毫無(wú)障礙地開(kāi)始玩兒，它設(shè)計(jì)簡(jiǎn)單干凈，容易互動(dòng)，視覺(jué)元素周?chē)凶銐虻目臻g，無(wú)需擔(dān)心誤觸。同時(shí)，其他游戲所具備的東西它也有——有趣好玩，可以共享得分，能分享到社交媒體。
界定一個(gè)網(wǎng)站的體驗(yàn)與否有的時(shí)候并不是單一的標(biāo)準(zhǔn)，而今天所推薦的7條秘訣本身也更接近于基本的Guideline，了解用戶，熟悉趨勢(shì)才能提供優(yōu)秀的體驗(yàn)。
文章來(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ì)( bouu.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ù)
首先，為什么要?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ì)( bouu.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)始并不是那么好回答。閱讀很大程度上依賴(là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ì)( bouu.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í)行其他操作。與依賴(lài)于點(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ì)( bouu.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ì)( bouu.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ì)( bouu.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ì)( bouu.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ì)( bouu.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ù)
這篇文章，和大家分享一些在產(chǎn)品和交互設(shè)計(jì)中的一些自己的方法。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn