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

          首頁

          聊一聊所謂的B端C化

          純純

          最近很流行一個詞——B端C化,解釋出來就是可以用C端的模式和思維來對B端產品進行設計,討論者大致分為兩種觀點:

          1.C端產品市場已經趨于飽和,可拓展空間剩余不多了,B端產品市場還是一片藍海,于是產生了一些C端設計師轉型去做B端了,將一些C端的模式和思維帶到了B端設計中,導致越來越多的B端逐漸C化;

          2.B端產品市場互相競爭,為了在同市場中打出差異化,于是一些B端市場開始招攬C端設計師培養轉型,并且嘗試融入C端產品的模式和思維在同市場內競爭,是產品設計的“內卷化”現象,導致市面上的C化的B端產品越來越多;

          但上述無論哪一種觀點,都在闡述一種現象或者趨勢:不管是交互還是視覺還是UI,目前部分C端設計師正在往B端設計師轉型。這個現象的發生對整個設計行業來說無異于新增了很多新亮點——市場上越來越多的B端交互、數據可視化視覺等需求,進而導致對市場培訓行業開始產生B端培訓的訴求,同時也破空而出了很多優秀的B端設計師。那么B端C化到底是什么,和傳統B端C端有什么區別,有這方面想法訴求的同學怎么去實現轉型?

          由于我本人之前是做C端UI設計師,到后來轉型成為B端交互設計師,而接觸的業務恰好涉及B端和C端的聯動以及多角色之間的協作,所以這篇文章借助結合我個人的經驗和看法,談一談自己對B端C化的理解



          B端C端的區別

          在談B端C化之前,需要先了解B端和C端的區別是什么。B端C端的區別網上有很多文章和概述了,大致歸納下來主要以四個維度去區分:受眾主體、上線周期、業務類型和產品側重點這四個維度,其余的維度也會有區分,但是影響較小,主要還是圍繞以上四個維度進行B端和C端區分



          受眾主體

          受眾主體也就是相對應產品的用戶群體。C端的受眾主體是大眾用戶,特征為多樣化,用戶與用戶之間跨度也大,但是場景和路徑較為單一的,比如C端產品就以年齡層、城市、性別等來劃分用戶,每個階段的用戶都有不同的訴求、認知和習慣等等;在做任何決策方面都屬于偏感性(Heart)的個人決策(Personal);用戶穩定性則比較差,要是對產品不滿意,可以立馬換另一款產品,轉換門檻低,有多個競爭對手產品可供選擇;

          而B端產品的受眾主體則是為組織群體,特征為多場景和多維度,用戶群體較為清晰明確,可以按照崗位、角色、權限等劃分用戶群,但是之間的關系更加復雜,比如設計一個銀行內部管理系統,用戶群就很明確清晰——銀行各級職員角色,根據職級關系設計不同的功能以及權限;在做任何決策方面都屬于偏理性(Head)的團隊性決策(Team);用戶穩定性較強,要是對產品不滿意,也只能被迫適應和忍受,轉換成本較高,幾乎沒有其他產品可供選擇



          上線周期

          上線周期就是指產品從需求階段到設計階段。到開發階段直至最后產品上線所需要的周期。C端產品上線周期模式有個很明確的特點:快速迭代、敏捷,很多C端產品功能更新迭代的速度很快,上線周期非常短,往往半個月甚至一周就完成開發上線,加上用戶群的多樣性和跨度大,所以在上線的時候往往會需要AB實驗去驗證方案可行性;

          B端產品上線周期則是和C端一個對立面——長,少則雙月/季度多則半年/一年等,因為B端產品流程上都屬于重型流程,角色之間關系復雜,交互系統較為繁瑣,需求的改動和迭代并沒有那么頻繁,也不需要像C端產品那樣快速上線搶占市場,所以B端上線周期會很慢,也導致在工作強度上相比C端較為輕松一些,但是缺點就是結果沒有C端來的那么快和明顯



          業務類型

          C端產品的核心競爭力就是產品本身,關鍵總結就是讓用戶爽就完事了,所以C端產品的需求類型往往圍繞用戶群的痛點產生;因為C端用戶跨度大,不同的用戶群體有不同的痛點,所以導致C端的需求類型不是很明確清晰,需要不斷從用戶身上去探索挖掘需求,在不斷的試錯中逐漸得出正確的結論;

          B端產品的核心競爭力除了產品本身,還依賴復雜的關系、渠道、技術和資源,你的關系夠硬、渠道夠廣、技術夠領先、資源夠豐富,哪怕你的產品很一般,一樣能領先其他同行業的競爭對手,關鍵總結下來就是讓用戶贏就夠了;B端產品的需求類型雖然也是圍繞著用戶群的痛點產生,但需求的目標是更加明確清晰的,加上需求變更的頻率、范圍往往都有契約/合同所約束,所以相較于C端產品來說,B端產品是需求更加明確且容易達成目標



          產品側重點

          產品側重點無異于區分C端和B端最明顯的門檻了,C端產品的側重點主要在于體驗,而B端產品的側重點主要在于效益

          前面提到過C端產品核心讓用戶爽就完事了,加上基于用戶更換產品的成本很低:你這款產品我用不爽就換掉了,所以C端產品的側重點永遠以用戶體驗為主,前面說的需求業務類型也幾乎是圍繞用戶體驗產生的;大家對比市場上同類型的C端產品,界面、交互、功能都不會差很多,是因為經過長時間的更新迭代,已經沉淀下來目前最好的用戶體驗類型了,隨著產品量級越大,改變用戶體驗類型就越謹慎;C端產品就是為了尋找并解決用戶痛點、癢點和爽點,加上品牌性、用戶隱私等因素考量,產品側重點聚焦于用戶體驗

          B端產品側重點則是圍繞效益了,因為作為一個團隊使用的產品,不管是從易用性、功能性還是安全性,為這個團隊解決問題為首要基礎,那么使用者的體驗、產品的美觀度等等相較于優先級就沒有那么高了,所以導致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認知上;B端產品就是為了使用產品的團隊解決效率、成本、營收的問題,加上產品的穩定性、安全性等因素的考量,產品側重點自然更聚焦在效益上



          什么是B端C化

          前面了解了B端和C端產品的區別,接下來聊一聊什么是B端C化;簡單來說從字面意思理解就是B端的設計層面逐漸靠近C端,網上也有很多B端可視化、趨勢潮流的設計和文章,但是B端C化不僅僅是從視覺設計上的改良,下面我逐漸從大到小聊一下我對B端C化的理解


          功能架構

          在做過很多B端產品之后發現,往往很多產品經理是對整個產品架構、功能形態一切都清晰地了如指掌,但是有時候在搭建產品架構的時候,功能形態單一粗糙,步驟復雜且笨拙;站在業務產品的視角來看,架構邏輯上都是沒有問題的,但是站在用戶視角來看,整體框架是混亂破碎的,步驟繁瑣且復雜,導致用戶對產品的認知變差,但是又不得不去用這個產品,只能被迫去學習使用

          比如一個產品案例,就是一個產品的底層邏輯是前端輸入素材id,后端返還一個素材后就可以使用了,站在產品業務視角來看,這樣設計沒有什么問題,符合產品的底層邏輯;但是站在用戶視角就特別難受了,用戶想用一個素材,還要去尋找id然后輸入搜索,像C端那樣全部鋪出來給用戶選不好嘛?



          行為習慣

          行為習慣自然是指用戶群在該行業下的行為習慣,電商行業、社交行業等等不同行業的習慣、專業術語等都不相同,這個在C端產品中都很能得到體驗,比如電商行業的大紅大紫,社交行業的左右滑動等等,這類有著很明顯的行業屬性和大眾認知,一樣是B端設計中應該注意的點

          最經典的案例就是紅色綠色的定義區分,在數據產品認知中,綠色代表數據漲了,紅色代表數據跌了,比如GMV數據,DAU數據等,紅色為重點關注的數據;而在金融行業中,基金股票紅色代表漲了,綠色則代表跌了,所以設計的原則一定得是基于不同行業的用戶行為習慣



          信息層級

          B端產品的信息量一般是很龐大的,尤其是數據、表單、審批等B端產品,涉及到不同角色不同權限的開放等,所以用戶能否能一眼看清關鍵信息,能否幫助用戶快速達成目標,是交互層面針對信息層級的設計處理一個重要的環節

          之前很常見B端產品中信息處理的方法就是堆積處理,直接將信息、數據等平鋪展示,比如很久之前的某牛商家端后臺等老舊系統;現在很多新的B端產品都是以模塊化處理方法將信息層級區分,使得模塊之間間隔更明顯,信息處理的效率更高,宛若C端中的卡片式設計



          設計語言

          設計語言自然是B端設計中標題、字號、顏色等規范標準,早些年把B端產品組件化后且開源的自然是阿里老大哥了,當時最早的AntDesign、以及后來的ElementDesign組件庫,到現在都被很多中小企業甚至大廠某些產品一直使用中,但隨著B端產品的普及和發展,越來越多的企業開始將自己產品沉淀出完善成套的設計語言,并搭建出自己的組件庫投入使用了



          用戶體驗

          如何去衡量用戶體驗是否是好的,最客觀來講當然是通過數據去衡量,而數據往往在C端產品中很常見,不管是體驗數據還是表現數據,都是C端產品中最為關注的;然而在B端產品中,更多收集的一般都是業務表現數據,幾乎沒有衡量用戶使用平臺的相關數據,大多衡量體驗的方法都是依靠問卷反饋的形式;但在B端C化的過程中,用戶體驗的數據也逐漸被加入到B端產品當中來,成為體驗標準的考核之一:比如某個任務完成的時長,報錯出現的頻次、某某工具的使用率等



          視覺設計

          最后就是B端C化表現層的設計,包括目前主流的設計趨勢如大數據可視化、3D建模、材質質感、Dark模式等都逐漸融入到B端產品中,使得B端產品不再追求簡單的“功能優先”和“能用就行”,而是像C端那樣追求更美觀的視覺,更極致的體驗



          為什么要B端C化

          總結下來“B端C化”就是B端產品無論是從功能架構還是視覺體驗,越來越趨于人性考慮設計,越來越關注使用者的感受和反饋,因為說白了不管B端產品代替成本高不高,用戶是一群專業人士還是普通職員,使用者歸根到底還是“人”在使用產品,那么必然會帶來體驗相關的問題;所以B端C化會逐漸形成一種趨勢,在企業平臺資源支持的情況下,會將B端產品的功能放大,追趕市場競爭,逐利行業內卷,在體驗和視覺感官上也會更加的人性化,結果自然是產品設計者們更加的卷了(手動狗頭)


          總結

          無論是現在的B端C化還是將來其他多元的設計趨勢,隨著市場的競爭和行業內卷,已經反推著設計師們不單單局限于照顧自己的“三分田地”了,無論是之前視覺設計師開始學習3D建模,還是UI設計師嘗試接觸代碼設計,設計師最大的品質就是應該緊跟時代的趨勢變化,及時調整補充自己的能力,提升自我的競爭力,才是在當今環境下立足的根本

          作者:雨灰       來源:站酷 

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

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

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


          想做好卡片設計,原來要注意這么多細節

          純純

          1、卡片的造型


          1)圓角


          不同的圓角,所帶來的氣質是不同的。圓角很小,視覺印象是硬朗,高冷,具有攻擊性的,多用于嚴肅、高端、沖突感強烈的設計中;而更大的圓角給人的感覺是有親和力,柔軟,安全的,多用于兒童產品、娛樂性強的設計中。


          在設計的時候,根據自己的產品屬性選擇氣質相符的圓角設計很有必要。


          undefined

          常見的卡片弧度形式有4類:直接、小圓角、大圓角、特殊圓角



          我一般喜歡用4的倍數來設置圓角,比如圓角大小為4px、8px、12px之類的。要注意的是,圓角越大,可用面積會越小,需要根據實際場景進行平衡,以視覺上舒服為宜。



          2)比例


          卡片的比例,我習慣遵循一些美感規律,比如黃金比例(1.618),白銀比例(1.414),青銅比例(1.732),正方形之類的比例。當然,實際設計需求中的比例,還是要結合內容的多少具體分析。


          我的經驗是,當比較接近這些美感比例其中之一時,就直接優化到這個比例。比如做了一個卡片,寬高比是1.5,比較接近于黃金比例,我就干脆讓它等于黃金比例。


          undefined



          3)異型


          除了正常的卡片樣式,還可以做一些異型的卡片設計。異型卡片具有較強的形式感和視覺沖擊力,所以會比較多的用在游戲或者運營相關的界面中,吸引用戶的注意力。缺點是批量化設計成本略高且因為過于風格化而不夠耐看。


          undefined



          2、卡片的效果


          1)顏色


          卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合界面對比度標準( https://contrast-grid.eightshapes.com/,這個網站可以直接查到可用性數值,只要不是DNP就是可以用的配色),以免影響內容本身的閱讀。如果拿不準的話,可以多用一些白色,比較不容易出錯。


          純色卡片設計會讓界面顯得冷靜高級,但對配色的要求相對較高,用不好的話會顯得單調,沉悶。如果你堅持要用這種卡片配色的話,建議搭配一些圖形紋理,會更容易把控,還能提升畫面細節。


          undefined

          純色卡片設計



          漸變色的卡片設計目前較為常見,層次細節更加豐富,畫面也顯得更活潑一些。


          undefined

          漸變色卡片設計https://dribbble.com/shots/12284120-Wallet-Design-App



          有些朋友經常因為配色不好而發愁,其實是需要多去找一些參考來看的,實在擔心配色不好,直接去吸優秀的配色方案也是OK的,但要注意搭配合理。


          教大家一個方法,去dribbble上搜color或直接打開https://dribbble.com/search/color這個鏈接,就可以看到非常多的優秀配色方案了。


          undefined



          2)圖案


          卡片的設計還可以結合輔助圖形,以圖案的形式與卡片進行結合。這些輔助圖形可以來源于品牌符號的延伸,讓品牌有更多的露出機會。


          undefined


          也可以是運用一些簡單的圖形,提升卡片的設計細節,以下是一些還不錯的設計案例。這些卡片上的圖形都有借鑒參考的價值,自己平時有時間的話,也可以多做一些作為圖形的儲備。強烈建議收藏,真的可以很有用。


          undefined

          來源:https://dribbble.com/shots/10513966-Gradient-Bank-cards


          undefined

          來源:https://dribbble.com/shots/10498737-Dark-Bank-Application-Design


          undefined

          來源:https://dribbble.com/shots/11313260-Finance-App-Exploration


          undefined

          undefined

          來源:https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD


          這里彩云給大家找了非常多的卡片設計形式,可以從中參考學習配色和紋理造型。



          3)圖片、視頻


          卡片背景也可以用圖片和視頻的形式進行設計,圖片和視頻的選擇一般會偏暗色,以不影響內容閱讀為準。


          undefined


          undefined

          來源:https://dribbble.com/shots/5717917-Travel-Article-Application


          3、卡片的內容


          1)文字


          卡片上的文字不要太長,我的經驗是橫向不要超過42字(關于這個字數,有資料可以查,感興趣的可以找找看),縱向不要超過5行。過多的文本不建議使用卡片形式。


          undefined


          其實這張卡片的設計中,我也用到了黃金比例來指導自己的設計,方便快速確定文字比例關系。


          undefined


          2)間距(網格法)


          卡片上的文字間距最好有一定的規律,這里可以按網格法來規劃,比如8px網格,10px網格等等。網格的使用其實可以很靈活,比如我這里的卡片其實就用到了8px網格,各間距就會用8的倍數來做。大小比例就盡量用黃金比例來處理,這樣做目的一方面是為了讓界面有秩序,另一方面是提升決策效率。秩序產生美,而效率讓你早點下班。


          undefined


          3)減少線框


          卡片中盡量減少線框,多用留白來進行內容劃分。


          undefined


          4)層次清晰


          卡片中的內容層級要做好,標題和內容之間的差異要明顯。這里的層次主要是通過對比拉開的,做好對比的關鍵就是對比效果要強烈,決不能模棱兩可。


          比如下圖中左邊的案例只是在文字的字號上有一定的對比,但字號間相差不大,效果不明顯,就會讓人看第一時間不知道看哪。而右側的案例則用了加粗,大字號,大留白等,讓畫面有了強烈的對比,從而產生更好的信息層級。


          undefined


          5) 內容出界


          只在卡片的框框里做設計,有時候未免顯得太呆板,破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設計沒啥亮點,那內容出界的設計就是一個很好的提升設計亮點的手法。


          undefined

          彩云曾經做的一張banner就是運用了出界的手法


          undefined

          來源:dribbble。界面上的天氣圖標也用了出界的手法,讓畫面顯得更有亮點


          4、卡片的細節


          1)光感


          卡片中的光感細節能提升設計的質感。下面這張圖是我最近做的一張會員卡的背景設計,大家對比下,在卡片頂部加了1px高光線和斜面反光的細節前后的質感區別。


          undefined


          這個小細節,我經常會用到,執行簡單又容易出效果。


          undefined


          2)投影


          投影的細節,不要過重,但又要能與背景分離開。有2個小技巧:

          1.在取色的時候,可以選擇背景顏色的色相,然后略微加深一些,不要用純黑色來做投影,會顯臟。

          2.投影的距離不要太小,太小的投影會顯得不夠自然;也不能太大,太大會很浪費界面資源。


          undefined


          3)3D效果


          3D卡片的設計,因為不便于內容編排和閱讀,所以帶透視的卡片在實際UI中并不太常用。但在作品集包裝和運營頁面中,則可以帶來比較好的視覺沖擊力,可以嘗試運用。


          undefined

          圖片來自:Cradle

          作者:彩云Sky    來源:站酷

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

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

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


          科學合理的通過顏色吸引用戶、增加粘性

          純純

          沒有難看的顏色,只有難看的搭配每一種顏色有其獨特的作用,令人產生不同的情感。合理使用色彩可以取得宜人的效果。

          一、色彩的基本認知(本模塊設計小白可以了解一下,有基礎的略過)        undefined1、色彩由色相、飽和度、明度三要素構成

           色相(Hue)

          即各類色彩的相貌稱謂,如大紅、普蘭、檸檬黃等。色相是色彩的首要特征,是區別各種不同色彩的最準確的的標準。事實上任何黑白灰以外的顏色都有色相的屬性,而色相也是由原色、間色和復色來構成。

           

          飽和度(Saturation)

          飽和度是指色彩的鮮艷程度,也稱色彩的純度。飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大,飽和度越高;消色成分越大,飽和度越低。

           

          明度(Brightness)

          明度是眼睛對光源體和物體表面的明暗程度的感覺,主要有由光線強弱決定的一種視覺經驗。明度不僅取決于物體照明程度,而且取決于物體表現的反射系數。

           

          2、配色的基本認識

           

          基本色環(Color Wheel)

          按照光譜順序為:紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍、藍紫、紫、紫紅、紅和紫中間在加個中間色。在色相環的圓圈里,各種色調按照不同角度排列,則十二色相環每一色相距30度,24色相環每一色相距15度。

           

          同一色

          色相環中的任意色因明度變化而呈現的色彩。顏色混合是通過在色彩中加入黑、白、灰形成的。統一色調,色彩的純度和明度是具有共同性,明度按照色相略有變化。

          同色系配色是指主色和輔色都在同一色相上,這種配色方法往往會給人頁面很一致化的感受

           

          同類色

          同類色又稱類似色。色相環原色起45度以內,含有較多共同的色彩元素的色彩,同類色指色相性質相同,但色度有深淺之分。

           

          相鄰色

          色相環中相距90度,或者相隔五六個數位的兩色,為鄰近色關系,屬中對比效果的色組。色相彼此近似,冷暖性質一致,色調統一和諧,感情特性一致。

          相鄰色不同于同一色的枯燥乏味。稍微跳動的的色彩也一樣保持著設計的穩定性,還能起到強調單獨作品的作用

           

          對比色

          指色相環上色相對比較大、純度較高的任意兩色。對比色之間無過多的共性,對比效果強烈。當對比的兩色具有相同的彩度和明度時,對比效果越明顯;兩色越接近補色,對比效果越強烈。

          主導的對比配色需要精準掌控色彩搭配和面積,其中主導色會帶動頁面的氣氛,產生激烈的心理感受。

           

          補色

          補色又稱互補色、余色,亦稱強度比色,就是兩種顏色(等量)混合后呈現黑灰色,那么這兩種顏色以定位互補色。色環的任何直徑兩端相對之色都稱為互補色

          補色對比由于色彩過于沖撞,很少用戶傳統網頁界面,一般用于活動 banner,起到吸引用戶眼球的作用。



          二、HSB色彩模型


          1、什么是HSB色彩模型

          如果你寫過HTML和CSS,那么肯定熟悉RGB,三個字母分別表示:R(紅)、G(綠)、B(藍)。這種方式對電腦來說非常直接明了,也是電腦理解顏色的默認方式。對電腦友好并不意味對人類易用,這也是HSB誕生的原因。

          HSB代表色相(Hue) - 飽和度(Saturation) - 明度(Brightness),又稱HSV,是一種更人性化的顏色描述方式。為什么這么講?因為它與人們描述顏色的自然方法一致。

           

          2、HSB色彩模式設置及優點undefined

          1)、比起 RGB 系統,HSB使用了更貼近人類感官直覺的方式來描述色彩 ,對于設計師來說更容易理解

           

          HSB 的概念很接近色彩學所常使用的色彩空間模型,由于是由三個屬性所組合而成,因此常以色立體表示,

          但由于我們常用的操作系統依然為二度空間的系統,因此在計算機系統的選色接口中常以不同的接口出現,我想其實大家都很熟悉,像是下圖為sketch中的選色器,可以看見一個全彩的色相條,和一個顏色的窗口,滑動色相條即可得到不一樣的顏色

           undefined

          2)、HSB可以更加科學地保證設計師所使用的不同顏色處于同一明度和飽和度,使用戶的視覺體驗感更好


          也許你會覺得 HSB 并沒有比較簡單,但是實際使用過就會發現,它是多么的好用。例如下圖的男女比例的背景色塊,如果用RGB調色只能通過設計師的眼睛和經驗來調整他們是否處于同樣的色調中,但是用HSB來調色,保持S和B值相同,只需要滑動色相條即可得到完全一樣的色調,省時省力還科學

                             

           

          三、色彩使用規則

           undefined      

          1、色調的分類

          色調(color tone)是不同色相但是具有同樣亮度和純度的顏色進行的分組,

          undefined     

           

          極淺vp(very pale)色調:

          是純度最低、亮度最高的,干凈清淡的顏色,給人清的,柔弱的,女性的,年輕的,淡的,可愛的印象。

           

          亮灰色lg(light grayish)色調:

          純度低,中高亮度的色調,給人高貴、安定、古樸的印象和輕柔的感覺。

           

          中灰色mg(medium grayish)色調:

          低純度中亮度,具有濁,不起眼,古樸,穩健,安定的氣氛。

           

          深灰dg(dark grayish)色調:

          低純度和中低亮度,給人漂亮、安定、自然的感覺。

           

          極暗vd(very dark)色調:

          是純度和亮度都最低的色調,具有厚重牢固的感覺,給人非常暗,陰暗,厚重,堅固、男性的印象。

           

          淺的pl(pale)色調:

          中純度和高亮度的色調,給人干凈、淺、爽朗的感覺。

           

          柔軟sf(soft)色調:

          中純度和中高亮度,給人穩健溫柔的感覺。相比淺色給人感覺更安定。

           

          晦暗dl(dull)色調:

          中純度和中亮度的色調,給人安心高雅的感覺,一般說的中間色就是晦暗色調。

           

          暗dk(dark)色調:

          中純度和低亮度的色調,具有結實,成熟,古樸的色調印象。

           

          亮It(light)色調: 

          高純度高亮度的色調,具有明亮、健康、活潑,年輕而穩定的印象。

           

          強st(strong)色調:

          高純度和中高亮度的色調,充滿活力,冗長,熱情,開放的印象。

           

          深dp(deep)色調:

          高純度和低亮度的色調,具有力量感和深度,給人深的,濃的,傳統的等印象。

           

          活潑VV(vivid)色調:

          高純度和中亮度的色調,較為鮮艷,鮮明,華麗,鮮艷,鮮活的印象。

           

          2、色調配色技巧

          同色相環配色技巧原理一樣,色調也有3種基本的配色技巧。

           

          1)同色調的配色:

          同色調的顏色幾乎沒有亮度和純度差,是比較容易統一和協調的配色。

          undefined     

           2)鄰近色調配色:

          具有一定的亮度和純度差但是差值不大,比較容易調和,容易傳達原有印象。有縱向鄰近、橫向鄰近、和斜向鄰近三種。

          undefined     

          3)對比色調配色:

          亮度與純度差很大,是極具張力的配色方法。是色調圖上相隔很遠的色調的配色。自由選擇色相,有亮度對比、純度對比、亮度和純度對比這三種配色方式。

          undefined      


          配色網站推薦

          推薦是三個比較好用的、簡單操作的配色網站,有需要的可以收藏

          1、coolors.co

          2、designspiration.com

          3、materialpalette.com

          undefined

          四、常用色分析undefined


          除了醫療作用外,顏色還有一定的象征意義和社會屬性,對人類生活有著舉足輕重的影響。顏色心理學領域的佼佼者,美國羅切斯特大學安德魯.埃利奧特說,以前從來沒有人做過這種聯系。他表示:“顏色研究表明的是,我們的行為會受到我們沒有留意,習以為常的事物的影響?!?/span>

          據國外媒體報道,人們常常認為,穿著紅色服裝是自信的表現。同時,科學家們也認為,運動員身穿紅色運動服更容易取得好成績。然而,英國羅徹斯特大學的安德魯·埃里奧特等人開展的一項最新研究卻顯示,紅色會抑制人們思維的活躍性。

          埃里奧特和他的研究小組共對一些中學的高年級學生和部分大學生進行了四次研究。期間,他們向被測試者發放了一些用于進行智力水平測試的紙片——在各張紙片的右上角分別用紅色、灰色或綠色表明了序號。

          結果,凡是所持紙片上用紅色標明序號的學生,其所獲得的智力水平評分均明顯低于那些手持灰色或綠色序號紙片的學生。先前的研究已經證實,人們在日常生活中所接觸到的顏色會對人的潛意識產生影響,只不過這種影響非常短暫。

          埃里奧特教授認為,紅色首先會使人們聯想到錯誤和失敗。談到這一點,大多數人肯定都會想到老師在判卷時所使用的紅墨水。當然,有關禁止的信號通常也以紅色表示。而在自然界中,紅色則是一種警示色。隨后進行的另外兩項研究則證實,當受測試者眼看著紅色回答問題時,他們通常會選擇那些較為簡單的問題進行解答--這是人們在面對困難時所選擇的最經典的方法。

          與紅色相對的是,藍色能夠促進創新;黃色,則是最令人愉快的顏色,它被認為是愉快的象征,可以刺激神經系統和改善大腦功能,激發人的朝氣,令人思維敏捷。另外還有,橙色,是新思想和年輕的象征,令人感到溫暖、活潑和熱情,能啟發人的思維,可有效地激發人的情緒和促進消化功能。

          賞心悅目的色彩能夠通過視神經傳遞到大腦神經細胞,從而有利于促進人的智力發育。在和諧色彩中生活的少年兒童,其創造力高于普通環境中的成長者。若常處于讓人心情壓抑的色彩環境中,則會影響大腦神經細胞的發育,從而使智力下降。所以,我們在平時日常生活中,正確的應用色彩心理學,改善生活環境色彩,讓我們的心情更舒適,思維更敏銳。

          所以一定不要讓自己孩子在高考的時候穿什么紅色的外套,旗開得勝什么的,可能會影響思維活躍度,導致考試成績不理想

          undefined

          橙色稍稍混入黑色或白色,會變成一種穩重、含蓄又火熱的暖色,但混入較多的黑色,就成為一種燒焦的色;橙色中加入較多的白色會帶來一種甜膩的感覺。由于位于可見光的中低頻頻段,橙色在空氣中的衍射能力僅次于紅色,而其色感比紅色更暖,最飽和的橙色應該是色彩中感受最暖的顏色,能給人有莊嚴、尊貴、神秘等感覺,所以基本上屬于心理色性。歷史上許多權貴和宗教界都用以裝點自己,現代社會上往往作為標志色和宣傳色。不過也是容易造成視覺疲勞的色。

          英國埃塞克斯大學做了一項研究顯示,綠色是很特別的顏色,在四季分明之地方,如見到春天之樹木、有綠色的嫩葉,大自然的顏色。在綠色環境中鍛煉能提高情緒、活力和愉悅感。也就是說,戶外鍛煉有益身心。

          色彩心理學家早就指出,人們在高頻率顏色(如綠色,藍色和紫色)的環境下會產生平靜的感覺,而在中低頻率顏色(如紅色,橙色和黃色)的環境下更容易興奮和激動。這一現象可能是在人類進化的過程出現的。因為對于原始人類來說,綠色的環境意味著充足的食物和水源,對綠色的積極感覺在進化過程中融入大腦。

          英國埃塞克斯大學的研究者選取十四名男大學生,要求他們在室內固定單車上騎行5分鐘,并觀看關于森林的紀錄片。隨后,研究者將視頻背景由綠色轉換為黑色、白色和紅色,讓志愿者在觀看這3種顏色視頻的同時,又分別騎行了5分鐘。結果發現,他們在觀看綠色視頻時疲勞感低,情緒也能保持愉悅;而觀看紅色背景視頻時,他們更容易情緒不穩。


          紫色跨越了暖色和冷色,所以可以根據所結合的色彩創建與眾不同的情調。帶些紅色的深紫色可以產生一個暖色盤。淺紫色是較貴的,常常會聯想到浪漫。當結合玫紅色的時候,可以創建一個很女性化的色盤。一個比較男人的色盤可以使用偏紅偏黑的深紫色。泥土和自然的色彩可以結合紅紫色和淺褐色或者亮紫色+綠色。黃色和紫色是對比色,可以創建強對比度的色盤。

               

          作者:木子淺談    來源:站酷

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

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

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


          設計師除設計外所需要具備的能力

          純純

          我們已經或多或少看過一些優秀作品,也知道了一些設計方法和技巧,了解到了一些相關的理論知識,自己也做過一些項目或者是練習,總體來說都掌握了一定的設計能力;但是設計師想要擁有更多的資源(指薪資、工作機會等等)或者是想職業進階,除了一定的設計能力之外是遠遠不夠的,設計師還需要掌握更多的能力,才能讓自己成長提升,并且擁有他人無法取代的價值。我通過自己的經歷和整理收集,發現目前如今不同階段的設計師對待同一個問題不同的角度以及特征,如下圖所示:



          不難發現,當大家還是初級設計師的時候,剛剛接觸設計行業,我們更多的是去觀察、學習、臨摹一些“好看”的作品,熟練地使用設計軟件和提升設計技法,最后的是自己做出來的產品是否漂亮美觀,最重要的是客戶/老板是否會買單,而自己無法清晰地定義自己設計的產品價值,也不能很好表達出自己的想法和觀點。所以產品走向會根據老板/客戶的水準來定義,輪到自己表達只是支支吾吾,最后只是做為執行無休止地改改改。一切由老板/客戶說的算,無法清晰地了解自己產品的定位,缺乏表達觀點的能力,缺乏一定的審美,作為執行角色無休止加班成為了初級設計師最大的痛點。


          而經過一段時間的學習和工作后,逐漸轉型成為中級設計師后,有了一定的設計技法和軟件使用熟練度,有了一定的審美和視覺表現能力,平臺規模合作團隊也逐漸變大,基本能滿足老板/客戶/業務方提出的需求。開始學習一些設計相關理論,開始拆解自己或別人產品的交互架構,更多地開始關注用戶體驗起來,也會融入品牌元素到自己的產品當中,為自己的產品做情感化設計和制定設計規范,會組織一些專業語言和業務溝通以及陳述自己的產品。但是如何從眾多的設計方案中找到最優的方案來解決問題,如何更多地體現產品的價值,產品利益鏈如何形成商業閉環,如何在團隊/設計圈體現自己個人的價值,如何提升自己的個人影響力,成為了中級設計師這階段的痛點。


          通過三年五年的沉淀,成為高級設計師后,形成了自己獨有的一套方法論和設計思維,能熟練地拆解每款產品和定義產品,視覺表現層已經完全能駕馭,能清晰地闡述自己的設計思路和結論,產品用戶體驗層也有了一定的經驗和方法,在團隊中或者設計圈有自己一定的個人影響力,更多地會在工作中思考產品帶來的社會價值和商業價值,會用不同的思維去思考產品的各個維度,找到最優的方法解決問題,會把固有的利益鏈轉換成商業閉環,提升用戶轉化率等等。而這階段的設計師的主要痛點就是面臨著團隊管理和溝通,朝著資深設計師和設計專家轉型,以及如何為平臺帶來的利益價值考核等等問題。


          資深設計師或者設計專家這里不談,因為這階段所思考的問題大都和設計無關了。通過上述不難發現,每個階段的設計師都有各自的特征和痛點,雖然其中都包含著設計相關的能力,但是隨著階段的進階設計相關的能力占比逐漸變少,更多的是其他的能力增長,所以設計師除了設計以外其他能力的重要程度顯而易見,那么我們來看看除了設計以外,設計師應該掌握其他什么能力。


          思考能力(Thinking)

          思考能力作為首要的能力,不僅僅是設計師,其他職業一樣需要這個能力,這里所涵蓋的面太廣泛了也說不了,這里主要針對三點來講:核心競爭力、批判思維和分析能力。思考分為兩個層面:自我層面的和業務層面的思考;自我層面的思考就是要通過深度剖析自我,發掘自己處于哪個階段,有什么長處和不足,自己想要什么,需要往怎樣的方向發展;而業務層面的則是要需要思考業務產品的結構框架、用戶體驗、商業價值等等等等,前者更加關注自身的成長,后者更加關注業務的成長。



          · 核心競爭力

          核心競爭力就是有與別人不一樣的競爭力,想要做到別人無法替代你的地步,就要有自己個人核心的競爭力。如果你會做一張 Banner,我也會做一張 Banner,你會搞一個頁面,我也會搞一個頁面,那么你這個人就成為了可有可無的螺絲釘,唯一的優勢就是年輕能拼能熬,等你熬銹了老了,隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段,我們要深度剖析自己,認清自己的優勢劣勢,并采取相應的措施。



          剖析自己的核心競爭力給大家一個大致思路,從異樣性和共通性入手。自己周圍或多或少有團隊,條件不足的話現在網絡各大平臺都很發達,也能融入一些設計圈子中,和不同的人對比尋找自己的核心競爭力。異樣性是當前的優勢,找出其中的優點,不斷地放大深造,變成你的核心競爭力,而和別人不一樣的缺點找出來摒棄改正;共通性就是和大家一樣的地方,可以看作是偽劣勢,因為諸多共通性中總有你最喜歡最擅長的一個,將它單獨拿出來不斷擴大,逐漸就拉開了差異性,慢慢就轉化成你的核心競爭力了,而大家都有的缺點,你把它糾正了,就成為你的核心競爭力了。

          來舉一個栗子:小王是一名工作了3年的設計師,研究生畢業,由于公司的原因平時工作最多接觸的就是一些運營圖 banner,也有過很多品牌 VI 的經驗,逐漸自己在視覺表現上有自己一定的見解和想法,也更加感興趣做視覺表現的東西。

          那么他的共通性就有:1.工作3年之久;2.研究生畢業;3.視覺表現能力強也更感興趣;4.做過品牌 VI 的經驗;5.有自己的見解和想法。

          由此推斷出小王的共通性是:1.工作經驗豐富;2.視覺表現力強;3.有想法和見解;

          異樣性是:1.學歷優勢;2.品牌 VI 相關經驗

          那么小王可以保持自己學歷優勢下,可以繼續深造品牌 VI 相關,逐漸轉型成為高學歷的品牌 VI 設計師,那么學歷和很多品牌 VI 的經驗就是小王的核心競爭力;也可以通過熱愛去學習 C4D 動效等軟件繼續增強自己視覺表現力,配合自己豐富的工作經驗逐漸轉型成高學歷的創意藝術設計師,然后通過將自己的想法見解通過分享會、文章等模式產出,將這一點升級成個人影響力,那么綜合下來更加優秀的視覺表現力、豐富的工作經驗和個人影響力也會逐漸變成小王的核心競爭力。

          只有通過不同維度深度地剖析自己,找到自己的共通和異樣點,清晰自己的價值定位,然后制定出適合自己成長目標和方案,不斷放大增加自己的核心競爭力,成為不可取代的那個人。


          · 批判思維

          批判思維是一名設計師必須具備的思維能力,我們不僅僅要學會批判別人的作品,還要學會自我批判。這里不是指無腦的批判(之前遇到過一個實習生剛進到公司里,就把之前所有人做的東西全部批判了一遍,重點是只說產品好看與否,完全不顧及平臺一致性商業價值用戶體驗等等,最后只批判卻沒有任何實質性的建議,頗有一種指點江山的感覺,然后后面再也沒見到過他了),這里是指在自己通過批判別人或自我的方案,不斷地優化糾正,最后產出最優質的方案,這是批判思維的出發點。



          不同的人有不同的經歷,看待問題的維度是多種多樣的,所以一個方案產出后,通過不同的人思考后的結果是最好的解決方案。這也印證了波克定理:只有在爭辯中,才可能誕生最好的主意和最好的決定。所以當設計師接到產品交互給到的原型圖后,不要上手就做圖,要通過自己經驗和想法去看待原型圖,然后提出更加優質的方案進行討論,如果你的方案更加優質,那么不僅是產品的質量得到了優化,你個人的經驗也得到了沉淀,下次遇到相同的場景就可以拿出來復用,直到遇到更好的方案。

          唯一注意的事項就是注意溝通的方法,這里后文會提到,比你資歷高的人提出的觀點更加具有建設性,在毫無頭緒沒有創新的情況下就聽比你更有經驗的人的;遇到比你資歷低的人提出的觀點也不要嗤之以鼻,抓取其中有用的點,沒準是一個新的思維方向;總之,有數據說數據,沒數據舉案例,沒案例講觀點,如果連觀點都沒有的話,照著大佬說的話做就是了。


          · 分析能力

          分析能力也是設計師必須掌握的能力之一,無論你是創意藝術設計師,還是用戶體驗設計師,譬如一張 Banner 氛圍傳遞或者文案排版,譬如插畫的配色或者場景搭建,譬如產品的布局結構或者用戶體驗,這些都需要有一定的分析能力。通過拆解改版/競品/參照產品等,明確產品的最終目的、商業價值等等,有了這些準備后才能對自己的產品進行設計或者改版。而分析產品可以以用戶體驗五要素的角度來分析,分別是:戰略層、范圍層、結構層、框架層和表現層,具體相關的文章站酷、PM 社區、36氪等等都搜的到,這里不再細說;之前在分析產品的時候發現有些產品強行套用這五個要素進去不適用,因為有些產品的頁面它不存在戰略層或者范圍層的東西,所以我總結歸納了三個角度來分析產品。



          案例就用淘搶購 v4.1 頁面(已上線)來講,三個角度主要是:表現層、用戶體驗層和價值層。表現層主要就是產品頁面的配色、布局結構之類的;用戶體驗層就是產品的心智透出、交互流程之類的;價值層就是產品深度的價值體現了,比如商業價值、社會價值和用戶留存率之類的;大致可以套用這個公式去思考:為什么這里會用這種表現形式,它想要表達怎樣的效果,它要達到怎樣的最終目的,如果是自己去設計會怎樣做。舉例:因為淘寶規范為卡片式設計,在視覺表現上要統一,所以淘搶購 v4.1 的業務目的是統一視覺樣式,并且它需要給用戶產生一種“商品很便宜快去搶購再不搶購就沒了”的心智認知,它的最終目的是引導用戶去商品 Detail 頁面購買商品和提高商品的點擊率,這樣通過協調關系形成平臺、商家和用戶之間的利益鏈商業閉環。

          想要提升自己的分析能力除了項目和時間的沉淀外,更多的時候需要自己平時的積累,站酷等平臺有很多優秀的作品,作者會把自己設計的分析和思路寫出來,我們可以看看別人的想法是否值得借鑒,然后再去分析一下,最后思考如果是自己的話會怎么去做;其次做設計的時候帶著同理心去做,把自己當作用戶去看待自己的產品,通過不斷的積累提升自己對產品的敏銳度,將一些產品的隱性問題挖掘出來;另外可以多看一些好的設計分析書,比如《U一點料1、2》、《以匠心 致設計》等等,將學到的分析方法代入自己的產品或作品中,逐漸分析能力就增強了。


          規劃能力(Plan)

          規劃能力是日常工作生活中所需要掌握的能力,主要講業務規劃和職業生涯規劃,業務規劃能力應對的是我們工作中處理業務所需要具備的能力,而職業生涯規劃應對的是我們整個人生職業生涯規劃的能力。掌握這個能力后前者會給我們帶來業務處理效率上的提升,后者給我們帶來整個人生有益的好處,所以這個能力非常重要。


          · 業務規劃

          很多時候我們還在有條不紊地處理某個需求,心想著下班去吃個飯買水果回家洗澡睡覺的時候,突然來了一個緊急的需求,就把我們整天的計劃給打亂了,火急火燎地處理完這個需求,然后又把之前的需求做了,最后加班改改改導致整個計劃泡湯了。工作中遇到這樣的情況很多很多,處理方法有很多種,最經典的就是四象限法則,把事情的緊急重要程度分為:重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。



          很多時候都是道理我們都懂,可是一遇到情況依舊手忙腳亂,根本原因是沒有認真地把它代入自己的工作生活當中。畫一個象限表,把自己今天所要處理的事務陳列出來五分鐘都不需要,一開始可能因為事情不多就沒堅持下去,一旦養成習慣后,將來遇到多種緊急情況突發的時候就能認識到這個習慣給你帶來的好處了,所謂養兵千日,用兵一時就是這個道理。



          在做業務需求的時候,可能會碰到有些需求價值高,有些需求價值低但又很緊急,不知道怎么處理之間的關系,我們依舊可以套用四象限法則來制定一個四象限表:價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢,就是能讓你有充分思考和分析的需求,比如某個頁面的改版;價值低的需求則是相對不怎么需要思考和分析的需求,比如根據已有的規范改個顏色之類的。在時間的優先級前,價值高的需求大于價值低的,最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求,需求來了肯定要是做的,工作不是愛好可以有多種選擇性,但我們要學會將需求分解成不同類型的,對自己有成長沉淀的需求那可以作為最高優先級去處理,留夠充裕的時間去思考分析,然后沉淀經驗穩定提升。


          · 職業生涯規劃

          這個在大學期間就學過相關的課程,只不過當時并沒有太深的感觸,而是等工作以后才知道這項能力的重要性,它相當于關系著你每個階段的里程碑,當成游戲中的成就任務也不為過,還是自己設定的成就任務。某個階段想要達成什么樣的目標,想要獲得怎樣的成就,都是要自己一步一步慢慢規劃并且完成出來的。

          因為我遇到過幾個非常努力的人,努力到讓人心悸的地步,每天除去吃飯睡覺工作時間就是在努力學習,到最后還是很迷茫,不知道做什么,不知道如何體現自己的價值。這類沒有目的的努力的人是很可怕的,他們努力得沒有錯,但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用,然后逐漸開始產生抱怨、泄氣和放棄等負面情緒。



          舉個例子來說明:如果你剛畢業,給自己制定的長遠的職業生涯規劃是在工作3~5年后進到大廠工作提升自己,那么所拆分下來就需要一些項目工作經驗和優秀的作品,再拆分下來就是如何做出優秀的作品,細分到最后就是作品當中的元素,比如圖標排版布局之類的,那么就制定一段時間內的練習就按照各類元素去做,比如圖標畫兩個星期,APP 設計排版布局練習兩個星期,插畫練習畫兩個星期,這樣堅持下來就組成一個完整的項目作品了,以此類推。有了規劃目標并且在自我驅動的推動下,逐漸實現自己的職業目標。


          設計師要如何培養自我驅動可以看我之前的文章:


          淺談設計師的自我驅動

          https://www.zcool.com.cn/article/ZODEzMTky.html


          執行能力(Execute)

          執行能力是指自我在工作&學習中執行的能力,執行能力為一個設計師最主要的核心技能,一切的能力都凌駕于這個基礎之上;哪怕你再能說會道,能賦予你的設計各種價值,能給予你的設計各種環境,但這些都是第二步,第一步就是你的設計表現達到期望值,如若第一步稿子都不好看,那么沒人愿意會聽你敘述的。前文已經提及到了,設計師在初級至中級階段的時候大多數注重的就是表現手法,如同學說話一樣,表現手法可以看作是漢語拼音,然后才是組成一個個字,最后組成一句完整的話語。


          · 自我執行力

          提升自我執行的能力我大致分為兩個步驟:看和做。

          首先先來說看,看其實是提高自己審美的一個過程,通過看一些平臺網站的優秀設計作品,久而久之自己的審美能力才會提高,然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或學習時間,通過瀏覽設計網站采集學習一些你覺得好看的作品;采集是一個很好的習慣,我覺得是每個設計師必須養成的習慣,把自己平時覺得好的表現形式收集起來,等到某一天需要用到的時候,腦海中對當前場景會有一定的印象,再根據印象去尋找采集到的作品,能很大程度上節省自己腦爆的時間,哪怕沒有采集或者文件丟失,自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理,比如今天我需要做一個關于內容的模塊,那么我就會去尋找一些做內容的產品設計,搜集到的各類關于內容的表現手法,然后結合自己的經驗和分析,找出最適合自己產品的一種。



          僅僅看是不夠的,在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學到的東西。做設計最忌諱的就是“眼高手低或者眼低手高”這種狀態,有了審美但表現手法跟不上,或者說表現手法有但是審美跟不上。一定要在自己吸收了一定的審美后,通過自己的嘗試去做出來,才能真正的沉淀到自己的大腦當中,變成自己的表現手法之一。最后通過大量的積累,結合對商業需求的判斷形成設計策略,才能從容應對不同的產品需求,哪怕你今天做金融相關的產品,還是明天做電商的產品,后天又改做工具類產品,一旦形成了自己不同的應對策略,才能做到真正意義上的游刃有余。



          很多時候我們只關注到魚的大小、魚的肉質是否鮮美那20%層面的東西,往往忽視了80%最重要的捕魚技巧和方法;看到的只是產品是否好看,交互是否流暢,體驗是否良好,沒有往更深層次地去想這個產品的商業背景是什么,設計師為什么要這樣設計,如果換做自己的話會去怎么做;畢竟我們所做的一切訓練、思考都是為了更好地為工作服務,就如同脫離了商業背景以后,有些設計就只是單純的炫技,并沒有解決問題的價值,而設計師的工作核心就是解決問題,所以我們要結合作品的背景、價值等因素,去看、去做、去學相應的表現手法才是自我執行的核心所在。


          表達能力(Express)

          表達能力是設計師除去執行能力外第二重要的能力,小到平日里的溝通對接,大到述職晉升面試,都離不開表達能力的支持。有些設計師經常面試怎么都過不了關,我本以為是作品集的問題,可是看完之后作品方面完全沒有什么問題,具體了解后才知道是在面試過程當中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導致表達斷斷續續不順暢,面試官就會覺得這個人不靠譜然后 PASS,明明做圖很優秀卻輸在了表達上,這種情況就很憋屈。在廣告公司中,一個 LOGO 或者廣告視頻往往只是贈品,出售的卻是這個品牌VI的故事;如果一個設計師不懂得怎么闡述自己的業務,不懂得怎么推銷自己的方案,不懂得拓寬自己的個人影響力,就單純的只會執行作圖的話,那么這名設計師是不合格的。網傳有一個段子“一個公司的工資排名規律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如講 PPT 的,講 PPT 的不如聽 PPT 的,聽 PPT 的不如聽匯報的,聽匯報的不如決定的,決定的不如簽字的”,由此可見表達能力在職場中的重要性。


          · 業務表達

          業務表達是指在自己工作的過程當中,對自己的設計方案進行闡述。大部分設計師會遇到一個困擾,當設計稿做完以后就不知道怎么去表達自己的設計理念,被業務方/面試官/老板提出質疑時,比如:“你這產品的設計為什么要用紅色?”、“聊天信息這塊兒為什么要用小氣泡的樣式?”,往往不知道怎么去說,有一種當時就覺得好看所以這樣做了,也沒有去想那么多的感覺,或者其他優秀的作品/競品是這樣做的,我也就這樣做了;那么結果往往就是自己的專業性遭到質疑,然后轉變成業務方/老板進行設計主導,形成“改來改去還是第一版好”這樣類似的惡性循環中。



          那么如何提升自己的業務表達能力呢?首先設計師要提升在設計領域的專業度,通過學習吸納設計相關的知識,然后代入自己的設計當中去試著闡述設計稿,準備工作先做到位,收集相關的數據,掌握相對應的設計理論,先說服自己再去說服別人。比如:“通過色彩心理學得知,紅色能帶給人興奮、激動、熱情等積極情緒,而我們產品所需要透出的氛圍是熱情的、積極向上的,相對應地激發出用戶的正向情緒,所以我這里使用紅色?!?、“根據近半年數據研究得出,產品聊天信息模塊使用過程當中女性用戶占總用戶數的85.9%,而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好,通過 A/B 測試結果得出,使用小氣泡樣式后數據上漲了15%左右,所以聊天信息模塊整體改版成小氣泡的樣式。”

          通過自己前期的準備(設計理論知識補充、用戶調研、數據測試等),將自己的設計理念表達出來,主導整個設計的方向,必要時可以理性地堅持自己的設計方案,畢竟無論是老板還是業務方,出發點都是希望自己的產品能做到最好最完善,只要你給出數據支撐和專業性的建議,他們一定都會采納接受的,而最后你的能力和專業性也得到了對應的認可。


          · 書面表達

          我本人是強烈建議在能力達到一定程度的時候,通過寫作來檢視自己成果的。因為往往很多東西自己是明白的,但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業經驗總結、對設計的見解看法、自己獨特的設計思維、一本書的讀后感等等都可以通過書面表達出來,某個知識理論難的不是學習,而是將它教授出去,因為只有你想要把某件事說明白,闡述得其他人都能看懂,那么首先你要對這件事理解得很透徹,然后通過自己的經驗和見解,轉化成通俗的語言說給別人聽。最好的狀態就是與你同樣級別的人你能與他用專業術語對話,級別比你低的人你能把理論轉換成他能聽懂的語言進行交流,這樣才算是對理論概念理解透徹到位。

          大家也明白,學習最有效的方法不是輸入而是輸出,設計也是一樣的。在學習某種理論方法后,通過書面表達出自己的見解和想法,并代入到相應的例子當中,做到舉一反三才能算是真正的學到了這個知識點。



          · 述職

          述職一般出現在晉升報告或者面試當中,“諸侯朝于天子曰述職,述職者,述所職也?!笔雎毧梢哉f是工作報告中的總結性報告。向自己的老板述職是為了升職加薪,向面試官述職是為了獲取更好的工作機會;工作成果有了,但是述職做不好的話,在老板/面試官眼里你就做了無成效的工作,述職沒有想象的那么簡單,但是也沒有那么難,很多人都會經歷兩個述職的誤區,這些誤區我經歷過也看到過,所以總結出來警醒大家。


          一、把述職當作流水賬

          把述職當作流水賬是很多新人容易犯的錯誤,當述職的時候,有的人就會陳列出自己今年做了多少多少工作:“我今年改版了 XXX 模塊”、“我設計了 XXX 的首頁”、“我通過調查研究自主推導改版了 XXX 模塊并落地成功”等等,這時候你的老板/面試官會心里會想:“所以呢?”“然后呢?”,工作結果固然重要,但是決定你能否晉升/錄用的,不僅僅是把你做的工作進行流水賬般的描述就夠了的。


          二、把述職當作邀功大會

          這個誤區相對來說更高端一些,述職的時候有的人常常會像邀功一樣:“我今年通過改版了 XXX 模塊,導致用戶量從50%上漲到了80%”、“通過調查研究改版了 XXX 模塊,最后通過 A/B 測試發現數據上漲了5%,最后落地全部實施新的設計方案”,這些看似闡述了產品的背景、自己做了什么以及結果,但是往往來說還是不夠的,以上統統可以歸為無效述職。


          你做了什么重要嗎?沒那么重要,重要的是你帶了什么樣的價值。述職所需要你做的,老板/面試官所想要了解的就是:分析為什么產品之前數據會那么低?你是通過那些方法得出解決方案的?為什么那么多種解決方案里你要選擇這一種?你這樣的方法能否沉淀成體系?如果換一個人來按照你的方法做是否可以得到同樣的效果?有效述職也就是決定你能向上一步的,是把你在工作中的感性認知上升到理性規律的歸納總結的能力體現。


          · SCQA模型

          SCQA 模型是一個“結構化表達”工具,是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的,而這個模型可以套用在業務表達、書面表達以及述職任何場景當中;S是指場景(Situation),C是指沖突(Complication),Q是指問題(Question),A是指解決方案(Answer)。



          無論你是在向業務方/老板闡述方案做工作匯報,還是自己寫作梳理都可以用到這個模型;S場景陳述的通常是大家都熟悉的事、普遍認同的事、事情發生的背景。由此切入既不突兀交代了事情背景又容易讓大家產生共鳴,產生代入感,然后引出沖突C。Q是其中發現的問題,最后A給出相對應的解決方案,是對Q的回答也是接下來我們要闡述的內容。整個結構其實是形成良好的溝通氛圍,然后帶出沖突和疑問,最后提供可行的解決方案。


          我們熟知的廣告詞經常使用這個套路:

          得了灰指甲——描述場景【S】

          一個傳染兩——發生了沖突【C】

          問我怎么辦?——提出問題【Q】

          馬上用亮甲!——給出解決方案【A】


          這個模型無論作為演講的開場白,作為向業務方/老板闡述設計方案的開場,還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產生共鳴,必須讓對方產生一種:“是的,你說的好有道理”的反應,只有場景被認同了才能繼續故事的發展,這時候打破你給對方營造的安全感,制造C沖突,相繼提出Q問題,共同確認面臨的一個問題,然后你給出你的A解決方案,而這個解決方案就是你整個敘述的核心和中心思想。

          比如你要向業務方/老板闡述你的設計方案,就可以這樣來描述:“在 XXv2.0 版本上線后(交代場景),收集了近半年以來的數據發現,女性用戶相對減少了20%(發生沖突),為什么會減少20%的女性用戶(提出疑問),根據我的調查研究發現原因是改版后整個產品色調偏男性化,由于我們產品的受眾群體大多是女性用戶,男女比例為1:3,所以在 v.2.1 的改版中我將整個產品色調改為偏女性化的方向(給出解決方案)”。

          同樣,我寫這個章節的思路就可以這樣理解:設計師們工作中通常會面臨述職、面試以及寫文章等情況(交代場景),但是往往很多設計師不知道如何去表達,思路也不是很清晰,導致述職無效、面試失敗等情況(發生沖突),要如何避免這種情況發生?如何鍛煉自己的表達能力?(提出疑問),那就要多通過 SCQA 模型在生活工作中去練習表達(給出解決方案)。


          生活能力(Lives)

          最后是生活能力,設計不是工作的全部,工作不是生活的全部,我們應該過好自己的生活,產品設計都是從生活中獲得靈感和啟發的,我們如何對待自己的生活,我們就會得到怎樣的反饋。多陪伴下自己的家人、培養一個興趣愛好、保持學習新鮮事物的動力等等,成為一個有趣的靈魂。往往設計師能從多樣化的生活中發現靈感和啟發,也能從生活中找到不同用戶的痛點和感知;如何做一名好的設計師,就是帶著同理心去做設計,如何帶著同理心做設計,就是將自己當作用戶,而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發改變產品設計的例子。


          · 用戶擁有感

          在購買星巴克的時候,為什么服務員要把顧客的名字寫在杯子上呢?難道僅僅是為了分辨嘛?像其他奶茶店一樣貼一張打印好的便簽不就好了么?去宜家購置家具的時候,為什么要讓顧客自己親手組裝家具?可口可樂為什么可以定制自己城市的易拉罐?因為這一切都是要給用戶塑造擁有感,人是一種很不理性的生物,只要先拿到一個東西,就會覺得自己擁有這個東西,就不想放掉它了,這就是擁有感最根本的示范。從心理學的角度來說這被稱為稟賦效應,意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經沒什么用了,我們還要留著當紀念的原因。因為我們的人性對于擁有感非常執著,對于自己得到的東西非常迷戀,當我們覺得要失去它的時候,會有一種損失感,覺得很不舍,會覺得心里很難受,這就是稟賦效應在我們身上發生了最明顯的效果。



          而這樣的營銷策略被用到產品設計當中,例如前段時間很火的軟件 Zepeto,每個人都不一樣的生成圖片洗刷著我們的朋友圈;例如每年年末的賬單、網易云音樂總結等等,賬單它只是一份賬單,根據不同用戶生成不同的賬單,也就賦予了不同的意義;又例如各種 H5 性格測試生成的分享卡等等,這些都是產品設計中從生活中營銷案例中汲取經驗的體現。


          · 線下導購轉線上

          每當我們去到商場線下商店的時候,導購員和我們素未謀面,但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產品,然后向我們推銷對應的產品,如若剛好觸動我們的需求,于是我們就會發生購買這個行為。生活中線下導購的方式也被運用到線上導購的產品中,同樣平臺和用戶素未謀面,可是可以通過掌握大數據,分析用戶近半年、近一個月的購買和瀏覽商品的數據,結合相對應季節等因素推送給用戶所需要的產品。比如我平時經常瀏覽一些潮牌個性的衣物,現在正值冬季,想買一件冬季穿的棉衣,那么當我打開淘寶的時候,系統會推送一些潮牌大衣等冬季衣物在首頁,我正好有這個需求又符合我的口味愛好,自然而然就會點進去購買了。



          有一條創業準則是這樣說的:“如果有點兒閑錢,還有點時間,但又找不到商機,最好的辦法就是去鬧市、電梯、小區人流量最高的那個大門口,端杯茶,靜靜的聽人們抱怨?!?,谷歌、蘋果公司的設計思維首當其沖的就是帶著同理心去設計、去制定設計策略,同理心來源于生活,而這一切只有設計師把自己的生活經營好,才能從當中獲得啟發和感悟,然后代入自己的設計理念當中,設計出真正能根本解決問題的產品。

          其次偶爾會從網上看到或者聽說 XX 設計師猝死,XX 設計師檢驗出 XX 疾病等等,每每看到此類消息都會感到痛心,工作不是生活的全部,如果連自己的工作和生活都處理不好的話,那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神,那么他的工作會做得好嘛?所以在這請求大家合理安排好工作時間,勞逸結合,多鍛煉身體,多花些時間陪伴父母、家人,這樣才能帶著健康的身心去工作,從而取得更好的工作成果,形成一個良性的循環。你怎樣對待生活,生活就會怎樣對待你。

          作者:雨灰    來源:站酷

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

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

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


          如何讓你的圖標具有說服力?

          純純

          一、圖標的定義及分類


          1、圖標的定義

          圖標是具有高度概括性的、用于視覺信息傳達的圖像。圖標常常可以傳達出豐富的信息,并且常常和詞匯、文本搭配相互搭配使用,兩者互相支撐,或隱晦或直白地共同傳遞出其中所包含的意義、特征、內容和信息。

          在數字設計領域,圖標作為網頁或者UI界面中的象形圖和表意文字而存在,是確保界面可用性的基礎設施,也是達成人機交互這一目標的有效途徑。



          2、圖標類型(基于功能劃分)


          2-1釋意性圖標:

          釋意性圖標是用來解釋和闡明特定功能或者內容類別的視覺標記。它并不是一定被點擊可交互的UI元素,在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標來獲取信息。不過有時候圖標表達的含義可能還不夠完整或者清晰,所以會將圖標和文案搭配起來一起使用,這樣可以大大降低誤讀的可能性,釋意性圖標一共可以分為以下三類:


          2-1-1純圖標:

          例如火球買手APP中的店家“特定標簽”,以及圖文展示下的“觀看數量圖標”與“收藏圖標”,它們并不需要用文字去解釋,用戶也知道它表達的是什么。




          2-1-2圖文結合:

          例如造作APP中的“購物車圖標”與“收貨地址圖標”,為了讓用戶能夠很好的明白圖標的意圖,所以在圖標下方會配有文字提示,這樣就能大大的降低誤讀的可能性。



          2-1-3純圖標(圖標內含文字):

          例如開眼APP中視頻封面左上角“開眼精選圖標”,它把圖標與重要文字結合在一起展示給用戶,看起來不僅十分具有個性,而且用戶對其理解性也非常強。



          2-2交互性圖標:

          交互圖標的最大意義在于可以引導用戶進行交互行為,是在產品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執行不同的交互過程,這種類型圖標也是APP中最常見的,常見的交互性圖標如:搜索、底部標簽、返回、點贊、收藏、掃一掃等。



          2-3裝飾性圖標:

          裝飾性圖標僅僅是用來提升整個界面的視覺體驗,它并不具備任何功能性。這類圖標往往是為了迎合用戶的偏好與期望,通過豐富視覺體驗的方法來增加內容的觀賞性,這樣不僅可以吸引并留住用戶,還可以讓整個用戶體驗更加積極,最為大家所熟悉的就是滴滴出行APP中的“小車圖標”。




          3、圖標類型(基于基礎樣式+表現手法)

          圖標基于基礎樣式(線、面、線面結合)+表現手法(顏色、透明度、投影、疊加...)劃分,一共可以分為20種類型,每種類型的展示方式也都各有不同。


          3-1線性圖標(6種)

          線性圖標通過線來塑造輪廓,在界面中App的圖標尺寸并不大,所以如果線過于復雜,在小面積中過多的線會對識別性產生較大的困擾。在圖標設計中使用的線有粗細之分,常用的App圖標設計線的粗細一般有2PX或者3PX,不同的線條粗細所帶來的視覺感受也不同,細線顯得精致,粗線視覺面積大,顯得厚重。



          3-2面性圖標(6種)

          面性圖標是通過面來塑造形體的圖標,采用了剪影的設計形式,通過線或者面去切割基礎輪廓面,通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。



          3-3線面結合圖標(6種)

          線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說,由于元素的多樣化,設計更容易獲得好的效果。相反,如果運用不當會顯得圖標非常雜亂,如何有效的把控好兩者之間的過度是關鍵。



          3-4擬物化圖標

          這類圖標的特點是通過細節和光影還原現實物品的造型和質感,能給用戶極強的代入感,用戶可通過對現實事物的聯想,快速領會圖標表達的意圖。但是隨著 ICON 的發展,擬物圖標也帶來了一些問題,因為用戶關注的核心永遠都是信息本身,華麗的視覺元素或許在用戶使用的初期,起到賞心悅目的裝飾,但久而久之,這都將成為對用戶獲取信息的一種干擾,所以現在擬物化的圖標很少運用在APP界面之內。



          3-5輕質感圖標

          相較于擬物風格不會有太多復雜的視覺元素,層次簡單,用色素雅干凈,采用輕投影、輕漸變的方法設計,這類圖標具有一定的立體感,能給人輕盈、簡潔、精致的感覺,在界面設計中,一般在面積比較大的區域我們會使用加入輕質感的圖標。




          二、圖標設計規范


          合理的遵循圖標規范可以有利于設計師之間合作使用,指導設計師如何規范的去設計圖標,以確保企業所有產品圖標風格的一致性和可用性達到統一,同時也是為了后續產品更新迭代有可參考的地方。


          1、圖標尺寸

          為了保證圖標的尺寸大小一致性,我們往往會建立基礎的網格尺寸來進行繪制圖標,常用的網格繪制尺寸為:16、24、36、48、64、128、512、1024。這些尺寸并不是固定的,在設計中也會存在特殊的尺寸,例如谷歌在臺式機上設計圖標,當鼠標和鍵盤是主要輸入方法時,就會使用密集布局,基礎網格就會縮小到20。

          下面就以常用的24x24為大家展示:



          網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域,同時還能夠很好的平衡圖標的視覺重心。



          *在使用常規圖標時避免一部分在出血位。



          *在使用多個元素的圖標時,避免圖標擁擠我們可以讓其部分出現在出血位,確保它們之間有足夠的空間。



          2、圖標的keyline

          keyline由圓形,正方形,矩形,正交,三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易,并有助于在設計相似比例的圖標時有共同的參考準則。


          在24尺寸下的keyline構成如下(24尺寸下的出血區域為2):



          當把圖標畫在網格上時可以很好的規范圖標,讓它們從整體的視覺上看著統一規范。



          3、像素


          3-1像素統一

          在設計一整套系統化的圖標時,我們一定要注意圖標的像素大小,要運用相同的網格尺寸設計相同線條粗細的圖標,包括曲線,角度以及內部和外部筆劃。這樣圖標看起來才更統一,也有利于后期圖標的迭代更新。



          當然,描邊像素的粗細并不是絕對的,如果我們要做一些密集型的圖標時,可以考慮適當的縮小線的像素大小。如下,我們設定的系統圖標線條粗細為3px,當你用3px作用于指紋圖標上時就會顯得非常擁擠,并且在視覺上比其余圖標更重,這時我們就可以把它的線條像素降級,設定為2px。



          3-2避免小數位

          我們在用矢量工具繪制圖標時,要仔細看好圖標的網格尺寸和圖標結構尺寸,避免產生小數位。



          4、圖標的曲率

          曲率簡單來講就是圖標中帶有圓角的邊角度數,只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現方式有兩種:外曲、內曲。



          外曲與內曲并不一定同時存在,在特定情況下內部結構可以是直角(無曲率)。如下圖:當內部結構都是圓角時會發現整個圖標稍顯臃腫,這時我們可以把部分內部圓角直接變為直角(也可以改變曲率大小),改變后就會發現圖標的整體結構會顯得更加協調。需要注意的是如果一個圖標做了這樣的處理,在同等情況下的圖標都要做一樣的處理,不然圖標會顯得非常雜亂,不統一。



          5、傾斜角度

          根據像素的網格線來設置兩條對角線,會讓你的圖標看起來更清晰。在傾斜的角度選擇上,不要出現7.8°、14.2°這樣的奇怪數值。我們可以將15°的增量用于傾斜角度(也可以采用其他有規律的角度方案),這樣會使得整體的圖形變化顯得更加規律,也能夠滿足不同圖形的角度需求。




          6、斷點形態

          在做很多圖標時都會用斷點的缺口來打破“全包邊圖標”的沉悶感,使圖標具有透氣性,如果想給圖標添加斷點,那么要保證斷點的形態保持一致。



          7、圖標間距

          確保圖標內每個細節和元素都有足夠的空間,圖標的相鄰元素之間的空間在整個圖標中不應太小,我們可以定義最小間隙以避免輪廓“粘住”,在24px尺寸下的間距不得小于1px。



          8、透視

          如果在做圖標時牽涉到了透視需求,那么就一定要保證圖標的透視角度一致。



          9、視覺重心

          非中心對稱圖形物理對齊時視覺上會有偏離感,多個不同形狀的圖標視覺重心并不在一條水平線上,需要微調才能保證平衡感。



          10、圖形整潔

          在圖形的處理上,不要留有多余的節點,干掉多余的節點,保持圖形的整潔。



          11、命名

          ICON命名要求較為嚴格,涉及到我們切圖給開發,所以我們命名爭取做對,且需嚴格遵守規則,正確的命名原則:類型_位置_功能_狀態_大小




          三、圖標的性格走向


          每個App應該有自己獨特的產品氣質,同樣圖標性格也應當與產品氣質保持一致。圖標性格一共分為了4個走向:粗曠(粗直)、活潑(粗圓)、商務(細直)、精致(細圓)。



          1、粗曠類圖標

          圖標結構特點:線條較粗(或面性圖標、線面結合圖標)、拐角為直角。

          粗曠類圖標讓人看起來非常飽滿、剛正,它更多適用于男性、潮流、有格調類型等產品中。例如VSCO,它的底部標簽欄圖標全部采用了粗線條的直角設計。



          2、活潑類圖標

          圖標結構特點:線條較粗(或面性圖標、線面結合圖標)、拐角為圓角。

          活潑類圖標讓人看起來十分容易接近,能讓人感受到溫暖、舒適,它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產品中。例如閑魚,不管是在LOGO字體的處理還是APP內部的圖標處理,都是采用了線條較粗的圓角設計。



          3、商務類圖標

          圖標結構特點:線條較細、拐角為直角。

          商務類圖標讓人看起來十分規矩、嚴謹、值得信賴,它更多適用于新聞、政府、商務、工具等產品中。例如工具類的思維導圖APP,它的可操作按鈕都是商務類的圖標。因為這類圖標的特性,所以目前我們很少在移動端上看到它,它更多適用于PC端的后臺界面中。



          4、精致類圖標

          圖標結構特點:線條較細、拐角為圓角。

          精致類圖標讓人看起來非常干凈、柔和、顯得高級感,它更多適用于旅游、奢侈品、藝術、領域垂直等產品中。例如airbnb,在APP應用中大部分都采用了精致類圖標。




          四、圖標的評判標準


          當圖標設計完后,我們應該如何去評判一個圖標的好壞?很多設計師并沒有完整的評判體系,其實我們可以從這五個維度對圖標進行評判:識別性、圖標氣質、協調性、一致性、品牌調性。


          1、識別性

          圖標最主要的用途就是輔助用戶理解信息,特別是對于當圖標單獨存在時,一定不能讓用戶產生疑慮。要想圖標達到高識別,我們可以從這2個方向入手:大眾認知隱喻、真實世界映射。


          1-1 大眾認知隱喻

          在互聯網普及的今天,許多界面的隱喻圖標已被廣大用戶熟知認可,對于這類隱喻圖標用戶不用思考身體就已做出反應,我們在設計圖標時可以從隱喻圖標中添加修改部分元素,從而形成新的圖標,這樣既能保證圖標的識別性,也能做出差異化。




          1-2 真實世界映射

          選擇真實世界中的物品映射,能使人下意識對圖標的作用有近似預期,降低學習成本,提高識別度。




          2、圖標氣質

          每個App應該有自己獨特的產品氣質,而我們所做的圖標就是要跟隨產品的氣質。例如當你要做一款二次元產品,你的圖標氣質就應該偏活潑、可愛、萌、青春,而不是剛硬、嚴謹、規矩。



          3、一致性

          一致性是圖標的基礎,我們在繪制整套圖標時要確保它們的基礎屬性全部一致,細節統一,圖標內容的統一在視覺上也更加和諧美觀。圖標是否具有一致性,就要從以下七個方向去評判:尺寸大小、圖形角度、拐角(曲率)、描邊、間距、透視、顏色。


          3-1 尺寸大?。壕W格大小是否統一、是否遵守圖標的keyline規則。


          3-2 圖形角度:是否遵循設定的角度規范(15°的增量用于傾斜角度)


          3-3 拐角(曲率):拐角的曲率是否統一,如果圖形太多且復雜,那么我們可以根據圖標的特性去設定曲率的規則,例如可以設定當邊角像素在1-2px時內外曲率為2px;當邊角像素在3px時內外曲為2px,內曲為1px;當邊角像素大于或等于4px時,外曲為2px,內部則為直角。


          3-4 描邊:描邊大小是否一致。


          3-5 間距:是否遵守間距規范。


          3-6 透視:透視是否一致,避免在同一套圖標中出現正視圖/側視圖混雜的情況。


          3-7顏色:在圖標的配色上要保持一致的規律,采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協調,避免出現飽和度、明度反差過大的配色。



          4、協調性

          一致性代表的是圖標的基礎,而協調性則代表圖標的整體狀態,協調性的呈現狀態是驗證一致性是否合理的標準,當協調性存在問題時,我們就要反過來查看一致性存在的誤區并給予修改。在圖標的協調性上我們主要審視這三點:視覺大小、飽滿度、透析感。


          4-1 視覺大小

          視覺大小對標的是一致性的尺寸大小與描邊大小,當你發現圖標視覺大小不對等時,你就要回過去查看你的網格與keyline是否運用正確,確保正確后再查看你的圖標是否按照keyline的規范繪制以及描邊大小是否一致。(同樣尺寸下的圖標,從光感上來看描邊粗的圖標視覺偏大)



          4-2 飽滿度

          飽滿度對標的一致性的間距,當你發現圖標不夠飽滿時,你就要去查看你設定的間距值是否偏大,是否合理。



          4-3 透析感

          透析感簡單來說就是留白區域。透析感對標的也是一致性的間距,當元素的描邊過大時,我們就要合理的設定間距的最小值,不然整個圖標就顯得非常臃腫。



          5、品牌調性

          品牌調性是我們經常提到的緯度,我們打開很多APP都會發現他們的圖標設計都非常普通,沒有任何特色,過于大眾化,雖然都做了一些形式上的改變,但總是與品牌缺乏聯動性。其實我們可以結合品牌調性,在圖標上做更多的聯動、創新。


          5-1品牌顏色

          色彩是圖標設計中重要的構成元素之一,我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷,站酷的品牌色是黃色,標簽欄的圖標(選中狀態)就提取了品牌的黃色,讓其與品牌調性高度一致。



          當然品牌顏色除了可以直接用外,還可以在提取時適當調整色彩的飽和度、明度,做更多的形式變化。例如懂車帝,就在原有的黃色基礎上做了些許調整,圖標采用黃色透明漸變的處理方式,在與品牌顏色呼應的同時,使得整個圖標更加精致、有活力。



          5-2品牌LOGO

          提取品牌LOGO是最常用的使用方式,我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面,也是進入APP默認的頁面,把首頁圖標替換成品牌LOGO,能反復加強了用戶對App的logo印象,這樣不但使App內外形成了視覺聯系,同時也二次傳遞了品牌形象。例如大眾點評,它的首頁標簽就用了品牌LOGO。



          5-3品牌元素

          我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播,它就提取了品牌卡通形象的外輪廓作為首頁圖標。



          品牌提取的元素并不只是所見到的品牌視覺形象,還可以提取與品牌內容強相關的元素。例如QQ音樂,就把音符作為首頁圖標。



          5-4品牌名稱

          如果你的品牌還不為大眾所熟知,那么為了強化用戶對品牌名稱的認知,可以把品牌名稱直接放入標簽欄中。例如MONO,就把它的名稱分為四個字母分別放在了4個標簽內,需要注意的是這類圖標不能單獨出現,因為它本身不具備引導含義,必須配合文字一起出現,這樣才能讓用戶能易理解。



          5-5品牌性格

          圖標風格可以與品牌性格保持一致,一套帶有濃厚品牌感的圖標,會讓人記憶猶新。例如:每日故宮,它的圖標就非常具有特色,結合了品牌的性格以及定位,加入了眾多的古代中國元素,整體看起來有股濃濃的古韻之風。



          5-6吉祥物 

          如果品牌中含有吉祥物,我們可以提取吉祥物的外形,把它用于產品的圖標中。例如盒馬,它就把盒馬的吉祥物做了風格化的處理,放于APP的首頁標簽。




          作者:黑獅力    來源:站酷

          藍藍設計建立了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咨詢、用戶體驗公司、軟件界面設計公司


          B端產品設計思路&高頻設計要點筆記

          純純


          ★目標導向·B端產品的商業目標


          設計開始要了解設計的目標,用戶的行為都是有「目標動機」的,B端產品的業務目標往往都是為了為企業或個人為了解決某一項工作上的問題。
          當設計過程以「目標」為出發點,可以增強設計判斷力,輸出更有效設計解決方案。


          B端產品的設計原則:提高使用者的工作效率,同時降低業務鏈路的操作及學習成本。

          當你有了目標以后你的設計就可以圍繞這個目標展開:



          ★設計價值·B端的設計價值體系搭建


          對于B端的產品而言,用戶最關心它能為實際的工作帶來哪些便利,而并非這個界面做的多么的好看,以及用戶體驗多么棒。所以B端產品設計價值優先級往往是  功能性>表現力



          B端產品設計需要站在整個業務線全局角度去把控各個設計點,不再是「用戶體驗」至上,為實現「任務目標」,「犧牲」一部分「用戶體驗」是必要的,這個時候視覺和一些體驗就不那么重要了。通過調研業務去了解各個角色職能的工作流程、相關痛點,讓產品能用,好用。



          要點1·了解項目的業務流程


          理想的B端設計需要了解業務目標以及業務鏈路中每一個環節的過程。將業務邏輯理解透徹再考慮應該如何進行設計實現。

          這樣做的原因當你站在使用者的角度進行同理心設計可以更好的幫助用戶完成他要完成的工作,從而提高效率。產品原型一般基于「功能」本身,而設計師從用戶實際場景規劃用戶的任務流,可以優化產品邏輯,補全缺失場景,通過了解業務流程也能給予創造性解決方案




          要點2·用戶調研與場景化設計思維


          B端產品往往是是服務于企業用戶,用戶畫像需要專注于用戶特征中的「群體職業身份」這類人無論性別、年齡、地區有何差異,他們都是一類角色,我們的產品要提供給這類角色使用,而不是某個人使用。



          由于B端設計師不是產品的用戶,無法沉浸在與用戶相同的真實場景中,建立共情。所以設計師最好親自感受一下業務流程,獲得一手的用戶洞察,


          獲取B端用戶反饋的方式

          「通過業務人員交流」業務人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫像。
          「實地走訪」:觀察在自然狀態下用戶如何完成工作任務,并提問題:「你怎么做?」或者「為什么這么做?」
          「建立種子用戶群」:聚集活躍的種子用戶群,收集意見和建議,并在群里驗證設計想法。
          「親身體驗」:成為真正的客服小二,接聽客戶電話,記錄自己在工作臺場景下的真實體驗和感受。

          獲取用戶畫像后了解該群體背后工作感受,行為習慣,以及任務類型。





          要點3·情感化設計心理


          安全感和信任感建立:人們越來越關注隱私和信息安全。如果你要求必須填寫敏感信息,請確保使用字段下方的注釋文本解釋為什么需要這些信息。


          實際工作中我們曾經自動獲取過用戶之前表單中填寫的的支付類賬戶信息,在收集的用戶反饋中,用戶會感覺到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗會更好,但是考慮到信任感,敏感類信息請不要自動獲取。


          讓用戶感受到你正在幫助他操作:Jakob Nielsen于1994年提出的十大可用性原則中,其最后一條原則Help and documentation(幫助性指導原則)是搭建B端用戶幫助體系的核心準則,在理想情況下,沒有幫助文檔就可以使用系統是最好的,但在某些情況下(尤其是B端系統),提供一些引導性的幫助其實是必要的。


          B端系統中可以嘗試搭建用戶幫助系統:




          要點1·降低學習成本


          對B端產品來講,設計師在設計的時候是不需要耗費太多的思考的,只是去按照交互設計師的規劃堆砌圖表和列表。但是對于使用者來講,其中縱橫交錯的商業邏輯和業務邏輯卻是給用戶搭建了一個十分高的門檻。



          要點2·保持高效


          例如修改資料的時候,使用彈窗、浮層等等交互操作會減少頁面跳轉的頻率。

          但是與此同時,減少頁面跳轉并不代表真正的高效,例如瑞幸的供應商系統,供應商所產生的訂單需要按照指定的流程一步步進行操作確保不會出現問題這樣雖然頁面的跳轉增加,但是可以避免操作出錯給用戶帶來更大的困擾。



          要點3·整理信息/引導視覺


          設計要根據用戶的瀏覽習慣和視覺動線。要嘗試引導用戶的視覺,舉個例子,如何引導:




          設計側核心要點


          B 端產品是以業務為核心,是需要用戶長時間操作并完成工作任務的,對于操作和展示內容無關的元素,越少越好。視覺為功能讓步,追求簡潔、清晰、克制、理性的視覺風格。設計語言盡量做到不干擾不打擾。



          要點1·表單設計


          輸入順序:先易后難;先必填后選填;先公開信息后隱私信息;有關聯性的合成一組,特殊問題后置,用戶輸入時、不會覺得突兀、門檻太高 。

          自動對焦(PC端)進行表單頁面,自動對焦第一個輸入字段可以引導用戶開始進行輸入。

          標題:標題是對下文最短最精的概括。用戶一般都會跳過表單內容,而且幾乎都不會仔細閱讀那種特別詳細的描述。所以用最少的文字說清楚一個表單的目的尤其重要。
          用戶應該可以看一眼標題就知道他們應該怎么做,而不是非得把剩下的全部看完,
          (附:這部分感興趣的同學可以搜索“微文案設計”)

          在表單編寫方面,或者說各種寫作中,刪減詞語都要比添加詞語更加有益。 在仔細檢查不必要的詞語后,文章會更篤實,更連貫,更吸引人。



          這個鏈接有什么用?關閉是點擊右上角的按鈕嗎?如果并沒有增效,那就是減效。每一個字,每一張圖片,都不是100% 必需的,這些都會降低你表單的轉換率。

          刪除一個字段,表單提交率就可以提高 26%。(本篇筆記原本有12000余字,為了避免浪費大家時間,我僅保留4000余字的高頻要點內容)


          PC端產品提示文字盡量不要放在框內

          提示文字存在于框內常用在移動端,它的空間占比很小,對移動端的小屏來說,是非常友好的,但如果在交互上處理不好,會有很大的缺陷。

          內部標簽結構,只有提示性文字,用作提示用戶應該輸入什么內容,但用戶在輸入的時候,內部的標簽/提示性文字就會消失,這時候,用戶會失去它是否輸入準確的唯一判別標準。


          減少打字需求

          字段輸入通過部分人工智能自動將操作步驟可以變得簡潔高效 ,也包括諸如一些、自動定位、圖片識別、自動獲取,第三方導入等方式來使用戶的效率得以提升的功能。
          打字是在線表單中最耗時、最密集的部分,而且經常會導致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能,將減少工作量并提高轉化率。



          使用文本塊

          文本塊會更容易讓用戶記住內容:例如銀行賬戶、電話號碼等等。它指的是將信息排列成「塊」的過程,使內容更容易保留、處理和回憶。一份研究聲稱數字 3 是幫助人們吸收和回憶信息的神奇數字。


          表單的提示文字和定義格式要求

          如果一個字段需要特定的格式輸入,請告訴用戶。例如密碼要求、語法規則、編號間距等等。



          用輸入框長度提示

          可以用輸入框長度提示用戶輸入的內容是否正確。
          德萊厄斯研究所的可用性研究發現,如果一個字段太長或太短,用戶開始懷疑他們是否正確理解了標簽。


          在用戶輸入的時候,右下角告訴用戶已經輸入了多少字,如果超過 限定字數后輸入框紅色,用來警示用戶,此時用戶依舊可以再輸入字符,但當出現警示,用戶繼續輸入一定數量字符后,系統需要強行限制無法輸入新的內容,避免用戶沒有察覺到警示反饋導致的過多輸入,從而浪費的時間。


          (該部分感謝酷友@sh9513 提出的反饋)


          如果用戶填寫錯誤,向用戶顯示錯誤發生的位置,并說明原因。


          單選框

          如果你的表單里的選項少于5個可以列出所有選項供用戶快速選擇,當大于5個時候可以嘗試用下拉框解決。
          將第一個選項作為用戶最有可能的默認選項,且是最安全的選項,提前預判用戶的操作提升選擇效率。排列方式推薦數直排列,豎直排列相對于水平排列容易讀取和定位,提高用戶的瀏覽順序。



          解釋隱私消息

          當前需要用戶填寫相對隱私的信息時,請給予解釋這么做的原因及目的。


          收集設計反饋

          完成表單的設計后可以給業務用戶進行簡單的測試,并記錄他們填寫的時間收集反饋,以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設計。

          最后在情感化設計系統里記得感謝用戶填寫或者反饋問題,因為用戶是花時間的。所以請表示感謝。


          要點2·表格設計

          表格的設計圍繞著「可讀性」和「易操作」兩個設計原則。設計易讀,易掃視,易比較,易操作的表格結構是表格設計的首要目標。


          列寬有三種常見處理方式:

          1.  根據內容的極限長度給出足夠的固定寬度;
          2. 可以固定部分列的寬,其余列按百分比處理;
          3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態,內容為空狀態顯示方案;
          4.需要設置列之間的最小寬度,表格響應式布局情況下最小不小于此寬度。

          M-Densign規范中對齊方式會遵循如下規則:
          表格的排序,應從用戶目的出發,遵循用戶查看數據的習慣,尊重數據之間的關聯性,設計用戶查看、操作數據的路徑,而非隨機排列(這部分可以在業務側調研時驗證,提高用戶體驗和閱讀效率)。


          1. 文本信息/混合型文本左對齊,符合從左到右的閱讀習慣;

          2. 數字信息右對齊,方便數字之間的直觀對比;

          (該圖片感謝好友@晴藍 同學反饋的一個錯字,圖片已修正)


          要點3·按鈕設計

          設計規范需要定義按鈕的四種狀態:正常狀態(Normal)、懸停狀態(Hover)、激活狀態(Active)、加載狀態(Loading)、禁用狀態(Disabled)



          B端產品的開發一般涉及多個開發團隊協作,例如瑞幸的后臺修改按鈕顏色,都可能牽動10+工程師的協同。

          所以B端產品在進行設計改版以及設計側調整時候要思考調整對于業務側是否有直接幫助,在設計和規范建立之前,切勿頻繁改動。


          除了完全獨立設計開發的項目以外,還有大量的 B 端項目是采用第三方框架開發而成的,如 Ant、Element 等等。這是因為這些第三方程序可以幫助團隊節省大量的開發時間和精力。

          作者:Cesare_玄漓    來源:站酷

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

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

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




          設計規范和適配

          seo達人


           

          一 開篇:為什么需要建立設計規范?

           

          1、保證設計的一致性。

          對內部:多個設計師合作,依然能保證設計風格的統一。

          對用戶:提高用戶體驗,提高操作效率,加深對產品的記憶。

          2、提高開發效率

          與前端有效溝通的工具,提高設計還原度,降低對接成本。

          開發可以建立公共組件庫,極大的提高了開發效率。

          3、方便產品迭代

          隨著產品的業務變化,發現一些問題或者需要優化用戶體驗的時候,針對單個控件進行調整,就可以影響全局,十分便捷。

           

          二  移動端設計規范之平臺設計語言

           

          優秀設計來自世界互聯網公司,前沿的設計理念和完善的設計語言是我們設計師的學習目標。了解和學習后,更好的進行產品設計。

           

          前沿平臺

          1、谷歌設計語言  Google Design   

          http://design.google

          谷歌設計中心,展示了谷歌的設計工作和概念,包括了 Material Design 在內的所有關于產品、體驗、設計、品牌等互聯網領域的設計思考。

           

          2 、蘋果 IOS 設計規范

          蘋方人機界面設計指南,含有IOS設計規范,指導界面設計。蘋果人機界面設計指南,詳細介紹了蘋果公司最新的移動設備和系統,設計屏幕分辨率、圖標設計規范、色彩搭配、文字等設計語言,同時還提供了 UI 設計資源可供大家使用。

           

          3、Ant Design

          螞蟻金服設計平臺是國內互聯網公司之一,基于螞蟻金服生態系統的跨設計與開發的體驗設計方案,包含了網頁端的顏色、字體、圖標、組件等頁面設計布局等設計指導網站。

          螞蟻集團的企業級產品是一個龐大且復雜的系統,數量多且功能復雜,而且變動和并發頻繁,常常需要設計者與開發者能快速做出響應。同時這類產品中有存在很多類似的頁面以及組件,可以通過抽象得到一些穩定且高復用性的內容。

          隨著商業化的趨勢,越來越多的企業級產品對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標,我們(螞蟻集團體驗技術部)經過大量項目實踐和總結,逐步打磨出一個服務于企業級產品的設計體系 —— Ant Design?;凇缸匀弧?、「確定性」、「意義感」、「生長性」四大設計價值觀,通過模塊化解決方案,降低冗余的生產成本,讓設計者專注于更好的用戶體驗。

           

          4、Fluent Design System

          微軟基于Windows 10 的設計指南,它可以幫助開發者設計和構建流暢、精美的應用程序,包括人機界面布局、樣式、控件和設計工具包下載。

          微軟將這套全新的設計語言名為 Fluent Design System(流暢設計體系),該體系共有五大核心元素,包括Light(光感)、Depth(深度)、Motion(動畫)、Material(材質)和 Scale(縮放)。

           

          5、WeUI

          WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,包含表單、基礎組件、操作反饋、導航等各種各樣的設計元素。它由微信官方設計團隊為微信內網頁和微信小程序量身設計,使得用戶的使用感知更加統一。

          具體看下面的內容,有詳細介紹。

           

          6、Airbnb Design 

          Airbnb 是一家享譽全球的民宿服務公司。同時,這背后有一個他們自己強大的設計團隊,為Airbnb提供著設計方面工作。我日常工作使用到的(動效方面)Lottie 也是他們設計開發的產物(感謝)。他們擁有自己的設計網站Airbnb Design。其中一些文章介紹 DSL, 正如在《設計體系》一書介紹,他們嚴格遵守著自己的設計規范和原則。保證著Airbnb的產品在設計上的一致性,可用性等,目的是為不同國家的用戶提供好的用戶體驗。

           

          界面設計中的字體思考

           

          文字是 App 中最核心的元素之一,產品傳達給用戶的內容。字體有無襯線字體和襯線字體。無論iOS 還是 Android 系統,它們都有內置的默認字體可供設計師使用。用心處理好字號大小、字體顏色與字體間距的處理上。

          用戶界面設計中,字體是界面設計中的基本元素。設計師要設計好界面中的字體顏色、字體間距、字號的大小、

          字重等思考。

          蘋果系統中默認的字體是:蘋方字體。英文字體和數字字體是:舊金山字體,San Francisco 字體。

          其中數字字體比較好的字體可以用:Dinner 字體。

          安卓系統默認的中文字體是:思源黑體。  英文字體是:Roboto 字體。

          界面設計中的字體設計規范,如下圖所示。


           

          介紹幾款西文字體:

          無襯線字體,在字的筆畫開始和結束的地方,沒有額外裝飾,筆畫粗細均勻,適合于主題設計的屏幕展示,給人一種自然舒適感。例如:無裝飾性的易識別的代表字體:Helvetica 英文字體、San Francisco 英文字體、

          Roboto 英文字體、Arial 英文字體。

          襯線字體是字的筆畫開始和結尾處的位置有額外裝飾,同時筆畫的粗細有所不同,一般適用于印刷排版,具有較高的可讀性。例如:具有裝飾性的代表字體:Times New Roman。

          DIN 字體

          DIN 字體是效力于德國交通標識和公共空間的經典字體,是一種很好的數字字體。

          Futura 字體

          Futura 字體 ,這個字體現代、時尚具有幾何特征,是很多雜志和時尚品牌的常用字體,例如:時尚氣質的品牌 LV 的商標字體就是這種英文字體。

          Roboto 字體

          Roboto 字體,是谷歌公司為 Android 操作系統開發的默認英文字體,具有“現代感”、“親和力” 的設計感。

          San Francisco 字體

          San Francisco 字體 ,蘋果公司設計的,蘋果公司推出的 Apple Watch 和 iOS 移動端等系統的英文字體。

          Didot 字體

          Didot 字體, 是世界上最著名的英文字體之一,美感,可以用在 英文標題、產品設計、廣告使用的一款字體。

          例如:時尚雜志 VOGUE 標題字 就是運用了這個字體。

           

          三 移動端設計規范之設計主題、設計原則、屏幕的設計尺寸:

           

          iOS 設計主題

          iOS的三個主要主題將其與其他平臺區分開來:

          • 明晰。在整個系統中,各種大小的文字都清晰易讀,圖標精確而清晰,裝飾物微妙而恰當,對功能的高度關注激發了設計的靈感。負空間,顏色,字體,圖形和界面元素巧妙地突出了重要內容并傳達了交互性。
          • 尊敬 流暢的動作和清晰美觀的界面可幫助人們理解內容并與之互動,而從未與之競爭。內容通常會填滿整個屏幕,而半透明和模糊通常會暗示更多內容。最少使用邊框,漸變色和陰影可以保持界面明亮通風,同時確保內容至關重要。
          • 深度。獨特的視覺層和逼真的動作傳達層次感,賦予生命力并促進理解。觸摸和可發現性提高了人們的愉悅感,使他們能夠訪問功能和其他內容而不會丟失上下文。當您瀏覽內容時,過渡會提供一種深度感。

           

          設計原則

          為了最大限度地提高影響力和影響范圍,請在想象應用程序的身份時牢記以下原則。

           

           

          審美完整性

          審美完整性表示應用程序的外觀和行為與其功能的集成程度。例如,一個可以幫助人們執行重要任務的應用程序可以通過使用微妙,醒目的圖形,標準控件和可預測的行為來使他們專注。另一方面,沉浸式應用程序(例如游戲)可以提供引人入勝的外觀,帶來樂趣和刺激,同時鼓勵發現。

           

          一致性

          一致的應用程序通過使用系統提供的界面元素,知名的圖標,標準的文本樣式和統一的術語來實現熟悉的標準和范例。該應用程序以人們期望的方式結合了功能和行為。

           

          直接操縱

          屏幕內容的直接操作可以吸引人們并促進理解。用戶在旋轉設備或使用手勢來影響屏幕內容時會經歷直接的操縱。通過直接操作,他們可以看到其操作的直接可見結果。

           

          反饋

          反饋確認行動并顯示結果,以使人們了解情況。內置的iOS應用程序可響應每個用戶操作提供可感知的反饋。輕觸時,交互元素將突出顯示,進度指示器傳達長時間運行的操作的狀態,動畫和聲音有助于闡明操作的結果。

           

          隱喻

          當應用程序的虛擬對象和動作是扎根于現實世界或數字世界的隱喻時,人們會更快地學習。隱喻在iOS中可以很好地工作,因為人們可以與屏幕進行物理交互。他們將視圖移開以隱藏下面的內容。他們拖動和滑動內容。他們切換開關,移動滑塊并滾動選擇器值。他們甚至瀏覽書籍和雜志的頁面。

           

          互聯網產品設計的尺寸規范和分辨率的認識,是進行線上界面設計的第一步。然而,市面上的型號有很多,咋辦?

          作為設計師,要掌握常見的尺寸和距離,理解并做好設計的適配,才能解決不同手機屏幕之間的布局規范和換算關系。

           

          常見的移動端手機屏幕的設計尺寸如下:

          DPI和PPI的定義(來自百度百科)

          DPI原來是印刷上的記量單位,意思是每英寸上,所能印刷的網點數(Dot Per Inch)。但隨著數字輸入,輸出設備快速發展,大多數的人也將數字影像的解析度用DPI表示,但較為嚴謹的人可能注意到,印刷時計算的網點(Dot)和電腦顯示器的顯示像素(Pixel)并非相同,所以較專業的人士,會用PPI(Pixel Per Inch)表示數字影像的解析度,以區分二者。

          我們通常講的打印機分辨率是多少DPI,指的是”在該打印機最高分辨率模式下,每英寸所能打印的最多”理論”墨點數”。

          Pixels Per Inch也叫像素密度,所表示的是每英寸所擁有的像素數量。因此PPI數值越高,即代表顯示屏能夠以越高的密度顯示圖像。當然,顯示的密度越高,擬真度就越高。

          Pixels Per Inch是像素的密度單位,就像PPI值越高,畫面的細節就會越豐富,所以數碼相機拍出來的圖片因品牌或生產時間不同可能有所不同,常見的有72PPI,180PPI和300PPI,默認出來就是這么多(A710拍出的是180PPI)。

          DPI(Dots Per Inch)是指輸出分辨,針對于輸出設備而言的,一般的激光打印機的輸出分辨率是300PPI-600PPI,印刷的照排機達到1200PPI-2400PPI,常見的沖印一般在150PPI到300PPI之間。

          例如,iPhone 6、7、8 的屏幕物理尺寸是4.7 英寸。RetinaHD高清顯示屏,移動端屏幕尺寸是:750px 乘 1334px ,326ppi,全sRGB標準。

          iPhone 6 Plus,5.5英寸(對角線)LED背光寬Multi?Touch顯示屏,具有IPS技術,1920×1080像素分辨率,401ppi.全sRGB標準,如下圖所示。

           

          分辨率、像素和屏幕物理尺寸

          iPhone X 尺寸 是 5.8英寸,手機主屏幕分辨率是750乘1624 PX,整個屏幕的像素尺寸,一倍圖:375 乘 812  。

          關于 iPhone 6,一倍圖下:375 乘 667  。

           

          pc端網頁設計的尺寸是:1920乘1080px。

          像素密度,即每英寸屏幕所擁有的像素數,像素密度越大,顯示畫面細節就越豐富。

          像素密度=√{(長度像素數^2+寬度像素數^2)}/ 屏幕尺寸。

          屏幕分辨率是指縱橫向上的像素點數,單位是px。屏幕分辨率確定計算機屏幕上顯示多少信息的設置,以水平和垂直像素來衡量。就相同大小的屏幕而言,當屏幕分辨率低時(例如 640 x 480),在屏幕上顯示的像素少,單個像素尺寸比較大。屏幕分辨率高時(例如 1600 x 1200),在屏幕上顯示的像素多,單個像素尺寸比較小。

          顯示分辨率就是屏幕上顯示的像素個數,分辨率160×128的意思是水平方向含有像素數為160個,垂直方向像素數128個。屏幕尺寸一樣的情況下,分辨率越高,顯示效果就越精細和細膩。

          比例 :4:3、5:4、16:10、16:9、21:9

          4:3 是最常見屏幕比例。16:10 就是常見的「寬屏幕」比例。16:9 主要是HD電視在用的比例。

          常聽到的720p、1080p 都是這個比例。

           

          邏輯大小和像素大小

          對于人類的視覺對于對象尺寸的判斷是由邏輯大小來決定的。以一個圖形為例,無論這個圖形距離我們多遠,用戶的認知中,大小是直徑為25mm 。 也就是說,這是它的真實的大小,所以我們把人對于物體真實尺寸的認知成為邏輯大小。

          屏幕像素數量不同,在相同像素大小的情況下,圖形顯示的大小,就會不一樣。

          IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基礎上乘以 1.5 ,才能以平常的物理尺寸顯示元素的大小。

           

          邏輯像素與實際像素

          Ipone 手機屏幕常見的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。

          同樣一個圓,高分辨率的屏幕顯示更清晰,視覺體驗會更好。

          設計時,優先保證高分辨率的屏幕效果。

          一倍圖字樣的切圖則應用在普通屏幕上,帶 @2x字樣的切圖通常用于 Retina 屏幕上,帶@3x 字樣的切圖則應用在 IPONE Plus 系列手機的屏幕上。設計者只需把這 3 個尺寸的切圖給技術人員,技術人員可以將合適的尺寸的圖片適配到各個機型了。實際像素除以倍率,就得到邏輯像素尺寸。

           

          所謂“Retina”是一種顯示標準,是把更多的像素點壓縮至一塊屏幕里,從而達到更高的分辨率并提高屏幕顯示的細膩程度。由摩托羅拉公司研發。最初該技術是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素。也被稱為視網膜顯示屏。

          為了適配,是為了實現視覺的統一感,讓相同大小的物體在不同像素密度的屏幕上看起來大小是相同的感覺。邏輯像素是pt,普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ,在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。開發項目中,一倍圖機型上是100px乘100px,在iPhone 6s 中顯示出來的是200px乘200px,在 iPhone 8 plus 中顯示出來的是 300px乘300px 。在視覺上,這三個尺寸看起來是一樣的。下圖是 ipone 手機界面詳細的適配尺寸規范。

          針對以上規范,設計師的尺寸為 375乘667 pt、導出格式為 @2x 的設計稿可以應用在ipone 6、ipone 7、ipone 8 手機中。

           

          安卓系統把各種設備的像素密度劃分成幾個范圍區間,并且給不同范圍的設備定義了不同的倍率,保證顯示效果的相近。安卓系統的邏輯像素單位是 dp 。

           安卓系統的手機屏幕都可以找到自己密度值、代表分辨率、倍率、邏輯分辨率等。

          密度為xxxhdpi(1080px乘1920px) 的手機目前市場份額占比較大;目前密度為 xhdpi、xxdpi 和 xxxdpi 的手機產品占絕大多數的市場份額,而正好他們的邏輯像素是 360dp 乘 640dp, 根據這樣的分辨率標準導出 @2x、@3x、@4x 這三種格式的切圖,基本就可以適配市面上絕大部分的Andriod 系統的機型了。

           

          全局邊距

          在UI界面設計中,以(750px乘1334px)全局邊距一般是30PX,整個產品設計的邊距都是30px,保持一致性。

          或者 32px 的全局邊距也是不錯的選擇,比如:Booking 就用了這個尺寸。 

          24px 全局邊距

          Facebook ,它們不但距離屏幕邊緣距離一致,就連邊緣距離一致,就連頭像與文字的距離也相同,都是 16px。

           40px 全局邊距

          40px 屬于較大的大邊距,留白開始變多,界面呼吸感好,閱讀體驗好。例如:36kr。大邊距適合單一的應用,不需要復雜信息和交互層級。

          50px 全局邊距

          50px 可以算最大邊距,它讓界面變得干凈整潔,用戶在瀏覽時極為輕松。

           

          豎向間距

          定義卡片和卡片間的間距一般是:20px、24px、30px,最大間距不超過40px。間距的背景色可以與你分割線一致,也可以淺一些,界面柔和一點。

          88px

          ios 中最小點擊區域是 88px,因為蘋果在縱向尺寸上把 22px 作為一個基礎單元,物理尺寸最小空間的高度為 22乘4等于88px,為手指觸摸最小的高度。因此導航欄、標簽欄、列表、搜索欄和按鈕的高度都是 88px,導航欄和標簽欄圖標為 44px,元素與元素之間的最小間距是 22px。

           

          四 iPhone X的適配方案

           

          針對前面所講的ios 系統的常用機型,幾乎一種邏輯尺寸為375pt乘667pt 就可以完成設計的適配。而相對來說,ipone X 的適配處理稍微多一些細節。異形的 iPhone X 的屏幕部分的高度增加了145pt,如下圖所示。

          先說一下頂部劉海區域的適配方式。如圖 所示,對于常規的 iPhone 8 屏幕來說,屏幕內基本都是安全顯示區域,安全顯示區域就是要把重要元素放在上面做好設計。iPhone X 上由于多了劉海 的設計和四周的圓角設計,意味著也多了兩個不可顯示內容的非安全區域。蘋果官方給出的非安全區域為屏幕上方 44 pt ,屏幕下方是 34 pt ,并且下方 34 pt 的非安全區域一定不可以放置可點擊的按鈕,否則會與虛擬的 Home 鍵發生交互上的沖突。

          空間里利用率角度思考,與 IOS 界面的整體效果保持一致的感覺。如下圖所示,豎版和橫版。

           

          而具體的適配方法要從這兩塊非安全區域去用心思考。由于頂部的非安全區域內不可以出現狀態欄之外的內容,因此從前的狀態條由20pt加長到44pt, 則意味著增加了 24 pt 。這時候導航欄的尺寸保持不變,只需整體向下移動24pt 。 這時候導航欄的尺寸保持不變,只需整體向下移動 24pt 即可。同時,狀態欄背景的顏色需要與導航欄背景的顏色保持一致。

           

          當界面頂部帶有圖片背景時,最簡單的處理方式將頂部圖片元素的高度增加 24pt。如果有 Banner 貫穿到頂部,一般有以下兩種處理方式。

          第一種方式是為 iPhone X 單獨做一套 Banner 尺寸,拉長 24pt,并且頂部 24pt  不可放置有效的閱讀消息,設計兩套圖,一種是正常的 IPONE 6、7、8 等尺寸,一種是 ipone X 的尺寸 下需要的設計廣告圖。如下圖所示。

           

          第二種方式是顯示導航欄,并且 Banner 不再貫穿到 頂部顯示,而是移動到導航欄下方。

          顯示效果缺少沉浸式的設計體驗感。

          說完劉海區域的適配方式之后,再來說一下底部非安全區域的適配方式。置于屏幕底部的 Home Indicator 集成了原有實體 Home 鍵退出與切換系統應用的功能。在適配過程中,可以更換此區域內背景的顏色、透明度與高度。底部的33pt 的非安全區域內禁止出現可操作按鈕。

           

          第1種情況,當界面底部有按鈕,按鈕依附在底部 34pt 的非安全區域的上方即可,非安全區域的背景色一般與操作按鈕的背景色保持一致。如下圖所示。

           

          第2種情況,當界面底部沒有按鈕,只需讓列表正常顯示就可以了,無須遮擋,如下圖所示。

           

          第3種情況:在廣告引導頁等呈現全屏樣式時,需要做兩套設計稿的間距和大小的設計適配,保證好的視覺內容的展示,背景色延伸的方法就好。

           

          界面設計中的間距思考

          界面所留出的固定邊距是最基礎的柵格系統。如下圖所示。

           

          界面的分割規范應用在品類區的功能圖標,四等分的設計,符合柵格系統的設計。規范的設計,有利于開發對設計稿的還原設計。

           

          柵格系統中的8px 的原則

          8px 原則,就是界面設計中所有元素的長度除以寬度和間距都可以被 8 整除。這里的 8px 是基于@2x 倍圖格式下的切圖使用的。以320dp乘480dp為@1x 邏輯尺寸,安卓系統屏幕下的部分適配尺寸。

           

          五  常見的移動端設計布局和適用場景

          信息的設計優先級,布局合理性,提升信息的傳達效率。

           

          核心功能的布局

          核心功能的各模塊的布局之間保持相對獨立,標簽橫向數量盡量不要超過5個,超過5個可以采用左右滑的交互方式來實現,來自于設計心理學。

          標簽樣式的布局優點是各入口清晰呈現,方便用戶快速查找信息;標題一定要精簡。對于要突出的核心功能,可以做信息層級的大小、是否有設計背板的處理,主次關系分明。

           

          列表式布局

          列表式布局適用于信息類的產品。

          列表式布局優點信息展示較直觀,節省界面空間,瀏覽效率高,字段長度不受限制,并且可以錯行展示。單純看文字會視覺疲勞,所以圖文混排,富有變化。突出主題,優質配圖,有利于用戶更好的閱讀信息。

           

          卡片式布局

          卡片式布局就是把不同大小、不同形式的內容放在一個容器里進行組合展示。較常見的是圖文混排,既要做到視覺上的一致性感覺,又要平衡圖片和主題內容的關系。分組展示,讓用戶更好的理解各模塊的內容。

           

          瀑布流布局

          瀑布流布局適用于圖片、視頻等更好的沉浸式的瀏覽內容。移動端的瀑布流布局一般是兩列信息并行,錯位展示,可以極大的提升交互效率,可以制造豐富的視覺體驗,適用于花瓣等圖片類的界面布局設計。

           

          六  APP組建化設計規范

          (具體看我站酷前面寫的組件化思維的文章)

          Ios系統和安卓系統都提供了一些固定的官方組件規范。遵循其官方組件規范,可以極大提高設計和開發效率,同時降低用戶的學習成本。其中最常見的規范化組件包括頂部的狀態欄、導航欄、底部標簽欄和工具欄。

          狀態欄

          ios 是 20pt, 安卓是24dp.

          導航欄

          ios 是 44pt, 安卓是56dp.

          標簽欄

          ios 的高度是 49pt, 安卓標簽欄的高度是48dp.

          工具欄

          工具欄的高度是 44pt,安卓是 48dp .

          字體是蘋方字體;英文是SF英文字體。思源黑體,roboto 英文字體。

           

          IOS設計是 11pt到29pt 左右,一級主題是24pt 以上,二級標題是20pt左右。

          內容,導航欄標題是 18pt。    三級標題是16pt。 文字內容一般是 14pt

          品類區圖標內容:12pt 。 底部TAB 圖標文字:10pt到11pt

           

          七 微信小程序設計

           

          基于微信小程序輕快的特點,我們擬定了小程序界面設計指南和建議。 設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內,建立友好、高效、一致的用戶體驗,同時最大程度適應和支持不同需求,實現用戶與小程序服務方的共贏。

           

          友好禮貌

          為了避免用戶在微信中使用小程序服務時,注意力被周圍復雜環境干擾,小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾,禮貌地向用戶展示程序提供的服務,友好地引導用戶進行操作。

           

          重點突出

          每個頁面都應有明確的重點,以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下,應盡量避免頁面上出現其它與用戶的決策和操作無關的干擾因素。

           

           

          避免誤操作

          換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標準組件庫中,各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配,因此再次推薦使用或模仿標準控件尺寸進行設計。

          小程序是在微信開放平臺上運行的一種不需要下載安裝即可使用的應用,它提供了一種快速體驗的方式,用戶通過掃一掃或搜一搜即可打開應用,實現了“觸手可及”、“用完即走”的高效操作。對于開發者而言,小程序開發門檻相對較低,能滿足簡單的基礎應用?;谛〕绦蜉p快的特點,我們在進行小程序界面設計時,友好、高效、一致的用戶體驗,友好的引導用戶操作。

           

          小程序菜單

          小程序的界面,包括小程序內嵌網頁和插件,微信都會在其右上角放置菜單。菜單包括兩個圖標,左邊是更多,點開分別是轉發、關于和取消;右邊是主頁,點擊后回到小程序列表。小程序菜單和狀態欄之外的區域是開發者控制區域,可設計。

           

          微信提供深淺兩種配色,適配不同風格,元素設計的辨識度。小程序在IOS和Android 的標注尺寸,如下圖所示。

           

          開發者不可對小程序菜單自定義,但可選擇深淺兩種基本配色以適應頁面設計風格。為了讓小程序菜單清晰可見,在深色背景上使用淺色菜單,在淺色背景上使用深色菜單。

           

          減少輸入

          由于手機鍵盤區域小且密集,輸入困難的同時還易引起輸入錯誤,因此在設計小程序頁面時因盡量減少用戶輸入,利用現有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。

          例如下圖中,在添加銀行卡時,采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ,充分利用這些接口將大大提高用戶輸入的效率和準確性,進而優化體驗。

           

           

          在用戶搜索時提供搜索歷史快捷選項將幫助用戶快速進行搜索,而減少或避免不必要的鍵盤輸入。

           

          上面部分用圖,來自微信小程序設計指南,具體細節設計規范可以看-微信小程序設計指南。

           

          頁面導航

          頂部標簽分頁欄,顏色和樣式都可以自定義。

          最常見的設計方式是將選中態填充品牌主色,未選態有清晰的對比和可操作性。最常見的設計方式是將選中態填充品牌主色,未選態填充灰色,標簽之間保持足夠的空間,避免引起誤操作。

          標簽分頁分頁欄的樣式可根據App的 視覺風格進行設計,以保證兩個平臺擁有一致的視覺體驗。例如騰訊視頻,在App中,它的標簽欄分頁欄是無框式設計風格,選中態和未選態以文字大小和色彩的對比進行區分;在小程序中,同樣使用無框式設計風格,色彩不變,樣式上字號大小,精致的線條輔助展示當前狀態的設計。

           

          開發者可為小程序頁面添加標簽分頁導航,標簽分頁欄可固定在頁面頂部或底部,便于用戶在不同在不同的分頁間做切換。標簽數量不得少于2個,最多不超過 5個,為確保足夠的點擊區域,建議標簽數量不超過4個。

          小程序首頁可選擇微信提供的原生底部標簽分頁樣式,該樣式僅供小程序首頁使用。設計時可自定義圖標樣式、標簽文案及顏色等,以750乘1334px 的分辨率,標簽文案字號是 20px,圖標尺寸為 50px乘50px、標簽欄高 98px,與 ios 蘋果的設計規范保持一致性。

          微信小程序的設計和開發,可根據產品需要選擇或不選擇底部標簽分頁欄,例如騰訊視頻小程序使用4個標簽承載功能不同的頁面內容,為用戶提供清晰、快速的瀏覽體驗;而窮游行程助手的內容較為單一,只需一個頁面就能清晰呈現所有內容,因此不需要標簽分頁欄。如下圖所示。

           

          啟動頁加載

          在小程序列表點擊小程序后進入小程序后進入啟動頁,它是小程序在微信內一定程度上展現品牌特征的頁面之一,

          本頁面將突出展示小程序品牌特征和加載狀態。啟動頁除品牌Logo 展示外,頁面上的其他所有元素如,加載進度指示,均由微信統一提供且不能更改,無須開發者開發。品牌Logo 尺寸為 80乘80px,間距標注如下圖所示。

          頁面過長時間的等待會引起用戶的負面情緒,應盡量使用微信小程序項目提供的技術縮短等待時間。優先顯示預設的本地數據,告知用戶正在加載頁面中。

          全局加載反饋是在小程序名稱左側顯示加載狀態的圖標,提示加載小程序內容的過程。同時,模態的加載樣式將覆蓋整個頁面,它是由加載圖標、文字提示和半透明圓角矩形組成,由于無法明確告知具體加載的位置將可能引起用戶的焦慮情緒,因此應謹慎使用。

           

          設計案例

          小程序設計是基于微信內部運行的應用,因此在視覺上要輕盈、干凈、簡潔,保持扁平化設計風格;在交互上要結構簡單、層級清晰、跳轉少,保證產品高效的瀏覽體驗。微信小程序,在設計時應精簡控件和高效、實用。

          旅游產品為例:

          1、 小程序頁面的右上角固定小程序菜單。

          2、為確保足夠的點擊區域,小程序底部的標簽分頁欄建議最多4項。收件箱在很多 App 中不會獨立作為一個標簽,可以考慮移除;個人資料 承載了許多用戶自己的重要信息,保留在標簽欄比較合適。最后確定四個底部標簽欄的功能設計-分別是:首頁,收藏,消息,我的,四個標簽。

          3、開始進行設計,保持與App 同樣的白色背景,標題欄上 Airbnb 居左對齊。

          4、我們必須對原來的樣式進行優化,做減法是小程序設計的關鍵。在App中,Airbnb 的設計輕盈、干凈、簡潔,因此可以直接復用到小程序中,無須重新設計。小程序延續了輕量化陰影的視覺特征,因此優化后的界面設計依然保持與App一致的設計風格。

           

          八  網頁的設計規范

           

           

          1、網頁設計是什么?

          網頁設計也被稱為 Web Design、網站設計、Website design、WUI 等。它的本質就是網站的圖形界面設計。

           

          2. 設計規范

          一個產品的設計規范應該有:字體規范、主體色規范、圖表規范、圖片規范等。

           

          3、網站種類

          網站的分類按對象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費者,例如、企業網站、產品網站、電商網站、移動端H5 等,均是面向用戶的產品。以用戶為中心考慮體驗設計。

          To B端作為一個需求量很大的類別,比如電商后臺、Dashboard、企業級OA、網站統計后臺等這些面向商家和專業人士的網站就是 To B 類網站項目了。To B 類項目最重要的是效率,因為說白了我們在設計使用者工作的工具,我們在設計時必須首先要使用者可以高效工作使用。

          企業網站

          每個企業都需要有一個網站來對外展示自己的能力、介紹自己的產品等。企業網站設計時通常會有網站首頁、公司介紹、產品中心、公司團隊、在線商城、聯系我們等這幾個模塊,企業網站會展示很多諸如公司環境、團隊成員、企業文化等實際的照片,配合一些資料進行設計。企業網站通常也追求所謂「高端」、「大氣」、「上檔次」的風格,也就是為了達到讓消費者認同品牌這個要求。

           

          產品網站

          從蘋果公司的 iPhone 介紹頁到小米手機8的介紹頁,我們會發現一種新鮮的產品營銷模式,就是產品網站。設計這類網站的內容主要是該產品的工藝、技術、設計、特點、構造、使用場景等。這樣的產品頁希望可以讓用戶有沉浸感,所以一般來說都是使用全屏布局,產品設計必須精致、有品質感。

           

          后臺網站(數據可視化)

          后臺網站 Dashborad-儀表盤。其含義就是有一大堆數據與統計信息。后臺網站是 To B 類型,那么首先的需求就是能快速地顯示給操作者他需要掌握的數據??墒菙祿浅?菰铮覀兛梢允褂弥T如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現這些繁瑣的數據,這種圖形表達數據的方式也叫做數據可視化。

          可以參考的網站有: 百度的 ECHARTS ,如下圖所示。

           

          CRM系統(簡單拆解網頁B端的設計規范)

          CRM 即 Customer relationship management,翻譯過來是客戶管理管理系統。CRM 是企業對客戶進行信息化管理的一種形式,用互聯網技術實現對客戶信息進行收集、管理、分析,對企業的銷售、服務、售后進行監控。常見的功能有員工日程管理、訂單管理、發票管理等。

          在PC端建議采用: 1440×900的設計尺寸

           

          SaaS

          如果我們服務于為企業搭建 CRM、ERP 或者 OA 等系統的第三方公司,那么我們可能會老聽到 SaaS 這個詞。SaaS 是(Software-as-a-Service),即軟件就是服務。

          有贊軟件即SaaS服務,包括有贊微商城、有贊零售、有贊教育、有贊美業、有贊小程序。如下圖所示。

           

          企業OA

          企業OA,即(Office Automation),也就是辦公自動化系統。

          通過企業OA 可以完成請假、調休、離職、查詢公司規章制度、請示、匯報等工作。這樣減少了很多窗口成本和員工的時間成本,增強了公司辦事效率。

          設計師在設計此類項目時同樣要以操作者的體驗和效率為重,讓操作者輕易可以找到在當前頁面中最重要的功能。

           

          4、B端系統的設計原則

           

          一致

          與現實生活一致 , 用戶使用習慣

          界面中一致,設計圖標、文字、元素等保持一致性。

          反饋 

          控制反饋,清晰的知道自己的操作。

          清晰認知頁面的主題和交互狀態。

          效率

          簡化流程。清晰明確的含義  界面快速認知和理解。

          結果可控

          用戶可自由操作,包括撤銷、回退、終止當前操作等。

           

          設計規范(具體可以參考 ANT DESIGN 網站設計規范,去制作本公司的網頁端的設計規范)

          原子:色彩、字體、間距、圓角、分割線。

          分子:輸入框、選擇器、開關、上傳、時間日期選擇

          組件:導航、表單、列表、 數據可視化圖表、 篩選

           

          通用層面思考

          色彩 、文字、 邊距和圓角、 按鈕 、間距、 柵格

          主色:B端建議盡量選擇冷色系 避免太高亮

          建議關鍵主色與白色對比度大于4.5

          附:對比度檢測 https://webaim.org/resources/contrastchecker/

          按鈕: 實心按鈕、 空心按鈕 、文字按鈕

           

          PC端后臺:不推薦用大圓角

          間距

          一般選用8的倍數

          8、16、24、32、40、48、56、64、72……

          網頁柵格,一般選用24柵格布局

          24欄+23水槽+2頁邊距

          柵格應用在內容層,如下圖所示。

          頂部導航的使用場景:

          適用于一級導航數量較少,內容較為簡單的系統

          追求沉浸式閱讀的系統

          多用于官網首頁

           頂部導航的優點:

          占用屏幕空間小,為內容區留出更多空間

          對視覺的干擾小,符合從上到下的閱讀習慣

          一般采用固定版心的方式,更容易適配

          隨著業務的發展,拓展性變差

          三三級導航點擊后隱藏,不利于用戶記憶和查找

           

          側邊導航的優點:

          適用于更專注功能和快速操作的系統,有贊為例,如下圖所示。

          多用于較為復雜的后臺系統

          拓展性強,一級導航的數目可以展示更多

          層級清晰,一二三級導航都可以流暢展示

          操作效率高,用戶在操作和瀏覽中快速定位和切換當前位置

           

          面包屑導航

          使用場景:兩級及以上層級,最多不超過5級

          作用:告知用戶你在哪里,且可以迅速回到上幾級導航

           

          九  設計師的自我修養

           

          我們對設計充滿興趣和激情。

          1 用心積累優秀的設計案例??梢愿鶕镜男袠I競品,同類直接競品,跨界競品做好收集。

          2 每日記錄設計靈感。比如:站酷收藏夾,按照主題收藏;花瓣靈感,分組命名。

          3 執行力強,遇到設計問題,換位思考。

          4 超出預期,做好需求的設計方案,同時關注設計細節,超出需求方的預期和用戶的預期。

          5 有上進心,工作做好后,做好設計的總結和作品整理,發到站酷設計平臺,與其他設計師一起交流設計。

          6 眼界開闊,知識面廣:一個優秀的設計師,不僅懂設計,還懂產品、運營、 推廣、開發思維等方面的相關知識的學習和研究。有利于和上下游人士的溝通順暢。做到互相理解,團隊更好的完成項目的設計提案。

          最后,讓自己保持著朝氣蓬勃的精神,保持著朝氣蓬勃而富有創造力的心態。

           

          參考文獻如下:

          1、《規律與邏輯》

          2、《CCtalk B端產品設計課》by 美芳老師

          3、《高級UI設計師》

          4、《ANT-DESIGN 螞蟻金服》

          5、《蘋果官網等設計網站》

           

           

          原文地址:站酷

          作者:峻溪POINTVISION

           轉載請注明:學UI網》設計規范和適配

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


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


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





          Web產品的適配設計選型

          seo達人


          圖片

           

          歷史長廊

          在早期,硬件設備落后,網頁使用的是絕對靜態布局為主,絕對固定寬度的布局被稱為是靜態布局(StaticLayout),也有叫固定布局(Fixed Layout)。

          后隨時代變遷,技術發展。因瀏覽器的增多,開發者們忙于兼容各種瀏覽器。在這個期間,實際已經有了針對各設備適配的解決方案,只是未成為主流,這種新布局方式叫自適應布局(Adaptive Web Design,簡稱AWD)。

          在當時,大多指的就是寬度自適應布局。在這種新思想下,又出現了兩派的具體解決方案:百分比寬度布局和流體式布局(Fluid Layout)。

          在當時,大家都還沒有響應式布局的概念,但此時出現了一個新的詞–漸進增強。漸進增強出現后,另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子:gmail和qqmail。這兩個都是百分比寬度布局,都屬于自適應布局,但有區別。

          qqmail就是css hack的完美體現,你用任何一個瀏覽器,幾乎可以看到同一個樣子的郵箱,為的是用戶體驗統一。gmail則使用了漸進增強,你的瀏覽器越新越強,你看到的效果就越好,為的是用戶體驗增強。再后來,Google發布了Android,移動互聯網爆發,html5標準發布。

          互聯網大戰從PC打到了手機。手機雖然屏幕變小了,但是卻提供了更豐富的功能,用戶要求不斷提高,網站更加看重的是用戶體驗了,所以,谷歌式的漸進增強被廣泛認可,結合自適應的思想,出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

          描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備。

          圖片

          現如今,為何需要考慮多設備的兼顧呢,依然是因為時代發展與生活方式的變遷:

          • 即便是PC或Mac用戶,有查顯示只有一半的人會將瀏覽器全屏顯示,而剩下的一般人使用多大的瀏覽器,很難預知;
          • 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加,“主流設備”的概念正在消失;
          • 屏幕分辨率正飛速發展,同一張圖片在不同設備上看起來,大小可能天差地別。結合自身產品用戶訪問瀏覽器分辨率
          • 鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。

          因此我們需要在了解基本布局方式的特征下,選擇適合自身產品的布局實現方式。

           

          布局方式對比

          靜態式、自適應、流體式、響應式布局,A+R混合布局的特點對比如下:

          靜態式布局:

          窗口縮小后內容被遮擋時,拖動滾動條顯示布局。不管在哪種設備,哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。

          圖片

           

          自適應布局:

          用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。

          分別為不同的屏幕分辨率設備設計不同的樣式布局,相當于多個靜態布局組成的一個系列合集,每個靜態布局對應一個屏幕分辨率范圍,頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小,當可視窗口改變時,不會出現橫向滾動條,UI,圖片,文字會自動縮放,元素內容、布局、交互方式基本不變。

          圖片

           

          彈性布局:

          以百分比作為頁面的基本單位,可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度,并能完美利用有效空間展現最佳效果。

          圖片

           

          流體式布局:

          屬于自適應的一個子集,也是通過百分比自動適配設備屏幕分辨率和可視窗口大小,不同于百分比自適應的是隨著窗口大小的改變,頁面的布局會發生小的變化,可以進行適配調整,這個正好與自適應相補。

          圖片

           

          響應式布局:

          如果從廣義上講,響應式布局實際上就是更好、更機智、更靈活的去實現自適應,他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性(如寬高)的變化。

          頁面的設計和開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和刪格、布局、圖片、css media query的使用等。

          狹義上講,響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

          圖片

           

          A+R混合模型布局

          • R和A上的區別

          當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。

          他們之間主要的區別是DOM結構,當采用響應式思維開發時,HTML代碼在各種情況下都會一樣(除非你用JS移除某些DOM節點),而在自適應開發中我們可能會有不一樣的代碼結構和體驗。

          R采用流體+斷點,在斷點之間,頁面依然會隨窗口大小自動縮放(通過fluid grid),直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始(通常采用mobile first策略),所以舊的網站要做RWD很可能要完全重建。

          A只在針對幾種分辨率(如320,480,760,960,1200,1600px)進行優化,在斷點之間的自動過渡比較少。A采用保留現有桌面網站(desktop version)而對于更小的分辨率做針對性的優化(適應),減小重構的成本。

          圖片

          兩種設計思維都是有效的,需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計,例如通過自適應開發來構建定制化體驗。

          兩種方法各有利弊,但是如果同時使用它們到底會得到什么呢?

           

          • A+R模型結合了基于單個主要臨界點的自適應和響應式方法。

          混合式布局就是為不同終端設備的屏幕分辨率定義布局(適配各種尺寸的PC、手機、穿戴設備等等),在每個布局中,頁面元素隨著窗口調整而自動適配,混合了百分比、像素為基本單位的組合方式??梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。

          圖片

          自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低,但拓展性比較差;而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。

          很多時候,單一方式的布局響應無法滿足理想效果,需要結合多種組合方式,但原則上盡可能是保持簡單輕巧,而且同一斷點內(發生布局改變的臨界點稱之為斷點,后面內容會講到)保持統一邏輯。

          否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式,非等分的多欄結構布局則需要采用混合布局的實現方式。

           

          選型

          如何考慮實踐過程中的判斷呢。一是看應用場景,二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類?,F在的CSS框架基本都具備響應性。

          但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上,識別UA,渲染不同版本的模板,組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。

          當各個版本間的差異很大時,維護成本很可能會大到無法接受。即便分開做,架構上也要調整,后端服務化,應用層app化。

          根據不同公司的技術特點,調整的成本也難講是否可行。對于大型站,分開做更清晰,同時用響應式組件解決復用、功能同步的問題??傊鶕鼍绊憫娇梢詮母鞣N層面,各種粒度上做。這是現代web開發的特點。

          建議開發一套響應式電腦網站(過渡到平板端,不過渡到手機端)和開發一套響應式手機端網站(過渡到平板端以下的尺寸,不過渡到平板端)

          響應式布局有可能造成冗余的代碼較多,對研發的要求也更高,比如如何更好地讓圖片,適配,UI動畫自適應各種布局。

          大站還是要考慮數據計算和承載的問題,會對桌面和移動端輸出不同數據,減輕壓力。

          圖片

           

          實踐與技巧

          首先,我們需要了解幾種分辨率的差別。

          圖片

          ps:原生應用可查詢橫縱兩個方向的像素密度,通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率

          以一個SaaS類后臺產品為例,對于基本流量來自Web端網頁的產品而言,需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況,數據來源百度統計,如圖所示:

          圖片

          如上所述,選擇適配方式時,設計目標為:區分web與pad端可共享的設計布局大于手機端,且產品規劃上web端為主流量來源,pad端屬于短期兼顧??紤]技術維護成本與開發成本的平衡,于是判斷需要選擇A+R模式來完成產品的跨端設計。

          自適應(A)方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點,根據全局統計信息定義,我們會得到一些相似處:

          • 左側的可視區代表整個屏幕小于960px時的具體布局和內容
          • 右側的可視區代表整個屏幕大于等于960px時的另一種布局

          圖片

          在使用響應式(R)技術時,我們可以利用主要臨界點創建兩個互不相同的體驗情景,每種體驗里,我們都可以在可用空間內定義二級臨界點去調整布局。

          圖片

          通過結合自適應和響應的方法,我們得到A+R模型。利用自適應技術,我們將致力于體驗和功能,作出兩種不同的情景設計。使用響應式組件,我們可以處理上下文內的UI組件和布局。

          圖片

          這種設計方法要求設計師真正了解他們想要提供的體驗,以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的,你的產品將具有很強的靈活性,但同時也很復雜。

          因為你要處理不同的代碼庫和環境(非強制性),Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站,則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。

           

          其他輔助手段

          刪格

          柵格系統可以幫助我們設計,但卻不能保證我們的設計。它有多種可能的用途,并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言,這是一項十分有效的輔助手段。

          1. 列和槽(Columns and Gutters)

          列(Column)用于對齊內容。其中的槽(Gutter)是指相鄰列之間的空間,把控頁面留白,有助于分隔內容。

          圖片

           

          2. 頁面邊距(Side Margins)

          頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值,這些值決定了每個屏幕尺寸的最小呼吸空間。

          圖片

           

          3. 用于組成柵格的列數稱為列結構。

          8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分,將內容排列在4-4-4或3-3-3-3大小的文本框中,也有部分設計系統采用來24列的形式,如Ant-D

          圖片

           

          4. 斷點

          是指屏幕尺寸的特定范圍,列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內,布局會根據可用的屏幕尺寸重新調整,以獲得最佳的布局視圖。

          如果較小的屏幕有足夠的可用空間容納內容,則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示,該列將垂直放置圖文內容。

          圖片

           

          5. 網格規則

          列跟槽的寬度是以網格作為基本單位來做增減,所以應該先定義好柵格的原子單位,“網紅款”8點網格指的是設計頁面時,也應該遵循8點規律。值得注意的是,列跟槽的值盡量取8的倍數,但不是非得是8的倍數。

          產品中各類元素應該遵循這個倍數原則(圖標、組件大小等),不同的設計系統根據自身需求,設定這個規則。例如在Material Design中使用的是2X網格。

          圖片

           

          6. 流體柵格與混合刪格

          流體柵格有不同寬度的列,固定的槽和固定的邊距。流體柵格有靈活的內容寬度,根據屏幕大小變化在流體柵格中,列可以增長或收縮以適應可用空間。

          混合柵格既有不同的寬度,也有固定寬度。在現代布局中,一些元素超出了網格邊緣,與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。

          如果內容寬度大于可用的屏幕尺寸,那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格,以充分適應內容。

          圖片

           

          結語

          設計需在技術方案前介入,根據你的產品特點,進行設計方案評估,可借助的手段有刪格,網格規則等,設計斷點規則時,需關注設備的常見系統分辨率。

          移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量,這些差別是可以通過響應式設計來解決的。事實上,你可以認為如果一種設計不能兼顧兩種平臺的主要差別,就不能算是合格的響應式設計。

          但是,如果確實想要處理好平臺間的所有差異,我們就回到了原點:進行兩種不同的設計或者使用A+R的模型,在尋求合適的過程中,關注技術的革新。

          A與B不是硬幣的正反面,它們為了解決同一個問題而生,是同一種思想的延伸。


          作者:神樂

          配圖:沙拉

          轉載請注明:學UI網》Web產品的適配設計選型

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


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


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



          讓我一個沒有美術基礎的人畫插圖,太難為我了吧!

          seo達人


          圖片

          這是一個科技類網頁的小插圖,這樣看是OK的,但第一版的圖就一言難盡了,如下:

          圖片

          做完設計之后,我往回看看了,發現第一稿真讓人頭皮發麻呀~
          最后的呈現效果比之前做的都要強太多了。

          不管是顏色方向、質感、細節上都甩前者一大截,原因是什么呢?我總結了以下幾點:

           

          一、層次關系

          客戶就說“畫面視覺太平了,沒有層次,黑白灰關系沒有拉開!細節也沒有!顏色不好看!自己回去再想想吧!”……

          黑白灰關系什么意思呢?我的理解就是先把設計稿去色不就能看到黑白灰了嗎?

          圖片

          很多同學在做設計時不會考慮黑白灰這個問題,但其實顏色也是有變化的;在顏色中黑白灰的關系就是色彩的明度關系,明度越高就越白。
          正常情況下畫面中的黑白灰關系拉得越開,就越有空間感、層次感。

          如果畫面中黑白灰關系沒有拉開,就會使畫面飄飄的,很奇怪、不接地氣。

          圖片

          如上圖就是一個正常的黑白灰關系,每一層都區分的很開,它就會有空間層次感。

          而且我們也需要保持畫面的平衡感,黑色多了就會使得畫面沉,白色多了就會使畫面飄,灰色多了就會使畫面悶。

          所以我們得把握一個度,把握黑白灰在畫面中的節奏感!

          我們再把黑白灰關系運用到實際工作中:

          圖片

          整個背景采用暗灰色調,主體底板用亮灰色,內容就用亮色系,陰影及厚度用暗色調。這樣一來畫面的層次拉開了。

          那么客戶說的細節該怎么去加呢?

           

          二、細節

          沒有細節、太平了,我就想到把它做成立體的感覺,讓畫面豐富起來,也可以加一些點綴的小元素來修飾畫面。

          圖片

          從平面二維到立體三維畫面的細節就豐富多了,而且三維空間更加容易出效果。

          圖片

          在加細節的過程中,我感覺到了畫面中有點太過于規規矩矩了,全是方方正正形狀,就很呆板的感覺,特別是左下角的矩形框,與整個畫面之間沒有聯系、不協調。

          這就是構圖出了問題。

          解決的方法很簡單,只要讓圖形與圖形之間互相穿插、疊加,讓它們你中有我我中中有你;甚至可以把圖形加以旋轉,讓圖形產生“正”與“斜”的對比。

          這種方法就可以解決畫面死板的問題。

          圖片

          但是我覺得不能夠加矩形了,畫面中方形形狀已經很多了,那么我們是不是可以考慮一下用圓去增加畫面節奏感。

          方的對比是圓,也是一個對比關系,但圓的占比面積太大了,咱們就可以用弧線去代替。

          這不,弧線把方正的矩形打破了,畫面就更加生動有節奏。

          還有一個細節:

          圖片

          如圖所示,這里就涉及到一個識別度的問題,我們在做設計的時候,一定要把形體交代清楚;

          我做了一個銀幣的效果,但是形體邊緣輪廓沒有交代清楚,整個銀幣糊在一堆了,看不清里面的字符是什么,這樣的感覺不是很好,整個元素是虛的。

          圖片

          還有上升的線條取消發光效果是不是去掉會更好呢?

          這樣是不是畫面會更加的完整呢,這點很重要呀,我們得把物體交代清楚,不能模棱兩可就糊弄過去了!物體虛虛的給人感覺很飄,不穩。

          其實還有中間的一稿,但是顏色一不小心就弄臟了:

           

          三、顏色臟的小技巧

          圖片

          經過嘗試,我總算明白為什么顏色漸變會偏臟了;我總結了以下幾點:

          1、飽和度低的顏色占比不要太多,多了顏色就容易顯得臟。

          圖片

          如圖,右邊的顏色飽和度偏低,這類顏色就會發灰,灰色多了能不臟嗎?

          2、盡量不要用對比色去拉漸變,對比色漸變對于新手來說不太友好,“紅配綠賽狗屁”就是這種說法。

          圖片

          只要注意到這兩點就基本可以避開顏色太臟的情況

           

          總結

          以上就是這次小案例帶給我的啟發和思考,希望當遇到類似我這種問題的時候能夠給你點啟發,能夠幫助到你!


          作者:橙汁

          轉載請注明:學UI網》讓我一個沒有美術基礎的人畫插圖,太難為我了吧!

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


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


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



          日歷

          鏈接

          個人資料

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

          存檔

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