92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

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

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

為什么要改版

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

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

改版前的思考

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

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

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

求同存異的兩端統一

品牌統一性

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

交互框架的對齊

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

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

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

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

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

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

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

內容至上的前瞻性設計

全新的縮略圖模式

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

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

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

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

技術過渡時期的體驗補償

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

寫在最后

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

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

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

股票中行情內容是最多的，其內容展現的難度系數相當大，所以它的交互設計也十分棘手。

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

編者按：今天這篇文章，是由騰訊高級交互設計師@C7210 向同學們征集問題后作出的回答，涉及交互設計、行業趨勢、職場、工具推薦等等，都是大家平時特別關心的，趕緊來收。

歡迎關注作者（高級交互設計師、貓奴、吉他手、鼓手、老狗、單身，現就職于騰訊ISUX）的微信公眾號：Beforweb

提問

來自@X丶field：請問對于現在視覺和交互逐漸融合的UX/Product Designer崗位有什么看法？

C 回復：

好問題，也是我個人以及一些朋友正在親身面對、體會和見證的所謂“行業趨勢”。

首先排除全能型個人以一當十的情況，單就通常意義上的團隊協作的形式而言，目前我所能看到的“融合”分為兩類：

第一類：交互設計師與視覺設計師在產品層面統一認知，理解并認同商業意義及產品目標，以此為基礎，在各施所長、各盡其職的同時，更多的學習、了解彼此職能的目標、焦點和工作方法，互相理解，融會貫通，減少分歧，降低成本，以最大化的合力完成產品設計工作。這種模式下，所謂“UX/產品設計師”是對兩種職能的統稱。本質上講，這就是對于我們如今所熟悉的傳統團隊模式的一種漸進式提升。

晶晶：獨立項目中，交互設計師的工作可以分成四個核心環節：定義方向策略、確定解決方案、有理有據的進行設計輸出、上線效果跟蹤。本期要和大家分享的是：方向策略。

長期以來我就有對幾年來交互設計的心得進行總結整理的想法?；氐街袊鴣碛H身體會到不少同行，主要是交互設計師和視覺設計師對于交互設計的困惑，以及其他行業對于交互設計的誤解和濫用。后來我在小范圍內開設了一個關于交互設計的講座；現在把它整理成文，希望與同行切磋，共同進步。

這篇文章是我幾年來在美國從事交互設計工作的一個經驗總結。當時我們遵循以用戶為中心（User-Centered-Design, 簡稱UCD）的設計原則，每一個項目都是不折不扣的按所有UCD的步驟進行。下面總結的交互設計的方法，是從UCD的過程中提煉出來，也就是說，同樣適用于任何非UCD的設計過程。

當產品的用戶體驗要求越來越高時，交互設計師的職責也越來越明晰了。交互設計師除了自身的基本功外，還需要有一個規范的流程，才能夠使工作完整有序。

自九月以來，摩拜單車和OFO讓“共享經濟”概念著實火了一把。摩拜單車一年之內火速搞定三輪融資，OFO在融資規模和速度上也旗鼓相當。要說更看好誰的話，我想我會投摩拜一票，在我看來，摩拜似乎更能靜得下心來打磨他們的產品。相較于OFO單車的倉促面世，摩拜精心打磨的專為“共享”設計的單車顯得有誠意得多。這份堅實的基礎，我想就夠OFO追趕一陣了，更何況其中的踏實基因必定還將助其更穩更好地發展呢。

交互設計是UI設計中的必不可少的一個過程，交互設計也要遵循一定的步驟，總體來說要經歷三個階段，那么具體是哪三個階段呢？下邊是以為資深老鳥為我們帶來的他的交互經驗，希望對設計師們起到一定的幫助。

（1）讀文檔，明需求，多溝通，擅闡述。需求文檔類型多種多樣，無論哪種，首要任務是讀懂需求的內容，透徹理解范圍層的含義，及相關的業務形態。把自己當用戶代入思考，如何讓使用者快速上手，減少學習成本。一般情況下，拿到PM的需求文檔，我會先讀一遍，整理出整個文檔的架構、要點、功能點等。記錄過程中不理解的內容，羅列問題清單，找PM溝通。溝通的效率也很重要，我會先聽PM講完，然后用自己的話闡述一遍，助于理解。

深挖產品設計背后的工作方式和工作流程，讓產品經理受益匪淺。

Design Sprint Method （谷歌沖刺計劃）是由谷歌創投的 Jake Knapp 發明的一種產品設計工作法，是指由一支不超過 7 人的團隊，在 5 天之內，通過 5 個步驟，能夠快速解決產品難題的產品設計方法。其基礎概念來自于敏捷開發、設計思考和個性游戲法，先后被 100 多家創業公司實踐，打造了諸如 Slack、 Nest、Blue Bottle Coffee 和 23andMe 等多個成功的互聯網產品。

@黃紅藝Designer ：對于交互設計師而言，一個項目的開始，是從接到產品經理的需求文檔開始的。從需求的確認到交互稿的確認，再到產品開發效果的確認，都考驗著交互設計師設計能力以外的技巧。在這個過程中，有一些要點需要你知道，來保證你的設計過程更加順暢。

第一點：確認你所理解的需求是否正確

一千個人的眼中，就有一千個哈姆雷特。對于需求的理解也是一樣，我們拿到需求以后，要和產品經理進行溝通，將自己對需求的理解與簡單的頁面構思，闡述給產品經理，以確定自己的理解與設計方向是否準確。切忌，拿到需求就開工去做，以為可以節省時間，卻不知錯誤的理解和方向，讓你付出更多。

不要認為，產品經理給的需求就像數學定理一樣可以深入理解，詳細解讀，沒有那么多的產品經理有這個功夫和能力去做這個事情。因此，溝通才是保證你對需求的理解，對設計方向正確把握的基石。

那么，在需求交流之前你要準備好什么呢？第一，認真研究需求，理解需求；第二，是你在研究需求時，發現的問題，最好整理出來，以便在討論時提出，讓產品經理為你解答，而不是自己”以為“；第三，如果時間充足，最好整理出界面的框架，或者用草圖來展示你的設計思路，看產品經理是否認可你的設計。

對于討論中形成的共識，最好以郵件的形式發出，一方面可以作為會議紀要，便于隨時解答疑惑，另一方面，是立字為證，防止需求的隨意變更。