<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          金山文檔組件界面全新升級

          共 2204字,需瀏覽 5分鐘

           ·

          2022-07-16 18:10

          點擊 ▲ 三分設 關注,和 6 萬設計師一起學習進步

          知識庫 2022 · 第 171 

          經(jīng)常使用金山文檔的細心用戶可能已經(jīng)發(fā)現(xiàn),金山文檔移動端組件的界面已經(jīng)悄悄煥然一新,下面帶大家了解一下組件界面改版的全流程:
          1.項目背景
          2.改版原因
          3.設計目標
          4.設計實施



          項目背景

          金山文檔作為一款長期為客戶服務的云辦公、云協(xié)作平臺,始終致力于把最簡單高效的辦公體驗和服務帶給每個人、每個組織,幫助個人和企業(yè)組織更高效的運行與發(fā)展

          年初,線上辦公突然成為熱門話題,隨著金山文檔用戶量的激增、功能不斷完善及拓展,原有的移動端視覺風格和交互體驗已經(jīng)無法滿足用戶日益增長的體驗需求,因此,我們在此契機之下發(fā)起這次金山文檔移動端組件改版項目

          本次 2.0 改版對視覺層和交互層進行全面升級,致力于為用戶提供更完善的使用體驗


          為什么要進行改版

          舊版界面

          視覺層
          整體視覺形象粗糙,設計語言陳舊,視覺信息傳達不明確;圖標尺寸過小且樣式不統(tǒng)一,已經(jīng)不適應越來越高清的大屏幕設備;頁面充斥著大量線條元素導致視覺效果凌亂

          交互層
          組件之間同類功能布局不一致,整體功能分類缺乏統(tǒng)一邏輯,增加用戶學習成本;標題工具欄功能圖標過于密集,對核心的協(xié)作功能引導帶來一定干擾

          效率層
          缺乏統(tǒng)一的視覺和交互規(guī)范,無法實現(xiàn)開發(fā)組件庫落地,以至于所有頁面都是獨立頁面,影響產(chǎn)品設計開發(fā)效率


          設計目標

          在對項目進行改版之前,我們與產(chǎn)品經(jīng)理露慧、李石通過大量的競品分析,結合自身產(chǎn)品的目標導向和框架,確立如下設計目標:


          1.視覺語言的全面升級
          摒棄過去陳舊的視覺風格,重新打造全新、統(tǒng)一的設計語言

          2.完善統(tǒng)一交互體驗
          統(tǒng)一交互框架布局,加入轉(zhuǎn)場動畫及操作微動效,提升用戶的操作體驗感

          3.搭建規(guī)范化的設計開發(fā)系統(tǒng)
          建立顏色變量庫、控件庫和圖標庫,搭建開發(fā)組件庫,為后續(xù)的更新迭代打好效率基礎

          1.視覺語言的全面升級
          1)確立視覺風格:
          通過對流行趨勢的分析,我們確立了三個關鍵詞:簡潔、輕、白

          簡潔:化繁為簡,清晰展示
          頁面中原本大量的線條元素,以色塊成組取而代之,減少多重視覺層級,使視覺效果簡潔化、模塊清晰化


          輕:視覺輕盈,點到為止
          去掉頭部的主題色,僅用于點綴,整體使用視覺更輕量的白色,弱化產(chǎn)品的重量


          白:白紙黑字,專注內(nèi)容
          純白背景和純黑圖標文字,突出產(chǎn)品的屬性,讓用戶更聚焦關注文檔內(nèi)容


          2)定義圖標細節(jié):
          項目過程中,圖標經(jīng)歷了 2 次迭代

          第 1 版圖標實現(xiàn)的效果,在 IOS 端顯示尺寸偏小,視覺上不利于點擊;在安卓機上圖標線條顯得很粗大,與文字效果不匹配;內(nèi)直角的效果在轉(zhuǎn)折處會比別處顯細;完全填充的尺寸不利于后續(xù)拓展

          針對第一版的問題,經(jīng)過不斷打磨,第二版細節(jié)效果最終出爐:


          2.完善統(tǒng)一交互體驗
          1)突出產(chǎn)品的核心理念:云協(xié)作

          頂部工具欄屬于全局、低頻操作,卻承載了過多的功能,導致圖標密集,極大削弱了成員協(xié)作的感知,經(jīng)過與產(chǎn)品反復討論,確定改版方向為:突出品牌、精簡功能,專注協(xié)作,低頻操作隱藏到「更多」里面,高頻操作直接加入底部工具欄

          2)交互動效、反饋:
          工具(protopie)

          在細節(jié)上,加入適量的交互動效及操作反饋,為用戶提供更完善的交互體驗

          3)新交互嘗試:

          原本的上下文菜單,左右滑動增加的操作步驟,隱藏的常用功能曝光率太低

          改版后的上下文菜單,以圖標和文字的組合,功能可以完全展示,也省去了左右滑動查找的不便

          新版界面整體效果

          3.搭建規(guī)范化的設計開發(fā)系統(tǒng)
          1)顏色變量庫
          前期定義好顏色的代號、色值,寫入開發(fā)控件庫,后期可快速全局統(tǒng)一調(diào)整顏色


          2)控件庫、圖標庫規(guī)范
          工欲善其事,必先利其器



          設計實施

          在項目實施落地的過程中,實現(xiàn)了即時響應、快速迭代

          金山文檔組件是純網(wǎng)頁平臺,可以實現(xiàn)頁面即改即查,即查即改

          項目進展過程中,經(jīng)歷過圖標的二次迭代、背景色 3 次迭代,由于前期已搭建好完善的變量庫和控件庫,實現(xiàn)快速迭代的同時幾乎不增加開發(fā)成本


          最后

          本次改版過程中嘗試了設計思維的突破、以及高效的項目開發(fā)完整流程;新界面風格收到用戶好評,編輯協(xié)作數(shù)據(jù)均有較大提升,相信未來會給用戶帶來更好的產(chǎn)品,與諸君共勉


          熱門文章推薦

          譯客專欄 2022 · 第 10 篇


          我們一起聊設計

          三分設·微信讀者群/城市群

          歡迎添加 ??  星標,獲取每日好文推薦,每天早上 8 點,準時充電。加入設計微信交流群 三分設讀者 5 群,期待與更多優(yōu)秀用戶體驗設計師一起成長, 添加 益達 微信號【 Lil_Bug or【 Red-boy2020,備注【 三分設讀者 】加入讀者群!

          分享設計心得,定期直播,零距離連麥,答疑解惑





          點開『閱讀原文』,歡迎你的加入星球

          瀏覽 60
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  男女乱伦视频 | JUY-579被丈夫的上司侵犯后的第7天,我 尤物网在线观看 | 国产精品麻豆三级三级视频 | 国产又粗又猛视频 | 美女啪啪av |