欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

以往拿到一份視覺稿要做頁面適配，通常都是針對不同分辨率尺寸做斷點(diǎn)寫 media
query，然后看效果再微調(diào)。開發(fā)過程中視覺稿要是做了修改，修改的地方就得再走一遍分辨率測試和微調(diào)，這時(shí)想屎的心都有了。而且這些適配都是建立在已
知的分辨率尺寸庫上，如果市面新出來一款分辨率尺寸機(jī)型，呵呵，又要奔跑在測試微調(diào)路上。是不是能有用一套代碼就適應(yīng)各種分辨率窗口，那么就不會(huì)再有上面
這些煩惱，且開發(fā)效率快和維護(hù)成本會(huì)降低很多。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

近期，我們對微云WEB端進(jìn)行了一次“簡單”的改版。這篇文章簡要記錄了改版過程中的一些思考。

為什么要改版

微云WEB端與移動(dòng)端體驗(yàn)不一致。移動(dòng)互聯(lián)網(wǎng)背景下，項(xiàng)目團(tuán)隊(duì)把多數(shù)資源都分配給了移動(dòng)端的研發(fā)，桌面端的功能和體驗(yàn)得不到及時(shí)的跟進(jìn)，導(dǎo)致用戶在兩個(gè)平臺(tái)上的體驗(yàn)存在很大的落差。

微云WEB端的設(shè)計(jì)較為陳舊。蘋果iOS的快速發(fā)展使得整個(gè)UI設(shè)計(jì)行業(yè)日新月異，設(shè)計(jì)理念不斷進(jìn)化向前，微云WEB端的設(shè)計(jì)已經(jīng)多年未更新，早已經(jīng)不起當(dāng)下設(shè)計(jì)原則的檢驗(yàn)。

改版前的思考

兩端的體驗(yàn)對齊需要解決很多矛盾。想要將WEB端的體驗(yàn)與移動(dòng)端統(tǒng)一，并沒有想象中的那么簡單。聽起來好像只要把交互框架和視覺風(fēng)格直接照搬過來就好了。但實(shí)際上要對齊的是兩種使用場景的體驗(yàn)，這中間要調(diào)和的是小屏幕和大屏幕的矛盾，觸摸操作和鍵鼠操作的矛盾，兩種不同概念模式和心智模型的矛盾。

新的設(shè)計(jì)除了符合潮流，還要更具前瞻性 。想要做出可持續(xù)的設(shè)計(jì)，首先要明確設(shè)計(jì)潮流的走向，從擬物到扁平，從形式到內(nèi)容，從工具化到情感化，設(shè)計(jì)潮流的走向一直沒有變，在以人為中心的前提下，越來越注重用戶更深層的需求。

項(xiàng)目團(tuán)隊(duì)在WEB端的資源投入注定了設(shè)計(jì)更新迭代的頻率會(huì)很低。想要改版后的設(shè)計(jì)能夠長久地支撐產(chǎn)品的發(fā)展，需要設(shè)計(jì)師把眼光放遠(yuǎn)，通過了解產(chǎn)品未來發(fā)展方向，做出更有前瞻性的設(shè)計(jì)。

求同存異的兩端統(tǒng)一

品牌統(tǒng)一性

在設(shè)計(jì)一款產(chǎn)品不同平臺(tái)客戶端的時(shí)候，首先要保證品牌的統(tǒng)一性。Logo、字體、品牌色、品牌調(diào)性甚至是文案的措辭規(guī)范都是需要嚴(yán)格保持一致的。保證品牌的統(tǒng)一性，有助于塑造品牌形象，增強(qiáng)用戶對產(chǎn)品的信任。

交互框架的對齊

我們先來對比一下移動(dòng)端和WEB端的主界面，單純從視覺上，已經(jīng)很難看出這是同一款產(chǎn)品。雖然在頁面結(jié)構(gòu)上兩端并不一致，但各自也都符合所在平臺(tái)用戶的操作習(xí)慣。

舊版WEB端雖然在視覺風(fēng)格上是扁平的，但是在信息層級上卻并不扁平，僅僅頂部的信息就有三層，過度的結(jié)構(gòu)化使整體頁面看起來過于復(fù)雜，用戶很難將注意力集中到內(nèi)容上。我們對WEB端頂部元素重新歸類整合，主要功能入口的布局和移動(dòng)端進(jìn)行了統(tǒng)一，通過引入移動(dòng)端的編輯態(tài)邏輯，常態(tài)下隱藏了所有的操作按鈕，將頂部區(qū)域的三層信息減少為一層，使其看起來更加清爽。

正如上面所說，雖然我們追求多端統(tǒng)一的用戶體驗(yàn)，但手機(jī)和電腦的操作場景差別很大，用戶在不同的平臺(tái)已經(jīng)形成了不同的操作習(xí)慣。移動(dòng)端的多級導(dǎo)航設(shè)計(jì)是針對小屏幕局限性做出的一種妥協(xié)。在空間足夠大的WEB端，所有的二級導(dǎo)航都可以平鋪出來，這樣可以減少一個(gè)層級，因此，我們保留了原有的左導(dǎo)航結(jié)構(gòu)。通過對導(dǎo)航項(xiàng)歸類的方式與移動(dòng)端統(tǒng)一。

品牌調(diào)性和視覺風(fēng)格的對齊

在視覺風(fēng)格上，微云移動(dòng)端最具代表性的就是藍(lán)色的品牌色和線型的圖標(biāo)， 在嘗試設(shè)計(jì)方案的過程中我們發(fā)現(xiàn)，由于WEB端尺寸比較大，大面積使用藍(lán)色會(huì)加重用戶的視覺負(fù)擔(dān)，分散用戶對內(nèi)容信息的注意力，因此，在色彩方案上最終選擇了純白淺灰作為主色，藍(lán)色作為局部點(diǎn)綴，以下是改版后的一些核心頁面。

秉承著簡潔、自然、易識(shí)別的原則，我們對所有的小圖標(biāo)進(jìn)行了優(yōu)化。簡化了舊版本中的復(fù)雜表達(dá)，并對默認(rèn)態(tài)、hover態(tài)和選中態(tài)進(jìn)行了規(guī)范。

文檔類型圖標(biāo)也和手機(jī)端進(jìn)行了對齊，將文件格式進(jìn)行分類整合，同類型的格式采用同一個(gè)圖標(biāo)，將格式后綴在文件名中顯示出來。在不影響識(shí)別的前提下大大降低了設(shè)計(jì)成本。

內(nèi)容至上的前瞻性設(shè)計(jì)

全新的縮略圖模式

內(nèi)容至上是當(dāng)今設(shè)計(jì)的發(fā)展趨勢之一，結(jié)合微云未來的重點(diǎn)方向——辦公體驗(yàn)，我們進(jìn)行了一些對內(nèi)容的深入思考。

在網(wǎng)盤的使用場景中，什么才是用戶關(guān)注的內(nèi)容？早期的文件管理產(chǎn)品把文件圖標(biāo)、文件名定義為內(nèi)容，文件被包裝成一個(gè)個(gè)方塊，或是一行行的列表，文件間的差異只靠文字來體現(xiàn)。面對這樣的界面，用戶對文件的識(shí)別是十分低效的。這也是為什么在如今的網(wǎng)盤場景中，圖片是最容易識(shí)別的，因?yàn)樗龅搅宋募旧韮?nèi)容的外顯。

在面對一個(gè)一個(gè)被包裝的文件時(shí)，用戶容易被觸發(fā)的行為局限于整理、刪除等基礎(chǔ)操作，只有在能夠看到文件本身內(nèi)容的時(shí)候，才更容易觸發(fā)編輯、分享、共享協(xié)作等更加沉浸式和更具社交性的操作。這就好比你走進(jìn)一個(gè)倉庫看到貨架上的一個(gè)個(gè)箱子，你會(huì)想要把他們分類、擺放得更整齊。但是當(dāng)你走進(jìn)一家商店，看到貨架上琳瑯滿目的商品時(shí)，你才會(huì)有挑選、對比和購買的沖動(dòng)。

秉承著這個(gè)理念，我們反觀圖片之外的其他文件類型，道理是相同的；因此，我們在改版中引入了全新的縮略圖模式，在新的縮略圖模式下，單個(gè)文件的可視區(qū)域被放大，用來承載文件本身的內(nèi)容。雖然一屏可以展示的文件數(shù)減少了，但展示出的有效信息是大大增加的，除了讓每個(gè)文件在視覺上有了獨(dú)特性，提高了檢索效率，也更容易觸發(fā)用戶更多的后續(xù)行為。這對于產(chǎn)品本身的價(jià)值相信大家都懂。

技術(shù)過渡時(shí)期的體驗(yàn)補(bǔ)償

理想很豐滿，現(xiàn)實(shí)很骨感，讓更多的文件內(nèi)容外顯在技術(shù)上必然要走一段路。在技術(shù)問題解決的過程中需要設(shè)計(jì)對體驗(yàn)進(jìn)行一些彌補(bǔ)，在縮略圖的文檔圖標(biāo)的設(shè)計(jì)中，我們盡可能的把文件的內(nèi)容樣式圖形化；同時(shí)，為了保證識(shí)別性，那些圖標(biāo)比內(nèi)容形式更具特征的文件，保留了圖標(biāo)設(shè)計(jì)的形式。

寫在最后

微云一直致力于為用戶提供更更自然的使用體驗(yàn)，無論在功能上還是在設(shè)計(jì)上，我們都秉承著以用戶為中心的原則，不斷打磨每個(gè)細(xì)節(jié)。WEB改版也是如此，這一期改版我們對WEB端的框架和方向進(jìn)行了調(diào)整，在接下來的二期、三期.....我們會(huì)不斷深入到各個(gè)模塊，進(jìn)一步提升WEB端的用戶體驗(yàn)。在這個(gè)對于個(gè)人網(wǎng)盤來說最壞的時(shí)期，微云會(huì)長久的發(fā)展下去，我們不會(huì)停止前進(jìn)的腳步，更多酷炫的新功能新體驗(yàn)已經(jīng)在路上。

藍(lán)藍(lán)設(shè)計(jì)( m.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)效？大家對其的理解大致是，用戶界面上所有運(yùn)動(dòng)的效果，也可以視其為界面設(shè)計(jì)（UI design）與動(dòng)態(tài)設(shè)計(jì)（motion design）的交集。

【譯者注】Julie
Zhuo，原上海人，在5歲時(shí)舉家移民美國德州，家人本希望她成為一名醫(yī)生或者律師，但因?yàn)閷σ曈X藝術(shù)的熱愛，她選擇成為一名設(shè)計(jì)師。她是Facebook的第一名實(shí)習(xí)生，2006年5月加入時(shí)剛滿22歲，那時(shí)的社交網(wǎng)絡(luò)還局限于電子郵箱往來。在10年的職業(yè)生涯中，她充分展示了對產(chǎn)品設(shè)計(jì)的深入理解和卓越管理能力，成為了Facebook的設(shè)計(jì)總監(jiān)，在Medium等媒體發(fā)表自己對產(chǎn)品設(shè)計(jì)的見解和觀點(diǎn)，篇篇飽含真知灼見，又不失個(gè)人特色洞察，逐漸被設(shè)計(jì)同行熟知。如今，這個(gè)32歲的華人姑娘已成為硅谷最偉大公司之一Facebook的設(shè)計(jì)副總裁，她分享了自己數(shù)年來形成的產(chǎn)品設(shè)計(jì)觀，相信你們讀了之后會(huì)找到很多啟發(fā)與共鳴。

聲勢浩大的改版設(shè)計(jì)總使人望而生畏。有太多變化與未知，有可能會(huì)失敗。但我們知道，如果想要打造未來，我們就得欣然接受挑戰(zhàn)。這就意味著不僅僅是在外觀上下賭注，也是在重新想象整個(gè)流程。

Uber原本的主旨很簡單，“按下按鈕，搭上一輛車。”你不必設(shè)定目的地，也不必選擇產(chǎn)品，只要按一下按鈕，或者兩下，之后就不用管了。

在有限的界面尺寸里，給予用戶無限操作可能

股票中行情內(nèi)容是最多的，其內(nèi)容展現(xiàn)的難度系數(shù)相當(dāng)大，所以它的交互設(shè)計(jì)也十分棘手。

在一個(gè)界面中，僅通過點(diǎn)擊方式無法承載股票行情的諸多功能點(diǎn)。要想界面簡潔、突出重點(diǎn)就必須把相對次要的功能隱藏起來。在行情界面設(shè)計(jì)過程中遇到的主要問題是哪些東西該顯示，哪些東西隱藏，隱藏后如何讓用戶發(fā)現(xiàn)，怎樣的顯示方式更容易被用戶接受等等。

編者按：制作UI 設(shè)計(jì)規(guī)范的大體思路應(yīng)該是怎樣的？制作規(guī)范時(shí)容易遇到哪些瓶頸？今天這篇好文是華為設(shè)計(jì)師總結(jié)的經(jīng)驗(yàn)，幫你一次性搞定這兩個(gè)問題！

2016已經(jīng)接近尾聲，上兩天剛參加完比賽，利用這幾天空閑時(shí)間，把最近沉淀下來的東西分享出來。

上個(gè)月團(tuán)隊(duì)幾個(gè)小組進(jìn)行友誼比賽，命題是“郵件”。規(guī)定大家以產(chǎn)品思維去設(shè)計(jì)一款全新的產(chǎn)品，形式不限。很難得的是所有人都參加了產(chǎn)品設(shè)計(jì)的每一個(gè)環(huán)節(jié)。我們秉著發(fā)現(xiàn)問題、解決問題的態(tài)度開始了這次友誼比賽。

眾所周知，app服務(wù)器在加載數(shù)據(jù)的時(shí)候需要用戶等待一段時(shí)間，為了緩解用戶等待過程中的焦慮情緒，設(shè)計(jì)者可以采用加載動(dòng)畫的方式來緩解用戶的等待時(shí)間，使整個(gè)等待過程變得更加友好、流暢。

一個(gè)好的加載動(dòng)畫分為兩個(gè)層次，第一個(gè)層次是滿足用戶的基本心理預(yù)期，緩解等待的焦慮；第二個(gè)層次是要給出用戶一定的驚喜，甚至讓用戶對加載動(dòng)畫抱有期待、好奇的心理。

這里我們暫時(shí)先只討論第一個(gè)層次的內(nèi)容，因?yàn)檫@已經(jīng)能夠滿足大多數(shù)app的需求了，至于如何做出讓用戶驚喜的加載動(dòng)畫（如餓了么、京東的加載動(dòng)畫），我們可以另外討論。

說起“愉悅性”，我們通常會(huì)想到一些讓人感到溫暖、開心的東西，譬如毛絨玩具、紙杯蛋糕、擁抱，等等。

不過，具有愉悅性的事物在某些情況下同樣會(huì)帶來負(fù)面效應(yīng)。某些笑話可能冒犯到他人，溫馨的廣告可能誤導(dǎo)部分觀眾，即便是可愛的音效也會(huì)因?yàn)檫\(yùn)用不當(dāng)而使人抓狂。

在UX領(lǐng)域，我們總會(huì)對那些體現(xiàn)著愉悅性的設(shè)計(jì)細(xì)節(jié)贊賞有加；而另一方面，對其負(fù)面效應(yīng)的了解也將有助于我們更好、更全面的掌握這一設(shè)計(jì)原則，避開陷阱。

設(shè)計(jì)中的一致性會(huì)在無形之中使你的設(shè)計(jì)效果更加優(yōu)秀，也更易于用戶使用。今天這篇教程免費(fèi)提供了7個(gè)提升設(shè)計(jì)一致性的小貼士，適用于視覺/UI/品牌設(shè)計(jì)等，實(shí)戰(zhàn)性很強(qiáng)，建議閱讀。