<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達人

          一、理解功能

          下手前的第一步當然是要先搞明白使用場景和功能用途,這個太基礎了,想必大家都懂。具體到這個項目來說,它是一個用于數據分析的服務,后臺有一個信息量很大的數據庫,通過前臺進行條件過濾后即可得到一張數據表。

          圖片

          看到原型我的第一反應是:該從哪里開始操作?頁面功能的終點在哪?原因在于,頁面中有三個主按鈕“生成表格”,“預覽”和“應用條件”,且視覺結構基本扁平。和產品溝通后了解到,當前的邏輯是先選擇指標,給指標排序后就可以生成表格了,針對表格可以再應用條件篩選,最終形成的表格可以導出。

           

          二、結構梳理

          2.1 拆分重組功能

          設計改造一般從大到小作調整。先優化整體結構,盡可能讓功能分區更明確。理解了原型后不難看出,頁面的配置項分的很開,先在左邊欄加指標,再在內容去上方排序,生成表格后再去右邊欄條件篩選。這種需要用戶點來點去的結構顯然不太友好,而且細碎的分割消耗了大量的空間。

          圖片

          該頁面功能大概分為配置和數據展示兩大部分,不妨從這個角度重組頁面功能。配置生成類頁面有這樣幾種常見交互形式:一,分兩步,先配置再生成;二,模態浮層,通過彈窗或者抽屜配置;三,非模態,用工具欄或抽屜容納配置項目。為了便于比對或調整配置項,非模態的抽屜更適合操作場景。

          圖片

          功能結構的優化得到了如下的改進:

          • 易于統一卷展配置抽屜,避免了各個面板獨立控制和空間浪費。
          • 減少了配置時的操作步驟,選好配置項即可一鍵生成。
          • 分區明顯,一邊操作另一邊展示,各司其職。

          2.2 方案對比測試

          對比測試方案的目的是盡可能考慮全各種設計方案,確定出一個最符合使用習慣和操作流程的布置。不論是手畫草圖還是用電腦畫線框圖都可以,期間多和產品或業務討論,可以讓對方理解整個的推導過程。

          不過溝通中有兩點需要注意,首先討論方案前先過濾掉從設計的角度看明顯不合理的,評審的目的是通過多方意見調解讓方案達到最優,而不是展示工作量。其次是結構和視覺方案盡量分開評估,否則對方會收到海量排列組合后的設計方案,評起來抓不住重點。下面是當時和產品一塊研討的三個方案:

          圖片

          • 方案一:指標一列,過濾條件一列。其中指標可以通過頁簽切換全部和已選。
          • 方案二:同方案一,但全部指標和已選指標上下顯示。
          • 方案三:全部指標單占一列,已選指標和過濾條件單占一列。

          最終選定了方案三,綜合來看有如下原因:用戶添加條件篩選的頻次低,所以沒有單放一列并且可單獨卷展;并且方案三的布局在語義上更容易被理解為“庫和待應用項”,提供更典型的心理暗示。

          圖片

          過濾條件的結構做了一些特定的優化:一,新增功能保持在頭部,避免被擠下去;二,條件關系配置直接外露,減少點擊的同時也沒有占用更多空間;三,條件卡片增加了。

          圖片

          至此,需求頁面的結構已經定了下來,之后就是常規意義上的視覺處理了。因為這部分比較細碎,單獨來講可能缺乏普適性,所以下面一章總結了一些常見且通用的設計點供大家參考,最后再提供頁面的最終視覺效果供大家參考。

           

          三、視覺效果構建

          3.1 內容元素的背景色

          盡量讓內容和表單展示在白色卡片上。大部分基礎組件樣式是按白色底色的場景來做的,放在其他顏色的背景上很容易出問題,比如表單的禁用態或者標簽的顏色和底色融為一體時,可讀性很差,而且有一種不干凈的感覺。當然這一條不絕對,如果深度定制了基礎組件的樣式,或是結構功能簡單,背景采用其他顏色也是沒問題的。

          圖片

          3.2 陰影和描邊

          陰影分割是一種常見的視覺表達手法,然而B端用戶的顯示器普遍比較糟糕,分辨率低且色域小,太輕的陰影效果不如描邊,有時甚至會讓圖形邊緣看起來很模糊。擔心顯示效果的話,實際上可以看一看 macOS 窗口的陰影尺寸和透明度。B端工具設計中,功能性比美觀度重要的多。

          圖片

          3.3 易讀性與復雜度

          下次去宜家的時候可以觀察下結賬的柜員機,你會震驚地看到里面仍然顯示著擬物化界面。元素的質感對現代界面設計來說可能是增加了頁面復雜度,然而放到具體的操作場景中,擬物化界面可以給高速操作的收銀員提供更佳的功能可見性,有益于培養肌肉記憶。所以頁面易讀性與復雜度之間的平衡,取決于用戶在場景中的操作方式。

          圖片

          3.4 功能顏色的數量

          功能顏色讓用戶不閱讀內容就可以初步感知數據狀態,比如警告色,標識色等等。數量太多時用戶會記不住映射關系,顏色就失去了功能性。一個常見的錯誤是標簽的配色,假如一個系統里有十種標簽,千萬不要設計十種配色,不僅區分度低而且視覺上很混亂,盡可能先歸類再配色。再舉審核狀態的例子,除了成功失敗之外,審核流程還有各式各樣的中間態,需要異化表現時,不妨嘗試通過圖形視覺信號區分,比如增加圖標。

          圖片

          3.5 避免攤大餅

          非必要不攤餅。隨著層級增多,用戶對層級歸屬的感知逐漸變差,內容區也越來越窄,視覺效果難以把控。當然,在B端系統設計中沒有什么完全不可打破規則,實在避免不了的話,可以著重突出頂層內容或動態提示用戶當前聚焦的層級。比如鼠標懸停時高亮層級關系,類似編譯器的代碼區塊高亮功能。

          圖片

          3.6 數據與提示

          • 用真實字段內容設計:視覺設計前找產品或者研發要一份內容字段樣本,有助于提高視覺保真度,同時避免開發上線后內容擠不下或大面積留白的情況。
          • 表單項默認值:表單中可以通過感知預測填充內容,或設置常用的默認配置,提高表單的填寫效率,減少機械操作。
          • 提示信息:提示信息的暴露程度取決于系統功能是否常規,以及目標用戶的理解能力。常用操作不提示,常用但晦澀的功能采用懸停提示,不常用且難懂的功能可以露出提示或幫助中心鏈接。

          3.7 數據分析頁最終效果

          經過以上粗略的講解,希望大家對頁面控件和整體的視覺處理有了一定了解。針對高度定制化的B端頁面,視覺的核心目的是提高功能可見性和操作易用性,不是單純地去套規范。

          圖片

           

          四、工期管理及研發對接

          除了頁面的設計流程,項目管理則是另一個重點,B端項目經常會倒排工期,個別戰略導向型的需求更是火燒眉毛。毋庸置疑,兩天工期的設計質量多半是比不上一周工期的,下面講一講在時間緊張時如何保障輸出質量。

          4.1 按需求表單規劃

          開始設計前,根據 PRD 整理出一個任務表單,即當期需求覆蓋的功能范圍。遇到緊急需求時,可以按照拆分出來的功能模塊分批交付開發。B端模塊的設計時間很少會完全符合預期,比如在設計時發現了一個重大優化點,從構思概念方案到各方評估影響需要占用一部分工期,而通過模塊排期表可以更穩妥地評估突發事件對后續輸出的影響,幫助產品評估是否投入資源做優化。

          圖片

          4.2 先輸出核心頁面確認方向

          先輸出關鍵頁面給產品和業務確認,一來讓研發心里有底,二來控制改稿成本。返工在 B 端項目中很常見,有時候我甚至會手畫草稿去找產品過方案,提前評估可行性,避免方案走了很遠再被駁回。切忌等到交稿節點給產品一個突然驚喜。

          4.3 組件與組件狀態

          B端原型通??此浦挥幸粋€頁面,而算上各種面板的打開和關閉,頁面操作狀態,彈窗,包括定制化組件樣式的說明,工作量并不小。組件狀態可以留到最后再補充,但務必和研發提前協商技術方案:首先確定常規功能能否用現成組件,采用哪款組件,這一部分之后就不再出交互視覺樣式了。其次和研發同事溝通非標組件的交互形式,這樣他們可以先寫框架最后再加樣式,不會出現研發空窗。

          圖片

           

          五、初步排錯

          交付設計稿或者做用戶測試之前,還差一步驗證的工序。過濾掉明顯且粗粒度的問題,可以顯著提高后續的測試效率??陀^上驗證可用性,主觀上評估體驗。

          5.1 小黃鴨調試法

          小黃鴨調試法是一個工程師都知道,但設計師很少聽說的測試方法,本意是通過給桌上的橡皮鴨逐行解釋代碼來排查問題。驗證階段不妨也試試這個方法,給想象中的人物講講界面的使用方法和元素的設計原因,講都講不通的功能,想必也不會特別好用。(認識我的同事都知道我辦公桌上有張青年 Gary Anderson 給一個領導樣子的人解釋可回收標識設計的照片。我的講解對象就是這個領導樣子的人,他已經駁回了我的很多爛方案。)

          5.2 走用戶流程

          核對產品功能沒有缺漏后,就可以檢查用戶流程的流程度了。幾種常見的流程問題包括:不知從何下手;找不到功能入口;操作失誤難以補救;系統出錯原因不明。這些問題會突然地卡住用戶,感受上很糟糕。我們可以找出類似的卡點,提供適當的引導。假如從設計上找不到解決方案,則需要提供可檢索的幫助中心以便用戶自行查閱解決。

          圖片

           

          結語

          B端產品一般會有詳細的文檔,或者培訓操作人員。然而以B端產品的體量和非常規的交互方式,很多操作不好記憶。單純按照原型施工,難以保障易用性。作為設計師的一個關鍵職責,便是將產品操作邏輯翻譯成簡明易懂的頁面和圖形,盡可能鋪平體驗的道路。

          注1:文章示意圖內容由于脫敏需要進行了處理,實際設計時請記得盡量使用真實字段內容。

          注2:本文主要介紹流程處理,為避免繁瑣略去了一些視覺設計點,想要了解更多可以參考上一篇文章《引起舒適!什么是好用的界面》。

           

          作者:邢禹

          轉載請注明:學UI網》如何解析產品原型

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


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


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




          設計師能力建設(1):如何更好地進行設計溝通

          seo達人



          設計師是項目流程中的中間環節,需要與不同角色的人員打交道,溝通必不可少。
          • 對上,要與產品經理保持溝通,清楚地知道產品當前的工作方向、目標,以及未來的工作計劃,甚至要通過與產品經理溝通,側面了解領導的期望。
          • 對下則要跟開發人員密切配合,跟進開發,推動設計落地。

          與人溝通不是一項簡單的工作,其中包含了很多為人處事的技巧,這方面我并不在行。但是單純工作層面的溝通而言,我覺得并不復雜。

          今天我們就來討論下設計師應該如何做好設計溝通。主要有以下幾個方面:

           

          1、深入理解需求,給自己增值

          2、找準關鍵角色,影響他人

          3、主動溝通,拉近工作關系

          4、基于用戶場景,提高溝通準確性

          5、重視設計評審,獲得多方認可

           

          一、深入理解需求,給自己增值

          設計師是為產品服務的,打交道最多的就是產品經理,但是產生分歧最多的應該也是產品經理。根本原因就是產品經理和設計師會站在不同的維度去理解需求,產品經理主要是從需求價值、功能設計的維度定義需求,而設計師則是從用戶體驗角度理解需求。

          現在很多的設計團隊要求設計師要去理解業務場景、商業模式,要站在產品的角度思考需求,就是保證設計師能與產品經理在一個頻道上溝通,這樣才能產出有價值的設計方案。才能讓產品經理認可你的能力,讓他覺得你的設計方案確實更加合理、有效,甚至對你產生依賴性,最終贏得話語權。

          當然這非常難,畢竟離了誰,地球都照樣轉。但是一旦形成了這樣的工作方法,你會發現設計工作會更加容易推進,溝通交流也會更加順暢。

           

          二、找準關鍵角色,影響他人

          設計師想要做成事,需要自下而上地影響別人。

          有些時候,產品經理的需求并不清晰準確。必要時,設計師要拉上更高一級的角色與產品經理一起溝通,例如產品總監,將需求進一步確定下來。

          總監這類角色比較重要,平時設計師很難有機會直接給領導匯報,跟產品總監或者設計總監溝通匯報的機會更多。一方面他們的意見比較受領導重視,另一方面他們也比較清楚領導的想法。產品總監會決定是否需要跟領導進一步溝通,或者由他們直接跟領導匯報。

          所以跟總監匯報,要能夠將設計方案的精髓有效地傳遞給他們,讓他們充分了解并信服設計方案。

          當然如果有機會,設計師還是要爭取直接給領導匯報,畢竟自己產出的方案只有自己最熟悉,并且通過匯報也可以面對面了解領導的真實想法。

           

          三、主動溝通,拉近工作關系

          1、日常工作溝通

          在我們的工作中,會遇到各種類型的產品經理。有強勢的、有自以為是的等等,但是所謂“伸手不打笑臉人”,大家都是為了產品更好地發展在積極合作,當你主動的、真誠地站在產品角度去請教業務或者需求時,大多人還是很配合。

          講一下我的個人經歷。

          隨著產品線的擴張,部門的產品經理越來越多,有些沒有太多的交集,最開始對設計師缺少足夠信任,個別產品經理會繞過交互設計師,直接找視覺完成方案后,推動開發上線。有的只是找交互設計師做下原型評審,并不傳達需求內容,效果非常有限,導致設計師工作比較被動。

          這一方面需要在流程制度上去約束產品經理,另一方面設計師也要與產品經理多溝通,提前知道產品規劃、介入需求?;蛘邔]有參與的需求進行體驗走查,帶著問題去找產品,并提出改進方案,讓產品經理意識到設計師對產品的價值,逐步扭轉不利的局面。

          剛好最近在搞下季度的產品規劃,產品經理搞得熱火朝天,但是都沒有主動將信息同步給設計師。

          作為產品需求的下游,這種情況似乎也無可厚非。不過如果等著所有的需求都確定了,工作鋪天蓋地壓過來,設計師也承受不了大量的設計任務。

          在我看來,提前了解需求信息,可以更好地開展后續設計工作。所以就主動出擊,找產品經理聊聊工作,于是有了以下對話。

          設計師:“大佬,最近忙什么呢?后面的產品有什么安排嗎?” 

          產品經理:“需求還在整理中”  

          我:“好的,有什么材料可以先發給我看看嗎?” 

           產品經理:“還在改方案,新的方案被領導否了“

          …..(中間就閑扯了幾句,就此略過)

          我:”好的,后面有需求可以提前跟我們溝通,我們設計側保證積極配合”。

          產品經理:“好的,那我先把之前的方案發你看看吧”

          當你主動地想要了解產品需求時,很多產品經理還是比較歡迎的。

          而當產品經理不知道該做什么或者怎么做時,設計師可以通過自己的專業能力,例如競品分析、數據分析等,介入到需求分析中,幫助產品經理梳理需求,或者推進產品體驗升級。這時候你的設計建議,產品也更容易接納。

           

          2、設計目標溝通

          對于成熟的設計團隊,設計師一般都有明確的分工協作,職責也比較清晰。單打獨斗的設計師,相對比較慘。容易陷入被動接受工作的局面,今天做個A產品頁面,明天改個B產品PPT,后天做C產品的頁面,誰都能提需求。天天看似很忙,結果工作上不成體系,工作績效都不知道該怎么寫。

          所以設計師要做好自我工作的管理,建議設計師可以主動向產品團隊靠攏。除了日常的項目工作,還要能夠找到一些體現自我價值的工作,可以更好地展現自驅能力。例如開展競品分析報告、系統走查、設計規范、組件庫建設沉淀等等。

          這些偏向產品頂層規劃與設計工作,要及時與產品負責人進行溝通,保證工作的方向和目標與產品整體發展保持一致,并且最好能夠納入到產品規劃中,方便后續工作的開展。

           

          3、抓住問題本質、帶著方案溝通

          設計是具象工作,看到設計方案才能做出評判。在工作溝通時,除了提出問題,還要盡量帶著方案解決問題。尤其是與領導溝通,不要直接問領導該怎做,而是應該告訴領導我的方案是什么,請領導決策。

          例如領導對現在版本不滿意,要改版。我們該怎么做呢?

          我認為,首先要弄清楚領導對哪些方面不滿意,例如風格、顏色,還是框架布局。因為雙方對改版的認知可能不一致。搞清楚問題之后,才能更好地開展具體工作。另一方面如果不好與領導直接溝通,還可以與總監,產品經理溝通討論,他們跟領導接觸更多,得到的信息也更多,可以側面了解領導的期望。

          試圖搞清楚領導喜歡什么風格,再著手進行設計,這種方法可能很難奏效。因為領導的喜好會發生變化,可能不經意看到的頁面就讓他產生了改版的想法。又或者他今天喜歡這種風格,明天喜歡另一種風格,這樣會讓設計很難適從。

          設計師還是需要通過主動調研分析,完成多個方案后,讓領導做出選擇,這樣可以更深刻地影響領導的思維。

           

          四、基于用戶場景,提高溝通準確性

          例如最近有個產品需求,最開始是產品經理跟我單線溝通的,感覺需求比較簡單,確實沒有仔細地了解用戶場景,就在產品原型基礎上修改了一版交互方案。后來產品經理找到我說,業務需求方對方案還有些異議。于是進行了第二輪溝通,這次邀請了產品經理、業務方、還有開發同事參會。

          剛開始討論的是第一輪的交互方案,發現產品經理轉述業務方需求時,對信息理解有誤,于是重新討論用戶場景和需求。在會上快速完成了一版框圖原型,但是緊接著業務需求方又考慮到了一個新的場景,發現框圖方案仍然無法滿足要求,于是方案又被推翻了。

          最后的會議由于時間關系,只是討論清楚了用戶場景,產品經理還要再梳理一下才能轉化為產品需求,后續還要再拉會討論。

          一個產品需求涉及到各種崗位角色,單方面溝通容易出現信息偏差,或者信息傳遞不到位。在關鍵的節點,例如需求討論、設計評審,應當召集所有相關人員,盡量避免單線溝通。

          同時要基于用戶場景溝通,不能含糊其詞,可以通過5WH方法刨根問底,真正地理解需求,否則就可能出現設計返工。

           

          五、重視設計評審,獲得多方認可

          設計評審是非常重要的溝通方式,一般分為兩種,內部評審和外部評審。

           

          1、內部評審

          內部評審指的是設計團隊內部的評審,主要作用是方案查缺補漏和正式評審預演。

          設計師在評審過程中需要講清楚產品需求是什么,業務流程、競品分析、用戶分析,設計思考、以及設計方案等等。當然由于現在都是敏捷開發,一些需求都是比較小的迭代,所以前期的分析可以簡單講解下,重點是要講清楚需求和設計方案,讓其他設計師了解需求背景和內容,并對設計方案提出改進意見。

           

          2、外部評審

          外部評審更多的是確認設計方案,而不是討論設計方案。同時可以拉通各方面信息,并將最后的評審結果傳遞給需求的相關責任人,作為后續工作的依據。

          為了評審效率,在正式評審前,設計師可以拉上業務方、產品經理做小范圍的方案評審,讓需求最直接的相關人員,確認方案是否正確,并達成一致。保證正式外審方案受到質疑時,獲得他們的支持,或者由他們出面解釋一些業務問題,更容易讓其他人員接受。

          正式的外部評審可能會包括一些業務方的領導、產品總監、設計總監、開發、測試等人員。設計師需要重點講解從用戶體驗角度對需求的拆解和分析,以及完整的設計方案。當發生意見分歧時,可以通過競品分析、數據分析等輔助論證方案。

          設計外審時,設計師要面對各個團隊的挑戰,但是也是展示個人能力的好機會。畢竟平時不會有各個崗位的領導、同事,能夠坐下來聽你講方案。

          如果不重視設計評審,完成了設計方案,往群里一丟或者發個郵件就萬事大吉了。其實是失去了一次表現自己的機會。同時也無法將足夠的設計信息有效地傳遞給上下游,缺少了確認的過程,后面容易造成各方面的信息混亂、扯皮。

           

          總結

          立足于做事本身,你會發現工作中的溝通相對要簡單很多。上面說了那么多,可以歸納為以下3點:

          1、用心溝通

          2、主動溝通

          3、及時溝通

           

          作者:子牧先生

          轉載請注明:學UI網》設計師能力建設(1):如何更好地進行設計溝通

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


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


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



          我拼命問清楚了這些問題,結果開發卻把我拉黑了!

          seo達人

          一、代碼更容易實現線性漸變、徑向漸變、角度漸變。網格漸變往往需要我們切圖

          設計中,我們通常用的漸變有:線性漸變、徑向漸變、角度漸變、網格漸變。

          圖片
          在這當中,代碼實現線性漸變、徑向漸變、角度漸變 相對來說要簡單一些,而網格漸變則需要消耗更多的開發精力。我們也不會在這上面去增加開發工作量。
          所以,在我們輸出設計稿給開發的時候,有網格漸變的部分直接切給開發。比如下面設計稿上的漸變背景色:

          圖片

           

          二、文字能不用透明度就不用透明度,直接給原始的16 進制色值

          16 進制色就是在開發中設定顏色的代碼,每個顏色都有對應的 16 進制色,如 #000000 是黑色,#FFFFFF 是白色。

          比如我在調這個文字顏色的時候可以用 #000000 40% 的透明度,也可以直接用 #999999 這個色,這兩個呈現的顏色沒有任何區別。

          圖片

          但是交給開發寫的話,第一種除了要寫 #000000 的黑色之外,還要寫一串 Alpha 透明值,這樣做會更消耗性能,且在不同屏幕分辨率、不同操作系統下,所實現的透明效果也會有偏差。

          所以,在這種非必要情況下,樣式可以用不帶透明度實現的話,就不要帶。

           

          三、切一整張大圖,可能會發生拉伸變形或是圖片被裁剪的問題

          如果是一整張的切下來,會導致不同尺寸的手機把切圖拉伸變形,或者會裁剪多出比例的部分。

          比如我們切的這張啟動頁大小為 375*812 的三倍圖,這張圖在 iphone13 mini(375*812px)和安卓(360*640px)上等比展示就會產生不同的效果——

          安卓屏就會被裁切掉一些(展示圖片來自網絡)。

          圖片

          如何保證在這種情形下,啟動頁的圖片可以適配不同尺寸的屏幕呢?

          我們可以將上下分開切,讓開發分別定上面插畫和logo的位置,以此保證他倆都能完整展示。

          將一張圖切成這兩張:

          圖片

          設定插畫距離頭部是 30px,底部 logo 距離底部是 30px

          圖片

          這樣在其他屏幕上,也是依照「插畫距離頭部30px,底部 logo 距離底部是 30px」這個規則來寫,就能保證這張圖上的所有內容不被裁切了!

          圖片

           

          四、不要將切片與 icon 貼在一起

          一些初次切 icon 的同學會這么做↓

          圖片

          這么做會導致以下幾點問題:

          · 如果 icon 有 0.5 像素點,那么貼邊切很可能會被裁掉一些;
          · icon 的高矮長寬不一,但開發會全按一個尺寸來寫,導致 icon 被拉伸或壓縮;
          · icon 設計規范不一致,出現各式各樣的尺寸。

          所以我們都會給一套的 icon 固定一個同樣大小、正方形的框,以此來規避掉以上出現的問題。

          圖片

           

          五、通知icon與帶數量的小紅點不用切在一起

          我們在做通知消息的時候右上角會有消息數量的標識:

          圖片

          當數字分別為個位數、十位數、99+ 時,紅色底板的寬度會根據數字長短發生變換:

          圖片

          我們不需要每種情況的小紅點都切一遍,只需要定好數字在紅底里的左右間距,讓開發根據數字長短做自適應即可。

          圖片

          所以我們提供切圖只需要切鈴鐺部分。

          圖片

           

          總結

          以上就是我在實際項目中遇到的切圖問題了,切圖是一項靠經驗積累的UI必修課,希望你在閱讀之后留個印象,以后遇到類似問題也有了解決之法。

          歡迎在評論區分享你與開發對接所遇到的那些事兒~

           

          作者:花菜

          轉載請注明:學UI網》我拼命問清楚了這些問題,結果開發卻把我拉黑了!

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


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


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


          職場中要學會拒絕

          seo達人

          一、拒絕拿來主義

          相信大家都遇到過同事或者朋友索要源文件的情況,面對這種拿來主義我們要學會拒絕。工作對接中非必要不提供源文件給無關聯的同事,團隊項目文件流傳出去也許就是這個因素。

          圖片

          要學會拒絕,源文件也是我們的勞動付出,不要把自己的勞動果實提供給別人,助長他誤導面試官等情況發生。工作中的對接需要驗證人員關聯性,團隊文件流傳出去要先向直屬領導匯報,源文件也是屬于團隊的資產。

          圖片

          拒絕拿來主義,不要被“不好意思”拒絕這種性格所束縛,勞動果實需要付出的關聯人員才能共享。

           

          二、拒絕不公平待遇

          在職場中我們都在不斷努力發揮自己的價值,希望以此獲得更好的晉升機會和待遇回報。如果只有付出沒有與之匹配的勞動回報,只會讓員工失去奮斗的意志,我們也是會拒絕不公平待遇的。

          圖片

          根據自己的專業能力和經驗值,我們要分析出自己的行業價值,無論是求職談薪還是在職漲薪,我們都要盡量追求接近公平。如果當時妥協了,就得確保自己不會有心理情緒,不然不僅工作不順心,也會影響自身專業的提升。

          拒絕不公平待遇需要有拒絕的勇氣和專業實力,專業能力的提升和作品的沉淀至關重要,只有這樣才能擁有更多的選擇權。

          圖片

           

          三、拒絕長期職責偏離

          在職場中偶爾配合完成非本職工作的內容實屬正常,但是僅限于偶爾配合。如果長期偏離自己的專業職責范圍,也是得不償失的,要根據自己的職場計劃學會拒絕。

          專業能力的提升離不開項目經驗的積累,如果長期處于偏離狀態,會影響我們的經驗沉淀,進而影響專業能力的晉升。如果在一個團隊長期干非專業范圍的工作,我們要學會拒絕,選擇更適合自己的團隊。不要受溫水煮青蛙式的工作環境而影響,最終使得自己雜而不精,想要跳槽到更好的團隊就會變得非常困難。

          圖片

           

          四、拒絕違規設計

          工作中的設計任務雖然我們無法改變,但是也要留意自己的設計底線,也是設計范圍的法律底線。不要稀里糊涂的干活兒,設計也是要有所為而有所不為,一旦觸碰底線設計師也是難逃追責。

          如果不幸遇到這樣的團隊,就要早點離職,不要被高待遇所誘惑。拒絕違規設計,做一名懂法的設計師。

          圖片

           

          五、拒絕同事的“任務”

          這個問題就是我們一個老學員咨詢我的問題,事情的大概意思就是領導分別給她和同事安排了工作,同事覺得她的內容部分不是很重要,讓她隨便做做就可以,剩余的時間來幫自己完成任務。遇到這個問題她很苦惱,自己的任務還有別的都還沒有完成,是否要答應同事的要求。

          遇到這個情況我們要第一時間拒絕,回復的話術是我得先完成自己的任務,如果到時候有時間再根據情況看。職場中沒有隨便做做這個說法,領導安排的任務就要發揮自己最佳的能力去做到極致,展示出自己在團隊里面存在的價值。如果本職工作都沒有做完,就不要去當職場“好人”,到時候成就了別人,結果自己的事情一塌糊涂。只有在完成自己職責內容之后,再詢問領導有沒有其他安排,如果沒有其他安排的情況下我們再考慮援助同事的任務。

          圖片

          職場中每個角色都有自己應該承擔的責任和輸出,所謂的能者多勞是在量力而行的基礎上,如果自己的職責都沒有做到極致,就應該優先保障自己的輸出質量。要學會拒絕同事的“任務”,除非這個任務是屬于共同的任務,再結合優先級去進行排序。

          圖片

           

          六、拒絕長期低質量輸出

          在職場中不只是為了獲得報酬,高質量的輸出不僅成就了項目,也是成就了自己的專業沉淀。如果是自己沒有擺正態度,就要及時調整心態,用最好的輸出不斷提高自己的職場價值。

          圖片

          如果是團隊現狀如此,整天干著沒有質量的輸出,久而久之就會讓自己失去專業優勢。到時候想要晉升或者跳槽的時候,就會發現自己的專業能力差距甚遠,還沒有一份像樣的作品集。

          職場中要理性的分析自己的現狀,拒絕長期低質量輸出,這樣只是在耗費自己的青春。想要不斷提升自己,就要不斷完成具備挑戰的任務,只有項目質量越高,我們才能學習并掌握更優秀的經驗。

          圖片

           

          七、拒絕長期無所事事

          養老式的職場生活估計大家很羨慕,但是真的置身于這樣的團隊中,估計距離淘汰也只是時間問題了。

          在團隊中如果長期無所事事,不僅會荒廢自己的設計執行能力,也會讓自己的心態變得消極。如果遇到高強度的工作出現,就會想要去逃避,這是一個非常危險的信號。我們不能長期沒有輸出,這樣的職場環境我們要及時拒絕,青春的我們不是為了享樂,現在不去磨練自己,未來就會被職場所拋棄。

          圖片

           

          八、拒絕“畫餅”式承諾

          還是職場小白的我,也經常被領導或者老板“畫餅”式承諾,只能說是踩坑也是一種修行。不過以過來人的經驗回顧時,希望大家不會再被“畫餅”,學會拒絕“畫餅”式的承諾。

          圖片

          職場黃金期是我們提升專業和積累行業經驗的關鍵時期,如果沒有發揮的舞臺就要及時做出改變,不能被不確定性的承諾而耽誤自己的計劃。只有在自己的底層能力達到峰值之后,才能具備更好的話語權,現在公司需要你不代表以后不需要更優秀的人,所以自身優秀才是最有保障的。如果是待遇層面的承諾也是無效的,當前公司的待遇條件一定程度上決定了跳槽的談薪起點,承諾待遇不代表實際待遇。

          圖片

          如果承諾的不能如期而至,我們就要多為自己打算,不能超過自己的忍耐期限還繼續拖沓。

           

          九、拒絕低能領導

          在職場初期進入大公司固然重要,但是跟對領導往往比公司本身更重要。領導的專業度決定了我們在團隊中成長的速度,如果遇到低能的領導,不僅容易原地踏步,很容易到達專業瓶頸期。

          圖片

          有的領導也許不是專業出身,但是管理方法和平時的指導性建議很好,我們也能找到更多沉淀經驗的思路和方向。如果領導專業能力不行,還過于武斷和眼界不足,項目只能是弄得一塌糊涂,這樣的領導是不可能給我們帶來成長的經驗的。

          進入團隊后通過一段時間的對接,我們要及時判斷出領導的能力,要學會拒絕低能的領導。只有跟對領導才能快速成長,從領導身上學到的做事方法、思考角度、項目經驗等,是我們快速從小白變得成熟的關鍵。

          圖片

           

          十、拒絕低要求團隊

          在項目設計中,不是一稿過就是我們追求的目標,如果團隊要求比較低,是很難突破自我的。只有一次又一次的挑戰新難度,才能從固化思維中擺脫出來,掌握新的思考技巧。所以,我們也要學會拒絕低要求的團隊,不能提前過著溫水煮青蛙式的工作狀態。

          圖片

          身邊都是優秀的設計師,你的能力也會逐漸受到影響,遇到問題才能獲得更多解決方案。有一個要求比較嚴格的領導,團隊也比較注重設計質量,你才能輸出更優秀的作品,沉淀更優秀的經驗。

           

          小結

          無論是在工作、學習還是生活中,我們都不能過度的順從和依賴,學會拒絕也是我們成長的關鍵。拒絕也是新的開始,也許能在新的過程中發現新的機遇,所以我們不要不敢拒絕。只要在拒絕之前做好冷靜的分析,排查出利弊關系即可,不能盲目辦事也不能委曲求全。

          圖片

          本文觀點僅代表個人的一些經驗反思,不足之處根據自己的實際情況判斷,我們互相進步。

           

          作者:黑馬青年

          轉載請注明:學UI網》職場中要學會拒絕

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


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


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


          按鈕位置如何合理設計?看這篇文章足夠了。

          seo達人


          一、按鈕的幾種布局

          按鈕的布局大致分為四種,分別為:導航欄布局、跟隨內容布局、偏向底部布局和底部懸浮布局。

          圖片圖片

           

          二、導航欄布局

          我們平時看到的導航欄布局有很多,如發朋友圈和發QQ動態。

          圖片

          為什么要將「發表」按鈕放在導航欄右側?

          以微信朋友圈舉例,在發送動態時,核心操作是為照片配文字或繼續添加照片。

          其他操作例如選擇所選位置、提醒誰看、誰可以看,同步到朋友圈,都是次要操作且不會調起鍵盤。

          用戶輸入文字之后,直接可以點擊附近的「發表」按鈕,快捷方便。

          能否將「發表」按鈕放在頁面中呢?答案是:不行!

          圖片

          將「發表」按鈕放在頁面,當輸入文字時,會導致鍵盤遮擋操作按鈕,無法快速點擊「發表」操作。

          除非是「發表」按鈕附近有很多需要鍵盤輸入的必填表單,不然不能這么做。目前來看,微信的「發表」按鈕的位置設計是最優解。

           

          三、跟隨內容布局

          常見于表單字段填寫時,如下圖所示。

          圖片

          那么能不能將操作按鈕放在導航欄右側呢?答案是不行!因為放在導航欄右側的話,操作路徑不順暢。

          放在表單下方是正常的從上往下操作流。

          有些設計覺得將按鈕底部區域,離大拇指更近,更方便操作,如下圖。圖片

          但是因為是表單填寫,會調起鍵盤,將提交按鈕給擋住,所以按鈕跟隨表單之后,更加科學。

           

          四、偏向底部布局

          偏向底部的操作按鈕通常是內容區域不需要調起鍵盤的使用場景。常見的如引導頁或結果頁。

          圖片

           

          五、底部懸浮布局

          底部懸浮布局,常用于非填寫內容超過一屏或審批等使用場景,特點是操作按鈕優先級高,方便用戶實時操作。

          如下圖電商購買按鈕。

          圖片

           

          六、布局總結:

          1、填寫內容為必填項、需要調起鍵盤且均集中在頁面頭部,則操作按鈕放在導航欄右側較合理。

          2、填寫內容在頭部,且調起鍵盤不會擋住操作按鈕,則按鈕緊隨內容較合理。

          3、不需要調起鍵盤來填寫內容,則按鈕放在偏向底部比較合理。

          4、按鈕非常重要,且非填寫內容超過一屏時,用底部懸浮布局比較合理。

           

          后記

          從這篇文章開始,我嘗試寫一些工作中很實用且基礎的文章。

          爭取每一篇文章都可以給大家一些收獲,這樣有助于在工作中使用。

          由于每個人的基礎不同,基礎類和進階類我盡量都覆蓋。


          作者:Echo

          轉載請注明:學UI網》按鈕位置如何合理設計?看這篇文章足夠了。

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


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


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



          LOGO排版,你還在瞎整么?

          seo達人


          圖片

          這個LOGO大家覺得怎么樣,很簡單吧!是不是有手就行?然后用你們經常用的排版排一下看看:

          圖片

          200塊錢,不能再多了…我們再看一下原作者的排版:

          圖片

          怎么說?2000塊錢怕是拿不下來這個LOGO吧?所以無論你的LOGO做的是簡單還是復雜,一個合適的排版都會為你的LOGO增加成倍的價值!

          OK,廢話不多說,讓我們開始吧~~!

           

          圖片

           

           

          圖片

          所謂謀定而后動,知止而有得。我們在做LOGO的時候,通常會先根據不同的行業和命題選擇相對合適的構成方式來表現。

          比如企業類的一般會用字母類、幾何重復、中英文這種簡約大氣的構成方式,你用一個擬人化卡通標志提交過去,客戶肯定會讓你滾犢子,而像餐飲、文娛這類命題就可以選擇更為親民,感染力更強的表現形式。

          圖片

          同樣的,LOGO的排版在選擇上也應遵循行業和圖形本身所體現的氣質來進行選擇。我們這里分三個點來看一下。

           

          圖片

          LOGO中的文字編排,通常都是為了更好的對品牌進行信息傳遞及整體美觀性而服務的,所以我們在字體的選擇上要考慮適不適合這個LOGO所體現的調性。

          圖片

          我們拿小米的LOGO來舉個例子,雖然200w的經費主要體現在LOGO里,但是在字體的設計上也是遵循了LOGO里MI的調性來匹配的,非常幾何化同時加入了小圓角。

          而當我們將字體換成一個文化氣質更加濃厚的襯線體時,你會發現這是啥玩意,200w瞬間變成20w。

          圖片

          那我們再換一個偏幾何一點,所謂“設計感更強”的字體,得,連20w都沒有了…

          圖片

          英文如此,中文同樣如此,比如下方的山島小食府案例,圖形LOGO本身是非常具有文化氣質的,而如果你選擇幾何化或者常規的黑體,則也是完全不匹配的。

          圖片

          上面的案例都是關于調性匹配的,還有一個點是圖形與文字的灰度匹配。

          如果圖形是比較厚重粗一點的時候,如果你的字體選擇的很細,也是非常不和諧的,有生活閱歷的朋友應該都知道尺寸合適的重要性…(如下圖)

          圖片

          那到底該如何知道到底咋樣才算不粗、不細呢,這個東西其實沒有一個評判標準,一般情況下會遵循以下規律:

          如果你是面構成的稍微厚重一點的圖形,則字體的粗度在Medium-bold左右差不多,可以拿字庫比對一下;如果你是線構成的字體,則字體的粗度差不多比你的線的描邊粗度粗一丟丟即可。

          圖片

           

          圖片

          大多數情況下,我們都是要給LOGO搭配標準中文和英文的。根據字體的特征點,我們大致可以將常用中英文字體分為以下幾類:

          圖片

          圖片

          圖片

          我們在進行字體搭配的時候,一般情況也是遵循這個規律來進行搭配即可。

          比如黑體配非襯線體、宋體配襯線體、圓體配圓體等,需要注意的是當中文以書法體為主的時候,英文通常都不會再選擇手寫的英文字體了,會比較混亂,一般會搭配同樣具有文化氣質的襯線體作為裝飾。

          圖片

          這幾種搭配的形式都是LOGO排版里比較基礎、常規且不容易犯錯的安全范圍,肯定也有黑體+襯線體這種不同搭配的形式存在,但是作為一個小白,還是先老老實實的按照常規操作來進行搭配!先保證不犯錯,再玩花活…

           

          圖片

          我們先看一些案例來找一找規律。

          圖片

          可以看到上面這些偏大型企業類一點的行業,一般選擇的排版都比較簡約,往往單個字母或者簡單中英文搭配即可,不會有過多的輔助元素出現,我們再看一些。

          圖片

          而上面這些LOGO,都有或多或少的輔助線或輔助文字元素來進行裝飾,因為與大型企業注重品牌傳播識別度不同,也有很多LOGO是需要一些裝飾來提升整體的美感和氣質。

          我們用兩個案例來實操一下看看。

          圖片

          左邊的LOGO是比較精致簡約的幾何化LOGO,所以我們用簡單的英文搭配就會非常高級;而右邊的LOGO,我們加入一些裝飾文字和裝飾線來排版。

          圖片

          我們違背這個規律,用相反的方式來做一下,可以看到所體現的氣質完全不一樣了,左邊的LOGO變得復雜,而右邊的LOGO則變得單調。

          圖片

           

           

          圖片

          說是危險區域,其實也可以算是新手禁忌區域,也就是絕不應該犯的一些排版問題!當然了,市面上肯定有一些LOGO是超脫區域之外的,所以給自己留了個臺階,哈哈哈,下面我們來看一下都有哪些需要注意的細節?

          首先我們先將LOGO劃分群組,可以分為圖形部分、文字部分、裝飾文字(宣傳語等)、裝飾圖形部分。其中裝飾部分都是可有可無的(根據前面所講的選擇性添加)。

          圖片

           

          圖片

          絕大多數情況下!文字與圖形之間的間距要保持一個合理的空間,不能太大,也不能太小,就像愛情一樣,太遠了不行,容易淡,太膩了也不行,容易煩。

          圖片

           

          圖片

          我們要知道文字、裝飾文字它們是一個組別的物件,所以在編排時也要將他們編排在一起,他們之間的間距不能超過與圖形之間的間距。

          圖片

           

          圖片

          無論是居中對齊,還是左對齊右對齊,最好都要貫徹到底,因為如果不對齊,就會產生額外的負空間,導致整體不美觀,不穩定。

          圖片

           

          圖片

          什么叫階梯狀呢?就是從圖形到文字按照從長到短,或者從短到長的順序進行排列,學過排版或者對排版有一定了解的同學應該都知道,這種排法往往不具備設計感和無法滿足視覺上的審美,如下圖:

          圖片

          其實就和我們的人生是一樣的,我們不會一直幸運的向上,這樣生活沒有挑戰,而且也不會一直向下,會徹底廢掉,有起有落,有長處有短處,才是最有意義的人生!

          通常我們都會選擇長短長、或者短長短這種有錯落感的排布方式。

          圖片

           

          圖片

          裝飾文字,一般是指我們放置的品牌slogan或是一些不那么重要的小文字。既然不那么重要,我們就不能對他過度的進行設計和強調,這里一般會出現兩種錯誤:

          圖片

          圖片

          一般情況下,裝飾文字都是文字組內最小的字號,如果是因為不放大而導致排列邏輯出了問題,則可以增加字間距來解決;且裝飾文字由于占地面積較小,所以一般會選擇閱讀性較好的普通黑體或宋體等,過多的設計感反而影響了主次關系。

           

          圖片

          裝飾圖形的存在,一般是為了彌補空間和強調某些品牌的調性,類似于補丁的作用,所以它也不應該太大太復雜,往往以LOGO中某個小元素演變而來,或者以印章的形式存在。

          圖片

          而很多同學為了裝飾而裝飾,直接將LOGO拿過來作為輔助圖形擺放…這完全就是畫龍點龍、畫蛇添蛇的做法- -!

          圖片

          還有一點是關于參考線的粗細問題,很多同學拿捏不準,一般情況下,參考線的粗細,會比你所以文字組中最細的筆畫再略粗一點點即可,大家平時一定要多觀察優秀LOGO的處理方式,多洗洗眼睛?。?

          圖片

           

           

          圖片

          這里指的就是我們常說的標準字體的設計,因為客戶畢竟花錢了嘛,往往都希望得到一個專屬于自己品牌的字體,而不是常見的字庫字,所以一般會字體設計的同學做LOGO都比較容易做的出彩一些,關于標準字的設計,前些時間猴子哥哥已經寫了一篇詳細的教程,大家可以翻回去學習一下。



          可以看到,兩組的LOGO都很棒,強哥的二火如果單看LOGO的話妥妥是首頁級別的,但是就差在了字體設計和圖文編排上面,所以無論你的LOGO做的有多出彩,字體設計也是必不可少的環節!

          而字體設計就太深奧了,不可能用很短的篇幅來進行概括的,這里主要為不會字體設計的同學提供一種快速提升標準字設計感的思路及方法!

           

          圖片

          因為LOGO中的標準字更多的還是起到識別性閱讀性的作用,不需要很復雜的設計,所以我們可以將某些筆畫進行斷開,再不影響識別性的同時來提升設計感。

          圖片

          你看,簡簡單單,也就20秒的功夫,字體的設計感立馬提升了一個檔次,你說這需要字體設計基礎嗎?不需要吧,完全是用字庫改的…中文同樣如此!

          圖片

          斷筆的時候需要注意,選擇同樣的筆畫進行斷開,而不要這里斷一下,那里斷一下,很混亂無章法,且數量不要太多,會容易碎,適當來幾下就可以了。

           

          圖片

          省略某些不影響識別的筆畫,也是常用的一種設計方式。

          比如字母A,因為它特有的三角形結構,我們將內部的橫線直接省略掉,也是可以識別出字母A的。

          圖片

          再比如字母E,也可以簡化成三條直線,不過這個變化幅度就比較大了,一般情況下只能當做唯一一個變形使用。

          圖片

          還有小寫字母g,將右下角的連接處斷開,也是具備一個基本的識別性的。

          圖片

          像中文里的草字頭,將中間連接的地方省略,也完全OK。

          其他的類型就太多了,不一一展示了,有興趣的同學可以自己去嘗試一下,記住任何變化的前提都是保證最基本的識別性就好。

          圖片

           

          圖片

          還有一種操作是結構替換,這種通常都是將某個字母的負空間部分替換成和本行業相關的一個小元素,切記替換的元素不能太復雜,越簡單越好。

          最常見的就是字母O,因為其內部的空間較大,像咖啡品牌可以在內部填充一個簡約的咖啡豆的形態。

          圖片

          再比如字母i的上面的點,也是一個替換的不錯方向。

          圖片

          圖片

           

           

          圖片

          基本的排版知識已經講完了,下面來介紹一些常見的組合形式,這里主要分為了六個方向:

          1. 橫排;

          2. 豎排;

          3. 左右排;

          4. 斜排(特殊角度);

          5. 環繞排(徽章式);

          6. 嵌入排。

           

          圖片

          橫排是最基礎常見的排版形式,通常會將文字組排在LOGO的右側,也有的時候會排在左邊,根據LOGO的特征來決定,此類排版基本適用于任何行業的LOGO。

           

          圖片

          豎排和橫排一樣,也是最基礎的排版形式,通常都是可以互相相互轉換的,同時因為上下方的空間較大,會比橫排有更多創作的可能性。

           

          圖片

          左右排的形式相較上面的橫豎排不是很常見,它比較適合于偏向對稱形式LOGO,從而保持左右平衡,左右排的好處就是可以自行發揮的空間較大,可以作為橫豎排的一個拓展來進行嘗試。

           

          圖片

          斜排或者說特殊角度的排版,往往存在于一些偏藝術化、或者抽象化的LOGO中,它可以打破常規的排版方式,給人更耳目一新的感覺。當你的LOGO重心不是很穩定的時候,可以采用這種方式來填補不足的空間,達到整體平衡。

           

          圖片

          環繞式/徽章式的排版,一般常見在偏卡通或者偏藝術一些的LOGO中,它極大地增強了LOGO整體的趣味性,同時為我們增添一些輔助文字和圖形增加了想象的空間。一般餐飲行業以ip形象為主的LOGO都會增加一個環繞式排版的方向。

           

          圖片

          嵌入式的排版這個主要取決了LOGO本身的形態,如果LOGO中有很大的空間,則可以嘗試將文字組放入其內,這種方式一般更多的是卡通向的LOGO,比如球隊隊標等,或者LOGO本身不是很復雜的情況下,可以將文字放里面填補空間(類似文字構成的一種)。

          圖片

           

           

          圖片

          好了朋友們,前面了解了LOGO排版中需要注意的一些事項,叨逼叨了那么多,下面我們分別用不同行業的LOGO實操一下看看排版的可能性。

           

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          像這種企業類的LOGO,一般采用基礎的上下左右排即可,現實項目中,可以根據實際應用場景的尺寸,來制定不同的組合形式。

           

          圖片

          圖片

          像這類的命題我們可以增加一些裝飾英文和圖案來提升整個LOGO的調性,一些和前面重復的排版這里就不做演示了,我們嘗試一下其他更多的可能。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          好啦好啦朋友們,就到這里了,LOGO排版的樣式真的是太多了,沒辦法全部展示出來,但是無論怎么排,都離不開前面講的需要注意的點,最后再來復習一遍。

           

           

          總結:

          1. 抓準品牌的調性,選擇適合品牌的排版方式;

          2. 注意排版中常犯的細節錯誤,如間距、編組、對齊、錯落等;

          3. 選擇合適的字體進行搭配,適當設計,克制設計;

          4. 通過不同的組合方式進行嘗試,商業稿一般比較克制,根據實際應用的方向來進行編排,自己練習的時候,則可以嘗試變化不同的排版方式,讓你的logo更出彩。

          OK,那么今天的教程到這里也就結束了,照例,是很感謝今晚的相伴,如果你對本篇教程很滿意,請三連支持一下!朋友們!giao辭!


          作者:告白天

          轉載請注明:學UI網》LOGO排版,你還在瞎整么?

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


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


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


          你的設計太平了,2022開始流行用這種字體

          seo達人

          一、Morganite 

          圖片

          Morganite字體是我最喜歡的之一,非?,F代的一個字體,特別百搭,最重要的是免費無版權隨便使用,在很多大型設計里都能看見這個字體的身影。

          圖片

          電影海報設計就是運用了Morganite字體,調性很足,字體讓整個電影畫面充滿了好奇和神秘,大的數字字體恰到好處。如果你想做一些大型海報,糾結用什么字體,選擇這個準沒錯,平時做練習也可以。

          圖片

          如果你想做出輕奢大牌的感覺,也可以運用這套字體,比如上圖的雜志封面,以及耳機廣告,運用上去非?,F代時尚。

          圖片

          它的數字系列字體很好看,很窄很現代,適合于做大標題的核心視覺。

          圖片

          舞蹈海報設計,主視覺就是這個數字字體和人物的巧妙結合,現代和藝術的結合,讓畫面非常有藝術氣息。

          圖片

          印度海報也是類似的設計形式,將人物和畫面結合,形成這種現代文藝的感覺。同時這個字體搭配一些現代建筑,和建筑硬朗的氣質也相互呼應。

          圖片

          同樣這個字體也適合于體育產品,可以當背景,也可以當主體。比如上圖兩個設計,Morganite字體都承擔了視覺焦點。如果你的產品是體育運動,想做一些調性強,國際點的,直接大膽用這個字體。

           

          二、COLORTUBE 

          圖片

          看到上面這個字體,你是不是和我一樣感覺這是設計過的字體,其實不是。這個字體打出來就是專業,非常的現代。字體都是采用目前最主流的疊加效果,特別適合做一些海報或者單獨使用。

          圖片

          支持大小寫,筆畫非常簡約圓潤,適合年輕產品使用,并且配合很高級,看起來不違和,當然你可以自定義配色。

          圖片

          還可以直接拿這套字體做創意背景元素,用在背景上也非常好看,直接可以當背景使用。

          圖片

          這是我隨便P的一組,是不是也不錯,你可以大膽拿這些數字去做背景或者疊加效果。

          圖片

          當然這套字體也是免費,無版權支持商用,喜歡的話點贊收藏,文末都已經打包好,可直接領取。

           

          三、FREE FAT FONT 

          圖片

          我一直在尋找一款能做英文營銷設計,并且非常有力量,設計很特別的字體??上в⑽墓P畫都比較細很難找到那種像方正黑體充滿力量的字體,直到我遇見了這個字體FREE FAT FONT,像名字一樣非常的粗壯充滿力量感。

          圖片

          整個設計非常飽滿,特別適合用在包裝設計上,比如上圖冰淇淋設計就運用了這個效果。

          圖片

          FREE FAT FONT 也非常適合潮流產品設計,比如一些潮流酷炫的場景,運用這個字體能夠彰顯個性和年輕化。

          圖片

          同時這個字體也有點復古感,比如上圖我隨便拿了一個80年代磁帶搭配了一下,效果也非常不錯。如果你的產品想體現復古和潮流感,又希望有一個粗壯有力的字體,用這個準沒錯。無論做概念設計還是包裝作品集效果都不差。

           

          四、Kage Pro 

          圖片

          一款好的英文字體不僅僅能讓產品有自己獨一無二的氣質,同時在設計上也是錦上添花。襯線字體因為獨特的古典氣質,一直受設計師喜歡。比如Kage Pro這款,兼備古典美和現代氣息。

          圖片

          隨便找個人物照片,簡單地排版一下,效果就出來了,非常優雅簡約。

          圖片

          比如這個網頁,是一個輕奢設計,整體色調暖色和金色。金色其實稍微有點浮夸,需要一些視覺元素壓住,然后用上Kage Pro 字體后,瞬間效果上來一大截。

          圖片

          Kage Pro 字體的氣質非常優雅古典,如果你的畫面有些動感方向會更佳,如上圖人物是非常放松愜意的,這個字體運用上去和人物混為一體,讓讀者注意力不自覺地停留。

          圖片

          同樣這個字體在很多高端網站設計、移動端設計都大量運用。效果非常出挑,如果你在做一些海外設計或者概念設計,需要把你設計調性拉高,需要做出很貴很奢侈的感覺,直接用這套字體。

           

          五、Canava Grotesk 

          圖片

          我相信看到這里,很多同學會說蓋哥,有沒有一些適合用在UI的字體,當然了,我相信大家看到很多Behance一些APP設計,里面用的字體一定非常好奇,那么如果只讓我推薦一款,那肯定是Canava Grotesk了。

          圖片

          圖片

          UI的字體和平面不一樣,需要考慮識別度。比如上圖這個節目設計就是運用了Canava Grotesk字體,相對于蘋果原生英文字體會顯得更特別更有設計感,同時筆畫會更加時尚。

          圖片

          這個字體適用于電子產品,如上圖一個智能手環設計,就是采用的這種字體,清晰有力。設計師通過字重搭配讓整個畫面非常輕盈充滿科技感。字體也都已經打包好,大家直接文末領取。

           

          六、DST Helfita 

          圖片

          DST Helfita字體我第一次看見的時候,是上圖一個咖啡廣告,這個廣告除了運用咖啡豆子呼之欲出的感覺,最巧妙地把咖啡豆和字母結合。這個廣告就是運用的DST Helfita字體,非常廣告大牌,非常適合做廣告。如果你們的產品需要做廣告,需要醒目對比,可以試試這個字體。

          圖片

          用在這種AR/VR產品里面,一樣能有非常好的效果,一點不違和。而且這個字體的小寫字體很特別,相對很硬的科技字體,大小寫結合有一種說不出的特別感。

          圖片

          用在游戲畫面里面,是不是也非常有復古感,搭配簡單的背景顏色,以及游戲主元素,整個畫面簡約不簡單。

          圖片

          上圖是一個電影網站,整體畫面簡單,一個app界面一個DST字體,但是你不會感覺頁面很空,因為DST這個字體很多細節都充滿了設計感。

          圖片

          這個字體字重很多,你可以做大小對比,也可以做線框和圖形填充對比,效果很好。

          圖片

          具體效果多試試,上圖我找了個樣機,隨便貼上去這個字體,是不是像一個高級品牌。

           

          七、GEON 

          圖片

          相信大家是不是看見過上圖這樣的設計,不會以為設計師設計的圖形吧,其實是一個字體GEON,說實話我都有點舍不得分享給大家。這個字體非常個性化,適合用在一些潮流產品。

          圖片

          每個字母都是黃金比例,非常有現代感,哪怕筆畫識別度沒那么強,但是你一眼還是能知道是什么字母。

          圖片

          適合的場景比如游戲設計、個性化海報、潮流產品,字體充滿個性。同樣的這個字體也是無版權的,可以大膽使用。

           

          八、BD Megatoya 

          圖片

          如果你的產品是科技感非常強的,那我推薦這款BD Megatoya字體,同樣是無版權字體,如上圖,簡單的搭配一個效果就調性非常強,這款字體非常適合高科技產品。

          圖片

          上圖是一個可視化的產品,全部采用的這個字體,非常適合可視化。

          圖片

          電動汽車官網設計,這個字體搭配上去也毫不違和,簡約的字型和科技館汽車搭配的天衣無縫。

          圖片

          Apple Watch戶外廣告設計,也是運用的這個字體,它的字體字重能很好地把畫面對比拉起來。

          圖片

          圖片

          字體的設計,字距,對比,大小寫都設計地非常講究。

          圖片

          AR眼鏡發布會海報設計,就問你高級不高級。

          圖片

          運用在傳統雜志上,閱讀感也非常強,可以說是一款百搭的字體。大家快文末領取使用起來。

           

          九、Baunk 

          圖片

          這些年賽博朋克非?;?,包括科幻電影。里面很多設計都非常特別,我之前也一直在尋找一款科技感很強的字體,后面被我找到了這款Baunk。

          圖片

          這款字體筆畫很特別,很飄逸,很有未來感,如果你的設計是科技感很強,可以試試這個字體。

          圖片

          外星人筆記本設計,復古的銀色外殼,搭配這個機械感很強的字體,非常貼合。

          圖片

          我簡單搭配了下,找了一個機器人的圖,搭配了這個字體,是不是瞬間感覺是未來世界的。

          圖片

          再找一個高科技的未來機器人看看效果,好像也還不錯。

          圖片

          怎么樣搭配都行,所以這個字體哪怕你現在用不上,未來也一定會用上,我之前找了很多科技感字體,目前就這款最具未來感。

           

          十、Kurye Light 

          圖片

          Kurye Light是一款非常現代的字體,如上圖大小寫運用,讓我想起sony的設計,很科技現代,還帶一點點小小的個性化。比如小寫字母的y非常有線條感。

          圖片

          這個字體也是我心頭最愛,識別性強適合大面積文字閱讀,同時很有科技感。特別適合簡約設計。上圖隨便搭配一個簡約畫面效果就非常出色。

          圖片

          公司官網介紹這個字體也非常合適,如果我以后做一個公司官網,一定會用這個字體。

          圖片

          字體細節也比較考究,特別注意看小寫字體非常清秀和干凈。

          圖片

          斜體也是簡約大氣上檔次,怎么搭配怎么好看,關鍵還是免費。

          圖片

          做品牌設計也合適,比如名片設計,簡單一個色彩搭配,效果就出來了。

          圖片

          電商頁面設計,作為主標題小標題都合適。


          作者:Sky

          轉載請注明:學習網》你的設計太平了,2022開始流行用這種字體

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


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


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



          脈脈產品拆解丨1.1億職場人士為什么使用脈脈?

          seo達人


          脈脈,作為職場社交行業的獨角獸,在他們的產品更新日志里,這段話已經使用快2年。相信大家都使用過或聽過脈脈。在脈脈,你可以通過人脈探索去認識眾多互聯網大廠的高端人才,也可以認識很多創業公司的CEO。它的「職言版塊」甚至被人比喻為互聯網大廠的茶水間、紀檢委,你可以在那里獲取到很多互聯網大廠的八卦信息。本期「設計大偵探」的職場產品專題,讓我們一起拆解脈脈,看看這個產品到底是如何設計的。

          圖片

           

          一、導讀

          1.、內容結構

          全文10396字,分為六個部分,分別是導讀、產品畫像、內容服務、求職服務、會員服務和結束語。

          「導讀」可以幫助你快速了解這篇文章是否適合你閱讀;「產品畫像」從商業模式、用戶角色到迭代記錄,讓你對脈脈有一個全面的了解;「內容服務」是實現用戶留存的關鍵,主要拆解了社區、人脈和消息三個版塊的內容;「求職服務」是商業變現的重要方式,主要拆解了求職端、招聘端和企業空間等內容;「會員服務」主要拆解了用戶中心和脈脈的會員VIP體系。

          圖片

           

          2、適合人群

          產品拆解是一個知識點比較密集的分析形式,主要適合三類人群。第一類,UI/交互設計師,可以跳出執行層,去思考脈脈的產品設計策略,提升產品分析能力;第二類,產品經理/運營,通過全面的產品設計拆解、策略推導,獲取產品設計參考;第三類,網絡招聘及社交行業從業者,通過對脈脈的全面拆解,獲取競品設計參考。

          圖片

           

          3.、分析模型

          我們主要運用三種模型對產品的功能、設計進行拆解,由于沒有權威的官方數據,所以我們更多以推導的形式去思考脈脈為什么這樣設計。

          第一個,增長模型。由戴夫·麥克盧爾提出,包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦,分別對應用戶生命周期中的5個重要環節,主要用于分析產品的功能價值。

          第二個,上癮模型。由尼爾·法埃爾提出,通過對上千種習慣類產品的調研,總結出一款產品如果要讓用戶習慣、上癮,可以按照觸發、行動、多變的酬賞和投入四個步驟去設計,主要用于分析產品的功能價值和推導產品的策略設計。

          第三個,社會心理學。主要結合西奧迪尼的社會心理學《影響力》六大說服力原則——互惠、承諾和一致、社會認同、喜好、權威和稀缺,去推導產品設計的用戶心理設計,主要用于推導產品的策略設計。

          圖片

           

          二、產品畫像

          1.、產品介紹

          脈脈是一款職場社交的APP,首個版本于2013年10月上線,在國內首次提出了“真實職業形象”與“人脈共享”概念,致力于利用科學算法打通“同事、同學、同鄉、同校、共同的朋友”五同關系,助力中國職場人塑造個人職業形象,拓展人脈機遇;助力企業打造雇主品牌,通過脈脈平臺的人才銀行長期獲取并儲備中高端人才。

          圖片

           

          2.、商業模式

          脈脈以“成就職業夢想”為價值主張,深耕職場社交行業,目前穩居行業第一。用戶群體主要分為C端職場人士和B端企業。脈脈打造了社區、求職招聘、脈課堂等核心業務,吸引了3000萬+互聯網中高端人才;脈脈的盈利模式主要依靠會員服務、求職招聘業務以及廣告服務。

          圖片

           

          3、用戶角色

          脈脈作為一個社交平臺,用戶角色主要分為C端用戶和B端企業用戶。

          C端用戶根據需求可以分為兩類,第一類是普通用戶群體,這類職場人士主要包含基層職員、中層職員、高管、總監和CEO等,他們的需求很簡單,了解行業氛圍、獲取分享經驗以及拓展人脈;第二類是特殊用戶群體,包含獵頭、HR以及各類銷售,他們的需求是通過脈脈認識更多的職場人士,建立好友關系后,嘗試銷售公司的產品或服務。

          B端企業用戶主要通過脈脈建立企業脈脈主頁,提高企業知名度和形象,其次也可以通過脈脈招募人才。

          圖片

           

          4、用戶畫像

          脈脈的核心用戶人數以男性為主,占比77.36%;24-35歲年齡段的用戶居多,占比55.6%;用戶的消費力很強,中等和中高消費者加起來占比67.97%;用戶主要分布在一線、新一線和二線城市,其中以廣東和北京最多。

          圖片

           

          5、信息結構

          「脈脈」主要分為社區、人脈、職位/招人、消息和用戶中心五大版塊。「社區」是脈脈最核心的內容,包含了「推薦」、「熱榜」和「同事圈」三塊內容;「人脈」提供好友管理,人脈探索,還有查看朋友動態;「職位」是求職服務,用戶可以上傳簡歷找工作;如果是一個招聘者,可以在職位切換到招人狀態,發布崗位后就可以招募人才;「用戶中心」就是用戶的管理中心,儲存了用戶在產品使用的各種數據,比如影響力、好友數等。

          圖片

           

          6、重要迭代記錄

          根據官方數據,脈脈首個版本發布于2013年10月。截止到9月1日,脈脈APP已經更新到V6.2.22版本,近一年版本更新次數達到39次(來自七麥數據)。

          版本迭代重要記錄

          2013年10月,發布V1.0版本,正式推出脈脈,包含人脈管理、職場交流、求職招聘等功能;

          2015年10月,發布V4.0.0版本,界面全新升級,推出「人脈辦事」等功能;

          2019年2月,發布V5.0.4版本,主界面全新改版,升級企業Logo形象;

          2021年2月,發布V6.0.10版本,產品全新升級;

          圖片

           

          7、產品生命周期

          目前脈脈官方公布用戶數已經超過1.1億,從易觀千帆2022年5月份平臺數據顯示,脈脈的活躍用戶人數547.53萬,行業獨占率31.68%,是職場社交細分行業的老大,目前產品已經進入產品生命周期的成熟期。

          圖片

           

          三、內容服務

          作為一款社區類產品,「內容服務」是實現用戶留存和傳播拉新的關鍵。脈脈作為一款職場社交產品,為用戶提供了一個內容豐富的社區,包含了「職言」、「職業圈」、「行業」等熱門分類,而且采用UGC的模式實現內容由用戶共創,其次為用戶提供了豐富的人脈探索和管理工具,甚至像微信一樣,提供群聊、發送文件、加入黑名單等功能。最終幫助用戶在社區找到自己感興趣的話題,和有興趣的朋友建立關系,成為產品的忠實粉絲。

          圖片

           

          1、社區

          脈脈「社區」的設計,采用了信息流的推薦方式,千人千面,根據每個用戶的興趣進行推薦內容。在內容設計方面,根據話題熱度設計了「推薦」和「熱榜」;根據人際關系設計了「同事圈」、「職業圈」和「好友圈」;根據發布類型,設計了「動態」、「職言」、「提問」、「創作模版」、「視頻」和「文章」六個類型。

          1.1 推薦

          1.1.1 全部

          「全部」就是脈脈的首頁,采用千人千面的信息流方式設計,用戶進入脈脈后,可以從這個欄目看到平臺根據你的興趣、職業標簽推送的最熱門和最新發布的內容。

          圖片

          1.1.2 職言

          「職言」主要是和職場相關的內容,這個欄目被喻為互聯網大廠的茶水間、紀檢委,你可以在那里獲取到很多互聯網大廠的八卦信息。為了鼓勵用戶大膽發言,脈脈設計了社區匿名身份發帖的形式,這樣無論你寫什么內容,其他人也不知道你的真實身份,有效提升了用戶參與度和活躍度。但外界對這個欄目的評價其實褒貶不一,甚至也為脈脈惹了不少大廠的官司,追賠名譽損失。

          圖片

          1.1.3 門道

          「門道」的內容主要來自KOL、知名媒體和社區優質創作者,質量高,以商業、互聯網和職場內容為主。這個欄目的設計,主要提升社區的內容質量,提升用戶使用產品的時間。其次通過對優質內容的精選,也可以鼓勵用戶嘗試高質量的創作,進一步豐富社區的內容。

          圖片

          1.1.4 職業圈

          「職業圈」是根據用戶的職業標簽來進行分類,目的是為用戶提供更專業的話題,提高用戶活躍度。目前脈脈的「職業圈」只有后端研發、設計、運營等6個小圈子,其他的暫未開放。

          圖片

          1.1.5 行業

          「行業」的內容非常垂直,主要聚合了某個行業的話題動態,從而了解這個行業就職的基本情況,同時也支持用戶切換其他行業。

          圖片

          1.2 熱榜

          「熱榜」分為熱帖、話題和行業,「熱帖」每天精選社區30篇帖子,「話題」每天精選10個話題,「行業」每天精選15篇帖子。這個欄目的設計不僅可以精選出社區優質和熱門的話題,還可以給用戶帶來社交酬賞,吸引用戶創作優質的話題內容。

          圖片

          1.2.1 話題廣場

          「話題廣場」目前入口很深,在用戶中心的社區服務才能進入,這個欄目主要聚合了社區的熱門話題,引導用戶參與創作,最終提高用戶的創作參與度。

          圖片

          1.3 同事圈

          「同事圈」主要為公司的員工提供一個私密交流的版塊,用戶需要實名認證,公司也同步開通同事圈以后才能使用這個功能,目前顯示有字節跳動、百度、騰訊等互聯網大廠都開通了同事圈。不過,這個版塊的設計從用戶真實的角度去思考,有點雞肋,誰都不愿意在下班以后還要去談論工作。

          圖片

          1.4 搜索

          「搜索」是社交平臺一個非常重要的功能,它可以幫助用戶快速檢索到用戶想查找的公司、朋友信息。

          1.4.1 引導頁

          「引導頁」包含了搜索歷史、搜索推薦、熱門搜索、公司榜和找人榜。不僅為用戶提供豐富的內容,還為社區的熱門話題進行引流,比如熱門搜索,可以告訴用戶今日熱點,吸引用戶訪問。

          圖片

          1.4.2 結果頁

          「搜索結果頁」分為綜合、找人、社區、職位、實時、問員工和話題,顆粒度非常細。這樣的設計,可以幫助用戶檢索到比較精準的內容。

          圖片

          1.5 發布

          脈脈作為一個UGC社區,內容由用戶生產。用戶發布的內容又分為動態(實名身份發布)、職言(社區身份發布)、提問(可以邀請大廠大佬回答)、創作類型(提供Offer比較和面試經歷分享模版)、視頻和文章。

          1.5.1 發布功能

          用戶在內容發布頁面,可以選擇參與各種熱門話題,用戶還可以創建投票,分享微博、頭條、公眾號等熱點資訊鏈接。

          圖片

          1.5.2 職言話題

          「職言」是脈脈社區最核心的一個內容版塊,當用戶點擊發布職言后,系統會提醒用戶采用社區身份進行發帖。脈脈的「職言話題」設計得很豐富,這主要是引導用戶,提高用戶參與度。話題分為熱議話題、找工作、能力進階、職場關系、趣味現象、生活交友、解壓互助和節假日8大類型,每個類型下面還包含了數十種話題類型,這些話題組成了脈脈社區的核心內容。

          圖片

           

          2、人脈

          當用戶之間相互關注、添加好友以后,就建立了關系,形成了人脈。「人脈」是實現用戶留存的關鍵,只有用戶認識了他想認識的朋友,才能形成強關系鏈接的社區。

          2.1 好友管理

          在人脈頁面,用戶可查看已添加的好友、最近的申請、對我感興趣的人和待處理的請求。其次平臺還會根據你的標簽、職業、學校、地區等維度進行深入的人脈挖掘。

          圖片

          2.1.1 用戶主頁

          ①頭部展示用戶的詳細信息,包含頭像、姓名、公司、職位、家鄉等信息,其次會統計用戶之間的共同好友,有效拉近用戶之間的距離,吸引用戶建立關系;

          圖片

          ②從第二屏開始,依次展示用戶動態、工作、項目和教育經歷;在底部,設計了一個「看了他的人還看了」的好友列表,吸引用戶繼續深挖關系鏈接;

          圖片

          ③添加好友的方式有兩種,第一種是「極速聯系」,用戶開通VIP以后可獲取好友的電話等聯系方式,快速聯系;第二種是普通的好友申請,需要好友審核通過后才能成為好友,其次普通用戶每個月只有5個免費的添加好友名額,超出5個以后,需要開通VIP會員才能添加。

          圖片

          2.2 人脈探索

          「人脈探索」有七個維度,分別是根據職業標簽推薦、人脈發現、平臺推薦、同事、校友、同鄉和同行。用戶可以根據這七個維度進行人脈探索,找到你想認識的職場人士。

          圖片

          2.3 動態

          「動態」類似于朋友圈,用戶可以參與社區的熱門話題,也可以發心情、問好友和發動態。其次用戶還可以把好友加入到「好友圈」,第一時間閱讀他們的動態和職位變動等信息。

          圖片

          3、消息

          「消息」主要為用戶提供對話交流?!赶㈩愋汀怪饕譃閯討B提醒(邀請參與、評論和點贊)、主動溝通、好友消息和未讀消息。其次脈脈也提供建立群聊、加入黑名單等功能。

          圖片

          3.1 聊天對話框

          ①當用戶處于離線狀態,脈脈會提供一個短信通知對方的功能。用戶需要購買商務會員VIP,才能使用。

          圖片

          ②當用戶開始聊天后,會員可向好友申請「交換手機」號碼,而普通用戶也可以對廣告用戶設置「加入黑名單」,直接屏蔽用戶消息;

          圖片

          ③脈脈還支持發起群聊,可以邀請多個好友建立群聊溝通。

          圖片

           

          4、小結

          從社區內容觀察,脈脈的內容其實主要分為兩種類型,一種是「個人動態」,另一種則是「職場話題」?!競€人動態」滿足了一個社區用戶最基本的社交需求,而「職場話題」才是脈脈實現用戶留存的關鍵。

          從脈脈的「話題廣場」內容設計可以看出,脈脈對職場人士關注的焦點都挖掘得十分精準。從找工作、能力進階、職場關系到解壓互助,脈脈都設計了開放、可傳播的話題,引導用戶參與社區的創建。

          最后,為了提高社區的內容質量,增強用戶黏性,脈脈還設計了「門道」欄目,邀請頭部的KOL和知名媒體參與社區內容建設,滿足各類用戶的需求,形成內容閉環。

          從人脈拓展形式看,脈脈提倡的「五同關系」,是整個社區用戶形成關系鏈的核心。通過同事、同校、同鄉和同行這四個維度的鏈接,充分挖掘二度、三度人脈,最后成為共同的朋友。

           

          四、求職服務

          脈脈擁有1.2億職場社交實名用戶,吸引了眾多互聯網大廠企業加入。作為一個鏈接雙端用戶的平臺型產品,「求職服務」是脈脈的核心服務,是商業變現的一個重要方式,它為求職者提供工作推薦,為招聘者提供人才推薦。

          圖片

           

          1、求職者

          脈脈為求職者提供了「在線簡歷」、「職位收藏」、「求職偏好」等功能?!冈诰€簡歷」支持附件簡歷上傳,有效節省用戶創建簡歷的時間成本。

          圖片

          1.1 求職機會

          「求職機會」是平臺根據用戶的求職偏好進行系統推薦,幫助用戶和招聘方建立更高效的溝通。

          圖片

          1.2 職位詳情頁

          ①頭部展示崗位的基礎信息和HR的聯系方式,用戶如果要想和HR溝通需要開通VIP會員;如果所在公司有好友,則會顯示擁有好友內推機會。

          圖片

          ②在展示完「職位詳情」以后,加入了「公司介紹」,目的是提升崗位的信任度,讓用戶進入企業的主頁進行更全面的了解;

          圖片

          ③在底部,脈脈還提供了「職位真相」、「薪資揭秘」和「職場晉升路徑」的VIP服務,用戶可以購買該崗位的晉升空間和發展評估。

          圖片

           

          2、招聘者

          脈脈沒有單獨為招聘者設計「招聘端」,在「求職」的右上角可以直接切換成招聘者的身份。脈脈為招聘者提供了「簡歷查收」、「職位互動」、「人才庫」等功能,略顯單薄,比較基礎。脈脈的招聘服務目前看上去更側重于定制化的人才解決方案為主,企業沒有免費發布職位的次數,如果需要發布,就需要開通招聘會員VIP,798一個季度,相對其他求職產品來說,定價略高。

          圖片

           

          3、企業空間

          脈脈的「企業空間」吸引了眾多行業的大廠入駐,比如像新媒體行業的字節跳動、社交行業的騰訊、電商行業的阿里巴巴等等,在企業空間,幾乎可以查詢到你所關注的互聯網大廠,從而獲取精準的信息。

          圖片

          3.1 企業空間主頁

          ①頭部介紹了企業的基礎信息,包括員工數量、職位數量和公司簡介等;其次還提供了公司的評分,用戶可以給公司打標簽,評分;

          圖片

          ②脈脈為用戶提供了查詢「職級薪資」的功能,可以通過這個功能查看像字節、騰訊等公司的薪資體系;

          圖片

          ③「企業號」由企業自己運營,主要向用戶對外展示企業的信息,包含了主頁、動態、職位、產品和相冊等信息,其次還可以查看該公司在脈脈的員工總數;

          圖片

          ④「求職揭秘」關聯了和公司相關的話題,而且像字節這樣的大公司,還會分部門展示內容,滿足求職者的好奇心,也支持用戶直接發帖提問;「崗位招聘」則是展示企業對外招聘的所有崗位,用戶可根據自己的求職意向進行投遞簡歷。

          圖片

          3.2 職得去榜單

          「職得去榜單」設計得非常有創意,這個榜單不僅可以作為企業空間的標簽之一,而且還增加了產品的樂趣,比如「脈有最愛投排行榜」,這樣的設計可以利用攀比心理,相互倒逼,提高用戶活躍度。

          「職得去榜單」主要包含「脈友入職熱榜」、「脈友最愛投」、「薪資福利榜」、「大廠員工新去處」、「名校生最愛去」、「業務前景榜」、「最無年齡焦慮公司」、「團隊氛圍榜」、「個人發展榜」、「投遞極速響應榜」和「應屆生最愛去公司榜」11種榜單,另外還設計了「女性友好公司」、「創投機構推薦企業」和「2021年度多維度優質雇主」。不過遺憾的是,這些榜單的權重比較低,入口很深,而且內容略顯單薄,做得不夠深。

          圖片

           

          4、脈課堂

          「脈課堂」是一個知識付費欄目,內容主要包含同行精選、副業投資、技能提升等內容,以錄播的系統課程為主,價格較低。這個欄目主要幫助求職者通過知識學習提升職場、技能方面的能力,增加商業變現手段。不過目前入口較深,權重較低。

          圖片

           

          5、職場福利

          「職場福利」是一個充滿創意力和趣味性的欄目,雖然活動的數量少,活動頻率低,不過可以看出脈脈的用戶運營創新能力非常強。

          圖片

          5.1 健康加油站

          「健康加油站」是脈脈聯合「中國職工發展基金會」為關愛職場人群身體健康策劃的一個欄目,用戶可以在這個欄目發布關于身體健康的話題,有健康專家專門為用戶解答,另外還為用戶提供健康科普、課堂講座等內容。這個欄目以關愛用戶身心健康為主,有效提升了品牌服務的溫度。

          圖片

          5.2 最熱脈

          「最熱脈」是一個特別有趣的欄目。它的內容是以產品測評為主,比如OPPO的新款Find N折疊屏,通過和脈脈的合作,招募了一批不同職業的評測官,有產品經理、開發、運營、設計師,他們從不同的角度去體驗產品,然后發表真實客觀的評測分享,最終有機會贏取企業贊助的大獎。這個欄目,增加脈脈運營的趣味性,比如還有一個評測是體驗面膜,這對女性用戶來說,實在是太受歡迎了。

          圖片

          5.3 職場關愛聯盟

          「職場關愛聯盟」是由脈脈聯合企業一起打造的線上線下活動沙龍,主題多以關注職場人士健康為主,比如脈脈聯合了京東打造「職場健康關愛季」,還有聯合神州租車打造「出行旅游的解壓活動」。脈脈用戶均可以一鍵報名,無需任何門檻,這樣的運營設計有效提升企業服務的溫度,拉近和用戶的距離,提升品牌忠誠度。

          圖片

           

          6、職趣實驗室

          「職趣實驗室」和「職場福利」的定位很相似,不過這個欄目更側重娛樂和解壓,通過設計一些創新的職場游戲,緩解職場人士工作壓力,提升用戶活躍度。

          圖片

          6.1 員工面對面

          「員工面對面」是一個問答話題集合,以“找工作前,先問員工”的設計理念,脈脈會把求職者最關心的薪資、Offer等熱門問題搜集整合,為職場人士提供一份職場問答寶典。

          圖片

          6.2 人脈升遷名單

          「人脈升遷名單」主要指離職好友的升遷名單,通過好友的人脈二度挖掘,用戶可以拓展更多的新人脈資源,結成好友。

          圖片

          6.3 好友印象墻

          「好友印象墻」有兩種玩法,第一種,發送自己的印象給指定的好友,增強互動,比如朋友心中我最擅長的事情;第二種,回答好友的印象,比如“你覺得我是什么性格”等。這個內容版塊的目的是提升好友之間的互動頻率,加強關系鏈接,最終提升用戶活躍度。

          圖片

          6.4 職場競爭力計算器

          「職場競爭力計算器」的玩法比較簡單,用戶輸入自己的職級、地區、就業方向、工作年限、學歷和月薪后,系統會通過數據分析,為用戶生成一份職場競爭力報告,包含同行的流動情況、崗位競爭力對比、平均在職時長年限、同齡人職級晉升百分比和平均薪資數據。用戶還可以隱藏薪資,下載長圖分享到朋友圈。通過這種游戲化的設計,不僅可以全面幫助求職者獲取目前的職場狀態,還可以增強產品的權威性和用戶活躍度。

          圖片

          6.5 硬核職場攻略

          「硬核職場攻略」通過職場中最常見的12個場景,比如遇到暴力裁員怎么辦、如何在線獲取新客戶等,再結合脈脈的核心內容,為求職者提供一份全面的職場難題解決攻略。這個內容的設計,就像一份脈脈的用戶使用手冊,不僅可以幫助用戶解決實際的難題,還能提升用戶忠誠度。

          圖片

          6.6 被推薦數據分析

          這個欄目目前正在公測中,每周統計發布一次,主要向用戶展示當周個人名片通過哪些場景、功能、標簽推薦給其他人。對于以職場服務、營銷為主的職場人士,這個數據統計價值很高,可以通過數據去針對性設計優化,提升自己的曝光度。

          圖片

          6.7 藍月職場生存測試

          「藍月職場生存測試」是一個基于脈脈職場發展模型(決策、感知、控制、協作、自取和信念)設計開發的H5游戲,主要對用戶進行情景式壓力評估,幫助測試者更清晰的理解自己的職場生存能力。這種結合職場設計的游戲,沉浸感非常強,再加上充滿了懸疑的劇情,可以極大提升用戶活躍度。

          圖片

          6.8 1024程序員鑒別挑戰賽

          這個游戲的設計非常創新,為了致敬偉大的1024程序員,設計了一個程序員鑒別的挑戰賽。當用戶發起挑戰以后,需要根據照片和提示找出對應數量的程序員,當你提交答案,還會關聯到用戶的脈脈主頁,提升曝光度。這個游戲還設計了游戲難度,根據臉型、發型、衣服、背包、鞋子和眼神不斷提升游戲難度,讓用戶越玩越上癮,提高用戶活躍度。最后還設計了「我的戰績」這個內容,統計用戶在這個游戲中的最佳戰績,找到的程序員,進一步吸引用戶添加好友,建立關系鏈。

          圖片

           

          7、小結

          從求職端和招聘端的拆解可以看出,雖然網絡招聘已經成為脈脈商業變現的核心手段,但「求職服務」還非常單薄。特別是招聘端,相比網絡招聘的頭部企業如前程無憂、智聯招聘和BOSS直聘,脈脈還有很長的路要走。

          不過脈脈的產品運營創新力非常強。比如「最熱脈」,脈脈通過平臺高端的用戶資源,聯合其他品牌設計了非常創新的產品評測活動,不僅提升了用戶活躍度,還實現了商業變現。還有「藍月職場生存測試」這個國內首部職場沉浸式互動測試游戲,不僅成為現象級互聯網行業營銷案例,也把脈脈的創新能力體現得淋漓盡致。

           

          五、會員服務

          「會員服務」主要包含了「用戶中心」和「會員VIP服務」,其中「會員VIP服務」是脈脈實現商業變現的重要手段,不僅包含了B端的招聘服務,還有C端各種權益服務,是脈脈的核心收入來源之一。

          圖片

           

          1、用戶中心

          1.1 影響力

          「影響力」就像積分,它是一種社交酬賞,用戶可以通過提問、評論、發布文章等行為獲取社區影響力。其次,通過每日做任務提升「影響力」的形式,進一步提升用戶活躍度,增強用戶黏性。最后,脈脈還設計了一個「影響力排行榜」,根據全國、地區、同行和好友的維度進行排名,進一步利用用戶的攀比心理,刺激用戶完成更多任務提升「影響力」。

          圖片

          1.2 創作者中心

          作為一個UGC為內容生產模式的社區平臺,為了鼓勵用戶創作,脈脈為用戶設計了「創作者中心」。用戶可以在創作者中心可以查看自己的創作等級,完成平臺每日設計的任務,參與社區熱門的話題。

          圖片

          1.2.1 內容分析

          「內容分析」包含了「最近7天被閱讀總量」、「同行同工種的閱讀量」、「昨日獲得互動次數」等內容,主要幫助職場創作者獲取全面的創作數據分析,提供一個強大智能的數據助手,從而提高用戶參與度。

          圖片

          1.3 勛章墻

          「勛章墻」分為三類,第一類是「活躍成就」,分別是「社區主R」、「評論區區長」和「劃水的魚」;第二類是「達人認證」,分別是「行業老師傅」、「脈警長」、「反向背調者」和「offer收割機」;第三類是「創作勛章」,分別是「社區人氣王」、「頂峰見」、「神評王」和「評論區樓長」。通過如此多變性的勛章設計,可以利用社交酬賞提高用戶的社區活躍度。

          圖片

          1.4 人氣周報

          「人氣周報」和「職趣實驗室」的「被推薦數據分析」很相似,未來不知道會不會合并。目前主要是根據用戶每周的曝光數據生成當周的數據報告,比如曝光次數、人脈推薦、機遇推薦等。

          圖片

           

          2、會員VIP

          脈脈擁有眾多用戶角色,他們設計了5種會員VIP,滿足了不同用戶群體的需求,豐富了產品的變現形式,而且定價均不便宜,吸金能力很強。

          2.1 商務會員

          「商務會員」主要幫助用戶開拓精準人脈,購買后可享受12項特權,包含影響力加速、5次極速聯系、30個添加好友機會、尊貴標識等服務,售價68元每月,屬于脈脈最基礎的會員服務。

          圖片

          2.2 VIP會員

          「VIP會員」相比「商務會員」,價格翻了近3倍,售價198元每月,核心賣點是高端人脈的拓展,比如互聯網大廠的高管等。用戶購買后可以享受13項特權和更多權益,比如15次極速聯系、90個添加好友機會、聯系高端人脈等。

          圖片

          2.3 招聘個人會員

          「招聘個人會員」主要面向企業招聘者,購買后可享受17項特權,包含可發布5個職位、提供每月30次的及時溝通、批量職位職能邀約和解鎖招聘人才庫擴大搜索范圍等服務。目前這個服務以7天試用的形式吸引用戶開通,到期后價格定價798元一個季度,相比其他網絡招聘產品,價格略高。

          圖片

          2.4 銷售會員

          「銷售會員」主要幫助有職場銷售場景的用戶挖掘商機拓客,購買后可享受18項特權,包含動向智能追蹤潛在客戶、獲取平臺的精準線索推薦、專享定制化的線索高級搜索等服務。這個服務定價198元每月。

          圖片

          2.5 職業發展會員

          「職業發展會員」主要是面向個人求職者,購買后可享受15項特權,包含簡歷置頂、數據洞察、雙倍曝光、求職立即溝通等服務。這個服務定價58元每月,相比「商務會員」,更側重于求職的服務,幫助求職者提升求職效率。

          圖片

           

          3、小結

          從會員體系看,脈脈的付費會員體系拆分成了「商務會員」、「VIP會員」、「招聘個人會員」、「銷售會員」和「職業發展會員」。這主要是因為脈脈有多種用戶群體,需求都不相同,這樣的設計可以滿足不同的用戶需求。比如對于一個普通的職場人士,他可能就只有求職的需求;而對于一個有HR、銷售人員,他們則需要添加更多的好友、更豐富的功能。

          從商業變現能力看,脈脈以手握中高端職場人士資源為賣點,會員定價相比其他網絡招聘或社交產品都貴。比如智聯招聘,企業會員注冊后可以免費發布5個崗位,BOSS直聘甚至只需要開通一個每月50元的會員就能開始發起招聘,而脈脈的門檻則比較高。從用戶畫像也能看出,脈脈的用戶以中高等消費群體居多。

           

          六、結束語

          距離產品2013年首個版本上線時間已經快九年,在拆解完脈脈后,我特意梳理了一下脈脈過去九年的價值主張的升級(數據以七麥數據為主)。

          2013年10月,脈脈首個版本推出,價值主張打造“真實職業形象”。

          2016年3月,脈脈的價值主張是打通職場人脈;

          2017年5月,脈脈的價值主張升級到——職場人都在用的社交APP;

          2018年4月,脈脈把自己定位成一個——職場社交神器;

          2019年2月,脈脈全新升級,致力于打造一個職場社交平臺,成為職場人追捧的社交神器;

          2020年8月,脈脈用戶數突破1億用戶,成為1億職場人士人脈拓展、求職招聘的平臺;

          2021年9月,脈脈再次升級,以“成就職業夢想”為價值主張,并沿用至今。

          可以看出,脈脈作為職場社交行業的后起之秀(Linkedin成立于2003年,天際網和若領網成立于2004年,Glassdoor成立于2007年),設計了一套適合中國職場人士的社交產品,經過多年的努力,成為了中國職場社交的獨角獸。雖然很多人還會嘲笑脈脈其實只是互聯網的一個茶水間,以看八卦、嗑瓜子為主。但脈脈的產品團隊以“成就職業夢想”為企業愿景和產品目標,在這條路上不斷努力著。

          就像脈脈創始人林凡對職業夢想的定義——中國正經歷熟人社會向生人社會的轉型,脈脈正在堅持努力的,就是跟隨眾多有夢想的職場人士和優秀企業一起探索出一條科學、高效并且緊跟時代步伐的職業成長之路,成就全球十億白領的職業夢想。

          這個夢想,也許就是脈脈能吸引1.1億職場人士使用的動力之一。

           

          參考文獻:

          易觀千帆-脈脈APP數據分析

          七麥數據-脈脈APP數據分析

          脈脈官網


          作者:廖慶

          轉載請注明:學UI網》脈脈產品拆解丨1.1億職場人士為什么使用脈脈?

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


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


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


          3個案例,正確理解B端產品中的一致性原則

          seo達人


          一、一致性的價值

          工作過程中,當產品或者開發問到一些設計細節時,設計師很容易回答“與XX功能保持一致就可以了”。這在工作中應該比較常見,也比較容易理解,沿用以往的設計形式省時、省心,何樂而不為呢?

          另外設計側主動建立產品設計規范,很大程度上也是為了做好設計管控,保證產出的一致性,所以一致性的價值是毋容置疑的。

          當然除了產品體驗提升外,「一致性」對產品設計開發也有幫助。

          (1)降低設計成本,提高開發效率

          無論是設計還是開發,復用已有的組件資源,保持界面的一致性可以有效地減少設計的投入,避免不必要的設計分歧點。

          而在開發階段,可以避免重復造輪子,提高開發的效率,保證落地效果,也可以減少上線前設計走查、測試的工作量。

          (2)形成一致的設計風格

          根據原子設計理論,通過原子組件的一致性,可以構建出統一的界面框架、布局,形成統一風格和用戶交互認知,從而更好地保證用戶體驗質量。

           

          二、一致性思考的維度

          不過「一致性」并不是強制性的標準,而是要以提升用戶體驗為目標靈活應用。實際落地執行時,要根據產品定位、用戶場景,結合業務功能來確定設計方案,不能為了一致而一致。

          當我們遇到一致性問題時,還是需要從以下3個方面深入思考,做出準確合理的設計決策。

           

          1. 符合產品定位

          傳統的B端產品都是本地化私有部署,功能僅面向企業內部用戶和實際的業務場景。業務屬性更強,因此頁面的結構形式相對更加統一。

          但是隨著SaaS產品的興起,B端產品功能更加豐富,場景和服務更加多元。

          例如面向個人用戶和團隊協作的工具型產品,產品定位首先要滿足個人用戶的服務,獲得足夠的用戶流量,因此大都開放注冊并提供免費的基礎服務。在此基礎上,通過差異化的增值服務獲得商業變現,例如會員特權服務、團隊服務等等。

          因此在頁面結構上既要滿足業務功能的需要,又要考慮運營推廣信息的展現,單純地追求一致性是無法滿足產品定位的。

          例如騰訊文檔,首先滿足用戶日常在線文檔編輯協作需求,采用的是管理端布局。

          圖片

          而「模板庫」屬于增值服務,則采用了版心卡片式設計。

          圖片

          在語雀中也是如此,個人「工作臺」界面采用了3欄布局結構,根據屏幕寬度自動縮放適配。而在「廣場」頻道中采用了版心定寬設計,「空間」頻道則變成了引流入口,點擊后通過瀏覽器標簽打開新的頁面,交互邏輯上也是不同的。

          所以當我們在做產品設計時,首先要從產品功能定位和商業模式出發,結合用戶需求,不能為了一致而一致。

           

          2. 符合用戶認知

          我們在做產品設計或者制定設計規范,不僅僅要考慮自身產品的一致性,還需要與行業內的產品保持一定的一致性。

          先看下面的2張圖,兩張都是PC端視頻會議的邀請界面。

          圖片

          不知道大家是什么感覺,剛開始我在PC上收到左圖的會議邀請時,下意識地想點紅色“拒絕”按鈕,需要思考片刻才能做出決策。或許設計師會說,設計已經遵從行業內的規范,利用紅、綠色區分了按鈕的功能屬性。

          但是無論是PC還是移動端產品,彈窗中的按鈕一般都是采用「右主+左次」的形式,這已經成為了大多數用戶的認知。左邊的視頻會議產品采用了相反的設計,違背了用戶的認知。雖然顏色在一定程度上可以降低用戶的誤判,但是很難改變用戶的認知習慣。

          另外PC端按鈕仿照「接聽電話」的設計形式,我接觸的確實不多,還沒有建立起綠色接聽、紅色拒絕的認知,所以產生了一定的困難。

          在界面設計時,一致性除了需要遵從產品內部的設計規范,也要考慮行業產品對用戶認知的影響,避免設計與用戶普遍認知產生沖突。

           

          3.符合用戶操作習慣

          依然是按鈕的例子。

          我們常見的表單頁面中按鈕和彈窗中的按鈕,位置和組合形式并不一致。

          圖片

          彈窗中通常采用的是「右主+左次」的形式,而表單頁面中大都采用的是「左主+右次」的形式。為什么出現這種差異呢?以下是我個人的理解。

          1)位置差異性分析

          根據「認知負荷>視覺負荷>動作負荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。

          相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區域。所以按鈕應該緊隨表單,便于用戶快速發現按鈕。如果將按鈕放置頁面右下角,或者頁面底部,用戶的視覺負荷更高。如下圖所示:

          圖片

          在緊隨表單內容的場景下,設計時優先考慮用戶「F型」瀏覽習慣的原則,將主要按鈕居左放置,更加強調主按鈕的信息。

          而在彈窗中空間更小,內容相對比較緊湊,更加適用于「古騰堡原則」,用戶的視覺終點會停留在右下角。而用戶的鼠標往往是停留在屏幕右側,所以主按鈕放置在右側,更方便用戶操作。

          2)對齊方式的差異性分析

          再擴展下對齊的思考,表單中按鈕為什么不與標簽對齊,而是與輸入框對齊呢?

          • 隱喻認知

          按鈕作為表單的操作項,可以認為與輸入框的性質是一致的,是需要與用戶發生交互的。而表單中左側的標簽則是信息區,主要承載的是用戶信息瀏覽。因此按鈕歸屬于交互區,需要與輸入框對齊。

          • 視覺要求

          標簽有3種布局形式,頂對齊、左對齊、右對齊。

          頂對齊場景下,標簽、內容區和按鈕三者對齊,不會出現什么問題。

          左對齊場景下,標簽需要預留一定的信息空間滿足長文本標簽的場景,如果按鈕靠左對齊會造成明顯的右側內容空白,讓整個內容區視覺重心不穩。

          右對齊場景下,除了視覺重心不穩,還會造成整體的視覺錯亂。如下圖所示:

          圖片

          所以按鈕與輸入框對齊,在視覺上整體更加協調。

          總結

          簡單總結下:

          1、「一致性」作為設計的基礎性原則是非常重要的,對設計、開發以及產品體驗的提升都有很大的幫助

          2、一致性原則不是強制原則,需要根據產品定位靈活變通地應用

          3、一致性的價值在于提升用戶體驗,需要符合用戶的認知和習慣

          好了,今天就到這里了,下期見~


          作者:子牧先生

          轉載請注明:學UI網》3個案例,正確理解B端產品中的一致性原則

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


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


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


          大數據掃盲

          seo達人




          一、什么是大數據?

          大數據就是任何超過了一臺計算機處理能力的龐大數據量。–JohnRauser。

          大數據代表了更多的信息,更多理解信息的角度。

          大數據,又稱巨量資料,指的是所涉及的數據資料量規模巨大到無法通過人腦甚至主流軟件工具,在合理時間內達到擷取、管理、處理、并整理成為幫助企業經營決策更積極目的的資訊。

           

          二、大數據的分類

          • 結構化數據,簡單來說就是數據庫。也稱作行數據,是由二維表結構來邏輯表達和實現的數據,嚴格地遵循數據格式與長度規范,主要通過關系型數據庫進行存儲和管理。結構化數據標記,是一種能讓網站以更好的姿態展示在搜索結果當中的方式,搜索引擎都支持標準的結構化數據標記。(員工的姓名,年齡等)
          • 非結構話數據,是與結構化數據相對的,不適于由數據庫二維表來表現,包括所有格式的辦公文檔、XML、HTML、各類報表、圖片和咅頻、視頻信息等。支持非結構化數據的數據庫采用多值字段、了字段和變長字段機制進行數據項的創建和管理,廣泛應用于全文檢索和各種多媒體信息處理領域。(員工的聲音,頭像等)
          • 半結構化數據是一種適于數據庫集成的數據模型,也就是說,適于描述包含在兩個或多個數據庫(這些數據庫含有不同模式的相似數據)中的數據。(員工的簡歷等)

           

          三、大數據的特點

          1、規模性(Volume)大數據的數據量是驚人的,隨著技術的發展,數據量開始爆發性增長,達到TB甚至PB級別。例如,淘寶網平常每天的商品交易數據約20TB(1TB=1024GB),全球最大設計平臺Facebook的用戶,每天產生的日志數據超過了300TB(日志數據是記錄用戶操作記錄的,并非發帖內容)。大數據如此龐大的數據量,是無法通過人工處理的。需要智能的算法、強大的數據處理平臺和新的數據處理技術來處理這些大數據。

          2、多樣性(Varity) 大數據廣泛的數據來源,決定了大數據形式的多樣性。大數據大體上可以分為三類,分別是結構化數據、非結構化的數據、半結構化數據。結構化數的特點是數據間因果關系強,比如息管理系統數據、醫療系統數據等;非結構化的數據的特點是數據間沒有因果關系,比如音頻、圖片、視頻等;半結構化數據的特點是數據間的因果關系弱。比如網頁數據、郵件記錄等。

          3、高速性(Velocity) 大數據的交換和傳播是通過互聯網、云計算等方式實現的,遠比傳統媒介的信息交換和傳播速度快捷。大數據與海量數據的重要區別,除了大數據的數據規模更大以外,大數據對處理數據的響應速度有更嚴格的要求。實時分析而非批量分析,數據輸入、處理與丟棄立刻見效,幾乎無延遲。數據的增長速度和處理速度是大數據高速性的重要體現。

          4、價值性(Value) 價值性是大數據的核心特點?,F實中大量的數據是無效或者低價值的,大數據最大的價值在于通過從大量不相關的各種類型的數據中,挖掘出對未來趨勢與模式預測分析有價值的數據。比如,某寶電商平臺每天產生的大量交易數據(大數據),通過一些算法可以分析出具有某些特征的人喜歡什么類型的商品,然后根據客戶的特征,給其推薦TA喜歡的商品。

          圖片

          軟件

          1.Docker Compose是一個用來幫助定義和分享多容器應用的工具。有了Compose,就能創建一個YAML文件來定義服務,只需要一個命令,就能夠啟動所有東西,也能夠把所有東西銷毀掉。

          2.Zeppelin是一個基于Web的notebook,提供交互數據分析和可視化。后臺支持接入多種數據處理引擎,如Spark,Hive等。支持多種語言:Scala(Apache Spark)、Python(Apache Spark)、SparkSQL、 Hive、 Markdown、Shell等。

          圖片

          3.Hadoop是由java語言編寫的,在分布式服務器集群上存儲海量數據并運行分布式分析應用的開源框架,其核心部件是HDFS與MapReduce。HDFS為海量的數據提供了存儲,則MapReduce為海量的數據提供了計算。

          4.Hive是基于Hadoop的一個數據倉庫工具,用來進行數據提取、轉化、加載,可以存儲、查詢和分析存儲在Hadoop中的大規模數據的機制。

          5.Hbase其實是Hadoop database的簡稱,是一種NoSQL數據庫,主要適用于海量明細數據(十億、百億)的隨機實時查詢,如日志明細、交易清單、軌跡行為等。

          tips: Hive適合用來對一段時間內的數據進行分析查詢。適合用來進行大數據的實時查詢。

          6.Spark是一種基于內存的快速、通用、可擴展的大數據計算引擎。它集批處理、實時流處理、交互式查詢、圖計算與機器學習于一體。

          tips: Spark是那么一個專門用來對那些分布式存儲的大數據進行處理的工具,它要借助Hadoop HDFS的數據存儲。Hadoop的MapReduce是分步對數據進行處理的,存取磁盤的過程會影響處理速度。Spark從磁盤中讀取數據,把中間數據放到內存中,完成所有必須的分析處理,將結果寫回集群,所以Spark更快。所以Hadoop + Spack結合起來用更好。

          7.JupyterLab是一個集 Jupyter Notebook、文本編輯器、終端以及各種個性化組件(有VScode內味了)于一體的全能IDE。

          8.prestoDB是一種開源的分布式 SQL 查詢引擎,從頭開始設計用于針對任何規模的數據進行快速分析查詢。它既可支持非關系數據源,例如 Hadoop 分布式文件系統 (HDFS)、Amazon S3、Cassandra、MongoDB 和 HBase,又可支持關系數據源,例如 MySQL、PostgreSQL、Amazon Redshift、Microsoft SQL Server 和 Teradata。

          9.TensorFlow是一個端到端開源機器學習平臺。它擁有一個全面而靈活的生態系統,其中包含各種工具、庫和社區資源,可助力研究人員推動先進機器學習技術的發展,并使開發者能夠輕松地構建和部署由機器學習提供支持的應用。

           

          四、主流的大數據架構Lambda

          Lambda架構是其根據多年進行分布式大數據系統的經驗總結提煉而成,目標是設計出一個能滿足實時大數據系統關鍵特性的架構,包括有:高容錯、低延時和可擴展等。Lambda架構整合離線計算和實時計算,融合不可變性(Immunability),讀寫分離和復雜性隔離等一系列架構原則,可集成Hadoop,Kafka,Storm,Spark,Hbase等各類大數據組件。

          圖片

          1、Batch View預運算查詢函數,預先建立索引,支持隨機讀取,能很好的解決特別大級別的數據且還需要支持實時查詢,要消耗非常龐大的資源的問題。

          2、Batch Layer執行的是批量處理,例如Hadoop或者Spark支持的Map-Reduce方式。利用Batch Layer進行預運算的作用實際上就是將大數據變小,從而有效地利用資源,改善實時查詢的性能。

          圖片

          3、Serving Layer是一個專用的分布式數據庫。Batch Layer通過對master dataset執行查詢獲得了batch view,而Serving Layer就要負責對batch view進行操作,從而為最終的實時查詢提供支撐。

          4、Speed Layer對更新到Serving layer帶來的高延遲的一種補充,它是一種增量的計算,而非重新運算。Speed layer與Batch layer非常相似,它們之間最大的區別是前者只處理最近的數據,后者則要處理所有的數據。

          圖片

           


          作者:李丹

          轉載請注明:學UI網》大數據掃盲

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


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


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


          日歷

          鏈接

          個人資料

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

          存檔

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