1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        圖標設(shè)計|探索WPS 3000個圖標設(shè)計背后的故事

        共 2977字,需瀏覽 6分鐘

         ·

        2022-01-09 01:39

        點擊"三分設(shè)"關(guān)注,回復(fù)"社群"加入我們

        歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

        三分設(shè)|連接知識,助力全球 1 億設(shè)計師成長

        轉(zhuǎn)自:CED設(shè)計團隊

        編輯:益達

        共 2668 字 26 圖  預(yù)計閱讀 7 分鐘





        Part 1

        項目背景

        近些年,WPS 組件頁在完善基礎(chǔ)功能的同時,增加了許多新功能。新功能的持續(xù)增多,雖然滿足了用戶更廣泛的需求,但也使界面中的功能入口越來越多,一定程度上增加了用戶的認知負擔(dān)。

        在日常使用 WPS Office 辦公時,圖標是用戶接觸最頻繁的界面元素之一。它通過更直觀、輕松的閱讀體驗來指導(dǎo)用戶的操作行為,從而有效提高產(chǎn)品的易用性。為此,我們以 “讓用戶更高效地完成工作” 為目標,用了大半年的時間,完成了 WPS Office 組件頁3000 個功能圖標的視覺升級。?

        ??


        Part 2

        升級過程

        本文將從圈定核心范圍、正確處理表意、制定協(xié)作模式和適應(yīng)不同場景等幾個方面來詳細闡述我們對組件頁功能圖標視覺升級的全過程。



        Part 3

        緊密結(jié)合數(shù)據(jù),圈定核心范圍

        面對數(shù)量如此龐大的功能圖標,我們必須從中找到最核心的一批圖標重點突破。如果能快速確定核心圖標的視覺風(fēng)格,其他圖標也能由此展開快速推進。為此,我們找到了產(chǎn)品同學(xué),詳細了解了功能的使用情況。我們計算了3月份PC端三大組件功能區(qū)各個功能的日均點擊次數(shù),從高到低排序,得到了點擊排名前50的功能。為了更直觀地體現(xiàn)排序情況,我們制作了表格:


        根據(jù)排序情況,我們?nèi)Χ它c擊量Top50功能的圖標作為核心圖標,重點圍繞這批圖標進行了設(shè)計和優(yōu)化。


        Part 3

        深入理解功能,正確處理表意

        確定了核心圖標之后,我們又開始了新的思考。用戶能否清晰地理解圖標的含義?用戶能否快速找到自己想要的功能?帶著這些疑問,我們進行了深入的研討。


        1.如何正確處理表意?
        要想正確處理表意,必須深入理解功能。我們針對核心功能進行了反復(fù)地體驗與透徹地研究,確保大家都能準確理解這個功能是什么、有什么作用,從而明確、統(tǒng)一了圖標的表達形式和重點元素。


        除了結(jié)合自身深刻的理解,我們也找了同類產(chǎn)品進行對比,力爭尋找出最符合用戶認知的圖形表達方案。


        2.如何正確驗證表意?
        功能圖標產(chǎn)出后,我們積極邀請產(chǎn)品同學(xué)進行審核,針對有爭議的圖標,我們進行了充分地討論,并結(jié)合雙方的要求輸出優(yōu)化方案。同時,我們也通過用戶訪談的方式去訪問公司里的同事,觀察他們的反應(yīng)、操作過程以及操作結(jié)束后的反饋,最終選擇了更能快速傳達這個功能的圖標。





        Part 5

        反復(fù)打磨推敲,制定協(xié)作模式

        我們需要繪制將近3000個功能圖標。為了應(yīng)對如此龐大的工作量,組內(nèi)提出了協(xié)作繪制的方案,確保能在規(guī)定時間內(nèi)完成目標。
        這個項目是我們首次使用多人協(xié)作的工作模式。在實施過程中,我們遇到了例如繪制流程不規(guī)范、項目進度難把握、質(zhì)量標準難統(tǒng)一等諸多問題。為了解決這些問題,我們實施了3個措施。

        1.制定流程


        為了更好地協(xié)作繪制圖標,我們制定了規(guī)范化的流程。這個流程可以幫助我們嚴格管控好每一環(huán)節(jié),規(guī)范好每一步,讓每一位同學(xué)都能快速上手,了解繪制圖標的工序,規(guī)范地展開工作,最終完成圖標繪制任務(wù)。




        2.專人統(tǒng)籌
        我們以小組為單位,根據(jù)各組人數(shù)分配不同數(shù)量的圖標,并結(jié)合各組所負責(zé)的業(yè)務(wù)發(fā)放對應(yīng)的圖標。圖標繪制工作是列入到各組的需求安排里,以業(yè)務(wù)需求去安排人員和交付時間??紤]到各組人員緊缺與業(yè)務(wù)繁重的情況,我們有專門的統(tǒng)籌人把這3000個圖標進行分批處理和分發(fā),按批次定量繪制圖標,減少堆積壓力。

        作為統(tǒng)籌人,需要跟進各組圖標分配情況、溝通協(xié)調(diào)、繪制進度、繪制指引、質(zhì)量把控等多個事項。同時,也要做到定時收集反饋和提出優(yōu)化建議,逐步完善多人協(xié)作繪制圖標的模式,確保圖標繪制項目如期完成。



        3.嚴格控質(zhì)
        為后續(xù)產(chǎn)出的圖標達到一個專業(yè)的水平。我們制定了一套系統(tǒng)的2021版圖標繪制規(guī)范,解決現(xiàn)存圖標繪制表意不清晰、風(fēng)格不統(tǒng)一、體量不一致等問題。通過嚴格規(guī)范圖標的繪制,能夠讓大家繪制出來的圖標質(zhì)量是符合標準的。




        每一批圖標繪制完成后,都需要自行進行圖標設(shè)計自查。各組自查沒問題就會統(tǒng)一交付到統(tǒng)籌人,再一遍又一遍審核,如遇不通過圖標,將通知返稿直到調(diào)整通過才算是繪制完成。

        ?
        ?

        Part 6

        套色技術(shù)支持,適應(yīng)不同場景

        圖標繪制完成后,還剩下最關(guān)鍵的一步 —— 套色。WPS 2021 的功能圖標需要兼容四大組件(WPS、WPP、ET、PDF)、適配深淺色皮膚和個性皮膚、同時還要盡量降低資源包大小,因此圖標的適應(yīng)性對于我們來說是個很大的問題,此時就需要用套色來解決。


        套色的原理是通過修改 SVG 圖標文件中的代碼來修改圖標的顏色。設(shè)計只需要對輸出的圖標文件進行顏色標記,然后研發(fā)再通過這些標記替換顏色,實現(xiàn)圖標顏色的變化。

        ?
        目前,這種套色方式已經(jīng)在組內(nèi)試驗?完成并在各個業(yè)務(wù)的圖標繪制工作中進行了推廣。套色給我們的工作提供了很大的便利,主要體現(xiàn)在3個方面:


        ?
        這個套色工具我們命名為「Style Icon」。通過這個套色工具,我們實現(xiàn)了不同主題皮膚的兼容,這是落地后的部分皮膚界面效果。后續(xù)如果有更多的皮膚需要適配,都能很好的適應(yīng)。




        The End

        總結(jié)

        在設(shè)計層面,經(jīng)歷了不同階段的探索和優(yōu)化,我們逐漸找到了設(shè)計上需要關(guān)注的平衡,例如創(chuàng)新與易用的平衡、認知與行為的平衡、用戶習(xí)慣的平衡等。平衡好這些,會為我們的產(chǎn)品迭代提供很好的指引。

        在協(xié)作層面,第一次使用多人協(xié)作的模式,快速完成了 3000 個圖標的繪制,并取得了預(yù)期成效。在持續(xù)不斷的圖標迭代上,還會面臨越來越多的挑戰(zhàn)。我們將繼續(xù)完善多人協(xié)作模式,并將這種模式運用到更多項目中去。

        在套色工具層面,為了讓一套圖標適應(yīng)到不同的場景,是我們一直以來的難題。 如今,設(shè)計研究的套色工具就可以完美解決了,這對于我們來說,是非常大的突破,也是設(shè)計價值體現(xiàn)之一。


        —  The end  —
        以下三分設(shè)文章,你可能也感興趣
         
        ?? 原創(chuàng)文章精選??
        告別加班!使用設(shè)計系統(tǒng)方法更快地構(gòu)建產(chǎn)品
        如何評估設(shè)計質(zhì)量,提升設(shè)計技能
        你常常忽略的 7 個具有破壞性的體驗鴻溝
        一篇文章告訴你服務(wù)設(shè)計到底能做什么?
        看 Apple CarPlay 如何提升駕駛安全和駕駛體驗
        一起看看《對馬島之魂》如何打造初次對抗體驗
        制定 “小目標”,了解產(chǎn)品管理中的結(jié)構(gòu)化思維
        35+ 的 Windows 系統(tǒng)到底有什么了不起?
        導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計 —— Lightship
        ?? 我們一起聊設(shè)計 ???♂?
        高質(zhì)量,學(xué)設(shè)計行交流微信群
        期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長
        PS:歡迎大家關(guān)注三分設(shè),每天早上9點,準時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識,定期大咖老師直播分享,零距離連麥,答疑解惑。 添加小小蟲微信號【 Lil_Bug 】,備注【 三分設(shè) 】加入!(只面向星標了公眾號三分設(shè)的粉絲) 
        瀏覽 109
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

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

        手機掃一掃分享

        分享
        舉報
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            少妇2做爰伦理潘金莲 | 久久短视频 | 嗯嗯啊啊免费视频 | 日本无码做爱视频 | 99热在线精品免费 | 男人看片天堂 | 日本无码成人片在线观看波多 | free大乳激情pics | 色999五月色 | 天天综合网站 |