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

          首頁

          阻力設計在產品中的應用

          ui設計分享達人

          一.什么是阻力 ?


          在百度百科的定義中,阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力,比如空氣阻力、水流阻力,各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示,擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法,這使其游速在某些條件下可以達到每小時 70-100km,遠超現代潛艇的航速。

          人類為了擺脫自然界設計的阻力,做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻,提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。

          在人類社會,人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律,諸如此類的阻力都無時無刻規范著人類的行為。


          類似地,對于互聯網產品,用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響,這些阻力會阻礙用戶完成目標。


          二、為什么會產生阻力 ?


          在認知心理學中,我們接受外部世界的刺激之后做出反應的過程中,涉及到我們如何感知、學習、推理、記憶,以及如何把意圖轉化為行為。人類數十萬年的進化過程中,對于感知、學習、推理、記憶的神經結構已經初步進化形成,大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力,從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。


          2.1 傾向于通過經驗、環境和目標進行判斷

          對于一件新事物,我們感知它的方式通常受到三個因素影響:過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦產品界面中與用戶的經驗預期相悖,就會產生阻力。


          2.2 缺乏耐心和思考

          面對一個我們從未使用過的機器設備時,我們很少愿意耐心閱讀完它的說明書再去使用它,而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法?!饵c石成金:訪客至上的Web和移動可用性設計秘笈》一書中的第一條可用性原則就是“Don't let me think(不要讓我思考)”,作者認為設計者在設計一個界面時,最好能夠做到讓界面清晰易懂、一目了然,讓用戶能夠不必過多的思考就能夠使用它,幫助用戶跨越思考過程,讓用戶能夠輕松做出復雜的決策,減少認知壓力。


          2.3 心流易被打斷

          我們可能都經歷過心流狀態,當我們在極度專注地做某件事時完全沉浸其中并且非常高效,但如果意外地被打擾,會讓我們很煩躁。

          有關任務執行的研究文獻中就曾經提到過:中斷會導致錯誤,而且人們容易遺忘之前的位置或狀態。當一個任務打斷了另外一個,重新啟動需要的時間會讓每個任務都變慢。

          打擾我們的事情可能是工作時突然的一聲噪聲,也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流,造成用戶的使用阻力。


          2.4 無法擺脫的認知負荷

          認知負荷理論(Cognitive Load Theory)是在 20 世紀 80 年代由澳大利亞教育學家 J.Sweller 提出,由于對人類學習認知和教學指導提供了新的理論框架,該理論在教育領域成為重要的心理學指導理論,在交互設計領域也存在著借鑒意義,理論的主要內容如下:

          認知負荷是指外部信息進入個體短期記憶后中后所需要的注意力資源和記憶容量,被分類為內在認知負荷、外部認知負荷以及相關認知負荷(如下圖)。當任務需要消耗的注意力和記憶容量超出學習者的極限時,就會導致認知超負荷,超出的部分將不會被學習者有效獲取。

          不同的呈現形式形成的外部認知負荷是不同的,一般來說,文字>圖式>視聽。因此,為了避免認知超負荷給用戶帶來的使用阻力,我們應該設法簡化信息來降低內在認知負荷,通過更合理的信息可視化形式和信息架構構建降低外部認知負荷。


          三、產品設計中的阻力應用


          如下圖,基于上述的用戶的認知能力分析,合理的降低阻力,能夠讓用戶在使用產品時效率更高,成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達效率、減少頁面跳轉來達到目的。在降低交互成本方面,我們可以通過降低操作難度、減少用戶思考來實現,同時通過降低認知負荷減少用戶的認知負擔。阻力并不是越小越好,在某些場景下,我們需要增加阻力和提高用戶的使用成本,進而提升用戶體驗或達成產品目標。通過提高防錯能力、提供安全感和營造儀式感來優化體驗。通過篩選用戶和內容把控社區生態。通過功能引導和歧視性策略來迎合商業目的。


          四、降低阻力的應用


          4.1 提高交互效率


          4.1.1 減少操作步驟

          類似于一個倒金字塔結構,交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法,可以降低用戶行為路徑中的阻力。


          使用合適的控件

          不同的控件有著不同的應用場景,控件的選用不當會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應用場景才能夠做到靈活運用。

          舉一個例子,在微信的朋友圈發布頁中編輯內容后點擊取消后,彈出警告框顯示“不保留”和“保留”按鈕,但是考慮到用戶可能會誤操作點擊取消按鈕的場景,此處應增加一個按鈕讓用戶回到編輯狀態,否則不管用戶選擇哪個選項都會退出發布頁重新進入,從而使用戶多了一步操作。下廚房的發布頁就考慮到了這個問題,使用了默認有返回操作的上拉菜單控件作為提示方式,即使在誤操作場景下也不會增加操作步驟。

          控件方面這里就不展開講了,大家可以通過閱讀 iOS 人機交互指南和安卓 Material Design 規范來深入學習。


          復雜任務移交系統

          任務都存在其復雜性,當我們無法簡化它時,可以考慮將復雜性移交給系統,使其代替用戶操作。

          比如我們可以利用用戶已經在產品中填寫過的信息來幫助用戶填寫相關信息。例如通過身份證號碼自動識別出用戶的生日和性別,自動為用戶填充。 


          預判用戶行為

          預判用戶行為分為兩種方式,第一種是在用戶操作前,預判可能發生的用戶行為,以建議的形式為用戶提供選擇,縮短用戶行為路徑。

          比如拍攝照片后,打開微信聊天頁面,微信會以氣泡的形式詢問用戶是否要發送圖片,如下圖。


          第二種是由于用戶的認知錯誤進行了非目標操作時,系統提前識別引導用戶進入正確的流程并完成任務。


          比如支付寶聊天界面中,很多用戶誤以為可以直接通過輸入框輸入金額數后點擊發送就可以轉賬,但實際上只會發出一條消息。支付寶貼心地在用戶輸入數字后外顯轉賬功能,從而避免了用戶的錯誤操作,如下圖。


          優化頁面流程

          不合理的信息架構和流程設計會增加用戶的操作步驟。比如最新 iOS13 的信息應用,將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式,導致從一級頁面(A)進入到二級頁面(B或C)后,如果想切換信息列表還需要返回到一級頁面再次選擇,增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高,希望用戶專注于當前的信息列表,但是我這樣的用戶經常查看過濾信息列表,擔心是否有重要信息被屏蔽,多出的一步操作還是給我帶來不小的使用阻力。


          淘寶訂單模塊的做法就比較合理,從一級頁面(A)進入二級的任何頁面(B 或 C)后,二級頁面可以在標簽欄互相切換,而不需要退回一級頁面再次選擇二級頁面,從而節省了一步操作。


          快捷方式

          快捷方式有跳轉類和功能類兩種,跳轉類的快捷方式可以幫助用戶快速觸達或回退到某個頁面。

          比如我們可以通過長按 iOS 應用圖標調出功能的快捷方式使用,減少中間的操作步驟。淘寶可以在大多數頁面通過快捷方式快速回退到首頁。


          功能類的快捷方式提供給用戶更快捷的方式完成復雜或較多的任務,比如嗶哩嗶哩的一鍵三連。被蘋果收購的應用快捷指令可以自定義系統以及第三方應用的復雜任務,并且在下次一鍵即可完成。


          4.1.2 減少頁面跳轉

          米哈里·契克森米哈賴在《心流:最佳體驗心理學》中將“最佳體驗”定義為:當我們在做某些事情時,那種全神貫注、投入忘我的狀態。這種狀態下,我們身心合一,甚至感覺不到時間的存在,技術水平也會達到頂峰,在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而,周圍突然的干擾或環境刺激都有可能打破心流體驗。 

          用戶在使用軟件產品時很少有心流體驗,因為過多的頁面的跳轉和刷新會中斷用戶心流,冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題,我們可以提高單個頁面的動態容量,在不跳轉頁面的前提下使用戶完成任務,為用戶創造在視覺感受層面上的心流體驗,下面是一些方法舉例。


          覆蓋層

          覆蓋層是出現并覆蓋在原頁面上層的一個彈出窗口,可以由用戶觸發或系統自動觸發,在網頁端和移動端都有著廣泛應用。我們通??梢詫⑵溆糜谳斎雰热荨⒏郊有畔?、子頁面信息外顯、顯示操作指令等。


          a.模態覆蓋層

          模態覆蓋層一般由點擊觸發,通常出現后會伴隨亮盒效果,使用戶聚焦于覆蓋層上的任務,用戶操作完畢后才可以進行覆蓋層外的其他操作。模態覆蓋層的大小不固定,它可以是一個小型的顯示警示信息的彈窗,也可能是一個篇幅很大的信息介紹,在保持上下文的情況下展示更多信息,避免了用戶迷失在各種頁面跳轉中。

          如下圖,behance的首頁點擊一個作品后,會在當前頁面上生成一個模態覆蓋層供用戶瀏覽詳細的作品內容,而不是跳轉到新的頁面。在設計師瀏覽單個作品的場景中,一般只需要 1-3 分鐘的瀏覽后就會關閉頁面,模態覆蓋層的方式使得打開和關閉的操作更加流暢,提高了設計師的瀏覽效率。



          模態覆蓋層在移動端同樣也有著應用。如果前后兩個頁面存在較強的關聯性,為了避免用戶產生明顯的割裂感,一般適合采用模態覆蓋層的方式展示新頁面。如下圖,知乎使用模態覆蓋層展示評論。


          b.詳情覆蓋層

          詳情覆蓋層在網頁端通過光標移入觸發,觸發后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標移入某條招聘介紹時,會觸發詳情覆蓋層展示出次級頁面的詳細崗位信息,避免了跳轉新頁面。


          嵌入層

          嵌入層類似于抽屜,需要的時候將其展開,不需要的時候將其收起。與模態層不同之處在于,展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應用場景有:拓展內容、展示下級內容。

          如下圖,微博的發現頁面的功能圖標可以通過嵌入層進行拓展從而展示更多功能。


          Xmind的嵌入層展示了格式的下級內容,可以在保持能夠繼續編輯腦圖的前提下進行格式設置。


          標簽頁

          對于內容豐富的頁面,希望用戶能夠通過盡可能少的跳轉就能夠觸達。我們可以將列表導航、宮格導航修改為標簽導航或分頁的形式。


          4.2 降低交互成本


          4.2.1 降低操作難度

          把某些操作難度大耗費成本高的操作使用新技術解決,比如人臉識別和 OCR 技術可以降低信息輸入成本,不但幫助用戶使用較少的時間完成任務,也降低了用戶的犯錯幾率和使用阻力。

          手勢的優化也是降低操作難度的可行方法,優化的方式有增加多手勢操作和加大熱區。比如在 App Store 首頁進入應用推薦頁后,針對不同使用場景的用戶提供了三種退出的方式,大大降低了操作難度。


          舉一個反例,得到的書籍詳情頁中,查看詳情的按鈕熱區只存在于文字上,但是用戶的使用習慣會誤認為整塊區域都可以點擊,因此每次點擊多次失敗后才理解熱區的正確位置,如果將熱區擴大到整個區域就可以降低操作的難度。


          想要了解更多交互手勢知識可以拓展閱讀: 交互手勢的容錯性和邏輯性 


          4.2.2 減少用戶思考


          提供默認選擇

          用戶的每一次思考都伴隨著流失的風險。有時用戶對于我們提供的選擇不是很了解,會糾結和疑惑不同選擇之間的區別,最終可能導致放棄選擇進而流失。我們需要做的是為用戶提供默認選擇,同時允許用戶切換到其他選擇,以此來減少思考,降低使用阻力。

          以手機淘寶查看相似寶貝功能改版為例,在舊版中,長按淘寶某個商品會出現「找相似」和「找同款」的按鈕選項,點擊后會跳轉到對應頁面。在新版中,長按淘寶某個商品會直接跳轉到「相似寶貝」頁面展示商品,同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是,由于舊版的第二步給用戶的兩個選項讓用戶過多思考,導致第二步的流失率過高,很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶,同時也很方便地去切換到「同款寶貝」,這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續使用。


          保持一致性

          我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦交互界面中與用戶的經驗預期相悖,就會產生阻力。

          上文提到過,我們習慣于從過去獲得的經驗中獲得對于當下問題的解決方案。甚至對于重復出現的問題,我們已經形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此,當設計缺乏一致性時,不但會導致我們已經形成的條件反射和肌肉記憶失效,還會更容易導致錯誤的發生。此時我們不得不從條件反射的無意識操作轉換為消耗注意力的緩慢操作,從而形成阻力。為了避免這些阻力,我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。

          如下圖,警告框的按鈕位置一旦第一次用戶經過使用熟悉后,之后用戶會進行無意識地快速操作,此時如果某個警告框缺乏一致性就會導致錯誤的發生。


          4.3 降低認知負荷


          4.3.1 降低內在負荷

          內在負荷是任務中包含的信息和用戶固有的認知結構產生交互作品而形成的負荷。體現在界面中的信息就是文案的設計了,它也是產品設計中重要的一環。悖于用戶認知結構的文案設計會帶給用戶理解上的阻力。一份合格的文案設計需要做到簡潔易懂、重點突出、無歧義性和保持一致。


          簡潔易懂

          如果能夠做到簡潔,就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產生畏難情緒,從而放棄閱讀。詞匯的選擇要符合用戶人群的認知范圍,不應該使用用戶難以理解的各種黑話和行話。在此基礎上,如果能夠通過形象生動的修辭手法幫助用戶快速理解,就更勝一籌了,比如針對垃圾分類,一些網友發明的快速記憶方法就是一個很不錯的例子,如下圖。


          重點突出

          一段文案中可能有些是重點內容,有些是解釋內容,并不是所有內容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內容告知用戶,能夠引導用戶下一步行動就足夠了,至于其他解釋性或者不重要的內容弱化即可。

          針對前兩條規則,我們以 12306 以及飛豬的學生票和成人票的選擇彈窗作為案例進行對比。如下圖所示,每一次購買火車票的過程中,當我遇到 12306 的這個彈窗,都會讓我用不少時間去進行理解和思考。首先在個人看來,“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在,如果沒有標題,直接展示正文即可;其次,正文的內容重點信息不突出,其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學生火車票優惠卡的有效學生證原件換票乘車?!边^于長和復雜,很考驗用戶的短期記憶和耐心;最后,按鈕文字沒有提供操作路徑,用戶想知道如何操作需要先閱讀完上面的文案。


          飛豬的案例就避免了 12306 所存在的問題,做到了簡潔易懂和重點突出,如下圖。


          表意清晰

          表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案,文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。


          保持一致

          同一個軟件系統中,表達相同概念的用詞一致。模塊中的相似文案,語法表達方式一致。上文提到我們人類很少愿意思考的特點,一旦一個軟件系統出現表示同一個概念,但是名稱不一樣的詞語,我們大腦就不得不開始被迫思考:“這個詞語和之前那個很接近但是有些不一樣,它們是同一個東西嗎?”這個思考過程從而形成了不小的阻力?!墩J知與設計》一書中提到一條規則:“同一個名稱,就是同一個東西;不同的名稱,就是不同的東西?!币虼耍恢滦允亲珜懡换ノ陌傅囊粭l重要原則。


          4.3.2 降低外在負荷

          當信息的內在負荷不能再進行降低時,通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化,降低外在負荷,使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題,這里就不做展開了。



          五、提高阻力的應用


          阻力并不是越小越好,在某些場景下,我們需要提高阻力提高用戶的使用成本達成某些目的。


          5.1 優化交互體驗


          5.1.1 提高防錯能力

          類似于馬路上的減速帶,在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力,減緩用戶的操作的節奏,達到防錯的目的。如下圖,在藍湖中如果要刪除一個項目,就需要先輸入項目的名稱后才能成功刪除,通過增加阻力提高了防錯能力。



          5.1.2 提供安全感

          針對涉及到用戶隱私的敏感操作,通過設計特定的交互流程讓用戶體驗到安全感,比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂,增加用戶的確定感和可控感。


          5.1.3 建立儀式感

          生活中大部分的時刻都是單調乏味的,我們需要使用各種儀式點綴它。與此類似,在用戶的操作行為路徑里增加一些不必要的過程,也能成為用戶體驗旅程中的點睛之筆。

          就像多年前堅果手機一代的包裝,設計師別具匠心的將包裝設計為一次充滿著童趣的體驗,雖然拆包裝的過程時間增加,但是給予用戶似曾相識的場景是不可替代的。


          看似使用起來費力的微信搖一搖,可以加強用戶的參與感和儀式感,就仿佛融合著一種占卜未知世界的神秘體驗,這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包,眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包,并樂此不疲。盡管增加了操作成本和使用阻力,但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。


          5.2 維護社區生態

          用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多,內容質量就越高,進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區,就會同時帶來大量的負面內容,造成對其他用戶的干擾,甚至導致他們大量流失。因此,為了讓一個產品的社區生態能夠健康發展,我們需要采取一些篩選方法來設置阻力,以此來篩選出對平臺有益的用戶和內容。


          5.2.1 篩選用戶


          邀請制

          很多產品在冷啟動階段,為了避免垃圾用戶和提高社區質量,會設立邀請制來控制用戶來源,然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本,保持服務器穩定,甚至可以制造一種供不應求的感覺,獲得更多的討論度。


          價格門檻

          網絡騙局在社交類產品屢見不鮮,婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量,不僅嚴防死守,還會設立價格門檻,不付費直接無法使用,這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見,但是確實有效地進行了用戶篩選。



          測試門檻

          通過設置測試題將用戶分成不同的群體,進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試,需要花費的時間成本比較高,通過這種方式篩選出真正認同 B 站社區文化的優質用戶,給予這些用戶更多在社區中互動的權限,從而也大量減少了低質量用戶的負面行為。

          上述的三種用戶篩選方法是否適用,需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多,這里只是簡單舉例。


          5.2.2 篩選內容

          不同的內容形式對于社區的價值是不一樣,我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式,如果用戶想要發布純文字內容,需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容,附有圖片的內容對于其他用戶更具有吸引力,通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間,從而也可以使朋友圈廣告得到更多的曝光。


          5.3 迎合商業目標

          有時產品的商業目標和用戶目標存在一定沖突時,損失一定的用戶體驗滿足商業目標是不得不進行的選擇,這需要我們進行合理的平衡。


          5.3.1 功能引導

          為了迎合商業目標,我們有時需要針對一些功能設置一定操作阻力將其進行弱化,然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見,比如通過強化按鈕對比進行功能的引導,如下圖。



          5.3.2 歧視性策略

          歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分,針對身份等級低的用戶設置使用阻力,以便于引導其投入更多精力和資源,或者通過此方式給予高等級用戶優越感,刺激其進行分享炫耀。

          16 年發布的支付寶生活圈就是一個很好的案例,芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖,等待朋友們的膜拜點贊?;ヂ摼W產品中,每增加一個動作,用戶都會呈幾何級流失,但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作,幫助支付寶生活圈實現了刷屏傳播的效果。


          六、總結


          雖然讓用戶暢通無阻地使用產品是我們的目標,但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下,我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路,助力你在產品優化探索中找到可行的切入點。



          文章來源:站酷   作者:Ballen成名

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


          設計創新|QQ主題美化體驗升級

          ui設計分享達人

          QQ主題自2013年誕生,至今7年時間,保持了整個營收的Top3的成績,受到了廣大用戶的喜愛。隨著QQ數年來版本的迭代,我們也漸漸傾聽到了一些用戶對主題的反饋,為了給用戶帶來更好的體驗,我們決定對QQ主題從上游到下游進行一次全面的優化。





          01 主題方案的變革

          ——————————

          產品問題&用戶調研

          我們對QQ主題進行了兩輪用戶體驗反饋和調研,發現:目前的外網主題存在機型適配效果差、素材制作質量差、缺少全局美化等體驗問題;而同時,用戶調研的結果表明我們的用戶希望體驗到更好更高品質更全面個性化的主題。





          項目設計目標

          基于現網產品問題和用戶調研結果,對優化方向進行了歸納分類,最終確定QQ主題體驗升級的項目設計目標:增加主題覆蓋范圍 ,提升主題的美化質量 ,提升主題的可用性。


          探索解決方案

          為了達成上面的三個目標,一開始我們根據QQ主題的實現邏輯制定了初步的優化方案:通過新增素材增加主題覆蓋范圍,通過修改舊素材提升主題可用性和質量。



          但在進行執行評審的時候,我們意識到,這樣的方案雖然可行,但落地成本非常的巨大,需要每個主題包內新增兩端共1800多張切圖,花耗多家cp公司至少四個月的時間和人力。



          我們不得不推倒開始的方案,開始思考:是否有更好的解決方案?


          在對主題制作流程、客戶端呈現邏輯、日常運營維護工作等問題進行深入的溯源挖掘后發現:QQ主題目前實現個性化的方案是后臺下發素材包替換本地客戶端資源實現個性化。而這就導致了素材包本身是固定的內容,只能被動的接受版本更新帶來的種種問題。


          在這樣的情況下,即使我們按照一開始的方案執行落地,多個版本后我們仍需大量的人力去進行維護和更新才能保證用戶的體驗。



          所以,我們必須打破舊方案帶來的弊端,要讓素材活起來。


          在綜合設計思維,開發思維,運營思維去思考問題后,我們提出了一個嶄新的實現方案:終端染色(使用Color-filter,對png進行染色的技術)+分色映射(將資源與色值進行映射,用一套有限色板去管理無限資源的概念)。



          在這套新的個性化實現方案支持下,設計師簡單的對色板進行配色,就能夠對QQ客戶端的全局顏色進行變化。而當版本更新發生資源變更時,僅需維護通用的線上映射關系,資源即可自動適配到應有的顏色。




          評估解決方案

          針對主題方案的變革新方案,分別從優點、變化、難點3個維度進行綜合評估:


          - 優點:

          (1) 整體學習,制作,運營,維護的成本降低

          (2) 美化范圍變大,下載資源變小,用戶體驗得到改善

          (3) 效率得到優化,難度降低,設計師有更多時間提升主題質量


          - 變化:

          (1) CP學習新的制作方式

          (2) 產品運營省去了過往定期維護素材的工作

          (3) 設計師在版本迭代時候進行新資源的分色映射關系

          (4) 開發人員進行統一的分色映射表維護管理


          - 缺點:

          (1) 方案工作量大,多達120+的界面檢驗,上千個客戶端資源,大量的代碼需要修改。

          (2) 方案執行難度大,包括如何用有限的色板兼容更多的設計需求,資源如何在不同場景得到更有效的復用,設計與開發未來如何進行映射表的對接,以及版本的上下兼容。


          推動落地


          設計師提出“終端染色+分色映射”的新方案后,通過積極拉動會議,向主題業務相關的多角色進行新舊方案的優劣討論,方案得到一致認同后,多方聯動形成項目組。


          其次進行可行性評估,與開發結對緊密協作,共同討論難點攻克新方案落地要點。


          最后基于前期可行性評估,以及難點預研,項目組規劃出階段性的落地方案。


          方案的落地主要為三部分工作: 梳理標記->歸納轉化->編譯覆蓋。



          梳理標記:


          前端開發逐個查找界面的資源和代碼并標記,交付給設計師進行資源色值的規劃


          歸納轉化:


          設計師根據ui的配色規則以及個性場景需要,進行ui色板的構建及資源的顏色映射分配。


          在這一過程使用騰訊文檔進行設計語言與開發代碼的轉化。



          編譯覆蓋:

          修改代碼,讓資源支持個性化需要的染色和素材替換、錄入分色映射的騰訊文檔并進行實機的染色編譯并和設計師共同檢驗效果。


          而在上述工作中,設計師的任務難點就在于色板的設計和染色規則的構建。


          首先設計師根據QQ的ui規范,建立初步的色板;下一步,創建界面demo,模擬資源與色板的映射關系;然后替換多個不同的色板檢驗主題染色后多場景下的效果,再對色板和染色規則進行反復的調整;最后在效果符合預期的時候,再輸出色板和染色規則并最終在真機上進行驗證。




          第一階段成果

          QQ舊主題:僅覆蓋6個界面、素材包內涵400+切圖、日常需要花費巨大成本維護1000多套主題。


          主題新方案落地后:覆蓋范圍從6個界面擴展到60+界面、素材切圖降低至48張、600多個資源得到梳理優化、60+個舊主題存在的可用性問題得到解決、維護成本得到大大降低。




          02 主題智能編輯器的誕生

          ——————————

          主題新方案落地后,考慮到舊主題制作時間長,難度大,設計費用高的問題,產品側希望設計師能配合新的染色方案去優化主題制作、上架、驗收的流程。


          確定設計目標

          根據舊流程里各個角色反饋的問題點,第2階段的目標可提煉為:提升制作效率、打包效率、驗收效率??紤]到舊流程中效率低、出錯率高的步驟大多是人工操作部分,我們計劃設計一個智能化的主題編輯器來實現工業化的主題生產。



          探索解決方案


          以提升效率為目標,首先深入制作流程勘察,挖掘制作流程的關鍵核心點,并提煉關鍵觸點、痛點問題;基于各個觸點關鍵問題,逐一給出解決方案,并全局的回顧整個流程,從全局去統領優化方案;繼而以落地為導向,明確問題解決的優先級,穩步前進規劃方案落地。在解決方案中,本地編譯體驗已實現,其他能力落地優先級如下:


          - 首先解決智能切圖和智能配色,優先級最高


          - 其次解決規范優化和多界面預覽,優先級居中


          - 最后是直連后臺,運營做審核,優先級最低



          方案落地

          傳統的主題制作中往往最費時間和最易出錯的就是切圖,在這里我們使用了雙重保險。


          保險1:編輯器將內置一套智能化的切圖合成處理方案,設計師僅需上傳極少量的必須切圖。編輯器還會對上傳的切圖會進行命名、尺寸、格式的檢測。


          保險2:官方設計師預設主題的PSD/SKETCH設計模板,附帶切圖命名尺寸格式等,畫完后一鍵即可導出全套切圖資源。

          新主題的染色規則中,色板存在21個顏色需要配色。對CP來說,即使有設計規范進行學習,也存在著出錯的可能。為了讓制作通過率達到最高,我們計劃通過編輯器內置的智能配色,將復雜的配色操作簡化為2步操作,達到快速穩定地輸出合格的配色的效果。


          新主題色板中,顏色可分為主色系和背景色系,兩大色系下的色值再各有不同的色值要求。



          從設計師的理想角度來看,如果只進行主色和背景色的選擇,即可輸出實現21個顏色的話,無疑效率和通過率都會得到大大提升。


          為了實現理想效果,我們設計了一套方案:


          在選擇主色、背景色后,首先對它們進行一個檢測,在這里我們引入了WCAG2.0的標準,檢測主色元素在背景色元素上的顯示是否符合大眾的閱讀要求。其次我們再把QQ設計規范中,對21個顏色的不同微小要求,通過HSB顏色模型轉換為數據化的代碼條件并內置在編輯器中。


          這樣,CP選擇的兩個顏色,通過顏色檢測、顏色模型轉換、預設條件的微調,就變成了符合我們視覺層級規范要求和可用性要求的21個顏色。



          在實現了智能切圖、智能配色、導入設計稿、在線預覽、結構化打包、手機實際預覽等能力后,編輯器的能力基本得到滿足,我們接下來對編輯器進行框架設計,在多方案權衡后,最終采用了元素作導航,右邊區域保持全局預覽的交互框架,并設計了編輯器的ui界面。





          第二階段項目成果

          使用編輯器前:從制作到上架需要約4周時間,每月上架主題平均為12個。


          接入編輯器后:僅需一天即可完成素材的制作到上架,并且得益于制作難度的降低,可制作主題的CP得到了擴充,目前每月上架主題穩定在2000+個




          03 主題適配規范網站的搭建

          ——————————

          在完成了主題效果優化、主題制作優化后,我們把注意力放在了制作上架之后的流程-適配維護。


          舊的主題適配維護涉及到cp/設計師/運營/開發四個角色的大量人力成本。


          而新主題優化后,僅需要設計師&開發工程師兩位角色進行低成本的操作。



          但在實際工作中,版本中的不同更新都是由不同的設計師&開發負責的,適配工作往往很難執行。所以為了保證適配的效果,除了在產品的工作流程中增加適配規定外,我們還希望能幫助到不同業務方降低適配的成本。



          新適配流程中,設計師其實僅僅需要根據染色規則對新增資源去定映射關系,而實際映射的寫入是開發操作的。那如果兩個角色的工作能合并,并且省去學習新適配規則以及溝通的成本呢?



          從幫助開發去理解分色染色的層面,我們把資源元素和顏色進行了場景化的匹配應對,并且把規則關系整理成了目錄,搭建了Q-Element適配規范網站;開發同學在進行適配時候僅需根據設計稿的新增部分,尋找對應目錄下的規則關系,即可對元素進行適配。





          第三階段項目成果

          優化前:主題的版本適配需要設計開發產品的多方配合,花費數天時間去完成適配。


          優化后:僅需開發1個小時的時間即可完成適配和驗證。



          總結


          通過3個階段的努力,QQ主題美化初步完成了主題效果、主題制化、主題維護成本的三大優化。上線半年后,目前QQ新主題已經達到1萬八千個,并且借助QQ美化平臺完成了外部創作人、QQ、QQ用戶三者之間的生態搭建,正源源不斷的提供給用戶更多更好的個性化主題。我們也會進一步努力,由QQ主題開始對個性化進行新一輪的優化,帶給用戶更好的體驗。



          最后,廣大設計師的機會來了!如果您擅長插畫或者動畫,點此鏈接https://ycg.qq.com/qcc,報名參與我們的原創空間和QQ美化平臺項目。按照頁面引導提交作品審核,經原創館審核后,就可以獲得創作權限。 您的原創作品將被QQ及QQ空間數億用戶付費使用,并獲得相應比例分成。




          文章來源:站酷   作者:騰訊ISUX

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


          該如何給兒童產品做設計?收下這個思路分析

          ui設計分享達人

          針對不同的受眾我們會做不一樣的設計,今天是針對兒童進行的產品設計思路的內容分享,面對兒童產品,我們需要從心理生理上的區別分析,進而推動內容、交互、視覺、動畫等設計,一起來了解下吧~

          “小山上的風,沒有一個人知道,沒有一個人能告訴我;風從什么地方來,風到什么地方去?!?

          英國的詩人米爾恩在給孩子的詩歌《小山上的風》里如是寫道。

          在不同的年紀,這個世界帶給我們的觸動和感知都是不一樣的。那么當我們為兒童進行設計時,該如何去呈現呢?讓我們一起來探討下吧。

          他們與我們

          近年來,兒童產品的市場是比較火熱的,由于兒童的生長變化較快,他們在心理和生理上都與我們成人有較大不同,對于外界的信號,他們更喜歡得到視覺和聽覺上的反饋。并且常常能夠從挑戰和沖突中獲得快樂,他們不在意結果,目的性較弱,還有著非常強烈的好奇心,無法預見其行為會引發的后果,其模仿能力的強弱隨著年齡成長呈曲線狀呈現。當我們在設計時,應將兒童的這些特性考慮進去。

          任務旅程的設計

          在某種程度上,兒童產品的客戶形態有些類似我們的 ToB/G 產品的客戶。使用產品的一線用戶,并非最終具有購買權的客戶。孩子的父母是兒童類產品最終具有購買權的客戶,他們對早期教育、智力投資、內容是否健康積極等等都有較高要求。

          因此我們在內容的設計上應更加的多元化,將任務完成后的數據量化體現,使父母便于了解孩子情況,同時也可以從側面激勵用戶后續的付費行為。任務旅程有多種類型,在兒童品類的設計上,我們通常采用下面這 4 種任務類型去設計。

          該如何給兒童產品做設計?收下這個思路分析

          交互界面

          好的設計可以減少認知負擔, 可以最大限度地減少理解功能交互所消耗的智力資源。在年幼的孩童時期,他們的記憶容量比成人小,我們需要關注到這一點,怎樣的信息容量,交互層級和人機互動才能讓他們更好的理解和認知產品界面。

          比如 LG 有一款面向低齡兒童的手表,表盤上只有一個按鈕和出聲孔,并且在噪雜環境下,還考慮到家長的心情,非常貼心的設計了 10 秒自動接聽的人機交互方式。

          該如何給兒童產品做設計?收下這個思路分析

          △ 圖片來源 | 文章作者&Roobo 設計團隊

          通常,我們成年人對交互體驗,產品易用性都抱有較高的期望,我們期望產品能為我們帶來效率的提升、便捷的操作、強烈的視覺沖擊力等等。但是,兒童與成人在人機交互的互動上卻有著天壤之別。當產品功能無法正常運行時,孩子們并不會像成年人一樣感到失望。當設計不如他們所希望的那樣時,雖然也會暫時感到沮喪,但他們在自己生命旅程的學習嘗試中,也習慣了那些常常無法正常進行的任務。隨著成長經驗的增加,他們會逐漸熟悉了解世界的運行規則。

          該如何給兒童產品做設計?收下這個思路分析

          該如何給兒童產品做設計?收下這個思路分析

          △ 圖片來源 | 文章作者&Roobo 設計團隊

          配色與圖形

          有研究表明,在對 120 名學前兒童(3—6歲)進行了12種顏色和12種圖形的辨認實驗中顯示,實驗刺激用速示器分三種速度(0.01秒、0.05秒、0.1秒)呈現。結果表明:呈現速度對辨認正確率有著明顯的影響。3-6歲兒童對顏色和圖形的辨認能力均隨年齡增長而逐步提高。學前兒童對顏色的辨別,在三種呈現速度條件下,均對黃、紅、綠三色的辨認正確率為最高。

          該如何給兒童產品做設計?收下這個思路分析

          圖標 icon 的設計上,簡約、塊面化、造型避免抽象,例如 3 歲+的孩童已經可以理解向前、向后的箭頭,有研究顯示,在短時段內,兒童對圖形的辨認在不同呈現速度條件下出現優勢與劣勢圖形之分。優勢圖形的正確辨認率百分比較高,而劣勢圖形則較低。

          該如何給兒童產品做設計?收下這個思路分析

          硬件的配合運用

          現在市場上有很多兒童品類的硬件,深受家長和孩子的喜愛,在軟硬件的結合上,我們要善加運用,例如硬件自帶的攝像頭、觸摸屏、聲控等等。當硬件與產品內容相結合,可以碰撞出更加多種多樣令人振奮的新的交互方式。

          該如何給兒童產品做設計?收下這個思路分析

          該如何給兒童產品做設計?收下這個思路分析

          △ 圖片來源 | 文章作者&Roobo 設計團隊

          動畫設計

          在任務旅程中,內容合理優質的動畫,廣受家長及兒童的歡迎,但是動畫頻繁變換的畫面容易引起視覺疲勞,大多數動畫片每 6 秒會變換一次畫面轉場,超出了幼兒視覺神經的承受能力。在兒童不同的年齡段,注意力集中程度都是有所不同的,皮亞杰理論研究顯示 3-4 歲的兒童注意力集中的平均時長為 10 分鐘,4-6 歲兒童注意力集中平均時長則可達 15 分鐘。在我們為孩子們設計他們喜愛的動畫時,要充分考慮到這些因素。運營類動畫一般控制在 1 分半之內是較為合理的。

          市場上很多 AI 兒童伴讀機器人,是可以自動推送產品內容的,考慮到兒童的健康使用,推送動畫的播放時間要善加利用,并減少觀看所需的步驟,在家長端也需要設計對應控制內容的開關,并將音量的控制開關放在顯眼易點的位置。

          該如何給兒童產品做設計?收下這個思路分析




          文章來源:優設網   作者:JellyDesign

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




          主題設計神器來啦!知識點Get了嗎?

          ui設計分享達人

          設計系統基本就是組織如何構建數字產品的故事,在公司內部,設計系統改善了產品團隊之間的協作,而設計和工程團隊之間面臨的一個常見問題是:共享品牌準則和界面信息。在開發過程中,應該遵守還原設計的內容,但是我們都知道這并不是那么簡單。


          從目標達成的角度來說,設計規則的創建與執行同樣重要。我們期望參與產品的每一個角色,都能記住設計規范,結合設計原則(Perceptual Pattern )最終達成界面展示在用戶面前的樣子。這也就需要設計系統內,有一套控制性強、拓展性高的方法來維系產品的風格呈現,也就是我們今天將要討論的設計變量(Design Token)


          構成


          什么是設計變量(Design Token)


          在數字產品的概念中,許多中心和微小的UI信息片段將在多個平臺上使用,被稱為:設計變量(Design Token),他們是設計系統中設計語言的構建塊,也是設計決策的呈現。他們維護核心樣式的所有值:間距,顏色,版式,斷點,動畫,字體,平臺比例尺,組件狀態等,最終通過數據表示。命名規范和結構化的約束,可確保產品體驗的統一度與靈活性,更進一步可為產品打造賦有情感的品牌認知。


          而對于SaaS類或者APass類的公司而言,設計變量還可提供給多個合作商所用,滿足多種定制化的訴求。



          實施例舉


          在以往的真實產品中,示例(如下),設計人員會發現,實現和樣式管理的環節在開發過程中是完全斷掉的,設計語言轉化為開發的語言時,缺少風格系統完整性的延續。我們通??吹降膕tyle代碼都是一些幾乎沒有體感的參數,且公司產品體量越龐大復雜,想要全局迭代就越是痛苦。


          但如果我們將這些參數封裝起來,用語義化的方式來進行描述,就增強了“系統下的畫面感”,如“font-size-level03”、“border-distinguish-background” 等,就是設計準則下情景化的歸類與描述。


          但語義命名只是一個最終呈現,真正讓設計與開發者都能”讀語義,識運用“。還需要我們在設計系統中建立一整套完整的設計變量對應表,并讓大家對它們有著清晰的記憶。

          這里我們將以群核科技旗下,工具設計系統(Tools )中的設計變量為例,來給大家進行詳細分析。首先在設計原則下,我們引申出設計變量規則的制定原則:精準、靈活、易讀。

          意指歸類與對象的精準性,配置化的靈活度,語意命名上的易讀性。


          對所需范圍進行定義,命名規則與前端書寫規則達成約定。


          變量的“結構完整”,有助于設計與工程團隊在長期維護上,提升靈活度,3層繼承結構,很大程度保證了“精準”“靈活”這一原則。


          定義完基礎規則,我們具體來看設計變量在產品構建中,三大主用途——1,主題定制   2,跨平臺呈現  3,優化工作流


          主題定制


          我們找到產品界面中定義“核心樣式”的部分,例如顏色,字體大小,空間,動畫,陰影,斷點等等。通過這些具有統一命名規則的實體,用于代替硬編碼的值,直接集成到設計系統下的組件庫里,也在日常的產品界面開發中使用。


          通過繼承,別名變量起到了銜接全局變量和指定變量的作用,指定變量影響了最終的樣式呈現,從而實現主題功能。


          單個主題可供多個產品團隊使用,主題本身也提供可配置化,即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”,“產品定位差異”等,也可通過創建新的主題,完成新的對應表,繼而產生相應的風格模式,例如“暗夜/日光模式”或“舒適/緊湊”布局模式,“企業品牌”定制模式等等。


          主題功能在產品中體現


          跨平臺呈現


          多端設計是未來發展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄,包括音樂,照片,文件和快捷方式,更加高效。它使iPad更具Mac感,也降低了學習成本。


          目前我們很多產品都要考慮在 Web、iOS、Android 上設計。如果有新的功能增加,設計和開發會消耗較多的時間在上面,而且很難去統一把控。


          Design Token 在跨多端設計中不僅是存儲樣式的變量,更是一套用于各操作系統間進行翻譯的口令。我們希望通過變量來控制一些樣式的屬性,在不同終端做到自動化的映射。


          假設在移動端正文字用14x,而在pc端為12px,雖然它們值不一樣,但他們都是使用的color_text__primary,在不同終端變量會自動根據設備來取不同的值,通過一套設計就能實現多端運行,提升效率節約成本。


          優化工作流

          擁有了強大的設計變量樣式庫之后,它對我們的工作流程將帶來什么革新呢?


          顯而易見的是,團隊將節省非常巨大的工作量,我們不再依賴單個工程人員的修改質量,且能更大程度減少跨組依賴。此外,早期設計工具無法與設計變量生成器進行本地通信,我們通過優化Sketch插件,完成了變量命名數據的輸出,使得工程人員可直觀看見變量名稱。這將為設計驗收節省大量時間。


          產品的大批量的歷史問題也得到解決。數字化的自動識別效率遠高于痛苦的人工調整,設計師和產品團隊都將收獲全新的迭代方式,這是有歷史意義的一刻。


          結語


          簡而言之,設計變量作為一個管理風格樣式的有效手段,可集成主題管理,對跨平臺開發也同樣起到作用。簡化團隊合作協作流程,提升迭代維護效率。尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。


          文章來源:站酷   作者:酷家樂UED

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



          短視頻創作者私域運營的研究思考

          ui設計分享達人

          隨著移動網民數量增速放緩,流量紅利逐漸消退,平臺競爭愈發白熱化,優質創作者成為平臺的必爭對象。在后流量時代,抓住優質創作者的核心是平臺流量所能附加的多元價值,因此對流量的深耕與私域的變現成為了必定的解題走向。

          面對這樣的趨勢,研究者應該如何走進創作者的世界,深入洞悉他們的私域運營需求?我們在對多名短視頻創作者的研究中沉淀了一些思考。


          為什么關注私域變現?

          ——理解行業和業務是選題關鍵


          行業趨勢:創作者的收入結構正在變化

          短視頻創作者的傳統收入來源是依靠播放量獲得的平臺流量分成。但隨著短視頻玩家的不斷涌入,公域流量瓜分緊張,基于粉絲沉淀的私域變現成為創作者多樣化收益的來源。

          從行業公開信息以及我們所接觸的創作者的鮮活案例中均能發現,非流量分潤的收入占比正在提升,多元的私域變現已成為他們收入的重要組成部分。

          公域流量紅利見頂


          私域流量收入可觀


          業務思考:平臺對創作者多元變現需求越發重視

          短視頻領域目前呈現創作者多平臺分發的趨勢。我們在研究中發現,多平臺混合運營的作者占比已接近七成;頭部作者也是如此,抖音和快手百萬粉以上的作者中有三成為雙棲作者。創作者精力被多平臺瓜分,而影響創作者對平臺的重視度和運營投入度的最核心因素就是經濟收益。

          在“主陣地+重點運營平臺+純分發平臺+其他關注平臺”這種金字塔型的混合經營模式下,平臺只有向塔尖挺進,才能留住創作者。于是,支持創作者私域營運及多元變現也成為業務后續發力的重點方向,我們便順理成章的將研究聚焦在這一主題上。

          經濟收益影響創作者平臺投入


          私域運營拉動平臺成為主陣地



          研究誰?——找準關鍵角色


          私域運營是一個相對宏大的研究主題,要讓研究具備可行性,就要鎖定明確且合理的研究對象。找準關鍵角色,能夠起到讓研究事半功倍的效果。


          考慮等級能力差異,研究鎖定頭部作者

          內容創作的生態中,作者等級是影響需求差異化的核心變量。新手作者大多是視頻創作小白,還處在能力突破和粉絲積累的初始階段,更加關注成長收益,即創作能力的提升和流量的增長。而偏頭部作者已經積累了一定的創作經驗和粉絲基礎,更在意經濟收益,對于內容價值最大化需求強烈。

          頭部作者也往往意味有著更好的粉絲基礎、更多的實戰經驗、更深的行業理解,對研究而言有更深的挖掘價值,也能在更短的時間內輸出更多有效信息。所以本次我們圈定頭部作者作為目標首選。


          考慮不同垂類覆蓋,避免信息產生遺漏

          短視頻的創作和運營日益走向細分化和垂直化,不同的細分垂直領域,也存在不同的變現方式和需求。因此,垂類領域是創作者研究中不可忽視的另外一個核心變量。

          目前短視頻多元變現方式主要有電商帶貨、付費專欄、咨詢服務、打賞送禮等;我們在選擇創作者的內容垂類時,也有針對性的確定生活、家居、教育、情感、影視五個垂直方向,覆蓋所有變現類型。


           

          研究什么?——梳理私域變現流程,搭建研究分析框架


          在具體執行前,研究者首先要確定研究的關注重點,劃定研究的邊界。前期需要做大量的案頭研究工作,充分了解行業現狀。短視頻領域研究中有一些常用的信息獲取渠道,略作梳理,以供參考。

          充分的信息獲取決定著研究的下限,能為研究洞察打好基礎,也能幫我們形成后續研究的系統性框架。我們基于私域運營的主要流程梳理,提取出影響私域運營效果的四個核心環節,形成最終研究產出的分析框架,后續關注創作者在該框架下各環節的具體需求及問題點。


           

          如何理解創作者?

          ——5種思路,讓深入分析成為可能


          創作者對于需求的表達往往是主觀和模糊的。對于B端創作者而言,由于具有更明確的平臺利益訴求,他們對于需求的表達甚至會表現出更多的“私利”和“怨念”——“我想要更多的流量分成”,“我想要完善的運營服務”,“我辛辛苦苦做內容,卻沒有收益,真讓我寒心”……

          但是作為平臺,流量和資源的有限性決定了無法彌合多方矛盾,滿足無限需求。那么,作為研究者,我們不應該只簡單傳遞“用戶要什么”,而應該從用戶需求出發,剖析需求背后的形成原因和深層問題,告訴業務“為什么會這樣”以及“我該給什么”。

          下面我們將以研究中的一些發現為例證,提供幾種研究分析思路,讓大家更好的理解如何還原創作者需求的本質。


          一.不僅呈現事實,更要有底層思考

          平臺的流量分配已經從粗放式的內容引入時代發展到精細化的內容建設與資源分配時代,策略不斷積極調整,向更多優質的內容傾斜。創作者們在尋求流量更持續、有效的利用時,也越來越意識到優質內容有著更大的增值空間,希望在平臺的引導和扶持下,生產更優質的內容不斷“圈粉”。

          然而不同的平臺有不同的調性和內容偏好,這時候創作者困惑的是:到底何為優質內容,我又該如何去創作平臺喜歡的優質內容?這就需要平臺通過激勵政策和創作活動的引導給出答案。

          在研究者的分析中,我們不能僅僅暴露“平臺政策不清晰”的問題,也不能只對競品的做法做簡單的羅列和復制。值得深入思考的是,現有政策和用戶需求的差距點在哪,后續優化的原則和方向是什么?

          我們基于對于作者需求的理解和競品差異點的分析,提煉出平臺政策引導的三個優化方向:

          1.垂直化:內容消費需求日益多元化,平臺創作激勵活動也要深入覆蓋更加多樣化的垂直細分領域;同時,為了增強創作者感知,應將各種激勵計劃顯性化進行包裝,清晰傳遞平臺扶持的垂類和方向。

          2.日?;?/strong>:平臺創作活動應當多樣且高頻,充分契合不同領域創作者的興趣點,且需具備較強的時效性。

          3.矩陣化:內容創作不再只是作者的單打獨斗,更需要在重大運營事件上聯合平臺和MCN機構進行內容共建、資源聯動,最大化內容的影響力。

           

          二.不僅要看自身,還要看行業先行者

          在短視頻賽道上,存在著諸多優秀的先發競爭者。競品在平臺管理、運營服務、產品功能等諸多方面都能為研究提供較好的借鑒作用。在研究中,作者的表達只是我們研究的“引子”,關注競品、對標行業標桿、分析差距,才能夠對作者需求形成更準確的判斷,對滿足需求的方式和重要性層級形成有效啟發。

          以平臺運營服務支持為例,競品平臺的做法為我們提供了良好的借鑒意義,也形成了行之有效的業務參考。平臺與作者的理想關系是共贏共生,在服務過程中,需將平臺的玩法透明地傳遞給作者,讓作者對于如何運營、如何變現心里有底,建立“只要跟著平臺走就沒錯”的信賴感,與平臺之間形成更強的依存關系。


          三.關注生態各角色,納入C端視角

          內容創作生態包括平臺、B端創作者、C端用戶三種主要角色。創作者運營的目標受眾是C端用戶,對用戶更有吸引力的內容才更容易形成粉絲沉淀。因此,研究B端創作者,B-C聯動的分析視角尤為關鍵。我們可以從“C端用戶要什么”,推導出平臺需要幫“B端作者做什么”,進而給出更貼合創作者實際運營情況的賦能措施。

          研究發現,在粉絲沉淀環節,從C端視角出發,內容是形成作者關注關系的關鍵,也是塑造作者IP形象的關鍵。那么,對應到對B端需求的滿足上,平臺就應該為其優質內容的露出提供更多能力支持,包括內容的自主管理、內容的連帶互通功能,最大化發揮內容的價值,充分賦能創作者。


          四.聚焦群體差異,對細分需求保持敏感

          不同類型的作者有不同的訴求,研究中需要更多關注差異、滿足差異。

          以變現轉化環節為例,建立用戶信任感是創作者的一大需求。商業社會、信任為王,信任是形成購買的起點。平臺要重視對創作者身份的包裝與強化,外露關鍵信息,快速建立用戶對作者的信任感,從而促進付費轉化。在這個過程中,不同垂類下促成用戶下單購買的信息是不同的,作為研究者,應該對差異化的信息需求保持敏感。研究發現,電商購買中用戶更看重優惠折扣和交易信息;而專欄購買、付費咨詢,則更需要強調身份背書、作者榮譽等專業信息,以及增強作者和粉絲的溝通與交流,提升用戶信任度。


          基于以上分析,業務在信息外露、增強作者身份形象感知上也規劃了進一步的優化措施,促進用戶付費轉化。


          五.不僅看短視頻,還看垂直行業賽道

          依托于短視頻平臺的私域變現,本質上還是電商/知識付費,短視頻只是在商品之外額外提供了一個內容展現、IP塑造的自媒體營銷方式。因此,研究視角不能僅僅局限在短視頻本身,更要學習垂直賽道的玩法,如:電商領域對標淘寶、盒馬;知識付費領域對標得到、小鵝通等成熟玩家。他們在其各自領域已經形成較為成熟的變現模式,短視頻平臺在交易閉環的實現效果上需要向這些垂直賽道產品看齊。

          縱觀行業趨勢,短視頻平臺也在不斷引入產業鏈上的更多合作伙伴,例如:上游引入電商服務商進行供貨服務和產業帶打造;中游引入內容服務商提供創作者運營能力培訓、代運營服務;下游引入品牌服務商助力營銷推廣,以此提高平臺變現能力,共建生態繁榮。


          結語:理解創作者,先要成為創作者


          B端創作者的研究相對而言對研究者具有更大的挑戰,需要具備更豐富的行業知識儲備和更深入的問題洞察能力。理解創作者、理解內容創作生態才能為業務提出更切實可行的落地建議。

          理解創作者,不能僅僅是走近創作者,而是要成為創作者,親身經歷才能更有感悟,這也是無論做任何領域的研究,作為研究者都應該具有的態度。

          短視頻行業正經歷著它蓬勃的生長,未來有著無限的可能性,希望你和我們一起經歷、一起探索,也希望我們的思考能夠為你帶來一些啟發。

          文章來源:優設   作者:百度MEUX

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


          字有道理,文字編排的細節

          ui設計分享達人

          全文1萬4千字,講解文字編排有兩個層面的作用。其一,它做了一些傳遞信息的工作;其二,它自身在合理地編排下就會有韻律的美感。


                在通常版式設計中,一般是由文字、色彩、圖形三個要素組合而成的。通過這三個要素的有機搭配,從而給人視覺上造成一定的沖擊,激發人們的閱讀興趣。

               其次,文字組合編排是構成版式設計中最主要的構成要素,也是傳遞信息的重要的設計手法和策略。字體的選擇是否合適則會直接影響版式的效果,雖然能現在可供選擇的字體五花八門,但是所選擇的字體要能夠與版式的主題相吻合。除此之外,文字的字號也會影響閱讀,在排版時要注意文字信息的等級關系,做到有主有次。

             如果文字從發明出來的那一刻起,就是為了記錄和傳遞信息,那在版式中的文字就是通過設計設計手法來更好的傳遞信息。

              怎么去理解這句話呢?如果大家看過《王牌對王牌》這節目,里面有個游戲叫傳聲筒,里面的游戲規則是“每隊輪流參賽,每隊任選5名成員,每個成員用隔板隔開,第一人將對手所出題目,演繹給隊友,只能通過音效和動作表達,依次傳遞給下一位隊友,經過三四個人傳遞后最后一名隊友,猜測題目上的信息。猜對得一分,最終積分高的一隊獲勝?!?

               這種形式像不像設計師的日常呢?老板或者領導有個“牛批卡拉斯”的想法,然后他在想法告訴運營總監或者文策劃總監,然后在由下面的運營/策劃專員做成方案,最后在交給設計師做成圖片來傳遞老板那個“牛批卡拉斯”的想法。

              那么文字組合怎么去編排就成為將老板的想法完美的傳遞出來的關鍵要素,為了不南轅北轍,我們需要將文字編排的形成方案,并在實際的工作中通過不斷的實踐去完善,那讓我們一起來了解下文字組編排的技巧吧。

            一般的軟件里面都會有字體選擇器,我們需要找想要的字體的時候都是直接在里面去搜索,然后再去點擊使用,那么今天我來看看怎么通過觀察字體家族的特征來找到我們想要的字體吧。


          1.11字體家族的縮寫


              家庭中的所有成員都有各不同的稱謂來辨別身份,在字體家族中也是如此,我們通過不同的前綴后綴的縮寫來區別字體的樣式。

          例如:字體前面的LT代表的是萊諾字體公司,如果我們使用的字體前面或者后面帶有LT,那就說明這個款字體是由萊諾字體公司出版的。

             當然,我們日??吹阶煮w廠家也會有很多,例如常見的MS是微軟公司,MT是蒙納字體,ITC是國際字體公司等等,一般字體公司的名稱的縮寫為連著的大寫字母,所以我們看到字體中帶有2-3的大寫字母,我們可以默認他們是字體公司的名稱縮寫。

              那剛剛我們看到LT后面還有STD,那個是什么意思呢?STD是英文單詞“Standard”的縮寫,代表著這個字體只支持基礎的字符集,它的字體字符集相對會少點,與其相對應的“PRO”是英文單詞“Professional”,則是代表字符集比較多的后綴。

          1.12字體家族系統


               既然字體家族的縮寫那么多,那我們怎么把它規整好方便記憶呢?方便我們通過不同的前綴后綴來區別字體的樣式。正常的我們講字體家族系統一分為三類,1.字體的寬窄,2.字體的造型,3.字體的字重。

          1.13字體家族/字族的寬窄


               寬窄系統:只有比較大的字體公司去做這類型字體,因為不常用,所以做的就比較少,漢字里面好像漢儀旗黑又寬窄系統,那我們怎么去識別呢,以Ai為例子,如果我們在字體后綴發現帶Condensed,那么我們可以確定這個字體為窄體,以后如果我們在字體后綴發現帶Extended,那么這個字體則為寬體。如果設計中有特殊的需求,需要我們可以通過后綴去識別。

          1.14字體家族/字族造型


          造型系統是為給不同應用場景下字體做區分的,正常的分為:常規體,意大利斜體,空心體,裝飾花邊,老式數字。

          常規題:常規體的后面一般帶Roman或者Regular,帶著著這個字體里面最常用也是最適中的字體。

          意大利斜體:英文后綴一般帶Italic,這類型的字體一般是專人設計過的傾斜體,比軟件生成看起來更加舒適和諧。例如有的字體公司為了區分窄體的傾斜體,有的也會用這個單詞,oblique,但是意大利斜體(Italic)代表的是常規字的傾斜體。

          空心體:英文后綴一般帶Outline,在一些大型的字庫公司設計的字體會有,他打出的字不是實心的,而是空心字類型的,常見會在比較粗的字體上會有,因為這個的字體變成空心字不容易破壞字體的負空間。

          裝飾花邊:英文后綴一般帶Ornament,這種類型的字體一般比較少見,只要一個字體的字庫做到比較全的時候,才會考慮開發類似的字體。這個可以理解為字體類的素材,一般的應用場景比較少。

          老式數字:英文后綴一般帶Oldstyle Figures,比較明顯的特征是高低不一樣,這類型的字體一般應用在小寫字母的編排中讓數字看起來更和諧。

          標題專用字:英文后綴一般帶Titling,這類型的字體在放大后使用看起來比較精致,細節相對比較豐富,但是也有特殊的,例如Caslon字體的標題字用的是540的后綴。所以當找不到的時候我們可以通過細節去分辨。

          1.15字體家族/字族的字重


            字重的選擇一般是根據當前的選擇的字體去跳兩個字重去選擇,這樣才會有對比。字重也是我們設計中常用的選字模式。

          1.16字體家族的用途


              我們認識了字體家族對我們做設計有什么作用呢,一個字體家族越全面,我們做設計是可以選擇的范圍就越大,也就越方便,所以我們接到需求,需要選擇字體排版的時候,大致看下字體家族,就可以分辨出這款字體是否適合我們去使用。

          需要做好文字組合的編排的基礎是需要選擇合適的版面氣質的字體和相對應的中英文混合編排。


          2.10中文字體的編排


               中文字體屬于方塊字,具有字體的輪廓性,并且每個字符占據的空間都是相同的,限制較為嚴格,如段落開頭必須空兩格,豎排文字必須從右到左等規則。中文字體是一種非常規整的文字,因此靈活性相對較小,編排難度較大。

          2.11西文字體的編排


               一般情況下,英文字體采用流線型方式,靈活性很強,能夠根據版面的需求靈活變化字體的形態,以解決版面僵硬、呆板的問題,創造出豐富生動的版面效果。

          2.12中西文混合編排


               在版式設計中,經常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結合,展現兩種字體的優勢。編排時應該注意中文字體與英文字體的設計創意與主次關系,做到層次明確,并且要注意字體的統一性,如果字體變化過多,很容易造成版面的混亂。

          2.20西文的演化歷程


             我們在聊中西文的編排之前我們需要先了解下西文的歷史,就像我們在打王者榮耀一樣,要學習某個英雄,就先得了解英雄的技能,然后才是這些技能怎么去搭配使用,學習文字組編排也是一樣的道理。

                設計的目的一般是為零解決一些生活中的問題,字體的演化設計之路也是一樣的,都是通過外部能力能觸達的能力加上內部的需求所達到的最優的解決方案?,F在我們將西文字體在歷史上的進程可以分為“文藝復興體” “古羅馬襯線體”“過程型襯線體”“粗襯線體”“無襯線體”。

          2.21西文的基礎款字體


             我們可以大致簡單的把基礎款的字體分為兩種,一種是一種是襯線體和無襯線體,襯線體(Caslon,Baskeville,Bodoni,Didot,Garamond,),無襯線體(DIn,Helvetica),

          • 襯線體

          Garamond是一個早期字體,有老式數字,雕刻感比較強,有傾斜體,

          Baskeville修飾比Garamond要粗點,稍微有點厚重感,偏向優雅,特征明顯,

          Bodoni筆畫有明顯的過度,比較現代,

          Didot比較常見,特征更明顯,現代感更加強,女性感強,多用品牌,雜志,簡化大膽。筆畫對比更加大,出現的比較晚

          • 無襯線體

          Helvetica,特征,比較平穩,沒有特征,沒有華麗的裝飾,在國外特別受歡迎

          DIN,和Helvetica區別:變化性特殊,切口有角度性的變化,更加簡單干凈。偏向美術字體數字的幾何形強,比較抓眼球

          Futuer:菱角分明,幾何無襯線體,冰冷,升部比較高,比較高挑,多用于科技感比較足的設計中。

          因為基礎款的字體很多字體公司都會去做,我們可以通過谷歌可商用字體庫去尋找免費字體尋找:http://www.googlefonts.net/


          2.22中文的基礎款字體


          中文的基礎款排版字體一般為黑體,宋體,圓體,楷體和一些風格多變的美術體。

          • 襯線體

          最早是為適應印刷而出現的一種漢字字體,筆畫粗細有變化,而且一般是橫細豎粗,末端有裝飾部分,(即字腳,襯線),點,撇,捺,鉤等筆畫有尖端,屬于襯線字體,常用于書籍雜志報紙等正文排版,趙集,瘦金體。

          思源宋體,前身是小塚明朝體改進的,筆畫特征比較相似,小塚明朝橫筆畫要細點,思源宋體橫筆畫要粗點。

          • 無襯線體

          黑體,屏顯字體,無論放大還是縮小都能看的清晰,黑體可塑性比較強,常用于標題字的制作,小的可以作為內文,黑體有稱作方體或者等線體,沒有襯線裝飾,字形端莊,筆畫橫平豎直,筆跡全部一樣粗細,結構嚴謹醒目,筆畫粗壯有力,撇捺等筆畫不尖銳,使人易于閱讀。由于其醒目的特點,常用于標題,導語,標志等。

          思源黑體:是最廣泛知道的字體,質量高,7個字重,

          漢儀旗黑:可以滿足所有的排版的需求,寬窄系統也有。


          2.30無襯線體和襯線體的應用場景


               在我們日常的設計工作中,襯線體和無襯線體該怎么選擇呢?我相信很多設計師都在這個問題上糾結過。我們來結合歷史來看看這個問題吧

          2.31巴洛克時期和洛可可時期


               我們把時間倒退到歐洲17-18世紀,這個時期盛行一種藝術“巴洛克藝術”和“洛可可藝術”,巴洛克是一種更早期的宏大而華麗的藝術風格,后世有人將洛可可風格看作是巴洛克風格的晚期,即巴洛克的瓦解和頹廢階段。它產生在反宗教改革時期的意大利,發展于歐洲信奉天主教的大部分地區,以后隨著天主教的傳播,其影響遠及拉美和亞洲國家。巴洛克作為一種在時間、空間上影響都頗為深遠的藝術風格,其興起與當時的宗教有著緊密的聯系。然而它不僅在繪畫方面,巴洛克藝術代表整個藝術領域,包括音樂、建筑、裝飾藝術等,內涵也極為復雜。

               基本的特點是打破文藝復興時期的嚴肅、含蓄和均衡,崇尚豪華和氣派,注重強烈情感的表現,氣氛熱烈緊張,具有刺人耳目、動人心魄的藝術效果。所以它代表那個時期最流行風格。同時我們可以看看那個時期所產生的字體,也是一樣浮夸,裝飾性明顯。

          2.32現代主義設計風格


               我們在把時間撥20世紀德國,一所代表著現代主義設計風格的學校誕生了,包豪斯學院,德國魏瑪市的 “公立包豪斯學?!保⊿taatliches Bauhaus)的簡稱,后改稱“設計學院”(Hochschule für Gestaltung),習慣上仍沿稱“包豪斯”。在兩德統一后位于魏瑪的設計學院更名為魏瑪包豪斯大學(Bauhaus-Universit?t Weimar)。它的成立標志著現代設計教育的誕生,對世界現代設計的發展產生了深遠的影響,包豪斯也是世界上第一所完全為發展現代設計教育而建立的學院。包豪斯風格成為了現代主義風格的代名詞。

              而包豪斯的設計理念:把簡單的問題把形成標準化,強調一些構成上的東西,所以在這種觀念的影響下,就產生了一些非常好看的無襯線字體。

          而在現代化風格的影響下,產生出了工業衍生品也非常簡約,現代。

          2.33字體該怎么選擇


               做設計是一個入世學,所有的問題都需要結合現有的場景來看,我們上面聊完每個時期藝術熏陶下所產生的字體,那么我們結合實際情況來看下,我們和我們的父母都是在不同文化體系下所產生不同審美觀的人。左邊度圖是我們絕大數父母喜歡的裝修風格,像洛可可那時候一樣浮夸,而我們卻喜歡簡約的現代風格。

               那么字體也是一樣的,有襯線的字體屬于比較古典的氣質,簡約的無襯線字體則是比較現代的工業風。

          2.34中西文襯線體的分類


               也不是所有的襯線字體都是比較古老的,而Didot這款字體因為它造型的特性,也會經常出現在雜志封面和一些奢侈品的設計中。從時間的角度來講,最有歷史痕跡的是括弧線襯線又稱古典型襯線,其次是過渡型襯線到粗襯線,最現代的就是極細型襯線。

          而中文的襯線體沒有明確的區分,但是我們可以根據字體特征按照西文的類目去區分。

          2.35中西文無襯線體的分類


            那上面談到,不是所有的襯線體都代表古典或者歷史的厚重感,所以無襯線體也不是根據出現時間和之前的應用場景也是有區分的。


            西文的無襯線體分為傳統型無襯線,人文主義無襯線,和現代主義無襯線(幾何形無襯線),傳統型無襯線的G開口的地方都是水平的,開口的地方也比較小,看起來比較保守,母A它的筆畫是由粗到細,落差不是特別的大,字體造型也比較穩重。人文主義無襯線它慢慢的開始出現一些傾斜的特征,這樣它的開口處可以做的更大一點,它的負空間也會更大一點,字母A為了讓它的負空間也就是字谷變的更大,它的筆畫粗細變的更大了,手寫的感覺會更多一點,現代主義無襯線體字母G它不僅開口要大,而且還有很多圓形切割的特點。幾何的特征會更濃厚一點,我們把這個特征稱為幾何型無襯線字體。

             中文的無襯線則分為傳統型無襯線,中間無襯線,現代型無襯線。在漢字的黑體里,分為2類字體,一類是有喇叭口的,一類是沒有喇叭口的,喇叭口的造型特征是在筆畫的轉折或筆畫造型豐富的地方會有一些向里面凹陷或微微凸起的造型特征,沒有喇叭口的字體特征是在任何筆畫造型都收拾的比較干凈利落。像傳統和中間型無襯線都是慢慢像現代型無襯線演化,喇叭口慢慢的演化成工業的切口風。

          2.36怎么去選擇字體


             字體的選擇我們應該基于合適的主題,合適的用字場景以及使用平臺或者場景,這樣才可以選出合適的字體。

          合適的主題:這點適用可以在運營設計或者平面設計中,我們接到的需要適用何種風格,例如國潮肯定會選用毛筆字這種張力比較強的字體,在例如比較有工匠精神的工藝品可以選用有手工感的宋體字。

          合適的用字場景,看選用的字是用在標題還是還是正文,標題字可以選用張力比較強的字體,因為標題的文字需要醒目,可以直接傳遞版面需要表達的主題,而正文需要閱讀文本則選擇無個性的黑體比較合適。

          適用的平臺,設計展現的平臺也是對字體選用的影響的關鍵因素之一,例如在iOS上選用蘋方字體,安卓上選用思源黑體,PC選用微軟雅黑都可以減輕開發打包的大小。

          2.37中西文如何搭配


            我們為什么要做中西文的那我們在中西文搭配的時候應該怎么去搭配呢?下面是我總結的三個方向:

          1.細節類似,細節類似我們可以觀察字體的細節進行搭配

          2.時間相同,就是在某一個時間節點下同時產生的兩款字體。

          3 .氣質相同,這個是在漢字里面才有的,我們常見的字體除了宋體和黑體外,還有是書法字體或手寫體,這類型的字體在通常是不太好搭配字體的。

          那要是原字體的西文不太好看,我們怎么去搭配呢?、

          • 外形類似

          帶有這種轉角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體,這樣搭配起來會更舒服,或者漢字的黑體搭配西文的無襯線體,因為它們特征是一樣的,然后就是中文的圓體也同樣會搭配一個西文的圓體,這些都是細節類似的搭配方法。

          • 時間相同

          是看筆畫相似來匹配的,我們可以看到下面這個中文的筆畫特征是帶有喇叭口,這種類型的黑體很明顯是印刷工業時代的產物才會有的特征,而右邊的西文是粗襯線字體,也是帶有工業時期復古的感覺,而且產生的時間也是比較近似的,一個是20世紀左右產生的字體,一個是19世紀產生的字體,這兩款字體搭配在一起可以凸顯工業感,穩重感,復古感都有,這也是時間匹配法。

          • 氣質相同

              例如在中國像楷書字體的特征獨特,但是英文的字體沒有類似特征的字體,所以楷書和宋體在中國都可以列為書法體,在氣質上是相同的,所以搭配在一起也是比較常見的。

          另外我也總結了一些常用的字體搭配方法,放在下圖了,這些只是給大家平常搭配字體時候的一個參考依據。

               

              我們在日常的的設計工作中,無論是哪種設計,都會涉及文字組的編排,我們可以觀察到一般的文本分兩種組合,一種是標題文本+說明性文本。

          標題文本主要放置版本需要傳遞的重要信息,說明性文本是輔助傳遞標題文本的含義。

          3.10文字組編排的對比基礎


          對比廣泛的存在于我們的生活中,對比的形式也是多種多樣的,例如身高的高矮對比,體重的胖瘦對比,速度的快慢對比等等。在設計領域內,對比是最常出現的形式。對于信息來說,適當的對比可以讓信息層級更加清晰明了,同一層級的信息更加豐富。對于畫面整體來說,恰當的對比可以很好的制造出焦點(畫面主體)當我們需要突出某一個元素的時候,其他的元素相應的就要做出對比關系,才能保證主體的突出。

          3.11字號對比

                字號對比是最快可以提現內容層級關系的一個設計點,一個版面里面不會有太多的文字層級,一般保持在3-5個層級,大部分的軟件都會自己自帶的推薦字號,為什么最小的字號是6號,因為印刷里是可視的極限。

          3.12設計中常用的字號對比


          常見的字號比例有1:1.5,1:1.618,1:1.732,1:2等等。這些比例在正常使用能很快可以做出層級關系且不會有特別大的問題。例如1:1.618是黃金比例,也是很多植物生長的規律,符合人正常的審美感受。

          3.13行距對比


          行距比例如果沒設置合適,對閱讀會造成影響,很容易造成眼睛是視覺疲勞,看來不舒服且文本不容易閱讀。

          當行距設置到合適的時候, 我們閱讀起來會比較舒服,也會提高閱讀效率。

          行距的設定也可以套用固定的算法:字號*倍率=行距。

          3.20行距對比的作用


              我們在日常的設計工作中,當行距調整到比較合適的大小的時候,版面會具備層次感 ,但超過一定限度也不太好。那行距的調整具體有哪些用途呢,1.平衡版面,2.閱讀效率

          3.21平衡版面

               例如現在整個版面看起來比較輕盈,那么我們可以選擇一個比較大的行距,因為中間的空比較多,所以看起來并沒有那么重。例如我們現在的版面非常重,我們需要平衡他,那我們的行距就可以給近一點,讓文本塊在視覺上更重,這就是平衡的作用。

          3.22閱讀效率


              行距的設定大小會影響我們閱讀的效率,例如行距比例小的,一般用在標題文本,因為標題的文本一般需要我們快速閱讀并了解清楚。

          3.30字距的作用

          字距大設定也對人的閱讀也會有影響,字據過大的時候像樹懶說話一樣慢,字據小的時候感覺說話比較快。

          當字距是-800時候的感受,感覺想動漫里的樹懶一樣,說起話來慢吞吞的。

          當字距是--100時候的感受,感覺像和人在吵架一樣,說話的語速比較急切。

          在一般的平面設計中字據設定為正負40-70之間去選擇,但是在UI設計中,字距一般為0.


          3.31中宮對字距對影響


             同時字距也會受到中宮的影響,在同字號的情況下,微軟雅黑會比其他字號大一號,中宮越大,字面也會越大,因為筆畫外擴,中宮大的字體,字面大,默認間距小

             中宮大的字體,字面大,默認間距小,他的字距可以給大點,中宮小的字體,字面小,默認間距大,他的字距可以給小點,


          3.32文本性質對字距對影響


          例如平方字體,正常0間距做內文會比較舒服,但是作為標題,調了之后會讀起來比較連貫。


          3.33字體形狀對字距對影響


               無論是西文還是漢字,他的形狀都會不一樣,有圓形的,正方形的,三角形的等等,不同的形狀,負空間是不一樣的,不同的字號是需要微調字距的,我們需要軟件視覺來調整。

          在AI中有個功能是基于視覺對齊,我們開啟便可以解決這個問題。


          3.40欄寬的設定


              分欄的寬度,決定了一行的長度和字數,當欄寬太長的時候,我們閱讀可以會比較吃力,總感覺一眼看不到頭。

                一行多少字合適呢?一般的是20-30字之間,極限是15-30之間比較合適,一行字太少和太長都會讓人很累,,這也是為什么有的書為啥讀不下去的原因。

          這也是為什么很多娛樂消遣方便的書一頁的字很多,也是為為了提升閱讀的興趣。

               文字設計的成功與否,不僅在于字體自身的書寫,也在于其運用的排列組合是否得當,文字層級之間的關系,適用規則,欄距>行距>字距。


          3.40字重平衡

             上面的舒服,因為粗細對比比較平衡,下面面的對比過度,什么時候下可以做強對比呢?做了字號對比,就不要做過大的字重對比,

            3.50/知句逗


              在現在的板式設計中,有一個被忽略的知識點,就是標點符號。標點符號在當今社會不僅僅是用來斷句,也是可以用來傳遞情感,例如下圖,同一句話因為加了不同的標段符號,所傳達的意思就完全不一樣了。

              所以標點符號的運用與文字組的編排在板式設計中同樣的重要,例如在聊天的時候,我們隨意的時候的問號在正式排版中,“!”和“?”的疊用不能超過3個。

             你一句話表達驚訝和疑問的時候,我們應該將問號放在前面感嘆號放在后面。

          例如有書名號的文本段是不在需要用頓號去隔開的,如果當書名號后面有括號則是需要用標點符號去把他們分割開來的。

             當然還有就是逗號和不能在一段的前面等等,這些都只是給各位小伙伴一些拓展知識,有興趣的小伙伴如果想自己的板式更加規范可以自己去查閱相關資料。



               梳理信息層級有哪些作用呢?我們在自然界中會發現很多與階級有關的現場,例如狼群里,一般都會有頭狼,也叫狼王,主要是統領狼群的行動及群體意識,在企業中,老板作為一個公司的核心人物,一般正常的普通員工去離職,不會影響公司的正常運作,但是如果涉及到公司的老板不知下落或者企業的核心管理層離職,會對公司的股價和正常的業務流程造成很大的干擾。

               在我們日常設計中編排文字組也是一樣的,我們首先需要確定接到的需求哪些是重要且關鍵的信息,哪些是次要信息。當它的重要層級越高,他在版面中所扮演傳遞信息的角色就越重要,我們接下來便是通過設計手法,例如通過字距,筆畫粗細,顏色,以及字體等等來做出層級的區分。

          那我我們一起來看看實際的案例吧!


          4.10 梳理信息層級梳理的作用


              梳理信息層級有哪些作用呢?我們在自然界中會發現很多與階級有關的現場,例如狼群里,一般都會有頭狼,也叫狼王,主要是統領狼群的行動及群體意識,在公司中,老板

          1.首先是它會便于傳遞信息的中心思想,有助于用戶快速理解,所以一般大標題文字很對都會做效果,有助于提升視覺的焦點,2.信息層級分明,主次有序的在版面中傳遞信息,3.降低視覺噪音:當版面中的文字信息案例主次有序的排列后,版面看起來比較和諧,所有的元素感覺是本應該就在那里的。

          如果信息層級沒有梳理過的版面,則會閱讀起來非常的吃力卻效率低下。


          4.11  閱讀中的節奏感與心理引導


                關于文字編排節奏感,很多人應該好奇了節奏不是音樂的范疇嗎?怎么文字編排也說有節奏嗎了?

                其實節奏感隨著地球開始有生命開始便存在了,因為太陽升起到落下是有著自己每天固定的節奏的,太陽升起人開始勞作,看著周圍的動物和植物都一天天有變化,感受著自己由青澀稚嫩到遲暮之年;這些有規則的事物形成的固有的節奏。

              在文字編排中也可以感受到這樣的節奏,例如,字體是直線還是曲線,垂直還是水平,傾斜還是正立,緊湊還是寬松,對稱還是不對稱……這些都體現著文字的節奏。段與段之間的留白多少,字間距的大小都是有規律可以尋找的,如果文字組合被有規律的設計、排版,那在設計稿中本身就具有了一種節奏感的吸引力。沒有節奏就不會有生命,也不會有任何創造。


          4.12  什么是文字組的節奏感


              好聽的因為是因為音樂的節奏會有起有伏,有前奏有副歌有高潮部分,這樣的音樂才不會讓人覺得平淡,我們轉換到文字組編排也是一樣的道理,當我們把一些沒有節奏感的書籍拿出來看是會覺得很困的。

               如果我們加以設計的手法,把文字組合好好的排版一下,這是可以提升我們對內容的閱讀興趣的。例如我們閱讀的雜志和一些資訊類的APP,他們對文字和圖片的排版就會很下心思。

                 那我們怎么打造自己設計中的節奏感呢?那接下來我們聊聊怎么通過閱讀視線心理去引導用戶。首先是基礎的視覺邏輯,讓用戶漸入佳境,通過常規的的閱讀習慣,其實是根據大小、色彩、線的指向去引導用戶的視線節奏,其次是視線引導,根據用戶的常用邏輯打造版面中的節奏感。


          4.20 視覺邏輯


              我們平時在看版面的時候的視線觀看邏輯是怎么確定的呢?1.根據日常的書寫邏輯:我們看圖習慣和我們日常的書寫習慣是密不可分的,一般是從左至右,從上到下,所以我們很少會看到從右往左的排版和從下往上的排版,因為這樣的不符合人的邏輯,

              因為每個人都心理感受都不一樣,所以當視覺引導不一樣的時候,傳遞的感受也是不一樣的,文字組合的目的是為了增強其視覺傳達功能,賦予審美情感,誘導人們有興趣地進行閱讀。因此,在組合方式上就需要順應人們的心理感受。人們的一般閱讀順序是:水平方向上,視線一般是從左向右流動;垂直方向上,視線一般從上向下流動;大于45°斜度時,視線從上而下流動;小于45°時,視線從下向上流動。  


          4.21  閱讀順序和文字的關系


            板式的閱讀順序有兩種:從左到右和從右到左。這是人們平時慣性的限制,就好像寫文章一樣,一旦決定了從左到右寫,就不會更改,板式也是如此,一旦決定了板式的閱讀順序,許多元素都會隨之被限制。

          • 橫排文字

          正常我們去閱讀橫排文字就是先從左到右,從上到下的規律去閱讀。

          • 豎排文字

          豎排文字的閱讀順序是從上到下,整體在從右上至左下。我們無論是橫排版還是豎排版,行距都是要大于字距的。






          4.22  通過閱讀邏輯引導視覺


               版式設計的核心就是吸引人的視線。當我們在觀看某些東西時,大部分的人都有自己習以為常的觀看習慣。人們往往在一瞬間就會判斷出這是什么?這一現象導致的結果是人們會想起與所看到的東西相近的信息,并判斷畫面中信息的價值,我們將這種心理傾向稱之為視覺心理。視線的引導是建立在視線的移動之上的,在引導視線前,我們需要先建立焦點。

          4.23  閱讀中的視覺聚焦


                 視覺聚焦是在文字組編排中先建立視覺的突破口,然后就再去引導其他的內容。設計師,有一個重要的瓶頸就是,無法在版面中快速的傳達主題的中心思想,明明什么信息都有,就是讓人抓不住重點。如何一秒吸引別人的注意力,快速get要表達的點?那就是需要在版面中埋下引導別人實現的點。

          4.30  如何進行視線對比引導


          引導方式可以根據版面現有的內容做大小層次對比,顏色對比,空間對比及元素具有的特有指向性。

          4.31  大小對比


             人們在日常生活中,通常會先注意到大的東西,在有較大的元素在版面中,我們的視線往往會向大的元素是聚集,從大到小,這樣一步一步的去看,在版面設計運用這樣的小技巧,我們閱讀起來相對來說比較順暢。特別是當兩件物體顏色或材質相同的時候,視線往往會集中在大的物體上。根據這一原理,應該盡量放大希望吸引讀者注意的東西。


          4.32  色彩對比


             通過有序的色彩的引導視線是版式設計中不可或缺的主要元素,同時也頻繁應用于視覺引導中。色彩的心理效果在視覺引導中的運用就是:人的目光首先會注意眾多色彩中不同的那一個。例如下圖中,當色彩是藍色的時候,是沒有焦點的,當出現別等顏色是特別吸引人的目光的。

          然后在加上大小的對比之后,吸引我們眼球的肯定是下面這個大圓形。

          如果在下面這個大圓形去改變顏色,這個便會更加大吸引人

          其次是亮明度高的顏色比明度低的更吸引人的目光。

          暖色調比冷色調會更加吸引人

          4.33視覺吸引力的關系


             我們正常的瀏覽順序是從左至右,從上至下,那當我們怎么打破這個順序呢?首先是暖色>冷色,明度高>明度低的,元素大的>元素小的,那下圖我們瀏覽順序應該是先看紅色,在上面開始看,其次是右邊和下方。


          4.40視線的引導


          引導是一種視覺的語言。一幅好的設計作品,用戶的視線一定是被控制在主體和興趣點上,而不是被其他與主題無關的雜物所吸引,只要用好視線的引導,才可以傳遞我們想傳遞的。


          4.41 元素的指向性


              當版面中出現箭頭或者人臉等相關指向性的圖片或者元素出現,是因為古希臘畢達哥拉斯學派和柏拉圖認為眼睛在捕捉物體時,視線、目光和力量會以物體為目標,從眼睛向物體方向傳送,把這一想法用設計原理來表示時。這時候的帶有指向性的圖片或者元素,便是視覺的切入點。


          4.42 線的引導


          線作為板式中的引導,也是非常常用的,它既可以作為引導視線的切入點,也可以填補畫面中的空白點。

          線除了是直線,還可以是曲線,文字組成的線或者負空間形成的線,都是具有引導視線的作用。


          4.43 向下一數字移動視線


             我們從小在學校學習了數字的大小順序,在在考試時,我們會順著考生號找座位,坐車時順著車票找座位。我們生活中還有很多地方會應用到編號。所以我們的目光會隨編號移動,是因為我們一直就有這樣的習慣。如果看到1,就自然會找2,看到A會去尋找B,視線就會這樣一直移動下去。

               設計離不開構圖,構圖通俗地講:就是為了表現畫面的主題思想,而對畫面上的人或物及其陪體、環境作出恰當的、合理的、舒適的安排,并運用藝術的技巧、技術手段強化或削弱畫面上某些部分,最終達到使主題形象突出,主體和陪體之間的布局多樣統一,畫面疏密有致,以及結構均衡的藝術效果,使主題思想得到充分、完美的表現。

          當我們把文字組編排好了,可以通過構成形式將他們串聯起來,這才是好的排版,能快速想到版面的效果。


          5.10 居中構圖


               居中構圖是最常見的構圖,指的是將畫面的主要元素放置在版面的中軸線上,目的是快速吸引眼球,占據視覺焦點,突出主體。中心構圖的版式簡潔、利落,給人以雅致的視覺感受。在突出主體的同時又能賦予畫面穩定感,并使整體畫面具有一定的沖擊力,需要表現規整穩定、醒目大方的版面時,可以使用居中構圖。其次對稱構圖是居中的一種特例。


          5.11 對稱構圖


                 對稱的形態在視覺上有自然、安定、均勻、協調、整齊、典雅、莊重、完美的樸素美感,符合人眼的視覺習慣。平面構圖中的對稱,可分為點對稱和軸對稱。在平面構圖中應用對稱法則要避免由于過分的絕對對稱而產生單調、呆板的感覺。有時,在整體對稱的格局中加入一些不對稱的因素,反而能增加構圖的生動性和美感,避免了單調和呆板。能夠突出主體,聚焦視線,當制作的圖片沒有太多文字,并且展示主體很明確的情況下,可以使用對稱構圖,在電影海報中也是比較常見的。


          5.12 傾斜構圖


               斜線式構圖又稱傾斜構圖,是將文字或者主體物以傾斜的方式放置在版面當中。傾斜的角度產生勢能,給人以引導作用。優化視覺層級,清晰的傳遞信息。讓比較呆板的畫面具有活力和生機,當制作的版面需要沖擊、不穩定效果時,可以使用傾斜式構圖,需要沖擊感和不穩定感時可以嘗試,也可以做透視,讓他有近大遠小的空間感。


          5.13 S/Z型構圖


             曲線式構圖指的是版面中重要元素呈曲線排布,其他元素填充剩余空間,曲線具有靈活的屬性。其中“S”形狀從前景向中景和后景延申,畫面構成縱深方向的空間關系的視覺感,所以曲線構圖的版面常常顯得充實、熱鬧、生動、空間感。具有曲線的優美而富有活力和韻味,需要有力的表現場景的空間感和深度時,可以選擇S形構圖,例如瑜伽海報。

          要表現畫面的空間感和縱深感也可以用S型購物,這也是S型構圖的特性,讓畫面更有空間感。


          5.14 壓腳構圖


              壓角式構圖適用于標題字數較少的版式設計,標題作為絕對重要的元素放置四角,一眼就能被看到。要做好壓住四角的版式設計得進行網格構架,控制好版面之間的比例。這種構圖形式使得畫面更加穩定,突出中心主體。


          5.15 散點構圖


              散點式構圖是指主體數量較多,散落在畫面當中的構圖方法。在應用散點式構圖時應防止散亂,宜用隱性結構線或結構形將各個“點暗連起來,相互呼應形成聯系。”適用于標題文字稍多的平面版式設計。文字排布時,拉開字的間距,在版式上化作為元素。標題文字的縱向距離要大于橫向距離,否則容易誤導閱讀順序。當文字信息比較多的時候,可以選擇散點構圖。


          5.16 三分法構圖


              三分法是一條法則,同時也不是一條規則。 這個說法很拗口,我們來理解一下。 從本質上講,它就是我們的眼睛自然感知圖像的方式,這些圖像被限制在一個邊界之內(例如畫框)。 這些框架,都有一個固定的長度和寬度; 將這兩個屬性分別分成三個相等的部分,這會包含兩條水平和垂直穿過框架的等距線,形成四個線相交的點,并創建九個相等大小的框架,如下圖的九宮格。

               而當版面的主要元素分布在三分線或點上,多數人會感覺這個畫面會比較和諧舒服,這接近是一種天性和本能了。當然,你還可以舉例說很多不是三分構圖的例子來反駁我,但這不重要,只要你要知道大部分遵循三分法構圖的畫面看著都是比較舒服的事實就行了。


          6.10 總結


              古時候的文人墨客的門檻是“知句逗”,我個人覺得設計要想入行設計的門檻便是最基本的文字組的編排,

          我們的感覺,即我們的視覺和我們的美感,優于幾何結構,當我們在處理黑白對比的平衡時,我們必須訴諸感,

          在文字組的編排中,其中包含的技藝、功能和形式設計是絕對不能分開的。當我們作為設計師,做好每一處設計的細節,也是對觀看版面用戶最基本的尊重吧!

          文章來源:優設   作者:Endings

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

          2021設計趨勢分析-3D/動效/插畫

          ui設計分享達人







          文章來源:ui中國   作者:百度MEUX

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


          超詳細!總監出品的B端設計規范指南:配色

          ui設計分享達人

          超詳細!總監出品的B端設計規范指南(三):配色

          B 端設計也是 UI 設計的一種,它的輸出環境只存在于電子屏幕中,所以統一使用 RGB 色彩顯示模式即可。

          RGB 即光的三原色,因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數值來呈現,比如:

          超詳細!總監出品的B端設計規范指南(三):配色

          這是 RGB 色彩最標準的記錄方式,但顯然看起來特別的不直觀,或者說不方便。所以在計算機中,為了方便記錄和調用,使用了一串十六進制的代碼來指代具體的 RGB 色。

          超詳細!總監出品的B端設計規范指南(三):配色

          理論上,我們只要使用 RGB 模式,隨便你怎么選色,只要記錄 16 進制碼進行復用,你就可以在任何文件、設備中獲得相同的色彩。

          但在實際顯示效果上,不同的系統、設備、瀏覽器都有自己的調色板,“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思,比如牛子,我以為它是類似“晴子”這樣的姓名,至于你們的理解嘛……

          相關行業為了避免這樣的問題,提出了 WEB 安全色的概念,即這些色彩在不同的顯示環境下,能實現最接近的色彩效果。

          那么安全色都有哪些呢?網上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡,這套色彩最全,使用范圍也最廣的顏色。

          超詳細!總監出品的B端設計規范指南(三):配色

          我們可以通過下面這個鏈接中的網頁工具,幫助我們快速實現選色和復制色彩代碼的操作。

          超詳細!總監出品的B端設計規范指南(三):配色

          網站鏈接:https://www.materialpalette.com/colors

          當然,設計 B 端界面并不是只能使用安全配色,這只是一種建議,可以盡量確保主色,尤其是輔助色使用安全色,而中性色可以自由定義(下面會提)。

          超詳細!總監出品的B端設計規范指南(三):配色

          第 2 件事,自然就是講講該怎么配色了。和 C 端設計類似,我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型,并把它們應用到合理的位置中去。

          只是,針對 C 端來講,B 端的配色更功能化,更理性,也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例,比如下圖這種。

          超詳細!總監出品的B端設計規范指南(三):配色

          過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率,除非是一些政績工程用來當 “花瓶” 的數據大屏,否則我們首先要排除顏色過度應用的選項。

          那么什么主色、輔助色、中性色,我們先簡單做個說明。

          主色,即你這套產品中的品牌色彩,是整套項目最核心,重要性最高的顏色。主色的選擇通常和你的品牌相關聯,比如騰訊云的藍色,阿里云的橙色,七麥的綠色。

          超詳細!總監出品的B端設計規范指南(三):配色

          輔助色,則是用來在系統中進行強調、標識、區分的彩色系統。品牌或者 C 端設計可能會通過輔助色和主色搭配實現個性化的配色方案,但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強,是完全貼合操作效率來制定的。

          比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色,它們都有對應的功能寓意場景。

          超詳細!總監出品的B端設計規范指南(三):配色

          中性色,則是這套系統中色彩使用的相關灰色,因為灰色是沒有色相、冷暖的區別,所以我們也稱它們為中性色。主要應用在文字、背景、分割線等基礎元素中。

          超詳細!總監出品的B端設計規范指南(三):配色

          B 端的配色,即了解這三個色彩類型以后,能正確制定合理的顏色,并應用進項目中去。下面,我們分別對每個類別進行簡單的講解。

          超詳細!總監出品的B端設計規范指南(三):配色

          1. 主色的應用規則

          B 端的主色也就是產品的品牌色,多數 B 端項目中,主色不需要 B 端設計師自己選,在項目開始前就會有相關的品牌色、LOGO,直接復制色號即可。

          和 C 端配色最大的不同是,品牌色在這里很多時候只是 “吉祥物”,它的存在用來宣示品牌本身的存在,但并不是任何情況下都直接參與界面色彩的填充。

          假設品牌色是紫色、熒光黃、暗棕色之類的,那么這類顏色本身的內涵、寓意是難以滿足功能需求的,我們要盡可能減少它們的出現面積、頻次。

          在 B 端設計中,主色的應用是最不需要大面積填充的,即使它是常見、耐用的藍色、橙色,主色的填充主要只應用在下面這些類型內容中:

          • LOGO
          • 關鍵按鈕
          • 選中狀態
          • 高亮文本、圖標
          • 標簽用色

          2. 輔助色的應用規則

          有了主色,我們就要為項目添加其它色彩了。

          B 端彩色的搭配原則只有一個,那就是 —— 能省就省。我們不是設計一個讓用戶發出感嘆的色彩豐富絢麗、細節眾多的視覺平面,而是設計一個用來使用的軟件系統。所以前面舉例的那些花里胡哨的反面案例,就一定要在正式項目中敬而遠之。

          用專業術語來說,配色過程要遵守 “奧卡姆剃刀原則”,如無必要,勿增輔色。

          而為了滿足功能性需求,可以為 B 端項目添加的輔助色類型其實也非常的有限,按寓意劃分常見的也就以下幾種:

          • 正確、通過
          • 鏈接、選中
          • 警示、錯誤
          • 提醒、注意
          • 失效、未完成

          相信看到這里,你們腦海中已經有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色,與用戶的長期經驗吻合,沒有識別的成本。

          而如果為了個性而個性,對輔助用色另辟蹊徑,相當于在異國自駕時使用藍燈行棕色停的系統,異國風情是有了,說翻車也就翻車了。

          所以,針對 B 端輔助色的使用上,如果自己沒有把握和經驗,可以套用下方我們整理的 RGB 安全色,填充到頁面對應的元素中去:

          用谷歌色卡各選 3 個同類色出來,并進行標記

          • 正確、通過:綠色
          • 鏈接、選中:藍色
          • 警示、錯誤:紅色
          • 提醒、注意:黃色
          • 失效、未完成:藍灰

          3. 中性色的應用規則

          B 端的輔助色找起來不難,難的是中性色的使用和搭配上。

          任何完整的 B 端的項目,同一個界面中都包含了多個模塊、層級,以及數之不盡的文本字段。在這么多的內容中,我們要根據模塊、文字的權重,選擇合理的中性色填充。

          超詳細!總監出品的B端設計規范指南(三):配色

          新手很容易迷失在中性色的配色過程中,往往一套界面做完以后,使用的灰色或黑色透明度數量根本無法統計,非常的混亂。

          所以,為了避免這樣的情況,我會建議從開始設計之前就定一套中性色,并將它們添加到設計軟件的色彩畫板中,每次填充中性色的時候直接從這個色板中選擇即可。

          超詳細!總監出品的B端設計規范指南(三):配色

          那么如何制定這套中性色?首先要理解在電子顯示器中,人眼對偏冷的中性色是耐受的(舒適),所以專業的 B 端項目中,中性色都帶有一定的冷色色相和飽和度,比如下圖是 Element 中性色在拾色器區域的分布,就并不是全灰的。

          超詳細!總監出品的B端設計規范指南(三):配色

          所以加入冷色是有必要的,同時,我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準,全黑時 B 值為 0,白色為 100,每個定義出來的灰度都可以用 B 值作為代號,如 B20、B40 等。

          我們根據這個標準,定義出 5-8 級的中性色,就可以滿足項目中的大多數場景。

          雖然會有一些項目會使用透明度來制定灰度等級,比如黑色的 80%、40% 透明度,但我更建議將透明度使用場景和實際色值定義區分開來,只有在色彩的不同狀態(選中/失效等)下再應用透明度。

          結尾

          有關 B 端配色的部分也就先說到這里,B 端配色遠遠比 C 端更簡單,也更枯燥??梢允褂玫纳史秶?,套路也更一致。我們要做的,就是將它們合理進行填充。


          超詳細!總監出品的B端設計規范指南:配色

          ui設計分享達人

          超詳細!總監出品的B端設計規范指南(三):配色

          B 端設計也是 UI 設計的一種,它的輸出環境只存在于電子屏幕中,所以統一使用 RGB 色彩顯示模式即可。

          RGB 即光的三原色,因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數值來呈現,比如:

          超詳細!總監出品的B端設計規范指南(三):配色

          這是 RGB 色彩最標準的記錄方式,但顯然看起來特別的不直觀,或者說不方便。所以在計算機中,為了方便記錄和調用,使用了一串十六進制的代碼來指代具體的 RGB 色。

          超詳細!總監出品的B端設計規范指南(三):配色

          理論上,我們只要使用 RGB 模式,隨便你怎么選色,只要記錄 16 進制碼進行復用,你就可以在任何文件、設備中獲得相同的色彩。

          但在實際顯示效果上,不同的系統、設備、瀏覽器都有自己的調色板,“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思,比如牛子,我以為它是類似“晴子”這樣的姓名,至于你們的理解嘛……

          相關行業為了避免這樣的問題,提出了 WEB 安全色的概念,即這些色彩在不同的顯示環境下,能實現最接近的色彩效果。

          那么安全色都有哪些呢?網上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡,這套色彩最全,使用范圍也最廣的顏色。

          超詳細!總監出品的B端設計規范指南(三):配色

          我們可以通過下面這個鏈接中的網頁工具,幫助我們快速實現選色和復制色彩代碼的操作。

          超詳細!總監出品的B端設計規范指南(三):配色

          網站鏈接:https://www.materialpalette.com/colors

          當然,設計 B 端界面并不是只能使用安全配色,這只是一種建議,可以盡量確保主色,尤其是輔助色使用安全色,而中性色可以自由定義(下面會提)。

          超詳細!總監出品的B端設計規范指南(三):配色

          第 2 件事,自然就是講講該怎么配色了。和 C 端設計類似,我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型,并把它們應用到合理的位置中去。

          只是,針對 C 端來講,B 端的配色更功能化,更理性,也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例,比如下圖這種。

          超詳細!總監出品的B端設計規范指南(三):配色

          過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率,除非是一些政績工程用來當 “花瓶” 的數據大屏,否則我們首先要排除顏色過度應用的選項。

          那么什么主色、輔助色、中性色,我們先簡單做個說明。

          主色,即你這套產品中的品牌色彩,是整套項目最核心,重要性最高的顏色。主色的選擇通常和你的品牌相關聯,比如騰訊云的藍色,阿里云的橙色,七麥的綠色。

          超詳細!總監出品的B端設計規范指南(三):配色

          輔助色,則是用來在系統中進行強調、標識、區分的彩色系統。品牌或者 C 端設計可能會通過輔助色和主色搭配實現個性化的配色方案,但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強,是完全貼合操作效率來制定的。

          比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色,它們都有對應的功能寓意場景。

          超詳細!總監出品的B端設計規范指南(三):配色

          中性色,則是這套系統中色彩使用的相關灰色,因為灰色是沒有色相、冷暖的區別,所以我們也稱它們為中性色。主要應用在文字、背景、分割線等基礎元素中。

          超詳細!總監出品的B端設計規范指南(三):配色

          B 端的配色,即了解這三個色彩類型以后,能正確制定合理的顏色,并應用進項目中去。下面,我們分別對每個類別進行簡單的講解。

          超詳細!總監出品的B端設計規范指南(三):配色

          1. 主色的應用規則

          B 端的主色也就是產品的品牌色,多數 B 端項目中,主色不需要 B 端設計師自己選,在項目開始前就會有相關的品牌色、LOGO,直接復制色號即可。

          和 C 端配色最大的不同是,品牌色在這里很多時候只是 “吉祥物”,它的存在用來宣示品牌本身的存在,但并不是任何情況下都直接參與界面色彩的填充。

          假設品牌色是紫色、熒光黃、暗棕色之類的,那么這類顏色本身的內涵、寓意是難以滿足功能需求的,我們要盡可能減少它們的出現面積、頻次。

          在 B 端設計中,主色的應用是最不需要大面積填充的,即使它是常見、耐用的藍色、橙色,主色的填充主要只應用在下面這些類型內容中:

          • LOGO
          • 關鍵按鈕
          • 選中狀態
          • 高亮文本、圖標
          • 標簽用色

          2. 輔助色的應用規則

          有了主色,我們就要為項目添加其它色彩了。

          B 端彩色的搭配原則只有一個,那就是 —— 能省就省。我們不是設計一個讓用戶發出感嘆的色彩豐富絢麗、細節眾多的視覺平面,而是設計一個用來使用的軟件系統。所以前面舉例的那些花里胡哨的反面案例,就一定要在正式項目中敬而遠之。

          用專業術語來說,配色過程要遵守 “奧卡姆剃刀原則”,如無必要,勿增輔色。

          而為了滿足功能性需求,可以為 B 端項目添加的輔助色類型其實也非常的有限,按寓意劃分常見的也就以下幾種:

          • 正確、通過
          • 鏈接、選中
          • 警示、錯誤
          • 提醒、注意
          • 失效、未完成

          相信看到這里,你們腦海中已經有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色,與用戶的長期經驗吻合,沒有識別的成本。

          而如果為了個性而個性,對輔助用色另辟蹊徑,相當于在異國自駕時使用藍燈行棕色停的系統,異國風情是有了,說翻車也就翻車了。

          所以,針對 B 端輔助色的使用上,如果自己沒有把握和經驗,可以套用下方我們整理的 RGB 安全色,填充到頁面對應的元素中去:

          用谷歌色卡各選 3 個同類色出來,并進行標記

          • 正確、通過:綠色
          • 鏈接、選中:藍色
          • 警示、錯誤:紅色
          • 提醒、注意:黃色
          • 失效、未完成:藍灰

          3. 中性色的應用規則

          B 端的輔助色找起來不難,難的是中性色的使用和搭配上。

          任何完整的 B 端的項目,同一個界面中都包含了多個模塊、層級,以及數之不盡的文本字段。在這么多的內容中,我們要根據模塊、文字的權重,選擇合理的中性色填充。

          超詳細!總監出品的B端設計規范指南(三):配色

          新手很容易迷失在中性色的配色過程中,往往一套界面做完以后,使用的灰色或黑色透明度數量根本無法統計,非常的混亂。

          所以,為了避免這樣的情況,我會建議從開始設計之前就定一套中性色,并將它們添加到設計軟件的色彩畫板中,每次填充中性色的時候直接從這個色板中選擇即可。

          超詳細!總監出品的B端設計規范指南(三):配色

          那么如何制定這套中性色?首先要理解在電子顯示器中,人眼對偏冷的中性色是耐受的(舒適),所以專業的 B 端項目中,中性色都帶有一定的冷色色相和飽和度,比如下圖是 Element 中性色在拾色器區域的分布,就并不是全灰的。

          超詳細!總監出品的B端設計規范指南(三):配色

          所以加入冷色是有必要的,同時,我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準,全黑時 B 值為 0,白色為 100,每個定義出來的灰度都可以用 B 值作為代號,如 B20、B40 等。

          我們根據這個標準,定義出 5-8 級的中性色,就可以滿足項目中的大多數場景。

          雖然會有一些項目會使用透明度來制定灰度等級,比如黑色的 80%、40% 透明度,但我更建議將透明度使用場景和實際色值定義區分開來,只有在色彩的不同狀態(選中/失效等)下再應用透明度。

          結尾

          有關 B 端配色的部分也就先說到這里,B 端配色遠遠比 C 端更簡單,也更枯燥??梢允褂玫纳史秶?,套路也更一致。我們要做的,就是將它們合理進行填充。

          文章來源:站酷   作者:百度MEUX

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

          B端表單設計沒有高級感?那是你沒用對發力點!

          ui設計分享達人

          前言

          大家是不是時常困惑于,B 端的表單設計體現不出高級感?設計發揮的空間特別的少?

          那是你沒用對發力點~

          B 端:設計表單頁面時,一方面須尊重用戶的習慣,不要在不必要的地方體現差別。總結了 4 個思考問題:

          案例:以創建公眾號消息自動推送為例

          • 思考用戶用產品做什么事?用戶會用該產品創建公眾號消息推送,根據用戶觸發事件,推送相關信息
          • 用戶用這類產品最關心的是什么?核對觸發事件,檢驗消息發送狀態
          • 用戶有哪些思維定勢?這里就不舉例了(條件不變時,能迅速地感知現實環境中的事物并作出正確的反應)
          • 用戶用過什么類似的產品等?……

          另一方面要考慮信息層次。

          搞定了基本要素后,我們開始考慮如何表現信息層次。

          • 封裝度高、信息密度低
          • 如何判斷采用哪種布局方式

          什么是封裝度高且信息密度低?

          在了解什么封裝度和信息密度前,我先跟大家討論一下。什么是表單之間的關系。

          我所認為表單之間的關系分為 3 種:

          1. 常規結構

          優點:

          平鋪所有需要填寫的信息,適合內容項較少、內容項無法按照相關性分組的表單

          缺點:

          • 表單頁中需要填寫內容眾多,容易造成信息密度過高
          • 操作需要的視覺元素越多,用戶的認知負擔越重

          使用場景:

          當需要完成一個簡單快速的任務,輸入少量信息即可完成創建

          B端表單設計沒有高級感?那是你沒用對發力點!

          2. 樹狀結構

          優點:

          用于復雜任務時,拆解任務進行編排,適當的任務分割,可以降低用戶出錯率

          缺點:

          • 無法在表單頁中根據內容量進行合理地布局
          • 視覺噪點過多,無法兼顧頁面展示和用戶填寫效率

          使用場景:

          適用于大型、復雜任務

          B端表單設計沒有高級感?那是你沒用對發力點!

          3. 顯/隱結構

          優點:

          減少不必要(非重要)的輸入項,能適當的減輕用戶認知負擔

          缺點:

          • 雖然減輕用戶輸入負擔,但無法高效的判定任務分割的容錯率
          • 用戶確認信息有一定難度,無法兼顧頁面展示

          使用場景:

          特殊場景下使用

          B端表單設計沒有高級感?那是你沒用對發力點!

          那么用一條完整的鏈路來表達就是:

          B端表單設計沒有高級感?那是你沒用對發力點!

          了解完表單的結構關系知曉利弊后,那么應用在我們實際的場景中表達就是如圖所示:

          封裝密度高且信息密度低

          B端表單設計沒有高級感?那是你沒用對發力點!

          △ 圖中案例,僅做示例說明

          將一個復雜的任務表單,進行封裝后,看起來任務量是不是也變少了?操作起來也不是很復雜了?

          小結:

          分析了解表單的結構關系,判斷表單,尋找共性的內容,將他們封裝為一個卡片,也可以封裝成一個組。主要的目的就是減少用戶認知負擔,提升操作/使用效率。

          如何判斷采用哪種布局方式?

          關于使用何種布局方式的判斷,應從信息的復雜度和關聯性兩個維度去梳理。根據信息的復雜度和相關性模型,選用相應的信息呈現方式,選用合理的布局方案來承載詳情頁的內容。

          1. 信息的復雜度和相關性模型

          B端表單設計沒有高級感?那是你沒用對發力點!

          △ 來源:Ant Design;來源鏈接: https://ant.design/docs/spec/research-form-cn

          2. 區隔方式

          根據各個信息之間的相關性,判斷各個信息模塊之間的親密度,通常情況下,相關性強的內容盡量靠近,相關性弱的的內容盡量拉開層次。

          • 不通欄分割線:將相關內容分開;
          • 通欄分割線:將內容分成多個部分;
          • 卡片:放置一個主題;
          • 頁簽:對象描述信息最頂層組織方式,如按版本組織、按意圖組織、按階段組織;

          B端表單設計沒有高級感?那是你沒用對發力點!

          △ 來源:Ant Design;來源鏈接: https://ant.design/docs/spec/detail-page-cn

          3. 注意事項

          • 表單內容數量 <7 項,不建議分組;
          • 表單內容數量 7~ 15 個建議分組;
          • 表單內容數量 >15 個建議使用頁簽分組或采用分組標題欄展開收起樣式。

          文章來源:優設網       作者:交互思維



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


          日歷

          鏈接

          個人資料

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

          存檔

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