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

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

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

為什么要改版

微云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)致用戶(hù)在兩個(gè)平臺(tái)上的體驗(yàn)存在很大的落差。

微云WEB端的設(shè)計(jì)較為陳舊。蘋(píng)果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)對(duì)齊需要解決很多矛盾。想要將WEB端的體驗(yàn)與移動(dòng)端統(tǒng)一，并沒(méi)有想象中的那么簡(jiǎn)單。聽(tīng)起來(lái)好像只要把交互框架和視覺(jué)風(fēng)格直接照搬過(guò)來(lái)就好了。但實(shí)際上要對(duì)齊的是兩種使用場(chǎng)景的體驗(yàn)，這中間要調(diào)和的是小屏幕和大屏幕的矛盾，觸摸操作和鍵鼠操作的矛盾，兩種不同概念模式和心智模型的矛盾。

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

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

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

品牌統(tǒng)一性

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

交互框架的對(duì)齊

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

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

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

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

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

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

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

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

全新的縮略圖模式

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

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

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

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

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

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

寫(xiě)在最后

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

藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一、有些事情難以回頭

開(kāi)篇我先表明自己的立場(chǎng)：同時(shí)使用 .Net 和 JAVA，但更加偏愛(ài).Net。原因很簡(jiǎn)單：

• .Net語(yǔ)言更具開(kāi)放性，從開(kāi)源協(xié)議和規(guī)范可以看出;
• 語(yǔ)言更具優(yōu)勢(shì)嚴(yán)謹(jǐn);
• 開(kāi)發(fā)工具 VS 更具生產(chǎn)力;

然而

• Java，C# 的職位比率在4:1，雖然這不是什么問(wèn)題，因?yàn)榍舐毟?jìng)爭(zhēng)的比例更大(JAVA中更多的剛培訓(xùn)出來(lái)的)，但話(huà)說(shuō)回來(lái)，對(duì)于C#求職而言，會(huì)面臨更加狹窄的企業(yè)選擇空間。
• Java同等職位，國(guó)內(nèi)的待遇比.Net稍高。這里為 .Net 說(shuō)聲不平，.Net開(kāi)源程度更好，架構(gòu)體系更成熟邏輯更嚴(yán)謹(jǐn)，開(kāi)發(fā)效率更高，服務(wù)器同樣可以使用Linux。
• 

編程是一個(gè)不斷向前發(fā)展的行業(yè)。在某些時(shí)候，你可能會(huì)誠(chéng)實(shí)地看看自己的技能，并得出結(jié)論，你已經(jīng)落在了曲線(xiàn)的后面。如果你是專(zhuān)業(yè)人士，那么這很容易做到，因?yàn)楹芏鄷r(shí)候你沒(méi)有必要夜以繼日地推著自己前進(jìn)。

但遲早，落后的趨勢(shì)會(huì)回過(guò)頭來(lái)咬你一口，讓你血流不止。在商業(yè)和就業(yè)市場(chǎng)上，你的競(jìng)爭(zhēng)力會(huì)降低。那么你該如何再次成為游戲中的高手呢？

曾經(jīng)是這樣的，懂點(diǎn)編碼，并可以偶爾耍點(diǎn)酷，那么你就會(huì)被認(rèn)為是一個(gè)Web開(kāi)發(fā)大師。但是現(xiàn)在，情況再也不是這樣的了。Web開(kāi)發(fā)已經(jīng)朝著主流方向發(fā)展，開(kāi)發(fā)人員數(shù)量顯著增加。

這意味著，如果你想成為這個(gè)領(lǐng)域的大師，那么你需要比競(jìng)爭(zhēng)對(duì)手更優(yōu)秀、知識(shí)更淵博、更有能力。有些人可能會(huì)想，那么應(yīng)該怎么辦呢？好問(wèn)題——我們將在這篇文章中探索一二。

JavaScript 字符串用于存儲(chǔ)和處理文本。因此在編寫(xiě) JS 代碼之時(shí)她總?cè)缬半S形，在你處理用戶(hù)的輸入數(shù)據(jù)的時(shí)候，在讀取或設(shè)置 DOM 對(duì)象的屬性時(shí)，在操作 Cookie 時(shí)，在轉(zhuǎn)換各種不同 Date 時(shí)，諸此等等，繁不能數(shù)；而她那滿(mǎn)多的 API 呵，總有些讓人不愿去記憶的沖動(dòng)，既然用時(shí)常搜，倒不如爛筆頭一翻，順道也體現(xiàn)下博客存在的價(jià)值，由此就有了這篇紀(jì)要。

字符串截取

1. substring()

xString.substring(start,end)

substring()是最常用到的字符串截取方法，它可以接收兩個(gè)參數(shù)(參數(shù)不能為負(fù)值)，分別是要截取的開(kāi)始位置和結(jié)束位置，它將返回一個(gè)新的字符串，其內(nèi)容是從start處到end-1處的所有字符。若結(jié)束參數(shù)(end)省略，則表示從start位置一直截取到最后。

javascript中的this含義非常豐富，它可以是全局對(duì)象，當(dāng)前對(duì)象或者是任意對(duì)象，這都取決于函數(shù)的調(diào)用方式。函數(shù)有以下幾種調(diào)用方式：作為對(duì)象方法調(diào)用、作為函數(shù)調(diào)用、作為構(gòu)造函數(shù)調(diào)用、apply或call調(diào)用。

對(duì)象方法調(diào)用

作為對(duì)象方法調(diào)用的時(shí)候，this會(huì)被綁定到該對(duì)象。

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     this.x = this.x + x; 
     this.y = this.y + y; 
     } 
 }; 

 point.moveTo(1, 1)//this 綁定到當(dāng)前對(duì)象，即 point 對(duì)象

在開(kāi)發(fā)項(xiàng)目組里面，前端一般都是作為一個(gè)統(tǒng)稱(chēng)而存在，很多剛畢業(yè)的童鞋就問(wèn)我想從事前端方面問(wèn)我怎么看，我會(huì)反問(wèn)你對(duì)前端了解多少，很多人都認(rèn)為前端基本上都是搞設(shè)計(jì)從事視覺(jué)方面。

前端從整個(gè)項(xiàng)目劃分來(lái)看，可以分為UE、頁(yè)面、邏輯，以下逐分析。

一、UE

如果只需要知道一種編程語(yǔ)言就可以構(gòu)建一個(gè)全棧的應(yīng)用程序，是不是特別了不起？Ryan Dahl為了把這個(gè)想法成為現(xiàn)實(shí)，創(chuàng)造了node.js。Node.js是建立在Chrome強(qiáng)勁的V8 JavaScript引擎上的服務(wù)器端框架。雖然最初是用C++編寫(xiě)的，但是應(yīng)用程序通過(guò)JavaScript運(yùn)行。

這樣一來(lái)，問(wèn)題就解決了。一種語(yǔ)言就可以統(tǒng)治一切。而且，在整個(gè)應(yīng)用程序中你只需要使用這一種語(yǔ)言。所以，我們需要深刻了解node.js。這就是本文的主題。

下面這四個(gè)基本概念是你想要掌握node.js所必需的。我會(huì)盡可能長(zhǎng)話(huà)短說(shuō)向大家介紹它們。

如何定義牛逼工程師

有軟件工程方面的研究說(shuō)，對(duì)于開(kāi)發(fā)者個(gè)體而言，最優(yōu)秀的開(kāi)發(fā)者的生產(chǎn)效率約為平均值的2倍，而優(yōu)秀的開(kāi)發(fā)者會(huì)吸引其它優(yōu)秀的人，或者激勵(lì)與幫助團(tuán)隊(duì)中的其它成員，最終使團(tuán)隊(duì)之間的生產(chǎn)效率差異達(dá)到10倍之多。

所謂牛逼的工程師，就是那些個(gè)體效率是其它人2倍，形成團(tuán)隊(duì)之后達(dá)到10倍差異的一群人。

前端領(lǐng)域這幾年發(fā)展速度非?？?，人才分布呈兩級(jí)分化趨勢(shì)，大家都在說(shuō)缺前端，其實(shí)缺的是牛逼前端，對(duì)于低端的前端，培訓(xùn)機(jī)構(gòu)一直在量產(chǎn)，但是無(wú)法滿(mǎn)足要求。很多情況下，一個(gè)牛逼前端對(duì)于團(tuán)隊(duì)的價(jià)值是再多低端前端都無(wú)法提供的。

牛逼的前端工程師有一些共通的特質(zhì)，這些特質(zhì)也許不屬于前端的核心范疇，但是可以通過(guò)它們將牛逼的人識(shí)別出來(lái)。

對(duì)用戶(hù)體驗(yàn)的追求