<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          辛辛苦苦做的設計,被人說沒質感,結果兩招就搞定了!

          seo達人


          1.明暗是影響質感的最關鍵因素

          我們來看一組對比,左側是原作,右側是星友的練習作品:

          圖片

          很明顯,練習作品的質感沒有原作好,其中最重要的一個原因就是,原作的明暗交接線非常清晰,明暗對比很強烈,而練習作品就會有點平。

          很久之前做的這個作品,當時看起來還可以:

          圖片

          但現在一看,也是缺少明暗對比,導致整體質感差了很多,人家下面這種在明暗方面就對比很強烈:

          圖片

          所以,質感看起來就杠杠滴!

          再比如下面這組對比,上面的是原做,下面的是臨?。?

          圖片

          我覺得臨摹的要比原作好,我們看底部對比,下面那個底部暗部足夠暗,形成強烈明暗對比,整體質感看起來就很舒服。

          兄弟們,這個明暗非常重要,要牢記啊!

           

          2.邊緣光的重要性

          再來說一個影響質感的因素——邊緣光。

          我們看下面這個對比,左側為網上原作,右側為練習作品:

          圖片

          能看出來什么問題嗎?右側是不是和背景糊在一起了?如果,主體都和背景糊在一起了,那層次肯定就不夠,整體效果也就差了很多。而這一切的問題都是因為沒有加邊緣光導致。

          其實以前做項目的時候,我也遇到過這類問題,比如這個頁面,最開始也是主體和背景糊在一起:

          圖片

          后來加了一點邊緣光,調整一下燈光色調:

          圖片

          效果立馬就好多了。

          其實很多作品,都是帶有邊緣光的,這光一加上,立馬就感覺高級很多:

          圖片

          是不是,兄弟們!

           

          3.前中后景的三個層次

          下面這組設計是十豆三同學做的:

          圖片

          最開始做的更新是比較常規的火箭,后來用品牌形象加飛船元素改了一版,更加有創意和特點了。

          但是這里我們來說下后面這張圖的不足,我會覺得主體和背景銜接的還不夠自然,如果我們把畫面分成前中后三個層級,這個畫面就缺少了一點中層的內容。

          我也經常做這種類似的畫面,比如這種:

          圖片

          如果說黑色是背景,白色形象是前景,那么背景上面的這些元素就是中景:

          圖片

          這個中景是提高畫面整體質感的關鍵因素之一,非常重要,不可忽視!

          再比如這個畫面:

          圖片

          也是在中景加了一些圖形和雞蛋,讓整體畫面更加豐富,層次更加清晰。

           

          總結

          好了,以上就是我經常使用到的提升設計質感的小方法,希望可以幫助到大家,么么扔!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》辛辛苦苦做的設計,被人說沒質感,結果兩招就搞定了!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          用好“對比色”,讓你的設計更有吸引力?。▽嵅倨?/a>

          seo達人



          01 對比色配色實操

          本次提取上期“對比色配色”理論篇講解的部分文案,進行配色的實操演示:

          圖片

           

          方案一

          在PS中新建文件,背景選擇藍色。

          英文放大鋪滿背景,并加入邊框。顏色選擇藍色的對比色紅色。(英文字體:Champion)

          圖片

          新建圖層,填充白色,用套索工具畫出不規則選區。

          圖片

          點擊“添加圖層蒙版”按鈕,給圖層添加蒙版。

          選擇蒙版,執行“濾鏡-濾鏡庫-噴色描邊”,得到不規則的撕紙邊緣效果。

          圖片

          復制一個新圖層,填充紅色,向上錯位移動。

          在白色圖層添加“圖層樣式-投影”,撕紙效果就制作好了。

          圖片

          復制“文字”和“矩形”圖層,移動到紅色圖層上方,填充藍色。

          按“Ctrl+Alt+g”建立剪切蒙版,讓文字只在紅色圖層范圍顯示。

          圖片

          把藍色字改為白色,白色是萬能的調和色,可以緩沖藍紅對比色強烈的對抗性,也可以讓作品更加透亮。

          圖片

          最后加入文字排版和紙張褶皺效果,設計完成:

          圖片

           

          方案二

          使用AI進行制作,顏色選用對比色紫色和綠色搭配。(英文字體:Current)

          圖片

          給英文創建輪廓,取消群組。

          使用直線工具畫出一條分割線,使用“路徑查找器”中的“分割”功能,把字母切割開

          圖片

          取消群組,右鍵選擇“變換-旋轉”180度,調整兩個色塊重合。

          執行“效果-風格化-陰影”加入陰影。這樣得到了折紙效果:

          圖片

          使用相同的方法制作出其他字母:

          圖片

          最后加入文字排版和紙張褶皺效果,設計完成:

          圖片

           

          方案三

          繼續使用AI進行制作,把所有英文放置在畫面中。(英文字體:Current)

          圖片

          顏色選用黃、藍、紅的三色對比色進行搭配。

          圖片

          圖片

          圖片

          最后加入文字排版和紙張褶皺效果,設計完成:

          圖片

          可以嘗試新的配色方案,

          此方案顏色選用橙、綠、紫的三色對比色搭配。

          圖片

          本期使用的字體、樣機、源文件,請關注微信公眾號:藝海拾貝Design(ID:YHSBds),公眾號主頁回復“對比色”獲取下載鏈接。

           

          優秀作業展示

          01 NoctilucaGladys

          圖片

           

          02 風少

          圖片

           

          03 沕風

          圖片

           

          04 龍娟(2張作品)

          圖片

          圖片

           

          05 七陌

          圖片

           

          06 Joyce

          圖片

           

          07 蛋蛋DAN

          圖片

           

          08 珞影隨行

          圖片

           

          09 咪奧mao

          圖片

          圖片

           

          10 小孔呀

          圖片

           

          原文地址:藝海拾貝Design(公眾號)

          作者:鄧海貝

          轉載請注明:學UI網》用好“對比色”,讓你的設計更有吸引力!(實操篇)

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          大廠活動分析|《請回答2020》年度品牌活動

          seo達人



          什么是《請回答》

          《請回答》系列活動是百度知道歷年大型年終品牌活動,目標是通過此活動詮釋回答是一種力量,樹立有溫度有力量的品牌形象,打造一年一度的全民打卡活動,成為有互聯網記憶的品牌年度活動。
           

          項目背景:

          今年的活動聚焦2020年的人和事,結合各行各業的創作者一起總結,引發用戶對這特殊一年的情感共鳴。比起去年組隊答題的玩法,今年降低用戶參與成本,通過2020紅包、大富翁游戲、任務系統等多重手段,擴大《請回答2020》在站內外的影響力,增強用戶對知道品牌的認知,把《請回答》做成有互聯網記憶的連續性品牌活動。
          基于活動定位,今年我們將打造有溫情的知道專屬品牌活動作為設計目標。
          圖片
           

          如何打造有溫情的品牌活動呢?

          01品牌的延續

          2019年是這個活動首次亮相,作為品牌活動我們設計了專屬的logo,今年的活動首先要延續《請回答》的品牌喚起用戶對這個活動的回憶。視覺上保持之前的字體風格,改變排版形式,強化知道的品牌露出,且適配活動冠名的需求,同時加入了星球的圖形,寓意知識像星球一樣充滿奧秘感,這也作為今年品牌差異化的升級。
          圖片 
           

          02主視覺傳達溫情與品牌

          前面講到2020年的特殊性,基于有溫情的品牌活動的設計目標,主視覺突出人格化,體現知道有各行各業的人以及2020年的一些大事件。
          圖片 
           

          03核心玩法滲透溫情設計

          I.游戲區
          用戶在大富翁游戲區通過完成任務,積累骰子獲得前進格數并獲得獎品。游戲區的場景設定為一座漂浮的小島,島中間由20個格子組成心形,寓意2020年。同時這個心形也與用戶建立暖心互動,傳遞活動溫度。
          圖片  
           
          II.隱藏彩蛋
          游戲區有一個設計創意點,隱藏彩蛋作為鏈接事件卡的載體,對用戶來說是一種情感的激勵。
          漂流瓶的偶然性和神秘感以及撿到瓶子后帶給人的驚喜感,都與彩蛋的玩法高度的契合,于是確定下來漂流瓶作為彩蛋的表現形式,將事件卡元素放在漂流瓶中,用戶通過完成任務積累骰子,在游戲的過程中觸發隱形彩蛋,從而獲得相應的事件卡。
          圖片  
           
          III.事件卡
          事件卡一共12張,從2020年每個月中選取一個熱點事件,用插畫故事和主視覺相呼應,帶用戶回顧難忘的2020??ㄆ刹鍒D層、統一的卡片樣式、回答區以及品牌元素構成,給用戶傳達統一的視覺感受。
          圖片 
           

          04群像故事海報傳播,擴大影響力

          活動中后期通過百度官方及營銷號聯合發布群像海報,強化平臺背后回答者的真實性,擴大《請回答》活動的影響力。海報以人物為主題,背景沿用主視覺同時加入問答元素作為點綴,整體保持視覺延展一致性傳播。
          圖片
           

          項目總結

          《請回答》作為百度知道系列化品牌活動,未來我們的思考不僅僅只局限在視覺的表現上,還要挖掘品牌系列化活動的延續性與獨特性,同時更要通過合理的情感互動建立和用戶的鏈接,為品牌長線發展提供更多價值,一起期待明年的《請回答》活動吧! 
           
           
          原文地址:百度MEUX(公眾號)
           
          作者:愛分享的
           
           轉載請注明:學UI網》大廠活動分析|《請回答2020》年度品牌活動

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          版式技巧 | 不一樣的三角構圖技巧

          seo達人



          文末點擊原文地址 可觀看教程視頻;

           

          今天用另一種角度

          教大家三角構圖的實用方法

          圖片

           

          圖片

           

          用三個點所相連成的線稱之為三角構圖,看似簡單,實際該如何運用?

          圖片

           

          圖片

          第一眼看好像沒什么問題,但是由于文字的分段較多導致內容層級不明顯,閱讀上會出現斷層和不夠直觀的體驗。

          圖片

           

          三角構圖作為層次空間的搭建者,將數字、主題、信息、時間利用三角的結構進行了分層以及信息主次和布局的整理,讓大眾可以清晰直觀的看到想要體現的利益和重要順序。

          圖片圖片

           

          兩者之間的對比一下,是不是右邊的也更有設計感一些。

          圖片

           

           

          圖片

          物體之間的三角構圖,一個奧特曼放在畫面中,看上去有些孤單,主要是怕萬一打不過怪獸。

          圖片

           

          根據三角的結構和方向性,依次左右放置更多的物體進行組合,再放置主標題,這樣是不是既顯得有層次又看起來內容豐富一些呢。

          圖片

           

          可惜80、90年代人最美好的童年回憶也終將逝去,某些家長不相信光,把教育不好的鍋丟給了奧特曼,可奧特曼又有什么錯了,他只是單純的想保護地球。

          圖片

           

           

          圖片

           

          教程步驟

          剛才這兩個示例都是拆分式的講解,如何在實際設計時完整的使用?

          設計一張海報時,放置物體和文字,這樣的結合看起來是不是有點單調且缺設計感。

          圖片

           

          一、解決層次和空間

          根據三角構圖,用剛才奧特曼的方式依次將物體有序的以三角構建的方向組合羅列。

          圖片

          將文字做出透視感放置到物體腳下,增加質感讓文字貼合到背景中。放置一些城市元素在物體身后,這幾步的操作都是增加遠景以提升空間感。

          圖片

           

          二、解決畫面的融合和完整度

          調整整個畫面包括物體的質感。

          圖片

           

          將主標題放置畫面時,主標題區域與下面物體還沒能很好的融合在一起,我們可以將主標題以扇形或者同以三角構圖的方法展開結合到畫面中,這樣一來,視覺的完整度就有了很大的提高。

          圖片

           

          到這很多人可能就做完了,但其實還缺點睛之筆,我們發現人物的視線是直視著畫面前方,可以利用這樣的引導,增加一個兵乓球在視線前方,讓畫面具有一定的律動感和視覺的穿透力。

          圖片

           

          我們再對比下前后的效果。

          圖片

          這就是今天帶來的三角構圖方法,視頻完整版內容都在我最新的直播課程當中。

           

          原文地址:修先森撩設計(公眾號)

          作者:修先森

          轉載請注明:學UI網》版式技巧 | 不一樣的三角構圖技巧

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          都在聽網易云,卻不知道banner設計這么好用

          seo達人



          5分鐘教你快速設計網易云banner

          圖片

          ▲往下繼續看文章,內含設計實操案例干貨!

          圖片

          作為老網抑云的鐵粉,最近的2020年度報告刷紅了朋友圈,不看不知道,原來這一年小編一共聽了954小時3089首歌,如果24小時不間斷也要40天才能聽完,不知道這算不算老網抑云了,如果有聽歌時間比我長的可以留言batter一下!

          圖片

          ▲小編的2020歌單

          圖片

          為什么偏偏網易云成為了年輕人和大眾的最愛

          網易云做對了兩件事情

          -懂音樂

          聽著歌曲,看著評論,有無數個故事在治愈和慰藉那些深夜不眠的孤獨患者,總能有一句話戳到你早已滿目瘡痍的內心,吃著火鍋眼眶里含著淚水,發送了分手文字的短信,所以在網易云里聽的不只是音樂,還有故事。

          圖片

          圖片

          ▲評論來自網易云

          -懂設計

          打開網易云,我們可以從banner的設計中感受到聽取音樂的風格,甚至發行EP所要闡述的理念都能在一張小小的banner設計中有效讀取,在小編認為這是與音樂融合出來的設計,而不只是為了設計和推廣這首歌曲的目的。

          圖片

          圖片

          ▲圖片來自網易云

          圖片

          圖片

           

          1、讓色彩情緒化

          色彩并不只是用來配合文字和圖片的工具,而是需要賦予設計靈魂,讓色彩變得富有深度和畫面感,小編稱為色彩屬性,每一首歌不管是流行、民謠、搖滾、電子、獨立音樂類型,都有著背后的創作故事和曲風類型,從色彩屬性最直觀的將故事里的情緒化表現出來,讓觀者看到畫面就能知道這首歌大概是什么曲風,是悲傷的還是開心的歌曲。

          圖片

          圖片

          ▲圖片來自網易云

          圖上歌曲想要體現的是一場與自由的角逐,曲風也偏向于Hip-Ho說唱和電音的一種結合,代表著勇敢與激情的紅色調鋪滿了整個畫面,結合展露的肌肉身材,從中釋放出想要自由和尋找自由的情緒性。當顏色調整為黑白配色后,原本代表著勇敢和自由的感覺突然消失了,從畫面中反而獲取了一種孤獨和悲傷的情緒感。

          圖片

          圖片

          ▲圖片來自網易云

          再看圖上的banner結合歌曲名,我想大部分人都能判斷出這首歌是寫的對另一伴的不舍和留念,雨天昏暗的深夜加大了對于觀者的理解與感受,而如果整個畫面的色彩調整為黑白色,只留出燈、紅酒、相框的顏色后,那種失去的強烈是不是會更加的明顯和深刻。

          圖片

          圖片

          ▲圖片來自網易云

           

          2、控制畫面留白

          留白的目的除了解決畫面內容層次的一種梳理以外,還會為設計增加很多藝術美感和想象空間。

          圖片

          圖片

          ▲圖片來自網易云

          我們可以看到兩張圖的對比,從本身版式的理解上,文字居左對齊,將文字的大小、粗細通過層次分開得到流暢的閱讀感,本身是沒有問題,但卻失去了音樂特性的本質,而留白就是改變和拆分版式編排的結構,將其原有連串起來的主題文字拆分重組,讓版式內部得到一個流通。

          圖片

          圖片

          ▲圖片來自網易云

           

          3、讓設計變得有趣

          設計不是表格也不是冷冰冰的數字,設計是為了讓人們感受人和生活的理想化,所以有趣就變成了一種特質化標簽,可以提升對于大眾的新鮮感。利用字體之間的變化,符合主題的元素圖形或者涂描來放大畫面設計的趣味性,就像烤羊肉一定要放孜然或者椒鹽才算吃的夠爽是一個意思。

          圖片

          圖片

           

          ▲圖片來自網易云

           

          實操案例步驟

          圖片

          圖片

          ▲實操案例分享

          設計詮釋:”破碎的光線在水彩浸潤過你的臉,Tsing River,it will wash me” 這是白皮書樂隊里關于《清河》歌曲里的一段歌詞。從歌詞中感受到人浮在水面上,斑斕的色彩光照進全身,又隨著余暉漸漸消失殆盡的感受。所以在設計中利用了雙色漸變將整體的畫面顏色變成了涂抹色彩,扭曲和波瀾的水面塑造出與眾不同的設計感。

          圖片

           

          步驟1:

          利用參考線找到中心區域,并放置主體圖片。

          [優化輸出圖像]

           

          步驟2:

          • 【漸變隱射】工具繪制綠色與藍色的漸變
          • 【漸變隱射】工具繪制紫色與藍色的漸變并選擇圖層模式中的【飽和度】
          • 【色彩平衡】將整體的顏色往青色與藍色兩塊區域拉伸參數

          [優化輸出圖像]

           

          步驟3:

          使用濾鏡>液化工具,選擇左側工具欄的「褶皺」將重心的畫面拉出層次距離,在將湖面做變形處理,得到扭曲的畫面效果。

          圖片

           

          步驟4:

          將文字的字間距拉松并且放置到中心區域,將英文字母拉出高度形成設計元素與文字融合成整體。

          [優化輸出圖像]

           

          步驟5:

          復制畫面中的一部分進行變形處理得到一個類似紙張飄散在空間的效果,放置到文字框架的中間,與白皮書樂隊得到一個很好的風格統一。

          [優化輸出圖像]

           

          步驟6:

          用類似毛筆字筆刷的字體繪制出清河的歌曲名,再分散到左右兩側,形成一個版式上的平衡,否則會顯得兩側過于留白過多,當然中心區域與兩側之間形成的留白區域是作為一個空間進行想象。

          圖片

          ———————————————————————-

          注意事項

          設計版式中的留白和文字段的分拆和組合處理對于banner設計來說非常重要,可以很有效的體現設計感的美觀。

           

          原文地址:修先森撩設計

          作者:修先森

          轉載請注明:學UI網》都在聽網易云,卻不知道banner設計這么好用

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          插畫教程 | PS 手繪板~日系薔薇花

          seo達人



          教程示范:

          1.打草稿

          首先,選擇一個硬筆刷打一個草稿,花花和葉子注意一下疏密大小關系。

          圖片

           

           

          圖片

           

          2.草稿基礎上再打線稿

          這一步依然是選擇一個硬筆把藤枝畫出來。

          圖片

           

          圖片

           

           

          3.畫花瓣

          畫花花的部分選擇一個勾線筆刷,用打圈的方式先定好花瓣的位置,然后再去一層一層畫花瓣。

          圖片

          我這里的話因為筆刷選擇的有點大,所以畫出來的線條有點粗,大家在畫的時候要把筆刷刷頭縮小一些。因為這里沒有打草稿,所以我畫的時候是邊畫邊修線稿。

          圖片

           

           

          4.畫葉子

          葉片也是選擇一個硬筆筆刷直接去把大型畫出來就可以了。注意葉子形狀要好看哦~

          圖片

          圖片

           

          5.上色

          在花花線稿圖層下面新建一個圖層填充顏色,然后再整體把線稿的顏色修改一下。

          圖片

          這個地方是我覺得花枝在整個疏密大小上還不夠好看,所以在做調整修改。

          圖片

           

          6.繼續上色

          接著給葉子上色,選擇一個透明筆刷刷一些漸變色在葉子上,花花上面也刷刷漸變色。

          圖片

           

          圖片

           

          7.添加陰影

          然后開始細化加花花的陰影,直接在有花瓣遮擋的部分添加陰影之后,選擇水彩筆或者涂抹筆刷把剛剛畫好的陰影涂抹開(注意不要過度涂抹哦?。?

          圖片

          圖片

           

          8.勾線

          接著把葉子勾一下線,然后稍微細化一下。

          圖片

          圖片

          最后整體也可以再調一調顏色。

          圖片

           

          那我們的花花就畫好了,希望對大家有所幫助,我們下一期再見,如果有收獲記得分享給身邊畫畫的朋友哦!

           

          原文地址:空青肆繪(公眾號)

          作者:Tcat

          轉載請注明:學UI網》插畫教程 | PS 手繪板~日系薔薇花

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          關于toG系統的一些總結思考

          資深UI設計者


          寫在前面


          近幾年云計算和大數據的興起,以及政府數據化戰略的升級,G端逐漸出現在大眾視野里,受到各大互聯網公司、IT廠商的青睞,BAT也在2018年宣布進軍G端市場,給信息化市場帶來了新的氣息。


          由于工作需要,經常會和客戶溝通,總結出來G端客戶有一個特性是,他們大部分為高知人群,從學歷、社會地位、經濟收入、家庭背景等都占有相當的優勢,長期在政府部門工作,他們習慣于政令形式、層級森嚴的環境,會有工作任務固定、重復率高、失誤率低的需求。


          與toB相比,toG產品項目的特點是——


          1/ 客戶業務主導性強

          調研對象政府相關部門的領導和科員,對業務主導性強


          2/ 改變用戶行為難

          原系統運行時間較長,形成了用戶習慣,接受新系統難度較大


          3/ 項目工期短

          部分toG項目要求工期緊,系統需求調研、開發時間較短


          4/ 系統應用阻力大

          涉及原系統、單位內部環境等問題,系統使用過程需要長期博弈



          工作以來做了不少toB和toG的項目,這兩者相似卻又不同。


          【相同點】


          • 都是服務于用戶,需要站在用戶的角度分析用戶需求,為用戶解決問題

          • 都是要把產品和項目做好,兼顧功能的同時,使用戶體驗更好,才能實現盈利

          • 都是重功能、輕視覺,要符合產品的實際需求,并有效提升業務運營的效率

          • ...



          【不同點】


          1/ 面對的客戶群體——

          toB是面向企業客戶的,一般為企業內部人員使用,不向大眾公開。

          toG是從toB衍生出來的一種特殊劃分,面向的企業是政府相關單位。


          2/ 資金來源——

          toB通常由企業撥出資金

          toG通常由國家財政撥出預算,并非完全基于自身的組織或企業的資金。


          3/ 決策機制——

          toB一般為客戶、公司管理層

          toG的話,不同層級的決策者有不同的考量,比如高層領導希望打造影響力來獲得政績,中層領導希望體現布局和價值,小領導希望解決自身申請項目和提升職稱等的需求,最終用戶能否用起來,反而不是很重要。所以解決方案要滿足不同層級和角色的需求。


          4/ 產品需求——

          toB滿足剛性需求并滿足一線使用者需求為主

          toG非常多的產品功能非剛性,通常會讓研發人員難辦,因為比較難證明產品或研發價值,但在售前和控標階段,大而全的功能又會成為各產品之間的軍備競賽,最后將產品功能補齊,開啟同質化競爭。所以更多的是滿足非剛性、但有利于搞定決策人的、有價值的功能需求。

          5/ 產品標準化——

          toB面對中小型客戶,需求淺、沒有足夠的談判籌碼,不需要定制化;大客戶的話,需求更深入,定制化不可避免。

          toG比較難實現標準化,因為toG本質上是重政績輕實用,這就導致相關決策人總希望做出不一樣的東西,不僅別人有的我要有,我的還要有特色。所以可以從兩方面入手,一是只做通用層能力,定制化找合作伙伴來做,保證渠道和底層能力的核心競爭力;一是自建定制化團隊,專做定制化需求,避免拖累正常的產品迭代。


          6/ 視覺設計——

          toB一般冷色系居多,整體簡潔

          toG要根據客戶喜好來設計,最好能體現單位或地方特色;視覺方面,界面不能過于簡單,互聯網扁平化并不適用,要盡可能充實界面,但要把握「度」,不能太花哨,一般配色以紅&藍為主,莊重、大氣;內容方面,要遵循國家相關要求和當下政策環境,不可隨意亂造,最好是當前業務測試內容;交互方面,不可有過多的交互層級和特效,操作路徑要盡可能短一些,一般是一到兩個交互動作就可以完成任務,要考慮40-50歲人群的體驗習慣。

          (這里可參考之前寫的一篇文章,詳細介紹了簡化操作路徑的案例,一站式解決問題,有需要的同學可以看看,鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html)


          7/ 產品迭代——

          toB一般有一定的周期

          toG產品項目,一般第一次上線之后,客戶會提出一系列問題,返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產品),因為政務用戶不同層級的需求和對需求的認知不同,造成了對統一功能不同用戶的意見有很大的不同,其實第一次上線運行就相當于一次內部測試,返工的時候不必太挫敗,只要做到核心業務流程和業務模塊完整即可。接下來再通過幾次的測試、收集意見反饋,討論決定最后的需求,這就是很多toG項目需要去客戶現場駐場的一個原因,采用小版本、多迭代、多溝通,及時解決問題。


          PS: 關于去客戶現場,這里想多說幾句。

          通常情況下,是產品經理和開發團隊駐場居多,但有時候設計方面常會遇到一種情況是,客戶需求不明確。通過產品經理在客戶和設計師之間來回轉達消息,效果也并不是很好,這個時候就需要設計師主動爭取機會去客戶現場。有一個典型的案例是,去年做GAB的項目,需要設計一個登錄界面。設計稿做了很多,客戶一直不滿意,于是我申請到客戶現場進行面對面溝通,去的時候會帶幾個有代表性的風格給客戶看,先把不想要的風格排除掉,然后把握大的設計方向。具體設計的時候同步表達自己的設計理念,一步步引導客戶,客戶中途一步步給意見建議,參與其中,這樣更容易明確需求,客戶也會覺得這是自己與設計師共同的成果,會更容易接受,做出雙方都滿意的設計,促進驗收,最后雙贏。

          這就是那個「看起來平平無奇 · 但解決了實際問題 · 客戶很滿意」的登陸界面,如下圖:



          8/ ...




          很多toG的產品項目上線后造成的客戶影響不好,這個時候要調整好心態,只要你設身處地站在用戶的角度思考,分析場景和需求,用我們的專業技能來解決問題,當你經歷各種否定和困難最終得到客戶的認可,這種打磨過后的成就感真的難以言喻。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷  作者:Alita Joyce


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          競品分析的正確方式

          資深UI設計者



          互聯網行業,競品分析已不僅僅是產品經理的工作內容,對于UI設計師來說系統地分析競品并且做出有理有據地分析已經成為必不可少的技能了。


          *文章中出現的工具名單以及網址出處,我會匯總到文章結尾,供大家學習使用。












          一、競品分析的概念


          競品分析(Competitive Analysis)一詞最早源于經濟學領域,是指對現有的或潛在的競爭產品的優勢和劣勢進行分析。


          通過找尋市場上存在競爭關系,高品質的產品,把他們進行分類和對比,輸出結論為下一步決策提供正確的方向,它就像是武林中的吸星大法武功秘籍一樣,可以把各家的絕招都變成自己的武功招式。


          他山之石,可以攻玉。競品分析是一個長時間定期持續積累,不斷挖掘和分析的一個過程,我理解它更像是一種解題公式。設計產品最終目標就是追溯用戶需求本身,解決用戶痛點,而競品分析就是解決用戶痛點這道大題的思路方法,就好比要解開一道復雜的數學題,需要用到很多公式,而競品分析就是一個環節中的一種公式而已。





          二、競品分析的框架


          一套完整的競品分析主要由以下七個模塊組成,因為企業資源的原因一般是不需要全部輸出出來的,需要根據具體需求進行重點分析,并不是每次競品分析都是面面俱到的。



          正是因為企業為了適應小步快跑的產品迭代頻率,要求在做競品分析時候都會盡量地精簡化,比較有針對性,所以市面上就出現了三種不同表現形式的競品分析,分別是商業模式分析、交互體驗分析視覺體驗分析。




          3.1 產品經理——商業模式分析


          如果你以為產品經理只是拍腦袋想需求的這樣一個工作者的話,那你就大錯特錯了,其實在現實工作中產品經理有一半以上的時間是做競品分析的。


          產品經理作為架構產品核心功能,排期產品迭代頻次的主要負責任人,考慮的多數是產品盈利問題。所以產品經理關注的是產品的商業模式的分析,多有對產品數據層、產品層、用戶層、盈利方式等維度的分析。





          3.2 交互設計師——交互體驗分析


          交互體驗的分析,顧名思義,就是對產品功能場景交互結構的分析。對于體量小一點的公司會把這項重任都交付給UI設計師了。


          交互體驗分析可以分為三個層次的分析分別是

          ·核心功能:對產品的基礎交互框架的分析。

          ·次核心功能:對產品易用性、提升效率、消除擔憂的功能點的分析。

          ·輔助功能:對產品情感化設計、特殊狀態處理、特定使用場景優化等交互功能的分析。




          3.3 視覺設計師——視覺體驗分析


          視覺體驗的分析,一般是由UI設計師和運營設計師兩個職業完成的工作:


          ·UI設計師:主要是對比競品中圖形、顏色、字體、頁面布局構成、質感、動態效果等元素。

          ·運營設計師:是近幾年剛剛興起的一個職業,主要負責設計風格、品牌影響力和內部運營渠道的分析。

          *有人還會說要分析設計規范,我覺得沒必要,因為不可能看到競品的設計規范,另外與其說是看設計規范,倒不如說對比頁面的還原程度。






          三、 競品分析的2個視角



          3.1 宏觀視角——縱向分析


          以宏觀的視角,根據不同的版本迭代,拉長戰線進行縱向的對比總結,這類做法雖然并不常見,但是可以提煉出很多競品的設計思路,在做產品規劃起到很好的借鑒作用,常用于產品定位、商業模式、運營思路模塊的分析中。




          3.2 深入視角——橫向分析


          以深入勘探的視角,通過在不同的產品上相同或者類似的功能(這類的相同的功能可以是一個功能或者是一組功能)上作比較。這種橫向的分析方法有助于在相對關鍵的場景中找到競品的功能亮點, 常用于產品體驗、產品功能、UI視覺等模塊的分析比較多。





          3.3 競品分析&體驗報告的不同


          值得一提的是,很多新手在制作競品分析的時候,上面就寫幾個競品分析的模板,也有同學直接上來就開始寫文檔,寫的和產品體驗報告,傻傻分不清楚。這里我就講解一下兩者區別。


          我舉一個例子,如果有人問“這個男生怎么樣子,那就這就產品體驗;你看別人家的男朋友在看看你,這個就是競品分析?!?strong style="outline:0px;margin:0px;padding:0px;">競品分析比較強調“產品功能的對比”,即指兩款以上產品的差異化;而產品體驗則強調對“產品體驗的深度”。





          四、為什么做競品分析


          隨著互聯網的發展,競品分析被應用在互聯網產品發起項目或者改版初期階段,幫助我們摸清產品規律和對手弱點的一個工具。



          4.1 競品分析的三個意義


          對于產品經理而言:他是避開之前產品迭代功能坑的試金石,比如:有一天,老板覺得我競品的這個功能就不錯,想把這個功能弄到我們的產品上,我們沒有參考行業里面的競品,直接按照老板的意思實現了,效果應該不會理想。為什么會這樣,主要是因為在做新功能如果都是拍著腦袋想需求,是很缺乏經驗的一種表現,結果肯定不會特別理想。


          對視覺設計師而言:競品分析其實可以作為一個設計決策的依據和支撐。比如說別人在質疑你設計風格或者是顏色選擇,兩方不能很好地達成一致觀點,這個時候你就可以說我這個東西是調查、分析過的,而不是“我認為”這種蒼白無力的表述,用專業的水平說服對方目前方案是最優方案。


          對整個團隊而言:競品分析可以讓團隊更好地了解這個行業,了解對手,了解別人都在做什么,在和競爭企業PK中取得勝利。通過競品分析,確定其自己的產品的優勢和劣勢,并制定有效的產品策略或者設計策略。






          五、競品分析的目的


          通過關注競爭對手與自己的差異化,分析其設計背后的原因,取其精華,去其糟粕,發現自己的產品問題,為產品后期的迭代提供最為合適的方案。










          競品分析有三個關鍵詞發現——分析——論證。一套完整的競品分析要具備了解、目的、競品、對比、分析、總結六個步驟。






          一、 大視野了解信息


          做競品分析最忌諱的就是直接找到競品進行對比,我們第一步應該做的是了解,比如在抖音的競品分析中就有對視頻行業的分析,如圖:




          1.1 了解哪些維度信息


          了解行業信息其實就是了解我們目前產品的生態環境,例如了解整個行業背景、競品的產品定位、現階段行業內發生了什么事件、新的功能玩法等等,這些信息都可以了解,這里提供四個了解信息的維度(以下內容不用全寫,挑幾項重要的即可):


          ·產業鏈路圖:行業中產業鏈圖,從生產到服務之間的產業鏈條之間的關系是如何進行的。

          ·成員規模:公司內成員的規模和產品的核心目標以及在行業中的品牌影響力、企業價值、slogan等。

          ·盈利情況:季度、年度的盈利數值、各條產品線資金重點投入的信息,投資占比。

          ·用戶群體:用戶群體覆蓋面積、市場占有率、運營盈利模式、產品的注冊用戶量。




          1.2 搜集信息的兩種渠道


          很多人不知道從哪些渠道獲取行業或者市場的信息,可能在第一個步驟出了問題,這里我推薦兩個渠道進行信息搜集,一個是用戶的意見的渠道另一個是第三方平臺的行業信息報告。


          ·收集用戶意見渠道:如qq群、微信群、知乎、 微博、百度論壇(現在用比較少)、用戶訪談、在做可用性測試對用戶的詢問問題、看應用商店的評論等等。


          ·第三方平臺信息渠道:這類渠道市場上有很多,我推薦幾種如酷傳咨詢、易觀智庫、比達咨詢、企鵝智庫等找一些行業分析報告,通過這些報告了解目前行業發展現狀、國家政策的支持方向、競爭對手占有市場份額等。(下圖大家也可以收藏使用)


          在競品分析上展示的了解的信息可以不具體,但是一定要有了解的過程,因為了解信息是競品分析是有科學依據的證明,所有不關注市場趨勢和行業現狀的競品分析都屬于功能性的競品分析,是沒有說服力的。




          1.3 呈現形式案例借鑒


          通過行業和市場的了解,為了梳理一個對自己產品和競品的認知、觀點,如下圖這樣表格的形式把自己的認知和觀點一一梳理出來。


          或者可以梳理得更加精細一些,如把產品定位差異化、關鍵詞、產品特點都梳理出來。


          再或者像是摩拜單車這種,以產品生命周期為橫向維度把每個階段的產品當時確定的戰略目標都書寫出來。





          二、明確分析目標


          目的決定一切,明確目標也是競品分析前最為關鍵的一個步,目標確立直接關系到后續競品選擇、分析思路和結論的輸出。


          許同學在做競品分析的時候會被其他產品的某一個功能所吸引,導致后續在推導結論的過程中失去了方向。帶著問題,帶著目的去分析體驗競品,只有這樣才不會流于表面,學習到表象。所以我們在做競品分析之前就要想好我們想要得到什么,也就是做競品分析的目標。




          2.1 不妨多問自己幾個問題


          做之前不妨多問問自己幾個問題,希望通過競品分析,獲得什么?資訊or知識or行動方案?需要通過競品分析抄襲這個新功能嗎?不做行不行,為什么?這些新功能會和產品的其他模塊有什么聯系?等等。當我們以自我反省式的問法向自己提問時候,并給出答案時候,這個答案就是我們做競品分析的目標了。





          2.2 三種常見的目標類型


          在工作中做競品分析基本出于這三個目的,第一次做競品分析的同學可以按照我這三個目的找出自己項目的競品分析目標:


          ·了解市場動向:如果是“為了了解行業的動向,把確定下一個季度作為目標的話”,那分析側重點應該放在行業新聞領域,查閱一些行業競品的日活月活情況,盈利模式等宏觀層面上的信息。


          ·幫助做出決策:如果“為了敲定新功能是否上線的話作為目標的話”,那分析側重點應該圍繞有這個功能的競品的功能對比上,多思考新功能解決什么問題,新功能和其他模塊的功能有什么聯系,競品是怎么做這個新功能的等。


          ·借鑒競品優點:如果‘為了確定下一版本采用什么UI風格作為目標的話”,那分析側重點應該圍繞有視覺設計做得好的競品,對比分析競品的UI用了什么設計風格和設計元素等等。




          2.3 不同階段目標側重點不同


          眾所周知,每個產品都是具有周期的,分別是進入期、成長期、成熟期、衰退期(衰退期一般不做競品分析),產品所處的周期不同那產品所處的階段就不同,進去期的產品處于開拓階段、成長期的產品處于成長階段、成熟期的產品處于防守階段。


          接下來聊一聊產品處于的階段不同,那產品的需要關注的問題不同,競品分析的目標(內容)也會有所不同。


          ·產品進入期——開拓階段:作為一個行業的新產品,活下去是最重要的事情,關注的問題應該是做什么產品?關注核心應該行業情況。

          比如行業發展史、經營環境、市場規模及增長趨勢、產品發展史、目標客戶、業務流程、盈利模式等維度分析。


          ·產品成長期——成長階段:在成熟期的產品總會遇到自身的瓶頸,如何在激烈的市場提出創新性需求,更好地服務和其他競爭對手拉開差距這是成熟期要考慮的問題。

          關注的側重點是我要做出什么樣子的產品?怎么實現?怎么去運營推廣?怎么和競品拉開差距?關注核心應該是競爭對手經營數據和經營策略,產品功能、用戶規模、研發技術成本、用戶體驗設計等維度。


          ·產品成熟期——防守階段:經歷了成長期后,可以證明產品在行業中是有一定的競爭優勢,產品需要考慮的問題就是如何守住原有的用戶,不被其他競爭對手侵占市場份額。

          關注側重點是市場份額不被吞噬、侵占,關注核心應該是監控追趕競品的各項指標及行動舉措等維度。


          為什么要講這個,很多時候我們接到的競品分析需求都是不明確的,我們可以結合自己產品所處的階段,更明確地分析出競品分析的目標。






          三、尋找·劃分 ·挑選競品


          明確了競品分析的目標,就可以進行第三步挑選競品了。對于不知道怎么選擇合適的競品的同學可以用“尋找——劃分——挑選”這三個步驟選出最合適的競品。





          3.1 尋找·競品的三種方法


          尋找好的競品無外乎就是考察自己的“搜商”能力,這里我推薦三種方法,幫助大家在搜索階段找到競品:


          ·習慣搜索方法:最常用的辦法就是通過“關鍵詞”在瀏覽器上進行搜索,注意的是這個“關鍵詞”不用太具體,比如自己產品是大學生咖啡,我在瀏覽器中搜索“大學咖啡”,是沒有這類競品的,那可以用瑞星咖啡來代替。


          ·資源搜索方法:除了在瀏覽器進行搜索,還可以去應用商店或者第三方平臺的“排行榜”找競品,這種方法我經常用,因為可以直觀地看到各個維度的競品分析數據指標,比較高效。


          ·推薦搜索方法:就是找公司的產品經理詢問相關競品,因為公司里面的員工比較了解公司業務說出來的競品會比較有針對性。也可以上脈脈這種平臺找行業大牛,問問他們的想法,唯一缺點就是在脈脈上等待回復的時間比較長,建議提前詢問。


          *資源搜索方法,我推薦四個可以查發布的時間、排行榜、版本號、注冊用戶量競品的網站,分別是酷傳咨詢、易觀分析、七麥數據、it橘子。




          3.2 劃分·競品的三個種類


          找尋到競品之后不用全部分析,工作量太大,可以按照競爭關系給競品劃分種類。競品大致分為直接關系的競品(核心競品)、間接關系的競品(重要競品)和其他關系(翹楚競品)這三類。


          垂直競品:是指市場目標方向一致,用戶群體針對性較強,產品核心功能和用戶需求相似度較高的產品,如優酷和愛奇藝。


          ·間接競品:是指在功能需求方面互補的產品,用戶群體高度重合,先階段不是直接市場利益的競爭者,但是有可能成為潛在的競爭關系,如大眾點評和小紅書。


          ·翹楚競品:是指沒有直接的用戶群重合,在市場利益上也沒有競爭關系,但有高水準前瞻性的產品,如夸克和躺友。





          3.3 挑選·競品的二八原則


          競品的選擇不在量多,而在質優,接下來的重點在于“挑選”,在這個環節我建議可以通過二八原則挑選競品,其目的就是縮小競品范圍,比如在直接關系中挑選前1到2個算是頭部的直接競品來分析,然后挑選個別優秀的間接競品和翹楚競品中比較優秀的競品。



          a 垂直競品找相似、差異化設計

          垂直競品中因業務線高度吻合所以比較適合對比相似設計與差異化設計特點。


          ·所謂相似化設計,就是針對自己產品有相似的功能可以直接借鑒。比如在做優酷和愛奇藝兩款產品對比發現,視頻的固定比例16:9、彈幕功能都是在最左側,并且都會對新注冊的用戶進行VIP會員服務購買的指引,反觀自己的產品在做視頻播放功能也可以采用視頻的固定比例16:9,引導VIP服務購買指引的功能,不要出現3:4等其他尺寸影響用戶的慣性體驗。


          ·差異化的設計,就是考慮其相同功能,但是產品背景原因不同造成設計不同的樣式,比如快手和抖音兩款產品,都有關注功能,快手關注后會有標簽展示,而抖音卻沒有。分析后可以得出結論是兩款產品的頁面布局不同,抖音有底部tab欄而快手沒有,如果抖音關注后也有“已關注”的標簽展示,加上tab欄的高度有可能會遮擋住視頻畫面,影響用戶直觀感受,我們在設計類似視頻功能時候,是不是也要考慮一下有tab欄的設計樣式和沒有tab欄如何選擇呢。



          b 間接競品找相同設計

          通過間接競爭找相同設計和通過垂直競品找相似設計有些類似。間接競品因為用戶群體高度重合,業務領域或是核心功能上有類似的地方,是找相同的設計點很好的辦法,這些共同點都是我們需要借鑒和避免踩坑的地方


          比如大眾點評/小紅書都是種草社區的產品,在首頁Feed流推薦的功能上,卡片的設計上就可以找到相同的設計( 圖片比例、內容布局、播放圖標樣式),降低用戶的學習成本,促成大眾點評用戶往小紅書產品上用戶流量的轉換。



          c 翹楚競品找靈感設計

          如果我們在做競品分析時候只挑選垂直類和間接類的產品進行分析,最后的結論只能是和競品很像很難走出“抄襲”的困境,在這個時候同類競品就派上用場了。


          利用同類競品可以激發靈感創造更多可能性,比如自如的設計師可能借鑒了喜馬拉雅產品滑動Banner背景圖片更換的設計亮點,再加上騰訊動漫對主題形象破形的處理手法,形成了現在獨特的自如Banner表現形式。


          當然他們的設計不僅如此,還增加了更有趣的設計亮點,Banner采取重力感應設計方式,圖片中的所有元素會實現x軸的位移。


          當手握住手機左右搖晃的時候,可以感受Banner元素竟然會動,這不失為一種通過翹楚競品找尋靈感的設計案例。






          四、需要對比什么


          挑選出合適的競品之后,我們不可能把全部的競品功能都做對比,一般都會分析以下四個維度進行對比功能對比、價格對比、用戶體驗對比和服務對比,如圖:






          五、需要分析什么


          產品的分析是指對原始信息進行整理、歸納、推理,使信息轉化為有價值結論的過程,接下來我就以網上一個咸魚的競品分析案例,梳理一個產品大致可以從以下4個維度進行分析。


          a 對產品屬性的分析

          在了解行業信息那一個部分,我們講到通過第三方平臺查閱對行業、市場的研究報告,這個時候就派上了用場。


          前面做的行業了解,都是為了進一步對自家產品的分析,比如我們就可以從七麥數據這個平臺,獲取一些咸魚和競品的數據。



          b 對用戶畫像的分析

          對用戶的分析可以從用戶的基礎屬性和用戶消費這兩個維度入手,看看彼此的目標用戶的需求上有哪些異同點,比如對核心用戶的分析(最忠誠的用戶群體是那類); 對主流用戶的分析(占領最大的用戶群體是那些); 用戶構成的分析(各類用戶群體的比例構成)。


          基本屬性:姓名、性別、學歷、婚姻狀況、興趣愛好等。

          用戶消費:從事行業、職業、收入水平、設備型號。


          對用戶進行分析之后并沒有結束,最重要的是得出自己產品的用戶畫像,可以參考以下四個問題給予自己分析維度的思考:

          ·競品的目標用戶是誰?有哪些關鍵特征?與自己產品的目標用戶群一致嗎?

          ·競品的用戶數據,包括活躍用戶數、付費用戶數、ARPU值等。

          ·用戶對競品優、劣勢的看法。

          ·用戶喜歡產品的哪些功能?不喜歡產品的那些功能。



          d 對功能對比的分析

          另外就是對產品功能的對比分析,可以把競品的主要功能路徑畫出來,思考競品為什么做這個功能,做這個功能會給產品帶來什么好處,把自己認為重要的功能列舉出來,再看看哪些平臺有,哪些平臺沒有等等。


          對競品功能對比分析并不是把功能簡單地羅列出來,最重要的是通過功能的對比,幫助梳理出用戶需求的痛點,發現自己產品的問題,尤其對后續的改版的方向都可以在對產品功能的解析中找到答案。



          e 對功能數據的分析

          對于數據的分析可以理解為對功能對比分析的升華,假設我們提案一個產品功能是否值得上線,這時就需要產品的數據增長波動,來佐證提案的可行性。


          一般在進行產品數據收集的時候我們可以把目光鎖定在兩個數據維度——基礎數據和趨勢數據,我們需要用兩個維度的數據去判斷產品的體量和目前的階段狀態。


          基礎數據的范圍有:產品的日活躍用戶數字、周/月活躍用戶數字、使用時長/下載次數、版本號/最后更新時間。

          趨勢數據的范圍有:產品在一年內的用戶的增長情況或者固定周期的總注冊用戶量/下載量/有效轉化率的趨勢情況、產品平臺及官方的排名情況。這里再推薦兩個針對查詢產品數據趨勢比較好用的網站。






          六、以終為始復盤總結


          以上5步全部做完還是不夠的,最重要的還是競品分析的結論,也就回到了開篇那個問題,我們的目的是什么?達到了嗎?


          很多同學的競品分析,就是為了分析而分析,并沒有總結出一個結論。沒有結論前面所有的分析豈不是就沒有任何的意義, 沒有結論的話又按照什么方向去迭代產品升級改版呢?所以說


          ·一定要有最后的結論:雖然結論很主觀但是也要有結論,沒有結論的競品分析是展示報告,是沒有意義的。

          ·結論要具有真實性:是推導出來的而不是硬加上去的,要知道一個錯誤的結論比沒有結論的后果更可怕。


          文章很長,我們來做一個小練習吧~











          有些同學們在做競品分析時候,先找到市面上的最火爆的直接競品,把自己的產品與直接競品一一對照,把設計亮點直接copy;或者是找到間接競品、翹楚競品找到與自家產品共有的功能,取一部分粘貼復制到自己產品身上。


          這樣的做法并不是錯誤的,只會讓自己產品與競品相似度很高很難讓我們的設計改版具有創新性。為什么大家做競品分析相似度很高,我認為問題出在目標不夠明確和方法使用不正確這兩點上。


          接下來我就用錘子和釘子的關系,向同學們一一說明,競品分析的十錘法則,希望大家在不同的競品分析目標面前用對競品分析方法。





          一、對比表格法——最為直觀的對比工具


          釘子:

          常用于競品的橫向比較,比如想要全面地了解一個功能的概況?;蛘呤钱斘覀兯伎寄硞€功能元素是否需要保留,可使用對比表格法。


          錘子:

          對比表格法是競品分析最經常用到的一種分析方法,衍生的還有打勾比較法、評分比較法和描述比較法三種形式,常用于視覺競品分析里面。


          打勾比較法通過與競品的功能一一對比打勾,有的話就在表格上對應位置打勾,不存在就空著。用這種方法來了解自己產品與競品在產品功能上的差異,全方位地了解競品的功能分布,為自己的產品是否加入這個功能規范做參考依據。


          評分比較法多用于體驗設計中,把自家產品都有的功能得分列成一行作為一個標準,把競品的數據依次排列,可以直觀看到與競品之間數據的差異。


          另外描述比較法這種方法比較的是競品的功能細節、界面的比較等功能,并且跟上自己的觀點和看法,在競品中也很常用,如圖。





          二、用戶體驗地圖——發現用戶痛點的工具


          釘子:

          當自己不知道產品的問題是什么?或者想避免自己產品在產品體驗上犯同類錯誤的時候,可以使用用戶體驗地圖,算是一種尋找產品問題、用戶痛點的方法。


          錘子:

          用戶體驗地圖的意義是在于分析前模擬用戶的視角去發現用戶整個行為的痛點,發現用戶要的是什么,而不是說我們想在產品上放什么。


          建立多張用戶體驗地圖可以對比不同的產品在流程中的不同,發現并記錄流程中的共同的問題來幫助設計師避免自己產品犯同類錯誤。






          三、競品畫布—— 最小可行性方案


          釘子:

          當時間排氣不充足,但是需要快速出一份競品分析的場景交付到領導面前的場景時候,可以采用競品畫布的方法。


          錘子:

          競品畫布是提前避免不符合領導需求造成返工和浪費時間的工具,比如領導想讓你寫一份競品分析報告,先通過競品畫布快速地寫明分析的目標、挑選競品范圍等信息,再找領導確認是否符合領導要求,確認和領導所期望的目標一致后再投入大量精力做詳細的競品分析。

          以下是我在網上找到的制作競品畫布的要點,建議大家收藏。

          1、競品分析的目標要明確,最好能夠解決產品當前面臨的問題。

          2、選擇競品時先發散后收斂,初選階段可以把眼界放寬,避免遺漏重要的競品;精選階段要收斂,聚焦到3個左右的競品做重點分析。

          3、分析維度取決于分析目標,最好寫出分析維度的選擇理由。

          4、搜集競品信息時,除了常規渠道,還可以考慮合法的非正式渠道。找不到關鍵信息時,可以嘗試在公司內部尋求幫助。

          5、優勢、劣勢是企業內部的,最好不超過5個。

          6、機會、威脅是外部環境,最好不超過5個。

          7、建議總結要具體,不要泛泛而談,同時要考慮可操作性。





          四、精益畫布 ——分析商業模式的工具


          釘子:

          精益畫布應用于以下兩個場景:


          ·想知道自己產品商業模式是否完成或者存在紕漏或者是想清楚競品在某一個功能上這樣做在商業上是怎么想的。

          · 想判斷產品的商業模式、運營渠道等各個方面是否一致等問題。



          錘子:

          精益畫布常用于產品成熟階段的產品,做產品商業模式分析,建立產品全局觀,檢查產品商業功能清單來使用,一般產品經理或者是產品戰略者的角色會使用。比如OFO這種體量比較大的公司會用到精益畫布,制定產品戰略,如圖


          以下是關于 精益畫布的模塊構成,需要的自行復制吧:

          1、問題:目標用戶最需要解決的3個問題是什么?用戶有哪些痛點?

          2、用戶細分:你的目標用戶是誰?這些用戶有哪些關鍵的特征?

          3、獨特賣點:為什么用戶要選擇你的產品而不選競品?你能以清晰、獨特、令人印象深刻的方式說明為何你的產品更加優異或者卓爾不群嗎?

          4、解決方案:你能為現存問題找到正確的解決方案嗎?

          5、渠道:如何將產品或服務送到用戶手中,又如何收取用戶支付的款項?如何與用戶保持連接?

          6、關鍵指標:哪些數據指標能讓你了解產品的真實狀況?

          7、競爭壁壘:如何為產品構建“護城河”?無法被對手輕易復制或買去的競爭優勢有哪些?

          8、成本分析:做這個產品的直接成本和間接成本都有哪些?

          9、收入分析:產品如何賺錢?收入能大于成本嗎?何時能達到盈虧平衡?





          五、PEST 模型 ——預測市場、大環境的工具


          釘子:

          屬于宏觀層面的分析,是一種想要了解市場大環境、市場趨勢,直觀地找出機會與威脅所在的方法。

          比如2018年p2p網貸行業集體暴雷,因為政府的監管制度的完善,一大批不合法律法規的p2p平臺倒閉,預測未來p2p的市場份額將會減少。再比如,當今中國市場人口老齡化嚴重,年齡分布不均勻等情況屬于社會分類的范疇,預測未來適老化的產品可能會成為互聯網市場下一個風口。


          錘子

          在一張大白紙上畫出4個格子,團隊成員分別代表“政治、經濟、社會、技術”盡可能多地羅列關鍵詞填寫到4個格子中,最后集體投票,每個格子選出得票較高的3~5個點子作為PEST分析的結果。






          六、競品雷達圖 ——不同競品功能對比的工具


          釘子:

          不知道自己產品的競品如何分類的,常用來對比多個產品或者同一產品的多個方面的非常好的工具。


          錘子:

          雷達圖起源于財務狀況的綜合評估方法,通過雷達圖的繪制可展現公司各項財務指標,后被人應用于互聯網行業,稱競品雷達圖(又叫蜘蛛圖)。

          競品雷達一般選6個-9個維度分析,這9個維度參考尼爾森的十大可用性原則自行組合,進行產品分析。





          七、四象限矩陣 ——區分競品類型的工具


          釘子:

          對自己產品的優勢、劣勢不明確,判斷現有的產品是否需要重新定位,并幫助我們重新找到合理的定位的場景的工具。


          錘子:

          矩陣分析法是一個場景的分析法,以四維矩陣的方式分析自己的產品與競品的定位、特色或優勢,最大的好處就是可以梳理清楚市場中存在的空白點。以下圖為例,在嚴肅和親民這個范圍領域就是沒有這個產品,企業是否可以在戰略層面上投入開發成本,開發這個空白領域的產品,搶占市場。





          八、SWOT 模型 ——制定戰略規劃的工具


          釘子:

          SWOT是一種基于四個要素的戰略規劃方法,與PEST模型不同的是這個SWOT模型不僅可以幫助梳理產品優勢和劣勢,還可以制定企業的競爭策略和未來開發的計劃規劃,是一種既可以分析產品/公司內部(優勢、劣勢)外部(機會、威脅)競爭環境的工具。


          錘子:

          S、W 指產品內部有哪些優劣勢,O、T 指的是產品外部市場存在哪些機會和威脅。簡單地來說就是將與研究對象密切相關的各種主要內部優勢、劣勢和外部的機會和威脅,通過四個格矩陣排列出來,加以分析,從中得出一系列相應的結論,而這個結論是帶有一定決策性和預測性。


          我自己使用的時候會把這個方法放到競品分析和總結的那部分,比如在競品分析前半部分把宏觀層分析完、競品的功能亮點對比完,最后進行輸出總結歸類到產品的優勢和劣勢,再預警一下現階段可能會出現的問題,預測一下以后的機會。





          九、五層九緯度法


          釘子:

          對于做競品分析一點頭緒都沒有的同學,可以使用這個五層九緯度法(也叫用戶體驗五要素)。


          錘子:

          一套完整的競品分析其實和做產品思路一樣,將復雜的事物抽象成分層的模型,能讓人直觀、清晰地獲取其內在的邏輯,算是比較常規的方法了。





          十、可用性測試 &用戶訪談


          釘子:

          使用場景分為兩個,第一個是針對競品分析前不知道競品哪個功能來說對用戶意義重要;第二個是競品分析后驗證自己產品中某個功能改版是否成功。


          錘子:

          可用性測試的意義在于如果不用競品的產品,自己可能不能真實地感受到競品好在哪里,就不能真實找到競品在體驗層面上值得我們借鑒的功能是什么。它除了可以還原競品功能對用戶真實的體驗之外,更是一個驗證功能改版是否成功的工具。之前講到了數據是有欺騙性,數據會受環境因素所影響,有些數據是代替不了可用性測試和用戶訪談的結論的真實性。










          通過以上的講解,我相信大家對“競品分析”會有一個更為深入的認知,雖然大家較為清晰地知道了競品分析的概念、制作流程以及方法,但是在我實際工作中經常出現以下9個問題,值得注意。




          一、要注重平時積累


          人的認知是有局限性的,尤其是接受一個不太熟悉的觀點時候,就好比你讓雕刻工刻一個馬的扶手,因為描述不清楚的問題,他可能會刻成一個驢的扶手。


          我們在論證一個觀點最好就是舉例論證,這樣才能做到有理有據,所以要注重平時的素材積累,有一定的知識儲備,做到觀點都有資料可以佐證避免假大空,不會出現低級錯誤。最好把競品分析當作一個產品來做,用產品思維(有邏輯性)做競品分析。






          二、不要定過大的目標


          競品分析絕對不是說找不同,競品分析方法千千萬,無論是在分析前,還是分析后,跟著目標走才能得出有價值的結論,最終做到產品設計人無我有,人有我優的終極目標。我梳理了兩類目標,供大家思考自己做競品分析的目標。


          現在互聯網公司的發展相當快,已經沒有那么多時間讓我們做大而全的競品分析,對于初創公司來講,有可能做完競品分析公司都倒閉的尷尬局面。所以,小而精地分析、跟緊產品、業務的腳步才是企業需要的。





          三、分清楚給誰看


          知己知彼,百戰不殆。分清楚給誰看也是容易犯的一個錯誤,最好要問清楚最終呈現給誰看,因為同事、領導、老板的角度不同所以需要看的切入點就不同。


          ·老板的角度:競品在行業中的影響力、目前行業的經營狀況如何、自己產品的發展方向怎么樣,競爭對手的經營狀況怎么樣。


          ·團隊/領導的角度:競品的產品功能、交互設計、視覺的優點和缺點是什么;有沒有創新性的產品體驗點可以應用到產品迭代中去,決策是采納A方案啊,還是采納B方案或者是還有更好的C方案。


          ·自己/同事的角度:為了更好地執行領導們定的目標,自己或者團隊內部協調的同時,需要用到什么方法把任務完成好。





          四、多用事實佐證結論


          分析是一個嚴謹的過程,得有理有據讓人信服。在分析報告里面,發現很多分析的數據沒有標明來源,可信度真的不高。設想如果是把這樣一份數據來源不明確的報告遞到一個企業決策者辦公桌上,他敢作出決策嗎?我看很懸。


          所以在分析報告中,事實一定是嚴謹可信的,是市場上認可的,這樣通過分析得出來的觀點才會不帶有主觀臆測的。






          五、注重產品深度&上下文邏輯


          正所謂,學我者生,像我者死!在與競品進行比較階段的時候,并不是什么情況下去模仿照搬,應該把關注點放到競品這么做的背后原因。一個上層建筑的高度和樣式必定由其底層地基決定,產品也是如此,雖然是一個簡單的功能,也可以從數據、產品定位、用戶群體、經營策略等層面,多注重自己產品與競品的對比,挖掘產品策略背后的原因,為后期迭代思考我們是否可以去優化做準備。


          另外一點我想說的是注重邏輯,有些競品分析一會兒分析市場大環境,一會分析產品核心功能,看似面面俱到,但是分析的主線思路不清晰,缺乏邏輯關系,形式歸于表面。





          六、選擇最為合適的分析方法


          做競品分析常規的方式是先挑選3-5個競品,圍繞用戶體驗要素(戰略層、范圍層、結構層、框架層、表現層)對競品展開分析,我知道大家都是受了ajax之父jesse james garrett的經典之作《用戶體驗要素:以用戶為中心的產品設計》的影響,我最開始入行的時候也是我的啟蒙書。


          但是大家要清楚“由于產品不同、受眾用戶不同、產品階段不同、分析目標不同競品分析最終呈現的樣子就會不同,”如果大家都用這五層去寫的話,避免不了有套模板的嫌疑。


          這里列舉一個不恰當的例子,2015年時候互聯網很流行“互聯網+傳統行業”的創業概念,但互聯網+并不是適合所有行業,要認清自己產品適合“互聯網+傳統行業還是傳統行業+互聯網”,了解清楚自己產品的特長,清楚誰主導誰的,處于什么產品階段后再做決策,不要跟著主流輿論裹挾,盲目做選擇。


          除了我所講的通過適合競品的方法來審視自己產品之外,還有一點值得大家注意的就是設計方案的合理性,尤其是在UI設計當中,并不能保證設計方案是一直對的,只能說在某一個產品階段或者應對某一個問題設計方案是最好的方案,更為精準的說法是設計方案沒有絕對的正確和錯誤,只能說那個設計方案更合適當前這個需求。





          七、形式與內容同樣重要


          我看了很多競品分析,內容深度很深,視角也很獨特,觀點也很鮮明有價值,只是其表現形式太難讓人閱讀下去。我們是設計師,競品分析的結論固然重要,但是精心包裝才能更好地傳遞競品分析的價值本身,這也是體現我們基礎設計師價值的一部分。


          設計領域中的眼球理論也是如此,一份好的競品分析,務必在視覺包裝上下點功夫,通過合適的邏輯結構進行梳理,可以讓你的觀點更易于理解并接受,配上適當的圖文制作成PPT,保證文字信息可以高速清晰地進行傳達,讓讀者第一眼就有繼續閱讀的興趣。正所謂好的內容+好的設計形式=易于別人接受,才能發揮最大的效用。





          八、務必要自我檢查


          細節決定成敗,很多同學按照流程步驟一一分析了,得出了結論也是真實有效的,認為競品分析就完成了。


          我們的目的不是交付100分的答卷,而是交付100+的答卷,自我檢查是提高自己的能力的好方法,如果工作周期允許的情況下,還是要從頭到尾,把競品分析查缺補漏,這樣也利于發現更有價值的信息。





          九、持續跟蹤,保持節奏


          競品分析不是一次性的事情,它對團隊來說是每時每刻的,因為市場和需求是不停地更新,做競品分析也是一個了解市場了解產品的手段,需要持續更新的。可以說它是貫穿整個產品迭代的始終的,把握節奏可以讓你更從容地應對市場的變化,建議至少半年更新一次。










          總結


          競品分析在不同的階段能給我們的產品帶來不同的效益,學習好競品分析也能避免走很多的彎路。


          最后,感謝文章內容案例的作者,寫這篇文章著實不容易 ,查閱了大約40個競品分析,但編成系統方法寫出來真的很耗心神。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷  作者:斜杠7濕兄

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          從易讀性和易操作性兩大方面,如何做好表格設計

          資深UI設計者

          導語:提起中后臺,除了高效、靈活和強大之外,不可忽視的還有它的海量數據。海量數據的篩選與呈現,直接決定決策人員的效率高低。本文作者主要是結合自己在實際工作中遇到的表格設計問題,針對Web端數據呈現方式之一,表格的設計進行探討。

          表格,是一種常見的信息組織整理手段。常用來展示、保存、對比分析、排序、篩選 、歸納等,是最清晰、高效的數據展現形式之一,由內、外兩部分組成。

          • 內部:由表頭、表體、表尾共3部分組成;
          • 外部:由篩選區域、操作按鈕區、分頁區共3大類組成。

          從易讀性和易操作性兩大方面,教你做好表格設計

          說完表格的組成,接下來將會從易讀性和易操作性兩個方面來分析下表格設計。

          易讀性

          1. 行與列

          表格的組成,也可以看作行與列的自由組合,這種組合賦予了表格多樣性的特點。行與列構成了單元格的長與高,不同的長高會有疏密之分,充實與透氣之感。

          B端中后臺通常會對應不同的角色及場景需求,根據目的及信息主體的不同,讓用戶根據自己的需求來定義表格的展示列及列的順序,也可以通過行與列的顯隱變化,來更好的滿足信息的傳達。

          但需要注意的是系統應記住用戶上一次的自定義列設置,減少用戶重復操作。對于列的選擇,應盡量減少列的數量,既要展示用戶必要信息,又要避免出現用戶無關數據,以免信息冗余,影響信息閱讀效率性。對于用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決。

          默認排序,應從用戶目的出發,遵循用戶查看數據的習慣,尊重數據之間的關聯性,設計用戶查看、操作數據的路徑,而非隨機排列。

          從易讀性和易操作性兩大方面,教你做好表格設計

          2. 數據展示

          B端中后臺中的表格展示的數據多且雜,這就要為用戶先一步對數據進行梳理歸納,提高用戶獲取信息速度。

          為便于對數據進行對比分析,一般需要在原始數據的基礎上給出差值、升降變化、平均值、總計等數據處理結果,減少用戶二次加工數據的過程,提升用戶閱讀信息的效率。

          數據匯總展示

          在表頭或者表尾分別提供了總計的數據,方便用戶進行快速查閱。

          從易讀性和易操作性兩大方面,教你做好表格設計

          數據對齊展示

          常用對齊方式有數字右對齊,文字左對齊,混合型文本左對齊,列標簽的對齊方式與數據的對齊方式保持一致。這樣能形成的視覺邊界線,便于視線的流動,從而快速提升數據的瀏覽、對比效率。

          從易讀性和易操作性兩大方面,教你做好表格設計

          空數據展示

          B端中后臺數據類型較多,對于空數據,切忌不要與數據為“0”進行混淆,對于空數據通用做法是用“-”表示,而不是什么都不顯示,會讓用戶誤以為是沒有數據還是“0”數據。

          最好做法就是為空數據做出釋義,可以加在“列標簽”的名詞解釋文案中。

          從易讀性和易操作性兩大方面,教你做好表格設計

          數據的關鍵屬性標識展示

          對于用戶重點關注的數據狀態、上升和下降等,可以用符號進行標識,幫助用戶快速定位到目標信息。

          從易讀性和易操作性兩大方面,教你做好表格設計

          3. 固定表頭、固定列和固定分頁

          在有限屏幕內,有限的內容展示區域內,閱讀豐富且繁多的表格時,用戶不得不拖動橫向或縱向滾動條來閱讀信息。

          固定表頭、固定列和固定分頁,能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。

          固定表頭

          在固定的小區域內滾動會非常局促,而且區域滾動和全屏滾動同時存在時體驗也很不好。固定表頭可幫助用戶識別信息,在全屏滾動上去后固定表頭,有利于用戶向下翻屏時能夠便利的閱讀數據。

          從易讀性和易操作性兩大方面,教你做好表格設計

          固定列

          固定列的內容可視業務及目標用戶的訴求而定,一般采用方法是固定比較重要信息,方便用戶進行數據定位與對比,最好可以讓用戶自定義,滿足不同用戶訴求。

          從易讀性和易操作性兩大方面,教你做好表格設計

          固定分頁

          分頁處理目前有放在上部、下部或上下部均有,需要根據場景來選擇。分頁固定目的是為了省去用戶需要翻到頂部或底部進行操作的麻煩。

          特別是可以自定義每頁的數量和需要橫向拖動數據查看,這就需要把分頁固定在底部,方便用戶橫向拖動滑條查看信息和進行翻頁操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          4. 分頁

          在Web端中的表格,涉及到跨頁的數據操作時,分頁會帶來不便。

          但往往受限于數據加載的壓力,這種情況在大廠中尤其突出,加載數據都是億量級別的,在Web端和手機端都需要實時下載數據的終端,我們通常做法就是提供分頁展示數據來緩解服務器的壓力。

          表格中的的數據內容超過一定“數量”時需要提供翻頁功能,而這個“數量”是由表頭的數據的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定。

          原則上整張表不要超過一屏,考慮到每個用戶的使用習慣,我們一般提供可以讓用戶自定義每頁的顯示的數量,相比于跨屏翻頁而言,向下滾屏會更便利,也更符合瀏覽信息路徑。

          從易讀性和易操作性兩大方面,教你做好表格設計

          5. 全屏查閱

          表格全屏展示是非常有必要的:

          • 特別是在小屏設備上,全屏模式下可以直接屏蔽掉左側導航欄、上方的報表區域和頂部的導航欄,可為用戶提供更多可視區域。
          • 在大量數據前面,可為用戶提供沉浸式閱讀體驗,讓用戶更加專注,可減少與表格無關的視覺干擾。
          • 用戶可通過ESC鍵或關閉按鈕隨時退出全屏模式,操作成本低。

          從易讀性和易操作性兩大方面,教你做好表格設計

          易操作性

          1. 篩選

          在大量的表格信息中,如果沒有篩選查找信息簡直猶如大海撈針,而表格跟篩選是不分家的。

          說到表格一定會說到篩選,篩選也就是數據過濾,常在數據量較大的場景中使用,其目的是通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內容。

          對于表格外部篩選,如果有時間會單獨出一篇詳情介紹。這里不展開詳細說。

          篩選根據篩選功能的位置不同,可分為表外篩選和表內篩選。

          • 表外篩選:篩選功能位于表格上方,與表內篩選的不同之處是過濾值可以不限“表格列”的內容、可單次進行多列的交叉篩選。
          • 表內篩選:篩選功能位于表格內,也就是放置在列標簽上的篩選,受“表格列”內容的限制,僅能做單次單列的篩選。

          從易讀性和易操作性兩大方面,教你做好表格設計

          2. 數據選擇

          在信息列數較多的情況下,數據的選擇就尤為重要。當鼠標指針懸停在表格列或行時,給予視覺狀態的變化提示,可以讓用戶捕捉到所在的位置,而不至于視覺上的錯行,能夠降低人的心理壓力和增加掌控感。根據數據選擇功能分為單個選擇和批量選擇。

          單個選擇

          鼠標指針懸停在整行時應與默認態有所區分。當標識選中行或選中行的數量,選中行可操作的命令狀態須同步,明示當前行可操作的命令或反饋當前已選行的數量。

          從易讀性和易操作性兩大方面,教你做好表格設計

          批量選擇

          提供選擇當前頁部分行、選擇全部行、取消選擇全部行三種功能;狀態反饋分為半選態 、未選態、全選態共三種。

          • 當用戶未進行選擇時,表頭的選擇框的狀態是未選態;
          • 當用戶選擇一行數據時,此時表頭的選擇框的狀態切換為半選態,同時反饋此行的數量;
          • 當用戶在表頭勾選“當前頁所有行”時,表頭的選擇框切換成了全選態,且給出了選擇“全部所有行”的操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          3. 數據操作

          對于數據的操作,主要針對表格內部來說。表格操作大體可分為顯性操作和隱形操作。

          顯性操作

          指操作選項顯示在行內,優點是明顯直觀,可以根據列表上的信息做出快速的判斷并且高頻發生的操作。

          適用列數較少的列表。但弊端是信息過載,尤其是列數較多,可展示列數會隨操作數增加而減少,同時誤操作率較高。對于危險系數比較高的操作,也不建議采用這種設計。

          從易讀性和易操作性兩大方面,教你做好表格設計

          隱性操作

          當鼠標懸停或點擊時才顯示其他低頻、高危的操作選項,優點是界面簡潔明快,信息密度低,可以幫助頁面突出更加重要的信息,可減輕空間壓力,減少干擾。

          弊端是增加用戶的點擊次數和提高了操作門檻。列數較少的表格不適用隱性操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          4. 數據下載

          為方便用戶對數據進行再次整合分析、統計分析等,可提供數據下載功能及多種下載格式。

          從易讀性和易操作性兩大方面,教你做好表格設計

          5. 空表

          對于B端中后臺來說,表格顯示最多就是兩種情況:一種就是表格有數據,這種最容易解決,有數據就顯示相應數據;還有一種表格是沒有數據,也就是空表狀態,這也是讓很多設計師容易忽略掉的頁面。

          空表分兩種:可創建和純展示

          可創建

          是用戶有創建訴求,數據是由用戶或系統產生的,可創建分兩種:

          • 比較輕量的方式,是直接示意用戶創建數據,無須給出表格樣式。
          • 在表格的空白內容處加入創建的快捷入口,引導用戶新建。

          從易讀性和易操作性兩大方面,教你做好表格設計

          純展示

          沒有創建訴求的,數據是系統產生的,不是由用戶創建的,直接告之暫無數據。

          從易讀性和易操作性兩大方面,教你做好表格設計

          寫在最后

          看上去平淡無奇的數據表格,其實是非常重要的,通過合理的組織架構和呈現方式,使原本枯燥的數據呈現出生命力,這是一件很神奇的事。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設  作者:WOWdesign


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          常見的網頁布局設計

          資深UI設計者

          為什么了解網頁布局很重要?網頁布局在很大程度上決定了網站的訪問者將如何與網頁內容進行交互。

          這里將介紹一些常見的網頁布局形式,例如卡片式、分屏布局、網格布局……一起來看看吧!

          卡片式網頁布局

          卡片式布局被Pinterest、臉書和推特等網站所使用,它非常適合在新聞網站和博客上使用,因為卡片式布局可以在頁面上放置大量內容,同時又保持每部分內容各不相同。

          卡片式布局主要有兩種形式:

          網頁中每個卡片的尺寸相同,卡片的排列非常標準,例如Dribbble的網頁布局;

          用一篇文章,帶你了解12種常見的網頁布局設計

          使用不同尺寸的卡片組成頁面的布局,卡片間沒有固定的排序,例如Pinterest、花瓣的頁面布局。

          用一篇文章,帶你了解12種常見的網頁布局設計

          分屏布局

          當兩個元素在頁面上具有相等的權重時,分屏布局是一種流行的設計選擇,并且通常用于文本和圖像都需要突出顯示的設計中。

          分屏設計特別適合電子商務網站上的產品頁面。產品圖片需要在頁面上突出顯示,但價格、規格、購物車按鈕等信息也要顯示。

          用一篇文章,帶你了解12種常見的網頁布局設計

          大標題

          隨著移動設計的盛行,大標題排版變得流行起來。大號字體在標題中特別流行,在一些網站的正文中也能看到。

          用一篇文章,帶你了解12種常見的網頁布局設計

          較大的文本更具可讀性,可以改善使用體驗。另外它還提供了強大的視覺效果,因此這種布局在極簡主義設計中特別受歡迎。

          用一篇文章,帶你了解12種常見的網頁布局設計

          個性化推薦

          個性化算法推薦可以根據每個人的喜好量身定制數字體驗。人工智能技術的發展讓算法變得更易用,能精確分析用戶的喜好。

          根據用戶之前的訂閱習慣,Netflix可以為用戶個性化推薦他們最有可能觀看的電影。

          用一篇文章,帶你了解12種常見的網頁布局設計

          像Medium這樣的網站會基于用戶以前閱讀和喜歡的內容,向他們展示很多同類型的文章。

          用一篇文章,帶你了解12種常見的網頁布局設計

          網格布局

          網格為設計提了視覺上的平秩序感,以一種平衡且有組織的方式呈現內容,使內容更易于人們使用。

          用一篇文章,帶你了解12種常見的網頁布局設計

          在網格設計中使用不同大小的內容可以在保持內容有序的同時增加視覺吸引力。

          用一篇文章,帶你了解12種常見的網頁布局設計

          雜志版式布局

          雜志和期刊的布局方式影響了網絡雜志的版面設計。這些網頁布局很適合有大量內容的網站,尤其是每天都需要更新內容的網站。

          用一篇文章,帶你了解12種常見的網頁布局設計

          單頁布局

          單頁布局將網站的所有主要內容放在一個網頁上,通過滾動完成導航,有時還使用視差滾動效果。

          用一篇文章,帶你了解12種常見的網頁布局設計

          對于內容稀疏的網站,單頁布局是一個很好的解決方案。同時它也是內容敘事的完美選擇,比如交互式兒童讀物。

          用一篇文章,帶你了解12種常見的網頁布局設計

          F型&Z型布局

          F型和Z型布局是指用戶的視線如何在頁面上移動,即用戶如何掃描內容。F型布局有非常明確的視覺層次結構,因此適合內容更多的頁面。

          用一篇文章,帶你了解12種常見的網頁布局設計

          Z型布局將視線吸引到頂部,然后沿對角線方向向下延伸到底部,然后再次延伸。

          用一篇文章,帶你了解12種常見的網頁布局設計

          不對稱布局

          在設計中,不對稱會產生動態化的視覺沖擊力。大多數情況下不對稱是由于圖像和文本間無法平衡而造成的。

          用一篇文章,帶你了解12種常見的網頁布局設計

          由于不對稱會產生動態的、充滿活力的視覺印象,因此對那些想要傳達這種形象的品牌來說是非常有用的。

          用一篇文章,帶你了解12種常見的網頁布局設計

          簡潔布局

          這種布局的優點在于完全專注于內容,沒有視覺上的混亂。

          干凈簡單的布局幾乎適用于任何類型的網站。許多優雅的網站都可以被認為是“簡潔的”,無論它們包含什么設計形式。

          用一篇文章,帶你了解12種常見的網頁布局設計

          導航標簽

          導航標簽適合用于包含少數項目的菜單,否則導航會顯得很混亂。

          用一篇文章,帶你了解12種常見的網頁布局設計

          輪播

          輪播內容包含圖像和文本,通常出現在網站的頂部,用來突出顯示內容。

          用一篇文章,帶你了解12種常見的網頁布局設計

          總結

          好的網頁設計具有很強的適應性并且對用戶來說始終是友好的。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設  作者:Clip設計夾

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合