手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁

如何打造一個適配的H5

資深UI設(shè)計者

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

多端統(tǒng)一,內(nèi)容至上——微云WEB改版小結(jié)

資深UI設(shè)計者

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

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

 

為什么要改版

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

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

 

改版前的思考

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

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

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

 

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

品牌統(tǒng)一性

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

01

交互框架的對齊

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

02

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

03

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

04

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

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

05

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

06

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

08

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

全新的縮略圖模式

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

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

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

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

09

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

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

10

寫在最后

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


藍(lán)藍(lán)設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

從 .NET 和 Java 之爭談 IT 行業(yè)

藍(lán)藍(lán)設(shè)計的小編

一、有些事情難以回頭

開篇我先表明自己的立場:同時使用 .Net 和 JAVA,但更加偏愛.Net。原因很簡單:

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

然而

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

你的編程技巧已經(jīng)過時了嗎?

藍(lán)藍(lán)設(shè)計的小編

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

但遲早,落后的趨勢會回過頭來咬你一口,讓你血流不止。在商業(yè)和就業(yè)市場上,你的競爭力會降低。那么你該如何再次成為游戲中的高手呢?

are-your-programming-outdated.jpg

成為 Web 開發(fā)大師你必須知道的 7 件事情

藍(lán)藍(lán)設(shè)計的小編

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

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

laptop-guy.jpg

JavaScript 字符串實用常操紀(jì)要

藍(lán)藍(lán)設(shè)計的小編

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

字符串截取

1. substring()

xString.substring(start,end)

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

JavaScript之this指針深入詳解

藍(lán)藍(lán)設(shè)計的小編

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

對象方法調(diào)用

作為對象方法調(diào)用的時候,this會被綁定到該對象。

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)前對象,即 point 對象

聊聊開發(fā)中的前端

用心設(shè)計

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

 

前端從整個項目劃分來看,可以分為UE、頁面、邏輯,以下逐分析。

 

一、UE


Image title

Node.js新手必須知道的4個JavaScript概念

藍(lán)藍(lán)設(shè)計的小編

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

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

下面這四個基本概念是你想要掌握node.js所必需的。我會盡可能長話短說向大家介紹它們。

logo-nodejs.jpg

如何識別牛逼的前端工程師

藍(lán)藍(lán)設(shè)計的小編

如何定義牛逼工程師

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

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

989f8dafe30e5f01630ad82.png

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

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

對用戶體驗的追求

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔