隨著微信用戶的增長，用戶使用場景增多，微信的單裝置登錄模式無法滿足某些場景（商務辦公等）的需求，雖然微信網頁版的出現(xiàn)解決了部分問題，但仍需要一個更穩(wěn)定的客戶端，整合微信相關各平臺統(tǒng)一的設計元素以及體驗，啟動微信 Windows 版的設計。

由于 iOS ，Android 版微信的地位不可撼動，Windows 版微信更多關注效率及使用場景，作為移動端的補充。區(qū)別移動端與桌面端的使用場景，結合 Windows 平臺的特點，提煉設計關鍵詞：輕量，簡潔，便捷，純粹，中性。

簡潔、輕量

為了達到簡潔的感受，留白起著重要作用，排版避免擁擠減少壓迫感，留有呼吸余地，達到簡潔的視覺感受，能夠快速傳達重點信息，這同時也要求產品本身層級清晰，冗余功能少才能做到。

輕量

重量感而言，體重于面，面重于線；線體組合給人意向以輕盈與透氣為主。避免過重的質感與大面積的陰影使用，減弱投影；嘗試將用線來取代面以減輕重量感。

中性，純粹

色彩擁有重量與性格，色相的不同帶給人的視覺感官也會不同，為了達到關鍵詞中性純粹，設計會盡量避免大面積色彩情緒傾向太明顯的色彩，譬如紅和橙，著重考慮色彩性格最弱的灰黑系，以達到純粹中性的感受。

對 Windows10 的設計趨勢進行分析，同時結合 Windows10 平臺的同類競品對比研究，得出以下一些方向：

• 整合分散的結構，令結構更清晰；
• 將常態(tài)與操作態(tài)進行區(qū)分，令當前狀態(tài)更清晰；
• 強化品牌識別度，精簡用色，減少多色彩帶來的體驗干擾；

根據(jù)色彩的重量，讓最左的 Tab 最深色視覺感受下沉，其次側邊欄下沉，聊天窗口淺灰，視覺感上浮，最快吸引到注意力，而信息最重要的聊天氣泡為無邊框的白色與綠，從而最快速浮在最上層，閱讀順序如左圖由 1~4 的排序，快速抓住視覺點。

根據(jù)提煉的設計定位，嘗試了不同的視覺方案，包括有 Top Bar 及無 Top Bar 三欄的不同配色嘗試以及 Profile 等主頁面的風格嘗試。

• 對信息層級扁平化，剔除不必要元素，避免多余元素對操作體驗產生干擾；
• 扁平，簡潔，并與微信移動端的設計風格相統(tǒng)一，采用深灰，淺灰為主色調輔以微信綠來增強品牌性；
• Tab 增加個人頭像以增強代入感；
• 采用與 Mac 體驗一致的三欄設計，左側的 Tab 及 Chatlist 用深灰，右側的會話內容選定為淺灰。讓整個視覺關注點由右上，右下，左側，最左側 順序依次減弱，達到視覺重點突出，層級分明的目 的。

設計圖片預覽優(yōu)化的時候目標很明確，就是更輕更快捷。

傳統(tǒng)的圖片預覽工具大多都是打開圖片以后無論圖片的尺寸大小，窗口大小均不變，這種不智能會浪費過多屏幕空間，于是設計方案為去掉多余的部分，設置極限值，讓大多數(shù)圖片打開的時候自適應比例撐滿顯示區(qū)域，以達到所見即所得，直觀清爽的體驗。

圖片預覽底部的設計有兩個方向，一種是將「1 : 1 看圖」，「左旋轉」以及「右旋轉」的按鈕全部暴露，但快速找到想點的 icon 的成本卻變高了。另一種為有選擇的展現(xiàn)操作按鈕，為了保持輕簡快速，選擇第二種。

圓頭像會削減頭像的面積，且會阻礙完整的頭像呈現(xiàn)，,方案 A 選擇舍棄。與群名片的豎排版體驗統(tǒng)一，放棄方案 C

移動端獲取的頭像清晰度高，后臺可以拉取更高清的頭像，在 profile 的設計上利用次優(yōu)勢，盡可能的展現(xiàn)完整的大頭像，最終選取下圖中以最大面積展示頭像，清晰的顯示基本信息及消息入口的方案作為實現(xiàn)方案。

主色調選用深灰，淺灰以及少量微信品牌綠色，組合以引導簡潔，中性，純粹的方向。

字體在深色背景與淺色背景上體現(xiàn)出不同的灰度，讓重要程度通過灰度區(qū)分。

局部控件的設計，包括 icon 的不同狀態(tài)均根據(jù)強調程度有所不同的展現(xiàn)。

匯總包括文字，圖片，文件類型，鏈接，名片等不同的氣泡類型。

將對方與自己的消息氣泡做出不強烈的區(qū)分，達到區(qū)分度不妨礙氣泡本身內容的展現(xiàn)；將不同的類型氣泡按照特性做出尺寸區(qū)分，但在全局上考慮統(tǒng)一，做到尺寸有序而靈活。

原設計在二維碼上有 WeChat icon 增強品牌認知，但有影響掃碼性能的風險，于是做出舍棄。

二期設計會加入收藏功能，隨時關注后期用戶數(shù)據(jù)，針對根據(jù)用戶反饋做出一些體驗上的優(yōu)化點，對全局的控件進行統(tǒng)一性的整理優(yōu)化，同時將針對 Windows 10 做出適應性的優(yōu)化設計。

有幸參與微信 Windows 版 1.0 的研發(fā)，在研發(fā)中承擔視覺設計的角色，而又不僅限于視覺身份，在此期間非常感謝大家給予的幫助，感謝 Nick 常與我交流交互細節(jié)的優(yōu)化，感謝黎瀚與 Bence 給出專業(yè)嚴謹?shù)脑O計建議，感謝 Flora 積極熱情的與大家溝通產品的方向，感謝 Leo，果哥，Chicken 像素級的視覺還原，感謝所有為 Windows 版微信共同努力的同事,期待未來能給大家?guī)砀皿w驗的 Windows 微信。

作者：cherlyli

來源：We-Design（微信公眾號：WeDesignCenter）