他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

首頁

如何讓設計更具價值

資深UI設計者

很多有資歷的設計師會厭煩那些具體且瑣碎的需求。因為設計已被當作一種明確的任務去執行。現實就是這樣,當你把自己局限并等待別人過來派發“任務”時,其實已被降格成乙方。怎樣才能擺脫這樣的窘境?除了讓自己努力當上喬納森·埃維外,唯一的辦法就是系統地洞察產品的真正問題,將自己的想法勇敢講出來

企鵝FM 3.0設計中,設計團隊也在努力實現自我價值,洞察產品的核心體驗并針對問題思考策略。


如何打造有溫度的H5動畫

資深UI設計者

2016年末,各路APP也紛紛展開一輪輪的數據廝殺,從不同的視角闡述過去一年的精彩故事。而坐擁龐大用戶數據的QQ空間,在這個既難忘又不舍的2016年,用戶的故事將會被如何演繹,在寒冬帶給用戶怎樣的溫暖回憶呢?

[ISUX譯]我為css變量狂

資深UI設計者

幾個星期前,CSS Variables ——CSS 變量草案發布在了W3C官方 ,更準確的應該叫CSS 自定義屬性,目前在Chrome Canary 版里面已經支持,開啟該功能見附[1]

當Chrome瀏覽器工程師Addy Osmani第一時間把這消息發布在twitter后,遭到了數萬人的否定敵視懷疑。于我而言,更多的感到是一個驚喜,因為這個功能實在讓人太興奮了。

快速的掃了一遍之后,發現99%人抱怨的無外乎這兩點:

  • 語法太丑和不夠簡潔
  • Sass 、Less早就有這些玩意了,不太care

雖然我承認我也對這語法很反感,更重要的是理解語法不只是反復無常的在選擇。CSS工作組討論很久語法的長度,他們提取了一些點,考慮到CSS的語法兼容不會與未來增加的其他語言沖突。

用用戶的眼睛看用戶

資深UI設計者

“想看到真正的世界,就要用天的眼睛去看天,用云的眼睛去看云,用風的眼睛去看風,用花草樹木的眼睛去看花草樹木,用石頭的眼睛去看石頭,用大海的眼睛去看大海,用動物的眼睛去看動物,用人的眼睛去看人。”

——引自《天才在左 瘋子在右》

作為一名用戶研究者,我在日常工作中會接觸到各種各樣的用戶。面對這些用戶時,我也會不自覺地有著各種各樣的感受。這里先分享幾個粉絲的故事,看看大家有什么感覺:

UI設計師急需掌握的平面設計基礎

資深UI設計者

滑屏的交互形式自從在 H5 中流行起來,便廣泛應用在產品宣傳、廣告、招聘和活動運營等場景中,作為微信朋友圈廣告慣用的形式,其影響力更是得到了強化與放大。如今滑屏H5可謂玲瑯滿目,數不盡數。

作為一個 UI工程師,接過很多類似的項目,也曾寫過滑屏的插件,在經歷了不同的需求的“洗禮”并踩過若干個坑之后,不禁反問自己:應該如何面對每一次類似的需求,在已有的經驗下如何做到體驗更好?如何節省工作量提率?面對性能優秀的 iOS 與性能良莠不齊的 Android 平臺,又如何做到體驗統一與性能最優?

實現下劃線的N個姿勢

資深UI設計者

下劃線 一般在文檔中常被用作增強注意,在過去打字機時代,下劃線成為了唯一的一種文字強調方式,具體的操作方法是在已經打出來的文字上面退格,再在同樣的地方打出下劃線。

而在網頁中,可以鏈接的文字(超鏈接)下面一般都有下劃線。在制作頁面的時候,當鏈接需要下劃線的時候,UI開發很自然的會想到使用text-decoration屬性來顯示,例如這樣:

1479825410_16_w650_h150

以上顯示的是設計稿和瀏覽器渲染的實際效果,我們會發現瀏覽器渲染的效果和設計稿有出入,主要表現在下劃線的位置,這時候細心的設計師會要求你想辦法實現他們本來想要實現的效果。可惜的是,在這幾年的網頁排版技術發展中,并沒有更好的css屬性出現來支持下劃線的個性化設置,所以這個問題常常會被忽略。

這個一般在UI開發看來,可能覺得并沒有什么問題,難道說不應該使用text-decoration這個屬性嗎?

如何打造一個適配的H5

資深UI設計者

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

多端統一,內容至上——微云WEB改版小結

資深UI設計者

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

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

 

為什么要改版

微云WEB端與移動端體驗不一致。移動互聯網背景下,項目團隊把多數資源都分配給了移動端的研發,桌面端的功能和體驗得不到及時的跟進,導致用戶在兩個平臺上的體驗存在很大的落差。

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

 

改版前的思考

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

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

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

 

求同存異的兩端統一

品牌統一性

在設計一款產品不同平臺客戶端的時候,首先要保證品牌的統一性。Logo、字體、品牌色、品牌調性甚至是文案的措辭規范都是需要嚴格保持一致的。保證品牌的統一性,有助于塑造品牌形象,增強用戶對產品的信任。

01

交互框架的對齊

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

02

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

03

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

04

品牌調性和視覺風格的對齊

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

05

秉承著簡潔、自然、易識別的原則,我們對所有的小圖標進行了優化。簡化了舊版本中的復雜表達,并對默認態、hover態和選中態進行了規范。

06

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

08

內容至上的前瞻性設計

全新的縮略圖模式

內容至上是當今設計的發展趨勢之一,結合微云未來的重點方向——辦公體驗,我們進行了一些對內容的深入思考。

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

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

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

09

技術過渡時期的體驗補償

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

10

寫在最后

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


藍藍設計ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

動效丨七何分析法幫你全面分析界面動效

資深UI設計者

什么是界面動效?大家對其的理解大致是,用戶界面上所有運動的效果,也可以視其為界面設計(UI design)與動態設計(motion design)的交集。

【譯文】Facebook設計VP的產品設計觀

資深UI設計者

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

日歷

鏈接

個人資料

藍藍設計的小編 http://ssll180.com

存檔