<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/UX設計師如何打造一個完美的開局賬號

          seo達人


          圖片

          完美開局的賬號就需要有3個前提:

          1.多金,夠氪 

          2.很歐,運氣爆表 

          3.很肝,以勤補拙

          對于設計師來說,怎么樣才是完美的開局賬號呢?在我們身邊也會經??吹揭恍┓浅E5脑O計師,他們可能很年輕,但是設計能力很強,又有非常好的學歷背書,一畢業就能夠拿著別人3、4年都拿不到的薪水。我們就會覺得這樣的開局就是相當完美了。

          圖片

          但是這樣的開局賬號也幾乎是極少數的,好的學歷背書大部分都是要靠父輩們的積累,例如美術生學設計專業的學生其實開銷是很大的,相比其他的專業在這個學習過程中需要不斷的氪金,這點不可否認。

          另外,一個人在成長過程中的教育、受到的熏陶、環境的影響也會影響一個人的發展,有的人說天賦好所以他們起點高,進步快。

          但是天賦也需要不斷修煉,比如你在幼年的時候就展現出對藝術創意的敏感,但是后天家庭并沒有資源培養你,那么等你長大了這個天賦可能也就不是你的優勢了。

          所以別看那些年輕有能力的設計師這么厲害,大部分其實都是家庭殷實,前期投入了非常多的資源才能達到的。大部分家庭都比較普通,所以拋開這些條件,我們來聊一聊如何讓自己的開局能夠比其他人更好。

          開局的幾個階段

          那么我們分為幾個階段來講,分別是:大學期間、初入職場、職場3年

           

          圖片

          賬號需要養成,但是開局非常重要,其實這幾年我接觸了這么多設計師大部分都不是科班畢業的,因為大家考大學的時候其實對這些專業和以后職業的發展是不清晰甚至很迷茫的,所以很多專業的選擇一般也會根據父母還有親戚的建議做選擇。想當初我報了電子信息工程專業以為是去玩電腦的,結果課程內容卻是焊接電路板,寫代碼。所以已經是美術專業的同學們要慶幸自己已經比大部分設計師的起點要高了。

          那么無論你目前是什么專業,但是后面想從事和設計相關的工作,在大學期間我們可以做一些什么事讓自己有更高的起點。

          1.1.提前轉變思維

          高中三年又經歷了高考難免會讓大部分同學覺得終于解脫了,可以到大學去吃喝玩樂了,從快樂的角度我也會這么選擇,畢竟這么多年讀書讀下來確實很壓抑,所以我自己大學四年也幾乎都是玩過來的,但是再讓我選一次,我一定不這么做。

          在大學期間,最重要的事情是什么?我認為是提前找到自己喜歡的事并且付諸實踐,思考他將來成為你職業的可能性。可能很多學生目前還不會去考慮職業,只想著怎么修好學分,順利畢業,但是畢業之后去從事什么工作還沒有勇氣或者沒有頭緒去思考。那么即使你不是設計專業的學生,你也可以在大學期間輸出設計相關作品。但前提就需要自己花時間去學,相比于科班的同學會更加辛苦一些。

          圖片

          這幾年見過的一些大學生也都相當的“卷”(這里的卷不是貶義),很多學生從大二開始就自己做自媒體做設計公眾號,然后輸出大量的設計作品和觀點文章傳到設計平臺,還沒有畢業就已經拿了不少的平臺推薦,也正因為這些輸出給自己的實習工作拿到了不錯的大廠機會。然而目前很多工作5、6年的設計師這幾年的作品加起來還沒有這些大學生來的多,因為很多設計師都是被動轉行,沒有設計的初心,工作項目不總結,業余時間不練習,遑論高級或資深?

          所以我建議想要從事這個行業的人在大學就要思考清楚,自己是否喜歡做設計。設計這個行業和一般的職能類工作不一樣,它的上下限都是很高的,如果你去做后勤職能,就算你不喜歡做,按部就班依然可以完成,可以混口飯吃。但是設計不行,設計師只能上不能下,如果你原地踏步3年必然會被淘汰,你不喜歡它你就不會把時間和精力放在上面去提升,這些個例子在很多咨詢我課程的同學中已經屢見不鮮了。

          大學也是為了讓一個稚氣未脫的學生能夠轉變成獨立思考的成年人的一個過程,在這個過程中你會學到很多社會、職業上的規則,比如怎么去運營自己?怎么給自己創造機會?怎么獲得更多的資源?通過什么手段渠道提升自己等等。

          1.2.學會輸出作品

          在大學中如何輸出作品呢?一般有幾種途徑:

          1.參加各大平臺舉辦的設計比賽,例如站酷

          2.跟著自己的導師輸出項目作品 

          3.參加一些培訓課程輸出作品 

          4.自學輸出作品

          那么我首先推薦的是通過參加比賽去積累自己的作品。雖然參加比賽不一定能夠獲獎,但是你可以看到自己的設計作品和其他設計師相比有什么不足,從而優化改進自己的弱項。如果能夠獲得一些獎項,那么你去實習或者畢業找工作都是很好的加分項,同時也能增加你個人的曝光,很多甲方或者設計團隊負責人會從這里來挑選合適設計師進行合作和招聘。

          圖片

          然后有同學也想問,如果想找實習沒有真實項目怎么辦。大部分真實項目一般都是來自導師的外部項目。運氣好的話你的導師給你的項目剛好是和你以后實習崗位相關的,如果沒有真實項目也不要太擔心。因為除了一些要求特別高的大廠實習崗位,一般企業的實習工作其實只要你輸出的作品和手活好就足夠了,是不是真實項目沒那么重要。

          不過話又說回來,這也是讓各位同學在高中就好好讀書,盡量去一個好的學校讀這個設計專業。好的學校有好的老師,有好的老師就有好的資源就有好的項目,就有更多的機會去好的公司實習,就是這么回事。所以如果你是一般大學的設計專業,就得看老師的資源怎么樣了。如果沒有一些好的項目,也可以選擇去上上課,但是這個怎么選擇課程水就很深了,這里不多贅述了(你們懂得)。

          所以你們想想,當你其他室友在打游戲看劇,而你在做設計練習,別人可能會笑你別那么努力,但是你一定能夠先找到工作然后請他們吃個飯。

          圖片

          1.3.找實習工作

          如果你能夠做好前兩點,不夸張的說基本已經超過95%的同齡人了,完美開局賬號也已達成了1/3。在大學期間最后一件事那就是找實習工作,這里我要說的是實習盡量去大廠。如果沒有這個機會也盡量去找有一定規模的設計團隊的企業。

          實習的目的不是為了畢業答辯,也不是為了賺點外快,而是為了畢業之后的第一份正式工作做準備,積累真實項目的經驗。大廠的實習機會是不簡單的,他們主要面向211、985等設計相關專業的本科及以上的學歷學員進行實習招生,像交互、用戶研究崗位只向某個固定專業的碩士研究生開放。

          圖片

          那如果不是這些高等院校的學生就沒有機會了嗎?當然不是,設計這個崗位學歷是需要的但不是最重要,還是要看設計以及綜合能力的,即便你不是211、985,但是你的設計足夠優秀,那還是可以獲得大廠的青睞的,學歷只是一種篩選條件。

          如何找到比較好的實習機會,我這里建議大學生們可以多上像站酷一樣的設計平臺,去結識更多優秀的設計師。為什么要這么做呢?因為大學生往往想投簡歷都是通過一些招聘網站去投的,這樣的效率很低,因為即便你的履歷還不錯,但是依然要等hr重重篩選過之后才會到設計負責人這邊。所以我建議你在設計平臺有足夠多的積累之后多去結識一些和你方向比較接近的設計師,他們可能就在某個大廠在職。例如你是畫插畫的,那么你可以關注這個領域的一些站酷推薦設計師,加一加聯系方式,現在很多大廠的設計師也背負著招人的指標,實習可能不算正式指標,但他們也會通過社交平臺進行發布,這機會不是來了么~

          如果有多個實習機會怎么篩選。

          1.選擇和自己規劃方向一致的崗位。大部分企業招聘實習生,是為了解決一些瑣碎的工作,而不是為了培養,所以實習生的工作內容是很雜的,如果你本身的方向是做UI/UX的,但是你到一家公司卻不停的做平面的工作,這樣就會很浪費時間,甚至無效產出。不過有一些大廠其實也會讓實習生去接觸更多崗位的工作,是為了找到更契合的點,并且讓實習生去熟悉不同崗位的工作內容,提高協同效率和個人綜合能力。

          2.選擇有機會留下來的。同樣的能力,校招比社招便宜很多并且成本低,很多實習生無法轉正是因為企業沒有多余的hc,也就是這段時間不招人。不過也要看設計團隊的需求,如果只是缺人干一些重復性工作的話,留下的概率比較大。但是如果缺的是一些專業技術人才或者彌補團隊能力空缺的話,實習生機會就比較小了。

          圖片

           

          圖片

          2.1.很肝才會很歐

          咱們已經靠自己的努力步入了職場。但是第二階段我要講的是第一階段沒有做好的同學們,在這個階段要做什么。假如你是從三流大學畢業的,但是某些機緣巧合你入職了一家公司,正從事著設計的工作,這個時候怎么樣再把自己的賬號打造的“完美”。

          每個人的機遇不同,但是時間是相同的。有一句話叫做成年人只能被篩選,不能被教育。我覺得有失偏頗,因為只有那些固步自封的成年人才不能被教育,比如我曾經遇到過兩個背景比較相似的同學,都是從培訓班出來之后才進入職場做設計的,基礎可以說幾乎沒有,只學會了軟件。一個同學的基礎和天賦好一些,但會有一點優越感,每次作業沒有按量完成,給我的理由是這些界面他以前畫過不少了,所以就只交了幾張。而另一個同學呢除了完成我布置的作業以外自己還去畫更多的界面,兩個人同一個作業的結果在量上就差了好幾倍,最后結果顯而易見。

          剛進入職場的第一件事就是不停的肝,肝什么?肝到什么程度?我舉個例子,例如你現在是一名初級UI設計師,你的工作是繪制UI界面、圖標、插畫和一些運營海報之類與視覺相關的工作,那么你第一個階段的目標就是能夠連續拿到3個站酷的編輯精選推薦。無論是成套的UI界面也好,圖標也好,只要連續拿到3個編輯精選就可以,中間需要連續,比如第一次2火,第二次1火,說明你設計的結果不穩定。同時,時間周期必須在2個月以內,務必利用自己所有娛樂的時間去肝這些練習。當然你除了上傳站酷,也可以發給我評估,或者一些行業內優秀的設計師去評估都可以。

          圖片

          再下一個階段的目標就是拿站酷首推,站酷首推的含金量還是挺高的,拿10個編輯推薦也沒有拿1個首推來的高,如果你可以靠設計作品連續拿到3個首推,那么基本拿到了大廠的門票。這個時候你會收到很多獵頭以及大廠設計負責人的私信,不要懷疑,朝這個目標去努力就對了。至于怎么拿首推,我以后再做一個分享。

          剛進入職場,重心不要太放在項目上,而是不斷打磨設計的專業技能,在設計初期最重要的是兩件事:1.掌握各種設計技巧與風格 2.提升自己的審美與認知。

          2.2最好找個“師父”

          如果設計團隊里的領導或者組長愿意帶你,那么恭喜你你的運氣真的很好,因為去外面找個師父是很難的,而且也很貴。有人說怎么拜師還要收費?我看電視上、小說里,不是別人要搶著收徒弟嗎,這怎么還要徒弟給錢呢?古時候收徒是覺得這個人根骨不錯,以后能有大作為,同時可以傳承衣缽弘揚門派?,F在徒弟們學會了就自己飛走了,師傅們也沒有衣缽要繼承,反而師傅們還要養家糊口,所以找個師父變相成為了一種“交易”。

          公司里有人帶和外面找師父有什么區別?簡單說就是利益關系,大家自己揣摩。師父的主要作用是引導,在關鍵時期和階段可以給你指明方向,而不是幫你解決疑難雜癥。所以一個好師父可以讓你少走很多彎路,這是可遇不可求的。

          圖片

           

          圖片

          3.1.做好職業規劃

          其實大部分人對職業規劃很迷茫,不管是初入職場還是目前已經工作了5、6年的老油條們,職業規劃就像是海市蜃樓,看得到摸不到,大概知道什么意思但是自己也不會做。

          最近有一位工作了6年的設計師小伙伴遭遇了裁員,說實話6年在任何行業里都已經算是中流砥柱的員工的,對自己的專業、職業能力也有了比較深刻的認知,但是他就非常的焦慮,被辭職后簡歷和作品都無人問津,這就是很典型的缺少規劃所導致的走一步看一步的普遍現象。

          職業規劃是需要有豐富的職業經歷和實踐才能在階段性的生涯節點中做出計劃和調整的,如果你沒有任何經驗是無法去做職業規劃的。職業規劃最重要的是我們對該職業的定位以及尋找正確的方向。比如你現在是個洗碗工,你想對自己做個職業規劃,如果你足夠敏感,那么你一定要思考到這個職業的瓶頸和上升通道的阻礙,什么時候會出現自動洗碗機,出現了你如何應對,有什么差異化能力比的過自動洗碗機等等。

          圖片

          3.1.1職業定位

          對于UI/UX設計師來說,職業定位很重要,它能夠幫你看清楚職業的特質,可以指導你5-10年的職業變化與發展。所以比如你現在是做UI設計的,那么你要思考這幾個問題:

          1.UI設計的工作內容、作用和職責具體是什么,在不同規模企業中有什么區

          2.UI設計師的工作可替代性是否強

          3.UI設計崗位在行業中的天花板是怎么樣的

          4.UI設計師的崗位晉升條件與級別是怎么樣的

          5.你作為UI設計師的城河是什么

          6.該崗位是否有政策風險

          7.該崗位與上下游的其他崗位相比價值如何

          8.如何量化、突出該崗位的價值

          所以如果你把UI設計師換成洗碗工或者其他崗位,再來念一下上面的8條。

          3.1.2個人特質

          個人與職業需要契合才能走的更遠,如果你生性膽小、內向、怯懦,那么就不太適合去做銷售,當然如果你有勇氣去鍛煉、改變自己那也可以,但這很難,所以我們有句話叫做江山易改本性難移。該職業的工作內容、職責對我們來說,如何發揮自己的優勢,你個人有什么特質在該職業中能發揮出來,這點很重要。

          其實任何特質的個人都可以去從事大部分職業,只是職業的高度有限,例如你本身不善于言談、辯論,個人內向、社恐,不善于人際關系處理,那么,不進行專門的改變和調整,你的職業生涯和管理崗位或者專家等高級別崗位就無緣了。特質當然也是可以改變的,例如你可以自己上臺進行演講,大量的挑戰會逐漸改變你不善于社交的現狀。

          所以你先要認清自己個人特質的范圍,再結合這個職業的定位,我們就可以知道自己應該去改變什么,在該職業中的優劣勢是什么。不過我遇到的大部分人都是,我很清楚,但我不改。可見一斑。

          3.1.3晉升網格

          謝麗爾·桑德伯格在《向前一步》中提到:職業通道不是線性,而是一種網格式的。我理解的大概就是這樣。

          圖片

          這種形式的職業通道設定的目標不是具體崗位,而是個人綜合素質的能力提升。也就是說我們的目標不是朝著下一個級別去努力,而是在一個序列中前行幾步在平行到另一個節點去工作。例如你UI設計可能從初級晉升到資深,但是下一步你可能會去做交互的序列,當你交互也達到資深后你又可以去做產品,但是這整個職業推進的階段我們都是一個人能力為核心目標去工作,而不是為了某一個崗位更高級別。

          圖片

          這樣的職業通道好處就是你的能力會非常的綜合,能力會更全面。換句話說,你如果想達到UI設計專家,那么你不能只會畫UI界面,你不會交互、用戶研究或者更多視覺技能肯定是不行的,但我們最初的目標并不是為了達到專家,而是讓自己有更多選擇。

          3.2.黃金3年

          我們需要利用前三年來打造一個完美賬號,那如果把整個規劃做到5、6年,那就不能算是開局賬號了對吧。為什么要規劃三年呢?我希望大家在前三年可以找到自己的定位和目標,這三年里面你可以根據自己的能力和需求去尋找不同的平臺,看看以三年為期限,自己能不能也達成每年翻倍或者3年番兩番的目標。(這里不是鼓勵大家盲目的跳槽)

          首先我建議大家先利用1年左右的時間去提升設計技法,一項為主多項為輔助,例如你主要修煉UI界面的技法,同時輔助插畫、動效和更多表現類技法。為什么只用1年左右呢?

          所以這1年其實時間很短,除了自己的工作以外,你需要把時間都拿出來做技法的修煉,是很枯燥并且沒有回報的。

          圖片

          設計師要學的更聰明,公司項目不行就要利用業余時間做額外的輸出,很多人就指望等下次跳槽的時候拿著現在公司項目的包裝放到作品集里去面試,如果你這樣做了,那么你開局賬號也就廢了一半,為什么呢?因為你的第一次跳槽是整個職業生涯中最重要的一次,甚至比第一份工作要重要的多,第一份工作你可能不會選,對這個職業、行業的認知也幾乎沒有,隨機性很強。但是當你要選擇第二份工作的時候,你是個成熟的寶寶了,自己也有了初步的規劃,你有機會、有能力去選擇更優秀的平臺去輸出、學習。但是前提就是你能夠在第一份工作的時間里去積累能量,讓自己的能力有一個質的變化,否則第二份工作也幾乎和第一份工作差不多。

          圖片

          在第二年的時候,如果你第一年足夠努力了,那么你可以找到第二份更好的公司,雖然不一定是大廠,但是至少可以在一個有規模的設計團隊里工作,這個時候你接觸到最多的應該是更多的項目、方法和各種不同的思維。你需要和更多的人打交道,接觸更多復雜的業務以及學習更高深的設計技法。那么在第二年的階段,我希望大家可以去深入項目,去關注項目的本質和目標用戶。需求是怎么來的,設計方案為什么這么做,如何培養自己的產品和體驗思維。同時,業余時間也依然要進行輸出,但是和第一年不同,工作與業余時間的分配要更側重到工作上。

          圖片

          第三年,要學會自我驅動,關注設計價值的量化以及一些實用的方法,通過項目來將設計方法打磨的更成熟,形成自己的一套理論。同時自己的設計輸出也要圍繞著這些去做。

          以上三年的階段性成長基本就是這樣,但這些都是比較理想化的情況,實際可能需要更長的時間或者更復雜的因素要去考慮。最后,大家覺得這樣3年肝出來的賬號可以算“完美”嗎?

           

          原文地址:應謀鬼計(公眾號)

          作者: 應駿

          轉載請注明:學UI網》UI/UX設計師如何打造一個完美的開局賬號

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          如何配色

          seo達人


          圖片

          認識色彩飽和度的情緒:

          因為不同的配色會帶給觀者不同的情緒感受,只有在先了解不同顏色特性的基礎上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺,這種感覺對應什么顏色?只有搞懂了邏輯,在之后的工作中,才能為我們的配色方案指明方向,而不會一開始就被難住。如果我想配一個積極熱鬧活潑的畫面,顏色怎么配呢? 如果想配一個溫柔恬靜小清新的畫面顏色又該如何選擇呢?他們都有什么特點,為什么會這樣?往下看

           

          積極活力:

          我們先來看幾組圖片

          用吸管工具提取一下它們的顏色觀察

          圖片

          我們可以看到這類海報視覺上都能給人一種熱鬧、動感、活力的feel。

          通過顏色提取,再觀察它們選色的位置,可以發現它們的的配色的純度和飽和度都非常高。

          這是為什么呢?接下來我們降低飽和度看看會發生什么:

          圖片

          可以很明顯的感受到畫面中已經失去了那種動感、熱鬧和活力的感覺了,整體更趨于平穩和安靜。

          所以,高飽和度的配色會帶給觀者活力,動感,熱鬧的情緒。常常應用于一些電商、運動品牌的視覺項目中,用來渲染or打造年輕、活力、熱鬧、動感等氛圍。

           


          溫柔平靜:

          我們再來看一組:

          圖片

          這一類圖片就會給人一種文藝小清新的feel,這類配色和熱鬧、運動的感覺完全不同。

          都是低飽和度高明度的顏色。所以,低飽和度的顏色會給人傳達平和、放松、舒適的心情。

           

          輕松休閑

          圖片

          這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性,不過高,也不會過低。

          其實原理就是在取色器里,

          圖片

          我們看同一張圖片,給我們的感覺:

          圖片

          高飽和度配色給人感覺沖擊力很強,具有活力,對比非常強烈。

          中飽和度畫面就弱了一級,視覺沖擊力沒那么強。畫面會放松一些,適合傳遞休閑的感覺。

          使用低飽和度的顏色時,我們看到畫面更冷靜了,有些高級灰的感覺。

          在以往的實際工作當中,我也是先用飽和度來定畫面的大情緒基調,只有大的感覺對了,后面才不會出大問題。比如像一些戰斗、pk、熱血類的banner,都用高飽和顏色:

          圖片

          我們可以來吸取他們的顏色看看:

          圖片

          基本都是靠右邊的顏色。

          而像我在做下面這種類型的banner時,就會使用到中飽和度的顏色,給人一種輕松休閑的感覺:

          圖片

          我們再看下他們的色域:

          圖片

          都是趨于中間的位置。

          最后一種低飽和的顏色,像下面這種作品,就有一種文藝、清新的感覺:

          圖片

          再來看看他們的顏色色域

          圖片

          都是比較靠左的顏色。

          用飽和度來定畫面的大基調,還是非常好用的,可以說是屢試不爽,大家可以好好理解并且用起來!

           

           總結:

          圖片

          高純度,高飽和度的顏色,會讓人感覺激動、積極、動感、醒目、記憶深刻等特點感官,常常應用于一些電商、運動品牌的視覺項目中,用來襯托年輕、活力、熱鬧、動感等氛圍。

          圖片

          中飽和度的顏色飽和度和純度都適中,顯得中正平和,又不會有低飽和度那樣的“平緩“,想要視覺年輕一些,但又不想飽和度那么的強烈,可以嘗試選擇中度的顏色。

          圖片

          低飽和度的顏色,會給人平和,舒適的感受,常常會結合大量無彩色一起使用,讓畫面傳遞出簡約,自然,小清新文藝的感覺。

          “你想給別人傳遞什么”

          配色的方法有很多,搭配在一起千變萬化,但都離不開一個點。你想給別人傳遞什么感覺?是要年輕、活躍,還是安靜、唯美?只有明確方向,在想想這個方向上的顏色有什么規律可循?搞清楚目的,我們再去做配色是不是就會輕松很多?

           

          原文地址: 菜心設計鋪(公眾號)

          作者:慢熱


          轉載請注明:學UI網》如何配色

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          如何有效提升產研效率和質量

          seo達人


          圖片

           

          目錄

          • 一、什么是系統化解決方案,什么樣的團隊適合做
          • 二、如何輸出、推進設計解決方案
          • 三、解決方案的管理和發展

           

          一、什么是系統化解決方案,什么樣的團隊適合做

          1、什么是系統化解決方案?

          大多數日常需求大多是從單點出發,當點變多變復雜了,就容易出現上述說到的現狀問題。所以解決方案需要基于業務全盤進行設計抽象:從元素——組件——區塊——頁面——功能流程沉淀設計規則并代碼化,來靈活提供拼裝N個不同頁面的機制,幫助團隊更系統化的進行產品設計。從組成內容不難看出,解決方案是需要建立在基礎組件基礎上,與基礎組件、復雜組件、行為模式共同組成設計系統的【功能模式】部分。

          圖片

          圖片

           

          2、什么樣的團隊適合做

          解決方案是一套相對穩定的設計機制,所以在產品初期或團隊建立初期,產品可能經常會調整的情況下,并不適合做。初期可以借助成熟的設計系統來減少投入成本。而到成長期可以根據業務的發展梳理基礎元素、組件,選擇性的建立部分穩定且利用率高的解決方案,并持續發展,保證解決方案可以起到指導和提效的作用。隨著產品或團隊逐漸成熟,解決方案也應該隨著一起成長,相互影響相互作用。

           

          二、如何輸出、推進設計解決方案

          1、由大到小的進行信息拆解

          1)對產品頁面(尤其是重點功能)進行盤點,劃分頁面類型:比如列表、表單、詳情、dashboard;

          2)對頁面中的內容進行區塊歸類

          3)對區塊中的信息進行拆解

          圖片

          這三個過程下來,對于問題、規則、規律都會有一定的概念。以一個后臺系統為例

          1)頁面大類主要是:列表、表單、詳情。

          2)其中列表的內容大致區塊分為:頁面標題區、列表操作、列表篩選、列表內容,到這個階段已經可以發現,相同區塊位置就存在不穩定,在后臺系統中可能影響面不會非常大,但對于內容復雜繁多的工具或C端界面就會容易出現找不到的情況。

          3)不同區塊的內容拆解,同樣也會發現一些細節問題,比如篩選的樣式、規則不一致,列表操作的方式、位置、樣式、交互不一致等等

          圖片

           

          2、抽象、重組:從布局——區塊——組件——設計規則

          從第一步全盤的信息拆解和歸納, 已經發現問題, 這一階段主要2點:第一是如何通過設計規則來避免同樣的問題產生,第二是如何通過簡單的規則重組減少多人合作記憶復雜度。思路類似于設計一個界面,首先得有一個布局劃分,不同的區塊要放哪些內容,再到區塊里的細節內容規則,從而抽象出由布局到區塊的設計規則和可復用的組件。

          以前面說的列表為例

          1)區塊主要是4類,明顯的問題是區塊位置不穩定,所以在布局結構上,需要定義1-2個穩定的可配置的布局框架來適應不同的內容

          圖片

          2)不同區塊梳理組成內容,內容細則

          圖片

          3)標記出可組件化的內容及規則

          圖片

          4)提煉整個過程中通用的設計規則,作為全局的指導。如:國際化、排版規則、超限規則、適配規則、文案規則等等。

          圖片

          通過布局——區塊——組件——設計規則,可以靈活的進行頁面拼搭

          圖片

           

          3、落地代碼庫

          區分通用層和業務層,通用層落地到通用模板市場,利用腳手架生產新頁面。業務層面的落地則是基于通用庫封裝具備業務屬性(如:業務主題、業務數據、業務拓展方案)的業務庫來生產新頁面。

          目前群核設計團隊建立了一套平臺通用的解決方案,適用于所有中后臺產品。業務屬性比較強的產品也基于通用解決方案封裝業務層面的解決方案,同樣的思路也應用在不同體系的工具場景中。整體實踐下來,產研效率提升近50%,甚至完全解放了一條業務線的設計資源。產品體驗的一致性、上線質量也有明顯的提升

          圖片

           

          三、解決方案的管理和發展

          解決方案作為設計系統的一部分,與設計系統一同管理,業務設計師使用系統來輸出,反饋問題或需求給系統,有系統設計師判斷可行性,周期性的管理,及時更新并在內部互通,促進互相成長和發展。

          解決方案與設計系統的發展有一點不同的是解決方案有更多業務化的內容,業務團隊根據業務迭代維護解決方案。當業務的方案達到通用級別,則列入到通用庫。

          圖片

          這些方法和思路也并不限制行業或產品類型,僅是在我們當前服務的產品體系下總結的方法。當然解決方案并不能解決所有問題,只是希望在提供更系統化的設計方法和模式的同時能減少重復工作提升效率,讓產研團隊有更多的精力和時間投入更有價值的事情。

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:十元

          轉載請注明:學UI網》如何有效提升產研效率和質量

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          從4個方面完整解析柵格設計

          ui設計分享達人

          本文主要介紹等距柵格,旨在為有需要的同學解析柵格,從概念、結構和設計上更有效、自信地解決柵格問題,其實主要還是自己對柵格體系的查缺補漏。大家可以對照目錄跳著閱讀。

          事實上,絕大多數的設計師都知道柵格很重要,簡單點就是等分運用在內容層。當我們仔細研究柵格相關原理時,只要不嫌麻煩,就會發現在柵格系統下能更快解決設計問題,并讓設計更具功能性、邏輯性和視覺美感。

          萬字干貨!從4個方面完整解析柵格設計

          柵格是什么

          1. 柵格與網格

          柵格與網格的本質其實是相同的,實現有組織的設計最簡單方法之一就是應用網格系統,約束性地為你提供了一個非常基本的設計框架,這是一種久經考驗的技術,最初運用在印刷版式中。網格與柵格英文都以“Grid”來表示。但一般我們更愿意在平面設計中更多的稱為 “網格”,會存在上下或傾斜,在網頁端或移動端中更多的稱為為“柵格”。

          常見網格系統有三種:直接分割,等距分割,數學分割。本文主要介紹等距柵格,網頁中的網格是指使用垂直和水平(較少)等距輔助線對布局進行的劃分,它形成了用戶界面的基本結構或框架。

          萬字干貨!從4個方面完整解析柵格設計萬字干貨!從4個方面完整解析柵格設計

          平面設計一般用到的是固定的紙張規格,寬度和高度都是固定的,網格會存在上下或傾斜的視圖;在界面中柵格寬度跟隨不同設備,高度由內容多少來決定,是上下視圖。

          萬字干貨!從4個方面完整解析柵格設計

          界面柵格系統是從平面網格系統中發展而來,以依據一定的規律、合理設置基準線來指導和規范界面中的如文本、圖像、按鈕和其他元素,保證頁面的每個區域能夠穩健地排布起來。柵格系統的使用,讓界面信息呈現更美觀易讀、更具可用性,對于前端來說,網頁也將更加靈活與規范。

          2. 柵格的設計哲學

          將柵格視為一種秩序系統來進行使用,是設計師某種特定的精神和態度的表達,它體現了設計師是以一種結構性、預見性的方式來進行構思和設計。同時,這也是一種職業信仰的體現,設計作品應該是易懂的、客觀的、功能性的和具有數學邏輯美感的。

          用結構化、系統化的柵格手段進行設計,對設計是具有極為重要的意義的。使用柵格系統就意味著設計遵循普遍與合理。系統化和清晰化、集中精力看透關鍵問題、用客觀取代主觀、理性地去看待設計過程。

          3. 柵格的價值

          產品設計中,參與設計的人員越多,用戶設備越多,屏幕越多,設計師就越需創建一套柵格系統來組織內容,使設計內容與細節能適應更多場景。合理的柵格系統可以通過調整布局滿足產品各設備尺寸的需求。

          有序可依,提升協同效率

          對于設計師與團隊:柵格系統定義了一套底層的、統一的測量單位,當設計團隊內對此達成共識時,可以避免因屏幕適配、比例換算產生的像素偏移,適配多種屏幕,提升精致細膩程度,同時保證了設計稿件中元素屬性的一致性和規范化,并有效降低設計師的決策成本,提高不同設計師之間的協同效率。同時避免了設計師與前端工程師在細節上的反復溝通確認,提升了整個開發效率。

          布局規律,減少認知成本

          對于用戶:運用網格系統能夠讓設計更有秩序和節奏感,規避了不同設計師理解不同造成產出差異的問題,如頁面節奏,空白等。在保持與原先展示內容基本一致的情況下,頁面信息結構更加清晰,提高閱讀效率,減少認知成本,提供一致性體驗。

          4. 柵格的的組成

          柵格使用列在水平方向上拆分頁面,以有組織的方式對元素進行布局,并模塊化設計多個頁面和組件。同時柵格還定義了一組固定的測量單位,指示每個設計元素遵守的尺寸,間距和對齊方式。

          最小單元

          網格的基本構成就是單元格,由格子組成網。間距都可以用最小單元來增加或者減小,最小單元格是所有設計元素(從排版到列,框,圖標和插圖)的幾何基礎,它為所有創造性的決策提供了結構和指導。所以柵格系統的重要一步就是需要先定義好柵格的原子單元大小,我們以最小單元去定義網格系統。

          最小單位推薦 8px

          目前 web 端最普適易用最小單位的是 8px,我們利用 8px 建立網格,8 的倍數組成了列、行、框的尺寸以及它們的邊距和填充,使用 8 的倍數來定義模塊的間距與元素的尺寸。

          萬字干貨!從4個方面完整解析柵格設計萬字干貨!從4個方面完整解析柵格設計

          當我們熟悉最小的柵格單位 8px 以后,能有力的減少決策時間。整個設計的元素大小,尤其是間距可以快捷的在腦海中反應出來,8、16、24、32、40、48、56、64、72、80、88、96、192 等,這里都是 8 的倍數或能被 8 整除。讓設計師帶著工程實現的思維去考慮頁面布局,設計側和工程側對頁面一致性的解讀,能夠有效降低設計到實現的轉化成本,提高開發效率。也要注意間距不能無腦套 8 的倍數,優先用 8,當跨度太大也可以使用 4 和 12。

          萬字干貨!從4個方面完整解析柵格設計萬字干貨!從4個方面完整解析柵格設計

          那為什么不選擇 4,6 或 10?

          注意的是最小單位應由實際工作來決定,沒有絕對的最小單位數值。在適用性方面,4、6、8、10 這四個數值都基本可以滿足。

          當使用 4px 時,頁面就會被分割的非常細碎,當 8 不夠用的時候,就要使用 4 了。

          最小單元格的數值選擇需要從兩方面考慮:

          • 最小單位在具體使用時是否具有一定的靈活性
          • 最小單位能否被大多數屏幕的寬度整除,即廣泛的適用性

          屏幕尺寸和分辨率種類有增無減。使得設計師對 “維護適配性” 的難度越來越大,設計稿導出會有@0.5、@0.75、@1、@1.5、@2、@3 倍多種需求,在 1@倍設計稿,奇數(比如 5px)就會出現半像素偏移。而 6 除以 2 得 3,3 就是奇數了,10 除以 2 的 5,6 和 10 不能被 2 除盡。

          萬字干貨!從4個方面完整解析柵格設計

          使用偶數 8px 可以輕松一致地縮放各種倍數而不失真,大多數流行的屏幕尺寸都可以被 8 整除,足夠普適,以 8px 為增量進行縮放可提供大量選項,所以推薦 8px。

          萬字干貨!從4個方面完整解析柵格設計

          列 + 列間距 + 大邊距

          柵格系統由 3 個部分組成:列、列間距、左右大邊距。柵格系統是由列和列間距交替分布形成的,列是柵格的數量單位,虛擬的垂直塊,用于對齊內容,我們以百分比或固定值定義列寬。豎直方向根據頁面內容是可以無限延伸,所以柵格系統在豎直方向的柵格可以不體現出來,設計時只要在水平方向保持規律變化就可以了。

          通常設定柵格數量說的就是列的數量,如 12 柵格就有 12 列、24 柵格就有 24 個列。列間距把控頁面留白,數值越大,頁面留白越多,視覺效果越松散;反之,頁面越緊湊,畫片分割的越碎。

          萬字干貨!從4個方面完整解析柵格設計

          大邊距就是設計內容區以外的空間。我們在設計中一般將大邊距寬度定義為固定值,該值決定每個設計的最小呼吸空間,靈活的邊距占據了由列,列間距組成的網格后的剩余空間。左右大邊距是計算在柵格的總寬之內的,刪格系統的寬度就是列、列邊距、大邊距之和。

          也有彈性大邊距,會根據不同的屏幕尺寸而變化,就是頁面邊距可以隨著屏幕尺寸的變化而變化。頁面邊距在移動設備上通常是 12px 到 40px 之間,在平板設備和桌面設備頁面邊距變化就相對多了。

          容器

          我們按照頁面結構從組件 – 容器 – 區塊 – 頁面 – 場景進行依次拼裝成最終形成產品設計方案。容器集合了下級組件,也可以是多個復雜元素的集合,文字、圖片、按鈕。如登錄區塊是由多個標簽、輸入框、按鈕組成。容器是成組的設計元素,形成了獨立的內容或功能盒子。區塊嵌套容器,由區塊組成了頁面內容。

          柵格規范的是容器間比例,而非具體寬度。容器大小收到柵格系統的限制,柵格系統可以根據需求被 2 等分、3 等分、4 等分、6 等分、12 等分,具體采用哪種比例的組合需要根據需求來定。柵格系統 / 設備分辨率大小在變換的同時會帶動區塊大小的變化,從而使容器發生變化,如元素尺寸變化,文字換行等。

          如下圖,共有 32 個容器。對于緊密相關的內容,請考慮組成區塊。頁面被分割的越碎時,設計中越難把控。

          萬字干貨!從4個方面完整解析柵格設計

          5. 拓展知識

          960 柵格系統

          這是一個比較單純的框架。從 1990 年代后期開始就基于表格的布局開始使用的柵格系統 960 Grid System。與早期計算機相比,雖然今天的屏幕分辨率達到了很高的尺寸,但使用 960 像素的寬度依舊可以確保在許多屏幕上能夠正確顯示。

          960 Grid System,是由 Nathan Smith 開發的 CSS 框架,因為早期的電腦熒幕寬度約為 1024,扣除瀏覽器的卷軸及邊框,為 960px,960 Grid System 有 12 欄位、16 欄位版本,960 正是意味著,12 能被 3、4、6 整除,能建立 3 欄、4 欄、6 欄的版面配置,網頁的使用也比較靈活。網頁版面可以輕松配置,合并,也不會有畸零數,非常適合排版。

          960 Grid System 是使用固定寬度 960px,置中對齊畫面的方式呈現在網頁上,去除左右兩邊各 10px 的邊距空間,留下中間 940 px 的設計內容區,以 20px 作為槽。

          而超出 960 的部分的設計元素,就使用定寬設計。

          Bootstrap 網頁框架

          今天市面上看見的響應式網站,多數使用了一些開源的代碼或者框架。而應用最廣泛的,就數 Bootstrap 了。

          Bootstrap 是 Twitter 推出的一套強大網頁框架,是全球最受歡迎的前端開源工具庫,它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 JavaScript 插件,也提供了快速建立響應式網頁的功能。已經更新到 V5.0.1 版本了 Bootstrap 中的柵格系統是一套響應式、移動設備優先的瀑布流式柵格系統。市面上很多前端框架會對 Bootstrap 進行補充或基于 Bootstrap 開發。

          Bootstrap 提供的柵格系統,也是一樣將內容區分 12 等分。

          萬字干貨!從4個方面完整解析柵格設計

          它將系統分為 12 列,當然也可以通過變量來改變列數和列寬,水槽寬度,屏幕浮動寬度;其實設置屏幕浮動寬度就是我們看到的屏幕自適應,就是根據屏幕寬度來選擇顯示參數。Bootstrap 中的柵格流只能作為大的布局定義,那么針對最小單位是該用 8、10、15 還是多少也是需要根據需求去做分析。

          12 列結構可以進一步分解 4 等分,3 等分大小的模塊。

          如何搭建柵格

          1. 確定屏幕寬度

          柵格設計的第一步就是創建畫布,對于不同設計的項目,寬度設定是不同的。需要注意第一屏重點內容全部顯示,瀏覽器和 Windows 底欄都會占用屏幕的高度空間,第一屏縮減默認高度 -100px (可調整)。

          屏幕寬度

          設計師有存在從最大的屏幕 1920 著手設計界面的習慣,最后考慮最小的屏幕上的顯示效果。這意味著絕大多數的設計都是從大尺寸開始設計的,通常大尺寸的內容和功能更全面。從小往大適配容易,但是從大往小適配問題就特別多。以 1920px 寬設計的界面在面向小尺寸屏幕的時候多數都很不友好,甚至到了部分頁面無法正常預覽和使用的地步。所以優先設計最小適配屏幕,然后給出適配方案進行調試。

          萬字干貨!從4個方面完整解析柵格設計

          C 端設計的屏幕寬度是找全網平均數值,而 B 端的目標受眾更細分、更具體。類似政府、學校、企業等等,計算機都是統一購買的,這種情況并不需要你去統計全網和其它渠道數據,只要了解具體受眾使用什么分辨率即可,以它作為主要輸出的畫布寬度。如果 B 端設計受眾屏幕寬度實在不清楚,可以參考螞蟻中臺設計團隊統一的畫板尺寸為 1440。

          是否定寬(版心)

          如果是定寬的設計,便不需要考慮自適應與響應式適配屏幕寬度。版心是源用平面上的說法。根據實際情況,定寬設計如果以 1024 的屏幕為內容主體,1366、1440、1536、1600、1920 的屏幕適配 1024 的內容主體,多余的空間為左右大邊距,這種方式設計上容易輸出,適配方式更加高效,隨之就是可用性較低,對于使用高分辨的用戶來說,布局會留下很大的空白。如知乎:

          萬字干貨!從4個方面完整解析柵格設計

          還記得第一次做網頁練習的時候我使用的定寬為 1000px。

          2. 確定柵格區域

          屏幕終端的寬度不等于我們要柵格的寬度。我們在確定柵格區域設計前,先來熟悉一下 web 產品界面的基礎模塊和分層邏輯,以常見的 B 端布局為例。

          根據模塊自身屬性及功能定義,常見的模塊有九類,分別為頂部導航模塊、左側導航模塊、頁眉模塊、頁腳模塊、主內容模塊、左內容模塊、右內容模塊、抽屜模塊、彈窗模塊。

          萬字干貨!從4個方面完整解析柵格設計

          全局控制層為常置的功能底層,是提供穩定性和可預測性、必不可少的層級,具體有頂部導航模塊、左側導航模塊等;內容層可分為常置展示層,具體有主內容模塊、左右內容模塊或上下模塊等;臨時層為動態出現的功能頂層,始終疊加在基礎層及內容層上方,是鏈接上下體驗流程的模塊,具體有抽屜模塊、彈窗浮層模塊。

          萬字干貨!從4個方面完整解析柵格設計

          梳理了相關模塊所組合的柵格布局。Web 端有三種基礎布局和多種擴展布局。一般來說,柵格區域就是指內容層。前面我們提到了定寬(版心),版心和內容層還是有差別的,版心+兩端頁邊距=內容區。

          萬字干貨!從4個方面完整解析柵格設計

          那其他模塊能用柵格嗎?當然可以,有需要就用,不過需要注意使用效率。

          3. 確定列數、列間距、大邊距

          首先,創建一個低保真或高保真的原型,設計一些基本元素和交互流程之后,考慮最優的列數。列間距的區域不可以放置內容,我們一般會給列間距設定一個定值來確定列寬大小,這個列間距也是模塊間的間距。

          柵格數量

          常見的柵格系統通常被劃分為 12 柵格或 24 柵格。劃分的格子越多,承載的內容越精細。也有較少項目會根據實際情況也會劃分成 16 柵格、20 柵格,移動設備屏幕尺寸小于 PC 屏幕,想要有更靈活發揮空間,就必須采用列寬較小的柵格。

          12 柵格

          12 柵格系統在流行的前端開發開源工具庫 Bootstrap 與 Foundation 中廣泛使用,一些商業網站、門戶網站通常劃分成 12 柵格,適用于業務信息分組較少,單個容器內信息體積較大的中后臺頁面設計。根據業務場景可以很容易的將 12 柵格區域劃分成 2 等分、3 等分、4 等分、6 等分,以及根據等分容器組合的多種不等分場景,組合也是柵格作為一個界面輔助系統非常方便的原因。

          萬字干貨!從4個方面完整解析柵格設計

          24 柵格

          24 柵格系統適用于業務信息量大、信息分組較多、單個容器內信息體積較小,場景復雜的頁面設計。相對 12 柵格系統,24 柵格系統變化更加靈活,更適合內容比較多樣復雜的場景。我們常見的 B 端 web 設計一般選用 24 柵格,柵格系統大小就是 24 列+23 列間距+2 大邊距。

          Ant 采用了 24 列、23 列間隔的柵格系統。其中間隔數值是固定的,內容區域減去 23 列間隔后,剩下的部分等分成 24 列。

          萬字干貨!從4個方面完整解析柵格設計

          注意:

          其內容模塊必須位于若干列上,可以任意分割,比如 6×2,3×4,4×3,下面是不同分割方式設計的信息模塊。

          只要父級模塊對齊柵格,子級元素可以不對齊列,同時子模塊也可以有自己的柵格系統。

          萬字干貨!從4個方面完整解析柵格設計

          列寬無法永遠精準整除,而相差的像素值往往是無法被用戶以肉眼察覺的,柵格不是為了每一像素的精確,而是為了保證瀏覽效果的秩序、協調與統一。

          確定列間距與大邊距

          列間距與大邊距選擇 8(最小單位)的倍數,網格將更加一致??梢詫㈤g距值把常用的數值整理成號碼表,間距復用化:小= 8px,中= 16px,大= 24px,x 大= 32px 等等…這樣一來,保持一致性更加容易,更加合乎邏輯,并且開發人員也會高興,因為他們可以根據屏幕元素之間的關系安全地假定間距。

          注意:

          列間距的數值越大,頁面留白間隙越多

          列間距的區域不可以放置內容模塊,內容區從列間距開始到列間距結束

          萬字干貨!從4個方面完整解析柵格設計

          非常規設計時不需要柵格系統,根據設計場景可自定義。

          柵格與適配

          柵格系統適配過程中需要考慮三個原則:等比縮放、彈性控件、文字流自適應。隨著設備多樣化,通用的適配方式是自適應與響應式布局,隨之就是柵格系統的變化。我們先聊下斷點。

          斷點,用瀏覽器打開一個網站,檢查元素,右上角會顯示視窗當前的分辨率,慢慢縮小視窗的寬度,找到頁面布局的變化點,就是我們上面說到的斷點或者次斷點。

          斷點設計主要考慮基礎的 3 端,一般大于等于 1440 為 web 布局,1439-500 為平板布局,小于 500 為手機布局。每經過一個斷點,可以改變柵格大?。ū热?16 柵格改為 8 柵格),固定改為拉伸,樣式(文字、顏色)。制作精良的話可以設計多個斷點,如 480、600、840、960、1280、1440 和 1600px。

          1. 柵格的行為

          固定柵格

          固定網格的最大特征是在網頁收縮過程中,經過一個斷點就會自動減少最邊緣元素,其他元素基本保持不變。通過在嵌入式塊中排列圖塊,在工具欄中放置圖標等,可以用固定的框來形成網格。柵格列數隨著瀏覽器寬度的減少而減少,邊緣圖塊自動換行,或者有時會溢出滾動條。

          首先通過最小單位選擇一個基本尺寸,然后以基本尺寸的倍數構建每個盒子框,就會出現一個個網格。

          萬字干貨!從4個方面完整解析柵格設計

          流動柵格

          流動柵格是元素隨著設備尺寸變化而比例變化,當到屏幕大小變化的斷點時,列可以增長或收縮以適應可用空間,邊緣元素被減掉。但并不是每一個斷點都需要去減少元素,可以適當的按照元素的比例進行大小調整。流動布局兼容性高,能更好的適配多分辨率。

          萬字干貨!從4個方面完整解析柵格設計

          流體柵格非常適合編輯內容,儀表板、圖像、視頻、數據可視化等。對用戶而言,縮放事物的大小比縮放可見事物的數量更為有用。

          在每個斷點處,列數是固定的,在斷點范圍之間,實際列寬是柵格區域百分比縮放,而不是最小單位倍數。內容區域是動態運動,就需要運用柵格系統。

          混合柵格

          內容區域流動和固定柵格組合也是常見的做法,混合柵格既有流動的寬度,也有固定寬度?;旌喜季謱τ脩羰钟押?,如下圖左側是固定柵格,右側是流動柵格。

          萬字干貨!從4個方面完整解析柵格設計

          2. 響應式與自適應

          在初期,網頁使用的是絕對靜態布局為主。靜態布局中如果用戶的屏幕大于或小于設計預期,結果會出現的滾動條,過長的行以及對空間的不良使用。后隨技術發展,為了兼容各種瀏覽器,出現了針對各設備適配的解決方案,自適應布局。

          后來移動互聯網爆發,html5 標準發布,與移動設備、平板電腦和智能設備(游戲機)等需要提供了更豐富的功能,用戶希望能夠使用各種設備訪問任何網站,結合自適應的思想,出現了響應式布局的概念——2010 年由 Ethan Marcotte 提出。

          自適應

          自適應布局是網頁內容根據設備的不同而進行適應,來判斷當前訪問的設備是 PC 端、平板還是手機,為不同終端分別提供獨立的前端代碼。自適應設計可以更好地適應用戶在現場的各種需求,缺點是成本較高。

          萬字干貨!從4個方面完整解析柵格設計

          自適應設計即創建多個布局,每個靜態布局對應一個屏幕分辨率范圍。比如你對自適應網站的窗口大小進行調整,每經過一個斷點就可以得到不同的布局(頁面元素位置發生改變),但在每個布局中,沒有經過斷點時頁面元素不隨窗口大小的調整發生變化。每經過一個斷點,布局和位置是可改變的,也有特殊,如兩個斷點間等比縮放,可以保留用戶在多個設備間的操作習慣。

          萬字干貨!從4個方面完整解析柵格設計萬字干貨!從4個方面完整解析柵格設計

          自適應設計,變化沒必要過于復雜,保留必要的功能入口,不必要的可以隱藏給不同設備切換不同的樣式,在同一設備下(斷點范圍下)實際還是固定布局。

          響應式

          響應式是通過一套代碼,無縫匹配符合電腦、平板、手機效果的前端技術,開發成本更低,高適應性;設計成本更低,一套設計應對多端,最大化提升用戶的操作體驗;響應式不提供自適應性那么多的控制,多端同步生效,減少運營成本,保障業務效率。

          萬字干貨!從4個方面完整解析柵格設計

          一個典型的響應式布局,通過改變瀏覽器的寬度就會發生響應變化,而不是像自適應經過設備斷點時內容才發生改變。響應式布局中會出現諸多差異較小的狀態,同樣讓響應式布局更加的難以測試和預測。

          萬字干貨!從4個方面完整解析柵格設計

          響應式也存在斷點,是網頁在收縮的過程中的最小范圍。當網頁到達這個范圍以后,網頁內部的元素就要進行相應的變化,用來適應屏幕的變化。

          萬字干貨!從4個方面完整解析柵格設計

          響應式設計的前提有兩點:1,頁面布局具有規律性,元素寬高可用百分比代替固定數值;2,網頁圖片必須是可伸縮的。這正是柵格系統本身就具有的典型特點,所以利用柵格系統進行響應式是順理成章和高效快捷。

          響應式網頁測試工具:我有反應嗎?和 designmodo

          萬字干貨!從4個方面完整解析柵格設計

          總結一下:

          自適應布局是內容根據終端不同進行適應,響應式布局是網頁的布局針對屏幕大小進行響應。響應式布局等于流動柵格,而自適應布局使用固定斷點來進行多個布局。 自適應布局給了我們更多設計的空間,因為只用考慮幾種不同的狀態;而在響應式布局中就會出現上百種不同的狀態,雖然絕大部分差異較小。

          自適應與響應式如何選擇用哪個呢?

          頁面功能不多,用戶交互少,不需要經常升級,響應式設計從運營的難易和維護的便利性考慮會更好,如邏輯簡單并且內容大致相同的官網和展示頁面;頁面個性化多功能方面考慮,自適應設計更合適,用戶體驗更好,如功能復雜、用戶交互頻繁的網站。

          全平臺適配

          除此之外,隨著移動設備的生產力逐步加強,手機、折疊屏、平板、電腦之間的界限變得模糊,端與端的差距也在縮小。蘋果推出 iPadOS,讓移動端的便捷和桌面端的超強生產力進一步融合。而從應用的開發而言 Electron、Flutter 等跨系統框架層出不窮,開發者也在不斷嘗試在不同平臺上用一套代碼提供同一套服務,減少系統隔閡所帶來的維護成本。

          盡管全平臺系統設計的概念還不成熟,但我們可以看到打造流暢的全平臺體驗的必要性。這也許會成為下一代應用的基礎規則,正如當初的響應式設計。

          設計工具中的柵格

          1. Figma

          figma 有三種不同形式的柵格可供選擇:統一網格,列和行。支持單個畫板柵格系統的使用和隱藏。

          嵌套柵格

          與其他工具不同,figma 不會在內容層只局限一個柵格,可以建立多層柵格嵌套??梢岳眠@一點,在盒子內部設計時,再用柵格用作視覺輔助,可以通過顏色和不透明度來區分不同柵格。

          figma 可以通過相對調整畫布大小,同步拉伸柵格系統。

          萬字干貨!從4個方面完整解析柵格設計

          內容自適應

          當我們拖動窗口的寬度,模塊會發生自動布局。定義下級元素針對父模塊的響應,做到模塊變化的同時下級元素的顯示也是合理的。比如相對內容左右間距一致、對齊方向一致、尺寸固定等設置。這就是 Sketch/Figma/XD 中的自適應功能。

          萬字干貨!從4個方面完整解析柵格設計

          其實在設計稿時,使用自適應功能頻率不高,不是每個區塊都需要自適應的。

          固定和拉伸混合使用,在內容自適應框架中,可以將一些元素設置為固定,將一些元素設置為填充容器并與固定和拉伸形式相結合使用。

          萬字干貨!從4個方面完整解析柵格設計

          同時可以修改圖層透明度為 0,相當于占位,可以占位搭配組件。

          共享樣式

          在創建柵格系統時,可能需要對不同設備尺寸或其他常見用例上的布局進行不同的更改。為了更輕松地將這些柵格應用于框架,文件和項目,可以將其中的幾個合并為一個柵格樣式(相當于組件),然后可以從團隊庫中共享該樣式或者自己復用,簡單快捷。

          萬字干貨!從4個方面完整解析柵格設計

          2. Sketch

          同樣有三種柵格可供選擇,柵格系統統一使用和隱藏。Sketch 里自適應功能不能隱藏某對象占位,而 figma 可以,當位置隱藏后,布局就會進行調整。

          sketch 使用柵格設計需先設置一個總寬度尺寸,點擊左下角默認設置還可以將自定義的柵格系統設置為默認,方便以后重復調用,但 sketch 只能儲存一組柵格系統的數值。

          萬字干貨!從4個方面完整解析柵格設計

          sketch 怎么以最小單位進行移動?

          可以在首選項設置最小單位如 8px,按 shift+方向鍵就能以最小單位進行調整。

          萬字干貨!從4個方面完整解析柵格設計

          http://grid.guide/

          這個網站,輸入版心和分割數,自動生成柵格方案。

          結束語

          在實際設計過程中,柵格的使用會伴隨著限制條件。我們應當明白,柵格只是為設計師提供便捷的輔助工具,而不是限制設計師的工具。

          不過從柵格這個工具來說,完全的自由反而是降低效率。如果能夠給出一定的限制,反而會使得我們的設計效率提升。我們不必關心每個區域盒子具體值是多少,只需保證它們存在正確的關系。柵格系統是對界面元素進行橫向排布時需要遵循的模式,不適用于類似圖標與文字間隔的小型元素安排,而是用于大型區塊間距的安排。

          文章來源:優設  作者:小龍哈

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

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

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



          六個方法解決用戶決策疲勞

          ui設計分享達人

          決策疲勞在現今互聯網深度發展的時代似乎非常常見,面對眼花繚亂的APP頁面,我們通常會因為需要做出過多決策而煩躁。那么產品設計者應該如何減少決策疲勞現象,給予用戶更好的體驗。本文圍繞解決用戶決策疲勞展開了詳細講述,推薦對此感興趣的伙伴閱讀。


          決策疲勞是用戶體驗圈一個路人皆知的詞匯,用于描述人們在某個時期內做出過多決策而導致厭煩的情況。研究表明,它主要發生在人類的認知能力在單位時間內隨著時間的延長而減少時。這就是為什么學習、鉆研問題,是一件非公眾都能做好的少數事件。

          在產品設計中,我們要堅持減少用戶需要做出決策數量的基本原則。保證用戶使用產品來完成一項任務,能夠越順利、越直接。個人在特定時期內被要求做出的決定越多,即使這些決定是微不足道的(比如選擇播放那個節目),他們的決策質量也會越低。

          當你感到疲倦時,這會顯著地影響你的決策能力,而 設計師在為用戶設計界面時必須了解到疲勞可能對用戶的影響。這個話題很有趣,因為人們在使用你的產品時可能會遇到的認知過載的原因有很多。

          本文重點是介紹在你進行下一個 產品項目時減少認知過載的六種方法。

          一、讓用戶少做選擇

          作為用戶,每天我們擁有的選擇題都在呈指數增長?;ヂ摼W讓我們可以在瞬間訪問世界上的內容。如此多的選擇會使我們思維遲鈍,降低我們的滿意度,并可能導致我們對體驗感到沮喪而不是變得更好。

          當給用戶太多選擇時,他們往往會感到困惑和迷茫。一個產品可以擁有世界上所有的功能,但是當界面因為選擇過多而過于復雜時,它最終給到用戶的體驗一定很差?!度烁衽c社會心理學雜志》的一項研究表明,當我們有太多選擇時,往往會導致決策失誤和情緒沮喪。

          六個方法解決用戶決策疲勞

          來自哈佛商業評論的模型

          在追求最大化滿足商業化可能的產品設計中,老板可能會要求在其產品中包含過多或過少的功能。通過使用哈佛商業評論提供的模型,橫軸為功能數量,三個點依次為用戶復購最大化、用戶終生價值最大化、用戶初次購買銷售最大化,公司能夠根據他們想要的結果找到適合他們的功能數量最佳點。

          研究表明,人們更有可能購買提供了有限數量的商品。在這種情況下,他們也會對自己的選擇更滿意,而不是從購買前的猶豫到購買后的忐忑,從而產生更大的滿足感。

          關鍵是很多產品為用戶創造了太多的選擇,這可能會造成浪費并適得其反。用戶可能會浪費時間嘗試點擊所有可能的產品,而不是按照預期進行實際購買。

          1. 扯淡的神奇數字7

          在用戶體驗世界中,關于使用多少次點擊以及人腦一次可以接收多少信息,存在許多相關的說法。但最重要的是,產品設計師需要在簡單性和功能性之間取得平衡,這樣他們就不會要求用戶做太多的操作或過多考慮用戶的需求遺漏了什么。

          最容易被誤解的理論之一是喬治米勒的“神奇數字 7”。有人說產品設計應該只有七個菜單選項卡或下拉列表中的七個項目。

          這是個謬誤,雖然我在某種程度上同意這種觀點,因為堅持這樣的限制似乎更自然,但我們也必須考慮信息是如何隨著社會和我們的大腦發生變化的。當前的互聯網會通過網站和大屏手機向我們展示數據,而不是早年的4.0英寸的小屏手機,用戶可以輕松地一次看到他們的所有選項,并不是非要強制通過數字7的限制讓用戶一塊很大的屏幕上來回滾動。

          同時現在也有一些研究表明,人們有可能喜歡有多種選擇的菜單。我們擁有的選項越多越好,因為用戶不必花時間深入查找相關信息。

          比如主頁上最多包含 幾十個類別鏈接的淘寶列表)比僅提供有限選項(如沒有子類別的類別)的網站更有用。但這里要強調的是需要考慮實際的用戶場景,電商平臺的屬性導致了要為消費者提供更多的選擇,而類似工具產品,尤其是垂直工具產品,在設計選項數量時一定要謹慎。

          2. 擊規則站不住腳

          還有另一個站不住腳的理論:從業者普遍接受但完全不靠譜的“三擊規則”,或者更加扯淡的“兩擊規則”。用戶的滿意度和事件完成率其實并不一定受幾次點擊影響,比方說付費流程,缺少必要的流程硬按點擊次數把流程縮短,導致用戶錯誤付費而產生的用戶體驗變差幾乎是不可逆的。

          3. 視覺布局用點心

          比菜單選項卡或下拉列表的數量更重要的是視覺體驗。視覺布局可以更輕松地掃描和記住每個選項。根據信息搜索理論,信息線索的持續感知對你的用戶體驗很重要。

          人們在日常生活中要做出很多選擇,而太多的選擇可能會讓人不知所措。當我們因產品特性不得不呈現更多的信息時,重要的是信息組織方式。

          你可以去嘗試減少選擇的數量,但最重要的是你的信息結構。如果你的信息沒有組織好,或者給到用戶的決策過程中涉及的步驟過多,用戶就不會費心去尋找他們想要的東西,因為他們覺得這會花費太長時間或可能沒必要去更更努力地探索。

          為了在產品上讓用戶的決策中有更好的轉化,我建議去掉任何不必要的東西,例如無關的標簽和鏈接,這些標簽和鏈接會分散用戶的注意力,使其無法找到他們正在尋找的東西。同時綜合產品特性去考慮實際該有的流程數量和必要選項,平衡簡單性和功能性的關系。

          二、允許用戶后悔

          現實中我們都會犯錯。它可能發生在我們所有人身上!但是,如果用戶犯了錯誤,優秀的產品設計師應該怎么做?

          答案是:讓用戶輕松回到起點。

          通過讓用戶走上正軌,你更有可能留住他們作為用戶,而不是導致他們離開你的網站或應用程序。

          下面是我在設計用戶流程時的一些最佳實踐:

          • 盡可能少制造意外情況;
          • 錯誤問題盡可能明晰,讓用戶更容易發現以修復它們并繼續用戶操作;
          • 在操作錯誤破壞用戶體驗之前通過提供保存數據選項來主動防止錯誤的數據輸入;
          • 不要只是彈出一條覆蓋整個頁面的消息,而是向他們展示哪些字段是錯誤的;
          • 避免在你的消息中使用苛刻的措辭,因為文案可能會趕走甚至激怒某些用戶。

          三、視覺提示有助于導航

          導航是任何網站或應用程序的核心。這就是讓你的設計能夠讓每個人都易于訪問和使用的原因。設計出到適合你產品的導航系統,對用戶體驗至關重要。

          導航的設計應該直觀且易于使用。用戶應該始終知道它在哪里,它的意義,以及點擊它會去哪。

          一個好方法是通過顏色為用戶對操作區域進行導航:比如當進行切換、更改等動作時配備不同的顏色,并用文案清楚地說明每個菜單項下是什么功能。

          這些小動作有助于使瀏覽您的網站或應用程序成為一種暢快的體驗。

          • 使掃描和閱讀頁面更容易;
          • 改善視覺層次;
          • 加強頁面導航;
          • 重要位置的鮮艷顏色可以提高轉化。

          一個例子是 Instapage 登陸頁面。如果標題沒有箭頭,很難看出下方有更多內容:

          六個方法解決用戶決策疲勞

          四、利用習慣動作減少學習成本

          在設計新界面時,必須盡可能降低受眾的學習成本。一個方法是利用他們已經熟悉的模式和習慣。但是你怎么知道這些約定是什么?

          下面是三個常見的 設計慣例,這些慣例可以讓你的用戶在與產品內交互時感覺更熟悉,這有助于減少他們的學習成本,并讓他們更快地開始學習你試圖傳達給他們的任何內容。

          1. 顏色不要繚亂

          簡潔的配色方案要遠比復雜華麗的配色更有效果。人眼會被顏色所吸引,因此如果你在整個界面中使用簡潔的配色方案,人們會更容易找到自己想要的信息而不是被顏色亂神。

          2. 把設計風格重復使用

          不僅要遵循常見的用戶體驗規則,而且要在一個產品里不停的重復,不要輕易作新穎的嘗試,前輩們大多已經幫你嘗試過了。

          這樣的意義在于:

          人們使用你的產品感覺更輕松,因為這個產品沒什么復雜的新東西(降低了學習成本)。

          一個例子是,目前無論你在那個瀏覽器查看哪個頁面,你的菜單欄都會保持在站點的頂部或底部。這會讓你產生導航認知,因為它在幫助你決定下一步需要采取什么行動時減輕了學習成本。

          3. 使用生活中的事物表示符號,比如用于刪除文件的垃圾桶。

          圖標是在你在表示操作對象是什么的好方法,它們易于理解且具有普遍可識別性,因此非常適合作為交互介質。使用在生活中已經被廣泛理解的圖標和符號有助于讓你的產品內容不會感覺難以理解和過于復雜。

          圖標一定要廣為人知——例如房子。這個圖標被普遍認為是“主頁”或開始屏幕的圖標。垃圾桶也是一樣——這個圖標被認定為一個垃圾桶圖標來刪除一個元素。

          五、別自嗨

          我們都知道應該以用戶為中心進行設計,而不是你自己,但其實不是那么容易。當你處于設計過程中試圖弄清楚你的用戶需要什么或他們會如何反應時,其實往往會按照自己的喜好走偏。

          一個方法是你可以使用一些簡單的技巧來確保你在設計時考慮到你的用戶。有些人發現從第一人稱的角度寫下他們的想法有助于將自己想象成最終被服務的用戶。

          或者某些設計師會講角色分類,然后全情單線程的專注一個項目,以犧牲時間和效率為代價確保航道的正向。

          以用戶為中心進行設計的最佳方式是聽取用戶的意見。當你從事一個新項目并考慮這個產品將如何服務于用戶時,請確保在進行原型設計之前先和你的用戶聊聊。

          可以嘗試提出以下問題:

          • “你最喜歡我們上一款產品的哪一點?”
          • “如果我們更改 x 功能,你會有何感受?”

          往往你會驚訝于他們可以提供的見解以及他們將期望如何改變你原型的方向。

          你可以使用多種用戶體驗研究方法來確保你在設計時考慮到用戶:

          1.  做一定的市場調查;
          2.  創建角色故事;
          3.  使用線框或原型快速獲得反饋;
          4.  定期和客戶服務團隊交流。

          六、簡約至上

          不要提供太多的選項或功能讓用戶不知所措。

          每個產品都有自己為用戶解決的核心問題,用戶希望在產品中獲得幫助并快速做出決定。問題是,很多產品經常沉迷于他們產品功能以及他可以為用戶實現什么,忘記了如果有太多選項和功能,新用戶可能會感到不知所措。

          如果你負責一個產品,可以考慮你的用戶在面臨過多選擇或功能時的感受,并盡量優先突出他們最需要的選項或功能。

          例如,在電子商務網站中,用戶不能從 50 種不同的衣服面料中選擇他們最喜歡的材質,如果預先只有三四個選擇,可能會帶來更好的體驗。也可以考慮隱藏一些選項,方法是使用視覺提示,例如類似“探索更多”文字的按鈕。

          確保將最重要的信息呈現給用戶的一種方法是將信息流設計為金字塔形狀,首先呈現基本信息,不太重要的信息盡量放在不顯眼的地方或者想辦法隱藏。

          七、結論

          這里提供了六種方法,幫助你減少產品中的決策疲勞,從而使用戶更有可能走上正軌,解決他們的問題,并幫助獲得更高的轉化。產品設計時把自己放到用戶的角度去思考,才能更好的服務于用戶


          文章來源:人人都是產品經理   作者:公眾號:真的不一定


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

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

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



          B端設計中臺落地、響應式界面設計

          ui設計分享達人


          以下內容主要分成兩大部分,第一是聊聊響應式和自適應的區別和原理,以及我們應該如何去設計響應式界面;第二部分也是比較關鍵的B端系統設計的核心,B端設計中臺完整構建過程的具體步驟,以及應用到的格式塔原則,和命名的一些注意事項,內容較多,大家可以根據上述目錄來選擇性閱讀。


          1.1多端兼容設計的發展史



          簡單概括多端兼容設計的發展史,最早是桌面端,比如桌面的一些應用;后來出現了移動端,針對移動端大家用的都是WAP,指一種無線應用協議,大家在用手機瀏覽一些網站,會把網站翻譯成一種低流量的瀏覽方式,比如去掉圖片大圖,只剩全文字,因為當時網絡不好,早在3G和2G時代移動端用的都是WAP;在2008年之后出現了響應式,也就是做一套代碼可以兼容三端(網頁、移動端、iPad)設備,在發展的同時也遇到很多問題,但響應式同時也遇到了很多問題;于是又出現了自適應,指不同的設備打開不同的頁面進行自適應,自適應能增加效率,但需要增加工作量;2017年以后直到現在看到最常用的就是漸進式,類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。


          1.2 響應式布局的種類



          1.2.1 響應式布局RWD


          可以理解成用戶在手機、電腦、ipad打開同一個界面,所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。


          1.2.2 自適應布局AWD


          自動布局算是響應式的一種,但平時看到很多響應式其實并不是真正的響應式,而是自動布局,因為界面在不同的設備用的是不同的模板,當我們用電腦打開呈現的是一套模板,而用手機打開則是另外一套模板,這種看起來是響應式,其實不是。因為當我在開發者模式下調節不同設備展示時,就會發現,其實是換了一個網址來根據不同的設備進行自適應的,而真正的響應式是不需要刷新的,在拖小窗口的時候就會變成手機端的那個樣子。


          1.2.3 漸進式布局PWD


          漸進式布局是近幾年比較新起的,這種布局設計,很像一個網站或者本身它就是一個網站,但用起來就像一個APP一樣,看到這里大家很容易相到,小程序就是漸進式布局得一種,小程序明顯是一個網頁,但通過技術的一些嵌入和一些接口或者緩存的方式的操作,讓用戶在使用的時候感覺小程序就是一個APP,但核心技術還是web網頁。



          1.3 如何應用設計響應式


          響應式的原理是通過定位的方式來做響應式的各種開發,需要在頁面中至少標出這十個點:中心點,上下左右點,上左上右點和下左下右點,這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解,其實結合figma來看,這些點對應的就是這樣(如下圖),在figma中的布局點。設計師通過調節圖形的布局點,可以做到在頁面拉伸時,讓想動的元素跟隨變化,不動的元素靜止不動,這就是響應式的原理。換言之,我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。



          1.4 響應式和自適應的區別


          01、響應式


          如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面,這個頁面兼容三端。雖然做了響應式,但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面,然后全部做好對應的自動布局,再進行頁面拉伸,內容隨之會發生變化,比如當拉伸到1024*768的時候,也就是iPad的尺寸,就會發現局部在設計上有些不合實際情況,這時就需要設計師在對應尺寸的設計稿上進行內容上的微調,比如按鈕不可能那么長,就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時,然后再酌情針對網頁尺寸的呈現樣式,局部進行尺寸的調整,比如文字和按鈕被拉伸到網頁版都需要居中對齊,電腦端的樣式就需要設計師重新排版了。


          通常在B端系統,設計師需要做響應式設計時,往往是從大往小做設計,這也取決于這個B端產品是否需要進行移動端的設計,《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端,就需要我們將網頁改成移動端設計,比如B端的側邊欄導航在拉伸到移動端時,就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中,做三端拉伸時候,可以用斷點插件來進行演示,通過對斷點插件的設置,就可以完美的看到頁面在三端不同情況的適配呈現,斷點插件用來做演示非常方便。



          02、自適應


          如下圖是自適應的優點和缺點,其實就是一個項目開發三個頁面,分別做定制設計,網頁端、移動端和Ipad端。



          2.1必讀前言


          我們都知道2021年也就是今年是我國新基建的元年,十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型,尤其是今年我們設計師更能深刻體會,C端和B端已經是完全兩個不同的行業,C端發展近十年,已經很難再做到創新上的突破,該做的功能和創新都已經做了,而B端這片藍海才剛剛開始發力,很多企業也都在考慮B端系統的搭建,降本提效率成了很多公司新的指標,因此數字化轉型重點在于B端系統探索,B端重點在于中臺的搭建!設計師通過設計中臺,構建出基本的業務類型,再分類到業務中,構建出不同的業務界面,所以設計中臺非常關鍵,很多公司經常會用這兩個系統去構建,Antdesign和Elemnet就是設計中臺,我們會發現用Antdesign可以做出很多的系統,那怎么進行設計中臺的設計呢?和我們設計師有什么樣的關聯度呢?帶著這個問題,我們深度探索B端設計中臺的落地!


          2.2 中臺的概念及作用


          概念:中臺是互聯網的術語,一般應用于大型企業,中國互聯網的變革永遠是從大型互聯網開始,大型互聯網公司引發了技術的變革,這也是中臺的興起,一般指搭建一個靈活快速應對變化的架構,快速實現前端提的需求,避免重復建設,達到提高工作效率目的。


          作用:降本提效。如果沒有組件庫,普通設計師一天最多做十個頁面,再多就不太可能了,如果有組件化得產生,一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前,組件庫的作用尤為重要。但如果落地,就需要前端工程師的密切配合,因為設計師設計的組件只是一個樣式,而前端需要把組件進行代碼化,所以組件一定是代碼化的,也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用,和前端代碼的復用,可以大大提高設計師的工作效率。


          2.3 設計中臺的構建過程



          2.3.1 基本庫建立


          基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等,之所以強調系統兩個字,有系統就要統一規則和統一規范,然后進行調用應用在系統中的各個地方,比如我們想調用一個顏色,不是去隨選用一個顏色,應該嚴格的從色彩系統中去調用,如果系統組件庫里沒有這個顏色,我們也絕對不可以使用,可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用,這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面,組件庫中如果沒有相應的組件,我們應該試著反推一下,是否要加進組件庫中去,來進行系統的調用。在做中臺的過程中,我們一直使用Antdesign,我們對組件的名稱,組件的分類其實一點都不陌生,其實Antdesign也在借鑒國外的Bootstrap組件庫(大家感興趣可以下載Bootstrap組件庫進行查看),所以并不是Antdesign組件庫形成了一定的規則,它也是在沿用別人的規則,而這些規則也需要不斷的有大公司去繼承出來,所以慢慢衍生出來現在這樣的組件庫,那中臺設計,首先要搭建基本庫,把基本庫里的基礎一些系統搭建好后,我們繼續去做擴展庫。


          2.3.2 擴展庫建立


          如下圖,擴展庫中包含了很多內容,比如分了四類,導航系統,數據錄入,數據展示和反饋系統。其中導航系統又包含了,面包屑導航、下拉菜單、導航菜單、頂部導航等等,包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫,也不需要做成像Antdesign的組件庫里包含的那么多,或者和新出得字節Arco組件庫,因為它們面向的是系統級的解決方案,各行各業都可以用它,它面向的是一個大系統,也許我們只涉及到了其中的20%,因為也沒有一個系統能用到它所有的組件,所以我們自己在設計組件庫的時候,一定是按照我們自己項目的范圍去做組件庫,而不是做一個大而全的,大而全的組件庫對我們也沒有意義。它們做的是公共平臺,而我們要做的是一個專屬平臺。



          2.3.3 方法庫建立


          形成完基本庫和擴展庫后,第三步是建立方法庫。方法庫告訴我們的是什么時候用,比如我做了一個多選框,這個多選框應該什么時候用,是不是只要遇見一個選擇就去用多選框,肯定不是,應該加以說明什么時候用這個多選框。類似于是組件的設計說明。


          2.3.4 案例庫建立


          最后再做一個案例庫,最佳實踐庫,具體組件什么時候用我們知道了,接著案例庫就是在告訴我們應該如何正確的使用,或者說的方法是什么。比如標簽的左對齊和右對齊,這種情況都對,什么時候用頂對齊,什么時候用左對齊,什么時候用右對齊呢?那么根據眼動儀實驗數據數據來看,并且結合給出一些工作中業務中的最佳實踐得案例放進去,給使用的人去做指引。


          所以設計師做的事情,不僅僅是應用組件庫和創造組價庫,還應該指導其他設計師,指導開發人員在去復用每個頁面組件的的時候,應該怎么正確的使用,這也是在B端設計中一個關鍵的環節,同時我們的視覺系統一定也是和業務有關聯度的,所以在B端中做設計一定也不會脫離業務去做,我們一定要聯系到實際的業務場景中,這個業務場景指的就是業務和視覺的結合,在做C端的時候,業務場景一定不會比B端多,C端的業務場景大多是定制化的業務場景,它要求的是個性化,不要求通用,盡量得個性化,比如圖標、按鈕、頁面,而B端需要統一化,中臺組件庫的落地,可以大大提高設計師的工作效率和開發人員的協同效率,嚴謹的調用組件使用組件,可以使得系統頁面保持高度的一致。



          2.4 認識格式塔原則


          2.4.1接近性


          如圖1:可以看出縱列的關系更緊密,因為縱間距小于行間距。


          如圖2:可以看出行間距大于列間距,它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢?這屬于用戶心理學的應用,如果元素相鄰的更近,元素之間的關系就會更加的緊密。


          如圖3:如果元素相鄰的關系都是保持一樣的,那么它們的關系是相對對等的。


          由此可以得出結論,如果相鄰的關系越近,它們的關聯度就越近,如果相鄰的越遠,它們的關聯度就越遠。


          應用案例:如圖4卡片中得標題和內容,設計中把標題和內容進行區分,所以我們會做大量的留白,這樣的留白就會讓信息結構具有層次感,層次感就是指它們信息結構的關聯度,如果想讓它們有關聯度,就讓它們距離近一點不要做區分,如果不想讓它們有關聯度,或者關聯度出現一個等級的區分,那么就可以加一條線,讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。



          2.4.2 相似性


          如圖5:如果去區分右邊的形狀,通常我們會根據形狀進行區分,因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。


          應用案例:如果文字的標題大小是保持一致的,包括它有統一的大小,統一的色彩,統一的字號,那系統中的其他同樣功能的地方,都應該用統一的文字,這就是格式塔相似性的應用,比如圖標也是一樣,只有用了相似的圖形大小,相似的顏色,在相同的位置,用相同的圖標進行表達,圖標之間的設計才具有相似性。


          2.4.3 主體與背景


          如圖6:可以看到有一個L,是主體與背景進行了區分,如果在設計的時候讓L看的更加明顯,我們采用的辦法就是將主體的色彩或者形狀變的更加獨特,或者將背景的顏色變得更加分明,這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。


          應用案例:比如警告彈出,可以用色彩去區分,目標就是讓用戶看的更加得清晰,當警告的時候給用戶一個警告的信息,當成功的時候給用戶一個成功的信息。還有類似對話框的彈出,采用背景變暗和加陰影的方式,都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中,前景和背景進行區分的時候,我們就可以通過色彩進行區分,色彩的區分要保持統一,比如背景色彩透明度50%同時加一些背景模糊,其他的背景也需要保持一致,陰影也是一樣,如果把陰影放在一個平面上,距離平面越近,它得陰影越短,距離平面越遠,它得陰影越長,這也是陰影的層級關系。


          2.4.4 封閉性


          如圖7:可以看出這是一個四分之一的圓形。


          如圖8:這個圖可以看出是一個五角星。


          封閉性應用案例:當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候,并不影響人們對這個形狀額外得認知,一定會腦補出另外一個形狀,這個原則和我們UI的關系是什么呢?比如一個loading,半圓一直在旋轉,或者圖表中的圓占比,我們就可以判斷出誰大誰小,誰多誰少,判斷出當前的進程和位置,封閉性原則通常應用在圖標的設計,圖表的設計和步驟條的設計中。


          2.4.5 連續性


          如圖9:可以看出用一些簡單得形狀來體現,其中三角形具有明顯的指向性,三角形箭頭指向右邊,上面五個是一組,可以看出它們具有連續性;另外一組三角形箭頭指向右下角,可以看出它們是連續的一組。不同的形狀會有連續性,箭頭也特別有指向性,這就是為什么返回和前要進放在不同的位置,當我們的數據需要有連續的時候,我們也要使用相似的形狀來表達,這就是連續性原則的應用。


          同理如圖10:連續性一定是要有連續等階的變化,從左上角開始,向下和向右我們可以看出有明顯的顏色連續等階變化,通過色彩的透明度也可以做到連續性。




          2.5 組件的命名規則



          2.5.1 如何正確的命名


          很多公司或者不同公司有不同的命名方式,這個需要和團隊開發提前做溝通,主要以方便開發習慣操作為主,如果不命名也不能非得說成是錯誤的,命名可以理解成是一件錦上添花的事情,因為一切都以效率優先,命名自然會影響工作效率,通常情況,組件的命名可以分成組件的名稱、級別、尺寸、狀態,這樣的命名順序來進行,這樣命名開發使用也比較方便,因為是按照了開發的統一規則來進行命名的。如圖所示:



          2.5.2 更多命名英文詞匯


          當英文不好的時候,推薦大家記常用組件英文名,以及常用狀態名、級別名、內部名、尺寸名和位置名,那這些英文也幾乎涵蓋了工作中80%的英文詞匯,收藏記憶哦~



          文章來源:站酷   作者:飛魚十七

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

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

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



          留白/線性/卡片分割選哪個?

          ui設計分享達人

          近兩年,vivo 瀏覽器一直選擇的是留白分割的設計方式,但核心競品已經逐漸都采用了線性分割,甚至卡片分割的設計,是要堅守留白還是追隨“趨勢”,面對內外部聲音的追問,我們開始了關于分割方式的詳細研究與探索。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖1 資訊新聞的分割方式

          研究不局限于資訊新聞信息流列表,而是回歸到分割方式的本源,希望能一次性給大家一個明確的分割方式設計指南。

          通過一系列的桌面研究、實踐對比和趨勢總結,我們可以將結論簡要概括如下:

          1. 優先使用留白分割。
          2. 當留白分割不能起到明顯的分割作用時,建議采用線性分割。
          3. 當線性分隔不能起到明顯的分割作用時,建議采用卡片分割。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖2 三種分割方式示意

          也就是說從選擇的優先級而言:留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文(小結圖見文末),希望可以幫助你掃清所有關于分割方式的困惑。

          留白分割

          1. 定義

          所謂留白分割,指的是只通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),自然的將信息進行分組。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖3 親密性原則體現的留白分割

          如上圖所示,當縱向間距增加 1.5 倍后,信息被分為上下 2 組,當橫向間距也增加 1.5 倍后,信息被分為上下左右四組,這就是留白分割。

          值得一提的是,同類單一元素(圖片、文字、圖標等)之間默認采用的都是留白分割。比如相冊中單張照片之間,文章中每個文字之間,間距留白是區隔單一信息元素的默認選擇。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖4 相片和文字之間的留白分割

          2. 使用原則

          單個元素之間默認使用留白分割,隨著元素的增多,多個元素按照特定的組合形成條目,條目與條目之間,或者條目組與條目組之間進行區隔時,就涉及到今天的主題:留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖5 iOS和Android系統的分割方式差異

          在 iOS 中,線性分割是條目間默認的分割方式(參見 iPhone 通訊錄和設置),當多個條目成組后,為了區分不同組別,則會采用更高層級的卡片分割方式。

          在 Android 系統,留白分割是條目間默認的分割方式,線性分割用于劃分信息組塊,而不僅僅是區隔上下文內容。(參見 Pixel 5 的通訊錄和設置)

          從 2014 年 Material Design 發布后“卡片式設計”的風靡,再到 2019 年前后“去線化設計”盛行,結合設計趨勢,再對比上圖中 iOS 和 Android 的分割效果,建議在不影響核心數據指標的前提下,條目之間盡可能采用留白分割,會讓界面更清爽,瀏覽更沉浸(畢竟即使是卡片設計的創始團隊 Google,在設計 Android OS 時也并沒有濫用卡片)。

          3. 留白分割的分類及適用場景

          留白分割的分類,指的是留白間距大小的設計規范,信息之間有多少種間距,每種間距適用于什么情境。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖6 留白分割的分類

          日常設計中,視覺設計師經常會將頁面網格化,然后以最小網格為基準,設計不同倍數的間距大小,以此來增強頁面的秩序感。

          理論上講,只要分隔的間距夠大,都可以根據接近性原則形成信息分組。但信息層次越多,需要的間距種類就越多,間距種類一多,信息層次就越不清晰(只能單純根據間距大小判斷信息層次,就好像只用鄰近色進行色彩區分一樣,不對比就不容易發現差異,不夠直白)。而且每增加一個視覺層次,要求其間距至少要是上一層次間距的 2 倍,接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少(≤2)時,留白分割是比較合適的,當信息層次較多(≥3)時,留白分割既會浪費空間,也難以達到一目了然的分割效果。

          線性分割

          1. 定義

          線性分割,顧名思義,就是指用線來分割不同的信息內容。在 Material Design 中,對分割線(Dividers)有明確的定義和規范。(iOS 中沒有相關定義,根據上圖 4 的視覺效果,我更偏向 Android 的分割方式,所以更傾向于采納 Android 的設計規范建議和效果)

          分割線是一條細長、輕量的線,用于對列表和頁面布局中的內容進行分組。從視覺效果上看,分割線可以將頁面內容分割成層次更清晰的組塊。

          此外,MD 還定義了其 UI 細節,規定分割線的粗細是 1dp,顏色根據日夜間模式,可分別使用黑色或白色,不透明度為 12%,以確保 Android 平臺所有分割線的顯示效果一致。(國內的實際情況是:大部分 App 的分割線是 1px 粗細,相比 MD 的 1dp,視覺效果更符合下方的微妙原則)

          2. 使用原則

          分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾,影響頁面信息傳達,所以 Android 系統明確規定了分割線的使用原則:

          1. 微妙的:分割線在布局中應該很容易被注意到,但又不凸顯。
          2. 次要的:只有當留白不能起到分割作用時才采用分割線。
          3. 少用的:謹慎使用分隔線,用它來創建分組而不是分割條目。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖7 Android系統中分割線的使用原則

          3. 分類及適用場景

          分割線可以分為三種類型:

          1. 通欄分割線(Full-bleed dividers):用于分隔彼此完全獨立的內容。
          2. 內嵌分割線(Inset dividers):用于分割有錨點(頭像或圖標)的相關內容。
          3. 中間分割線(Middle dividers):用于分割無錨點(頭像或圖標)的相關內容。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖8 三種分割線示意

          多數時候(信息層級≤2),采用分割線進行分割的信息,采用留白也是可以分割的,只不過需要留白間距足夠大,比如我們把上述分割線的方式換成留白,因為間距夠大,視覺效果也很清晰(沒有多余線性元素的干擾)。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖9 用大留白替換分割線示意

          但是如果為了提高屏效,希望在一屏內盡可能多的展示信息,那么同樣的信息布局,分割線帶來的分割效果會更清晰,如下圖所示:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖10 追求縱向信息屏效時線性分割效果更好

          當信息層級≥3之后,使用線性分割就要謹慎一些,可以具體看一下是否滿足下方卡分割的使用條件。

          卡片分割

          1. 定義

          卡片是一個由內容和操作組合而成的獨立主題的面性容器①,它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧,除了卡片容器本身,其他元素都是可選的,所有元素都以易于掃描和操作的形式放置在卡片之上。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖11 卡片可以包含的元素示意

          2. 使用原則

          使用卡片時應注意以下三個使用原則:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖12 卡片可以包含的元素示意

          1. 包含的:卡片是一個可識別的、單獨的、包含內容的單元。
          2. 獨立的:一張卡片可以獨立存在,而不依賴于上下文環境。
          3. 不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。

          使用卡片需要滿足以上三個原則,但并不是滿足以上原則就可以使用卡片,具體卡片分類和適用情境請參考下文。

          3. 分類及適用情境

          卡片根據左右是否有邊距,可以簡單分為通欄卡片和非通欄卡片。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖13 卡片樣式分類

          從視覺效果上來看,由于圓角的聚焦效應,非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好,畫面的分割感會更強。

          不管是哪種卡片類型,它們都是獨立的、包含單個主題的內容(操作)的容器,它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。

          那什么時候使用通欄分割線,什么時候使用卡片分割呢?這里有三個參考建議給你:

          1. 當這個主題內部的內容已經有分割線時,建議采用卡片分割,以讓主題信息層次更清晰。
          2. 當單個主題內部的內容類型較多,上下所占空間較大(比如≥1/2屏),建議采用卡片分割,以更好的圈定該主題的內容范圍,給用戶明確的內容邊界感。
          3. 當需要擴展頁面的橫向空間時,暗示頁面可以橫向滑動時,需要采用非通欄卡片,利用橫向內容連續性原則,幫助用戶建立可以橫向滑動的意識。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖14 使用卡片的三個參考條件

          設計實踐

          回到開篇關于 vivo 瀏覽器信息流分割方式的選擇,因為項目成員偏好不同,大家各執一詞都無法說服對方,所以設計師設計了三種不同的分割方案(僅分割方式這一個變量),分別進行了定性研究、定量研究和灰度數據調研。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖15 設計師設計的三種分割效果

          在定性研究中,我們在線下對十余位用戶進行了訪談,左右滑動三張設計稿,讓用戶對比觀察三張圖的差異,(不管是線性分割還是卡片分割,設計師都遵循了以內容為主導,弱化分割方式以凸顯內容這一大原則,期望用戶能始終聚焦在內容本身,不受分割方式的干擾),結果所有用戶都說覺得三張圖是一樣的,表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后,三種分割方式的選擇也比較分散,并沒有顯著的差異(樣本較少,不具有說服力)。

          在定量的問卷研究中,我們提取了用戶對三種分割方式描述的看法,基本也符合大家對分割形式的預期。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖16 篩選的用戶典型反饋

          在最終的灰度測試中,留白分割以相對較好的數據結果勝出(結果數據保密,暫不方便告知)。所以在最終大家看到的全量版本中,vivo 瀏覽器默認采用的依然是留白分割的設計形式。

          小結

          根據分割方式自身的特點(視覺干擾性、分割強弱感、滑動沉浸感)、上下文條目之間的關系,單個條目的內容復雜度,屏幕空間的利用率,我們可以對分割方式做一個簡單的小結,如下:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖17 分割方式特點小結

          簡而言之:

          1. 當信息條目復雜度較低時,優先采用留白分割,視覺清爽無干擾。
          2. 當信息條目復雜度增加,只利用留白分割效果不明顯時,建議引入線性分割,讓信息層次更清晰且屏效高。
          3. 當信息條目復雜度進一步提升,(比如已經有了線性分割,或者有更多操作),需要進一步強化信息條目本身的邊界感,建議引入卡片,以強化條目信息的視覺層次和可操作性。





          文章來源:優設 作者:VMIC UED

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

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

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


          近兩年,vivo 瀏覽器一直選擇的是留白分割的設計方式,但核心競品已經逐漸都采用了線性分割,甚至卡片分割的設計,是要堅守留白還是追隨“趨勢”,面對內外部聲音的追問,我們開始了關于分割方式的詳細研究與探索。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖1 資訊新聞的分割方式

          研究不局限于資訊新聞信息流列表,而是回歸到分割方式的本源,希望能一次性給大家一個明確的分割方式設計指南。

          通過一系列的桌面研究、實踐對比和趨勢總結,我們可以將結論簡要概括如下:

          1. 優先使用留白分割。
          2. 當留白分割不能起到明顯的分割作用時,建議采用線性分割。
          3. 當線性分隔不能起到明顯的分割作用時,建議采用卡片分割。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖2 三種分割方式示意

          也就是說從選擇的優先級而言:留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文(小結圖見文末),希望可以幫助你掃清所有關于分割方式的困惑。

          留白分割

          1. 定義

          所謂留白分割,指的是只通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),自然的將信息進行分組。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖3 親密性原則體現的留白分割

          如上圖所示,當縱向間距增加 1.5 倍后,信息被分為上下 2 組,當橫向間距也增加 1.5 倍后,信息被分為上下左右四組,這就是留白分割。

          值得一提的是,同類單一元素(圖片、文字、圖標等)之間默認采用的都是留白分割。比如相冊中單張照片之間,文章中每個文字之間,間距留白是區隔單一信息元素的默認選擇。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖4 相片和文字之間的留白分割

          2. 使用原則

          單個元素之間默認使用留白分割,隨著元素的增多,多個元素按照特定的組合形成條目,條目與條目之間,或者條目組與條目組之間進行區隔時,就涉及到今天的主題:留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖5 iOS和Android系統的分割方式差異

          在 iOS 中,線性分割是條目間默認的分割方式(參見 iPhone 通訊錄和設置),當多個條目成組后,為了區分不同組別,則會采用更高層級的卡片分割方式。

          在 Android 系統,留白分割是條目間默認的分割方式,線性分割用于劃分信息組塊,而不僅僅是區隔上下文內容。(參見 Pixel 5 的通訊錄和設置)

          從 2014 年 Material Design 發布后“卡片式設計”的風靡,再到 2019 年前后“去線化設計”盛行,結合設計趨勢,再對比上圖中 iOS 和 Android 的分割效果,建議在不影響核心數據指標的前提下,條目之間盡可能采用留白分割,會讓界面更清爽,瀏覽更沉浸(畢竟即使是卡片設計的創始團隊 Google,在設計 Android OS 時也并沒有濫用卡片)。

          3. 留白分割的分類及適用場景

          留白分割的分類,指的是留白間距大小的設計規范,信息之間有多少種間距,每種間距適用于什么情境。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖6 留白分割的分類

          日常設計中,視覺設計師經常會將頁面網格化,然后以最小網格為基準,設計不同倍數的間距大小,以此來增強頁面的秩序感。

          理論上講,只要分隔的間距夠大,都可以根據接近性原則形成信息分組。但信息層次越多,需要的間距種類就越多,間距種類一多,信息層次就越不清晰(只能單純根據間距大小判斷信息層次,就好像只用鄰近色進行色彩區分一樣,不對比就不容易發現差異,不夠直白)。而且每增加一個視覺層次,要求其間距至少要是上一層次間距的 2 倍,接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少(≤2)時,留白分割是比較合適的,當信息層次較多(≥3)時,留白分割既會浪費空間,也難以達到一目了然的分割效果。

          線性分割

          1. 定義

          線性分割,顧名思義,就是指用線來分割不同的信息內容。在 Material Design 中,對分割線(Dividers)有明確的定義和規范。(iOS 中沒有相關定義,根據上圖 4 的視覺效果,我更偏向 Android 的分割方式,所以更傾向于采納 Android 的設計規范建議和效果)

          分割線是一條細長、輕量的線,用于對列表和頁面布局中的內容進行分組。從視覺效果上看,分割線可以將頁面內容分割成層次更清晰的組塊。

          此外,MD 還定義了其 UI 細節,規定分割線的粗細是 1dp,顏色根據日夜間模式,可分別使用黑色或白色,不透明度為 12%,以確保 Android 平臺所有分割線的顯示效果一致。(國內的實際情況是:大部分 App 的分割線是 1px 粗細,相比 MD 的 1dp,視覺效果更符合下方的微妙原則)

          2. 使用原則

          分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾,影響頁面信息傳達,所以 Android 系統明確規定了分割線的使用原則:

          1. 微妙的:分割線在布局中應該很容易被注意到,但又不凸顯。
          2. 次要的:只有當留白不能起到分割作用時才采用分割線。
          3. 少用的:謹慎使用分隔線,用它來創建分組而不是分割條目。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖7 Android系統中分割線的使用原則

          3. 分類及適用場景

          分割線可以分為三種類型:

          1. 通欄分割線(Full-bleed dividers):用于分隔彼此完全獨立的內容。
          2. 內嵌分割線(Inset dividers):用于分割有錨點(頭像或圖標)的相關內容。
          3. 中間分割線(Middle dividers):用于分割無錨點(頭像或圖標)的相關內容。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖8 三種分割線示意

          多數時候(信息層級≤2),采用分割線進行分割的信息,采用留白也是可以分割的,只不過需要留白間距足夠大,比如我們把上述分割線的方式換成留白,因為間距夠大,視覺效果也很清晰(沒有多余線性元素的干擾)。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖9 用大留白替換分割線示意

          但是如果為了提高屏效,希望在一屏內盡可能多的展示信息,那么同樣的信息布局,分割線帶來的分割效果會更清晰,如下圖所示:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖10 追求縱向信息屏效時線性分割效果更好

          當信息層級≥3之后,使用線性分割就要謹慎一些,可以具體看一下是否滿足下方卡分割的使用條件。

          卡片分割

          1. 定義

          卡片是一個由內容和操作組合而成的獨立主題的面性容器①,它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧,除了卡片容器本身,其他元素都是可選的,所有元素都以易于掃描和操作的形式放置在卡片之上。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖11 卡片可以包含的元素示意

          2. 使用原則

          使用卡片時應注意以下三個使用原則:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖12 卡片可以包含的元素示意

          1. 包含的:卡片是一個可識別的、單獨的、包含內容的單元。
          2. 獨立的:一張卡片可以獨立存在,而不依賴于上下文環境。
          3. 不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。

          使用卡片需要滿足以上三個原則,但并不是滿足以上原則就可以使用卡片,具體卡片分類和適用情境請參考下文。

          3. 分類及適用情境

          卡片根據左右是否有邊距,可以簡單分為通欄卡片和非通欄卡片。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖13 卡片樣式分類

          從視覺效果上來看,由于圓角的聚焦效應,非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好,畫面的分割感會更強。

          不管是哪種卡片類型,它們都是獨立的、包含單個主題的內容(操作)的容器,它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。

          那什么時候使用通欄分割線,什么時候使用卡片分割呢?這里有三個參考建議給你:

          1. 當這個主題內部的內容已經有分割線時,建議采用卡片分割,以讓主題信息層次更清晰。
          2. 當單個主題內部的內容類型較多,上下所占空間較大(比如≥1/2屏),建議采用卡片分割,以更好的圈定該主題的內容范圍,給用戶明確的內容邊界感。
          3. 當需要擴展頁面的橫向空間時,暗示頁面可以橫向滑動時,需要采用非通欄卡片,利用橫向內容連續性原則,幫助用戶建立可以橫向滑動的意識。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖14 使用卡片的三個參考條件

          設計實踐

          回到開篇關于 vivo 瀏覽器信息流分割方式的選擇,因為項目成員偏好不同,大家各執一詞都無法說服對方,所以設計師設計了三種不同的分割方案(僅分割方式這一個變量),分別進行了定性研究、定量研究和灰度數據調研。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖15 設計師設計的三種分割效果

          在定性研究中,我們在線下對十余位用戶進行了訪談,左右滑動三張設計稿,讓用戶對比觀察三張圖的差異,(不管是線性分割還是卡片分割,設計師都遵循了以內容為主導,弱化分割方式以凸顯內容這一大原則,期望用戶能始終聚焦在內容本身,不受分割方式的干擾),結果所有用戶都說覺得三張圖是一樣的,表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后,三種分割方式的選擇也比較分散,并沒有顯著的差異(樣本較少,不具有說服力)。

          在定量的問卷研究中,我們提取了用戶對三種分割方式描述的看法,基本也符合大家對分割形式的預期。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖16 篩選的用戶典型反饋

          在最終的灰度測試中,留白分割以相對較好的數據結果勝出(結果數據保密,暫不方便告知)。所以在最終大家看到的全量版本中,vivo 瀏覽器默認采用的依然是留白分割的設計形式。

          小結

          根據分割方式自身的特點(視覺干擾性、分割強弱感、滑動沉浸感)、上下文條目之間的關系,單個條目的內容復雜度,屏幕空間的利用率,我們可以對分割方式做一個簡單的小結,如下:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖17 分割方式特點小結

          簡而言之:

          1. 當信息條目復雜度較低時,優先采用留白分割,視覺清爽無干擾。
          2. 當信息條目復雜度增加,只利用留白分割效果不明顯時,建議引入線性分割,讓信息層次更清晰且屏效高。
          3. 當信息條目復雜度進一步提升,(比如已經有了線性分割,或者有更多操作),需要進一步強化信息條目本身的邊界感,建議引入卡片,以強化條目信息的視覺層次和可操作性。





          文章來源:優設 作者:VMIC UED

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

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

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


          近兩年,vivo 瀏覽器一直選擇的是留白分割的設計方式,但核心競品已經逐漸都采用了線性分割,甚至卡片分割的設計,是要堅守留白還是追隨“趨勢”,面對內外部聲音的追問,我們開始了關于分割方式的詳細研究與探索。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖1 資訊新聞的分割方式

          研究不局限于資訊新聞信息流列表,而是回歸到分割方式的本源,希望能一次性給大家一個明確的分割方式設計指南。

          通過一系列的桌面研究、實踐對比和趨勢總結,我們可以將結論簡要概括如下:

          1. 優先使用留白分割。
          2. 當留白分割不能起到明顯的分割作用時,建議采用線性分割。
          3. 當線性分隔不能起到明顯的分割作用時,建議采用卡片分割。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖2 三種分割方式示意

          也就是說從選擇的優先級而言:留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文(小結圖見文末),希望可以幫助你掃清所有關于分割方式的困惑。

          留白分割

          1. 定義

          所謂留白分割,指的是只通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),自然的將信息進行分組。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖3 親密性原則體現的留白分割

          如上圖所示,當縱向間距增加 1.5 倍后,信息被分為上下 2 組,當橫向間距也增加 1.5 倍后,信息被分為上下左右四組,這就是留白分割。

          值得一提的是,同類單一元素(圖片、文字、圖標等)之間默認采用的都是留白分割。比如相冊中單張照片之間,文章中每個文字之間,間距留白是區隔單一信息元素的默認選擇。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖4 相片和文字之間的留白分割

          2. 使用原則

          單個元素之間默認使用留白分割,隨著元素的增多,多個元素按照特定的組合形成條目,條目與條目之間,或者條目組與條目組之間進行區隔時,就涉及到今天的主題:留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖5 iOS和Android系統的分割方式差異

          在 iOS 中,線性分割是條目間默認的分割方式(參見 iPhone 通訊錄和設置),當多個條目成組后,為了區分不同組別,則會采用更高層級的卡片分割方式。

          在 Android 系統,留白分割是條目間默認的分割方式,線性分割用于劃分信息組塊,而不僅僅是區隔上下文內容。(參見 Pixel 5 的通訊錄和設置)

          從 2014 年 Material Design 發布后“卡片式設計”的風靡,再到 2019 年前后“去線化設計”盛行,結合設計趨勢,再對比上圖中 iOS 和 Android 的分割效果,建議在不影響核心數據指標的前提下,條目之間盡可能采用留白分割,會讓界面更清爽,瀏覽更沉浸(畢竟即使是卡片設計的創始團隊 Google,在設計 Android OS 時也并沒有濫用卡片)。

          3. 留白分割的分類及適用場景

          留白分割的分類,指的是留白間距大小的設計規范,信息之間有多少種間距,每種間距適用于什么情境。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖6 留白分割的分類

          日常設計中,視覺設計師經常會將頁面網格化,然后以最小網格為基準,設計不同倍數的間距大小,以此來增強頁面的秩序感。

          理論上講,只要分隔的間距夠大,都可以根據接近性原則形成信息分組。但信息層次越多,需要的間距種類就越多,間距種類一多,信息層次就越不清晰(只能單純根據間距大小判斷信息層次,就好像只用鄰近色進行色彩區分一樣,不對比就不容易發現差異,不夠直白)。而且每增加一個視覺層次,要求其間距至少要是上一層次間距的 2 倍,接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少(≤2)時,留白分割是比較合適的,當信息層次較多(≥3)時,留白分割既會浪費空間,也難以達到一目了然的分割效果。

          線性分割

          1. 定義

          線性分割,顧名思義,就是指用線來分割不同的信息內容。在 Material Design 中,對分割線(Dividers)有明確的定義和規范。(iOS 中沒有相關定義,根據上圖 4 的視覺效果,我更偏向 Android 的分割方式,所以更傾向于采納 Android 的設計規范建議和效果)

          分割線是一條細長、輕量的線,用于對列表和頁面布局中的內容進行分組。從視覺效果上看,分割線可以將頁面內容分割成層次更清晰的組塊。

          此外,MD 還定義了其 UI 細節,規定分割線的粗細是 1dp,顏色根據日夜間模式,可分別使用黑色或白色,不透明度為 12%,以確保 Android 平臺所有分割線的顯示效果一致。(國內的實際情況是:大部分 App 的分割線是 1px 粗細,相比 MD 的 1dp,視覺效果更符合下方的微妙原則)

          2. 使用原則

          分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾,影響頁面信息傳達,所以 Android 系統明確規定了分割線的使用原則:

          1. 微妙的:分割線在布局中應該很容易被注意到,但又不凸顯。
          2. 次要的:只有當留白不能起到分割作用時才采用分割線。
          3. 少用的:謹慎使用分隔線,用它來創建分組而不是分割條目。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖7 Android系統中分割線的使用原則

          3. 分類及適用場景

          分割線可以分為三種類型:

          1. 通欄分割線(Full-bleed dividers):用于分隔彼此完全獨立的內容。
          2. 內嵌分割線(Inset dividers):用于分割有錨點(頭像或圖標)的相關內容。
          3. 中間分割線(Middle dividers):用于分割無錨點(頭像或圖標)的相關內容。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖8 三種分割線示意

          多數時候(信息層級≤2),采用分割線進行分割的信息,采用留白也是可以分割的,只不過需要留白間距足夠大,比如我們把上述分割線的方式換成留白,因為間距夠大,視覺效果也很清晰(沒有多余線性元素的干擾)。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖9 用大留白替換分割線示意

          但是如果為了提高屏效,希望在一屏內盡可能多的展示信息,那么同樣的信息布局,分割線帶來的分割效果會更清晰,如下圖所示:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖10 追求縱向信息屏效時線性分割效果更好

          當信息層級≥3之后,使用線性分割就要謹慎一些,可以具體看一下是否滿足下方卡分割的使用條件。

          卡片分割

          1. 定義

          卡片是一個由內容和操作組合而成的獨立主題的面性容器①,它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧,除了卡片容器本身,其他元素都是可選的,所有元素都以易于掃描和操作的形式放置在卡片之上。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖11 卡片可以包含的元素示意

          2. 使用原則

          使用卡片時應注意以下三個使用原則:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖12 卡片可以包含的元素示意

          1. 包含的:卡片是一個可識別的、單獨的、包含內容的單元。
          2. 獨立的:一張卡片可以獨立存在,而不依賴于上下文環境。
          3. 不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。

          使用卡片需要滿足以上三個原則,但并不是滿足以上原則就可以使用卡片,具體卡片分類和適用情境請參考下文。

          3. 分類及適用情境

          卡片根據左右是否有邊距,可以簡單分為通欄卡片和非通欄卡片。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖13 卡片樣式分類

          從視覺效果上來看,由于圓角的聚焦效應,非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好,畫面的分割感會更強。

          不管是哪種卡片類型,它們都是獨立的、包含單個主題的內容(操作)的容器,它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。

          那什么時候使用通欄分割線,什么時候使用卡片分割呢?這里有三個參考建議給你:

          1. 當這個主題內部的內容已經有分割線時,建議采用卡片分割,以讓主題信息層次更清晰。
          2. 當單個主題內部的內容類型較多,上下所占空間較大(比如≥1/2屏),建議采用卡片分割,以更好的圈定該主題的內容范圍,給用戶明確的內容邊界感。
          3. 當需要擴展頁面的橫向空間時,暗示頁面可以橫向滑動時,需要采用非通欄卡片,利用橫向內容連續性原則,幫助用戶建立可以橫向滑動的意識。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖14 使用卡片的三個參考條件

          設計實踐

          回到開篇關于 vivo 瀏覽器信息流分割方式的選擇,因為項目成員偏好不同,大家各執一詞都無法說服對方,所以設計師設計了三種不同的分割方案(僅分割方式這一個變量),分別進行了定性研究、定量研究和灰度數據調研。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖15 設計師設計的三種分割效果

          在定性研究中,我們在線下對十余位用戶進行了訪談,左右滑動三張設計稿,讓用戶對比觀察三張圖的差異,(不管是線性分割還是卡片分割,設計師都遵循了以內容為主導,弱化分割方式以凸顯內容這一大原則,期望用戶能始終聚焦在內容本身,不受分割方式的干擾),結果所有用戶都說覺得三張圖是一樣的,表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后,三種分割方式的選擇也比較分散,并沒有顯著的差異(樣本較少,不具有說服力)。

          在定量的問卷研究中,我們提取了用戶對三種分割方式描述的看法,基本也符合大家對分割形式的預期。

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖16 篩選的用戶典型反饋

          在最終的灰度測試中,留白分割以相對較好的數據結果勝出(結果數據保密,暫不方便告知)。所以在最終大家看到的全量版本中,vivo 瀏覽器默認采用的依然是留白分割的設計形式。

          小結

          根據分割方式自身的特點(視覺干擾性、分割強弱感、滑動沉浸感)、上下文條目之間的關系,單個條目的內容復雜度,屏幕空間的利用率,我們可以對分割方式做一個簡單的小結,如下:

          留白/線性/卡片分割選哪個?掃清你的選擇困惑!

          圖17 分割方式特點小結

          簡而言之:

          1. 當信息條目復雜度較低時,優先采用留白分割,視覺清爽無干擾。
          2. 當信息條目復雜度增加,只利用留白分割效果不明顯時,建議引入線性分割,讓信息層次更清晰且屏效高。
          3. 當信息條目復雜度進一步提升,(比如已經有了線性分割,或者有更多操作),需要進一步強化信息條目本身的邊界感,建議引入卡片,以強化條目信息的視覺層次和可操作性。





          文章來源:優設 作者:VMIC UED

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

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

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


          B端體驗設計-與復雜共處

          ui設計分享達人

          “復雜是世界的一部分,但它不應該令人困惑,好的設計幫我們馴服復雜,不是讓事物變簡單(如果復雜是符合需求的),而是去管理復雜”--唐納德·A·諾曼



          與復雜共處,這是一個有趣的話題。在這個奉行“少即是多”的時代,設計師對于復雜噤若寒蟬,認為優秀的設計應該簡潔明了,若無必要,勿增實體,而復雜則常備被視作失敗設計的標簽。設計師為了保持設計上的簡約挖空心思,甚至試圖通過削弱功能的方式來降低產品的復雜度,得到自己想象中的完美設計。然而一味追求“簡單”的設計真的符合用戶的實際需求嗎?從心理學的角度來看,復雜的事物往往功能強大,而功能強大意味著更好的服務與更高的價值,用戶也更愿意為之付費。當我們購買商品時,我們會仔細斟酌,拿著產品的功能列表反復比對,這個時候我們忘記了產品復雜與否,更多考慮的是功能是否滿足自身需求。


          對于大部分B端產品而言,復雜或許難以避免,復雜是出于實實在在的業務的需要,而非某位設計師的錯誤喜好。B端產品之所以給人感覺會相對復雜,是因為產品需要完成復雜的工作任務,界面內承載的信息內容較多,在視覺上會帶給用戶壓力,直觀感受上覺得產品很復雜。但是這些信息又都是必需的,如果缺少這些必要的信息,會對用戶理解和使用產品造成阻礙。就如同飛機的駕駛艙,密密麻麻的按鈕如此復雜,但是每一個按鈕都有著相應的功能,不可或缺。既然復雜難以避免,那么作為設計師我們不應該被動接受或盲目拒絕復雜,我們應該學會如何與復雜共處,去嘗試馴服復雜、管理復雜。


          理性看待復雜


          相信很多設計師和我一樣,經歷過現代主義浪潮的洗禮,對于簡約的設計有著或多或少的偏好。因為這種偏好,在自己進行設計時也希望能夠選用這種風格,在設計時刻意的去追求界面簡約,卻忽略了界面上的簡約不等同于產品易于理解和使用。從心理學的角度上看,復雜的事物更容易理解,簡單的事物反倒令人困惑,一味的追求簡單反而會讓事物變得復雜。


          B端產品的目標是降本提效,追求簡約的設計思想在B端產品的設計中并沒有那么適用,為了提升用戶的操作效率,我們需要將一些能夠幫助用戶理解的信息與常用的操作直觀的展示給用戶。這會在一定程度上增加界面的復雜度,但是相較于產品視覺界面會因此變得復雜,產品的易用性和操作效率對于B端產品而言會更為重要。


          與復雜共處的前提是能夠理性地看待復雜,復雜本身的含義即非褒義也非貶義。復雜描述的是事物的狀態,它在詞典上的解釋是擁有很多即錯綜復雜又相互關聯的組成部分的事物。產品復雜與否是由產品本身所從事的業務和需要完成的任務來決定,就像我們不能要求一個做機械結構設計的工程軟件做得像一個圖畫板一樣簡單,因為兩者的功能需求不是一個層面的,所以我們也不能單純的將產品簡潔還復雜作為評判一款產品優秀與否的標準。


          分清復雜與困惑


          我們之所以對復雜懷有畏懼,其實更多的是畏懼令人困惑的復雜,復雜與困惑有著本質的區別,理解他們之間的區別很有必要,復雜描述的是事物的狀態,而困惑表述的是用戶使用產品時的心理。復雜的背后可以擁有規則與邏輯,理解這些規則和邏輯,能夠幫助我們理解和使用產品。而令人困惑的產品往往缺少這樣的內在規則與邏輯,用戶難以理解產品的運轉機制,需要花費很大力氣才能完成有效操作,容易讓用戶產生挫敗感。產品可以是復雜的,但是不應該讓用戶困惑。


          在很多復雜的傳統線下業務數字化轉型的過程中,為了讓產品易于使用,設計師需要深入到一線,去了解真實用戶在線下業務場景中是如何處理日常任務的,在流程線上化過程中也需要遵循這樣的業務流程,這樣能夠讓用戶更快上手,而如果我們在設計過程中不去參考用戶在線下的操作場景,按照自己的想法去意測用戶的行為,這樣設計出的產品背離了用戶的心理模型,缺乏內在邏輯,會讓用戶感到混亂困惑,陷入深深的麻煩。


          基于產品本身功能需要,我們可能無法很主觀的去降低產品的復雜度,這就需要我們在進行產品設計時花費更多的心思,通過對業務流程、頁面布局、信息呈現上的調整與設計讓產品變得清晰,不讓用戶陷入困惑。如下圖的關于表單編輯器的A\B兩種設計,用戶在編輯器內完成一系列針對表單的編輯、配置操作,然后發布表單。方案A中將這些表單編輯配置項通過tab進行排列,這種方式結構簡單,但是擴展性較差,過多的欄目也容易讓用戶陷入困惑,不清楚需要完成哪些配置項才能進行發布。方案B中采用了步驟導航加側欄導航的雙層導航結構,在步驟導航上給出完成表單編輯配置的主要步驟,在大的步驟下用側欄導航承載小的編輯項,結構清晰,且能夠對用戶編輯表單提供一定的幫助指引。雖然兩種方案信息內容上都一致,視覺觀感上甚至方案B更為復雜,但是方案B在這里可能是更合適的方案,因為方案B在配置流程的指引上更為清晰,也更貼近用戶心理模型,即使沒有使用過在線表單的用戶也能理解產品流程,因而用戶能夠更容易的完成表單配置并發布表單。



          功能決定產品的復雜程度


          我們在使用產品時,都會有一個大概的心理預期,會認為某一類型的產品會較為復雜,某一類型的產品會相對簡單。為什么我們會有這樣的認知呢?是因為我們知道這些產品大概有哪些功能,而這些功能就決定了產品的復雜層度。產品的復雜程度由產品的業務與功能決定,而不是依照設計師的自我喜好,像如淘寶、京東這類的購物網站、擁有著很多的欄目,所以淘寶、京東的界面相對來說較為復雜;而像百度這樣的搜索引擎功能相對來說比較簡單,所以界面設計相對簡單干凈。


          我們可以容許一個功能強大的產品設計得相對復雜,但是一個功能簡單的產品設計得復雜難用就是一個災難。作為設計師我們需要根據產品的實際需要來進行設計,即不過度設計,也不執著于追求簡約,而是基于需求恰到好處的進行設計。


          復雜產品也能有好的體驗


          復雜的產品會有好的用戶體驗嗎?答案是肯定的,用戶體驗的好壞與產品是復雜還是簡單并沒有直接的關系,很多時候復雜的產品也能帶給我們良好的用戶體驗,在互聯網產品中,我們可以看到很多復雜的產品,這些復雜的軟件產品,一點點的改變著我們的生活與工作方式,讓我們生活與工作變得便捷與高效。


          首先可以看看我們的國民級電商應用淘寶,乍看淘寶的界面,可能會覺得十分復雜,甚至會給人一種眼花繚亂的感覺,但是包括我在內的許多人仍然十分喜歡逛淘寶。淘寶內除了有本身的淘寶、天貓店鋪外還有專做海淘的天貓國際,做社區團購的淘鮮達,專做拍賣的阿里拍賣等數十個板塊,業務繁多,功能復雜,但這幾乎很難改變,因為之所以做這些業務和功能背后都有著商業上的考量。從交互設計的角度看,雖然淘寶的業務和功能繁多,卻有著清晰的布局、信息對齊、內容組織,產品盡管復雜,但并不令人感到費解和困惑。購物流程也與用戶在線下購物流程相仿,貼近用戶的心理模型,用戶容易了解產品功能、容易與之交互,整體上有著良好的用戶體驗。



          又如我一直在使用的一款筆記軟件Notion,Notion相對于印象筆記、有道云筆記而言更為復雜,需要花費一定的時間成本學習才能夠從容上手使用,但是這并不妨礙Notion被眾多使用者所追捧。Notion的很多功能在使用之前,甚至都不會想到會出現在一款筆記產品里面,如甘特圖,多維表格等,這類功能一般出現在項目管理類軟件中。而Notion塊結構的布局模式,讓筆記能夠自由拖拽,擁有了極強的自由度,用戶可以很自由的用各種各樣的形式來記筆記,要是你肯再花一些心思,你甚至可以在Notion內搭建一個個人專屬網站來記錄的學習知識,打造個人專屬知識庫。將我們習以為常的線性筆記思維,轉變成縱向思維,甚至是網格狀思維。Notion無疑是復雜的,但是這樣做是為了給用戶提供的強大功能和極高的自由度,這些功能恰恰也切合了用戶的需求,創造了一種全新的筆記體驗,帶給用戶愉悅的使用感受。



          過度簡化的潛在風險


          簡單是產品追求的最終形態嗎?其實未必,很多時候產品設計的過度簡單反而會給用戶帶來麻煩。為了追求簡單的設計,不可避免的就需要隱藏一些信息或者拉長操作路徑,這是一個權衡的過程,我們在做設計時也會經常面臨這樣的抉擇,是追求視覺上的簡約美觀還是信息傳達準確性與操作上的效率。給用戶一個簡約美觀的視覺感受無疑很重要,人們對于美的事物往往更有耐心,也更愿意去探索。但是對于一款針對B端用戶的效率軟件、辦公應用而言,準確的傳達信息,幫助用戶進行判斷,頻繁使用的功能設計得更高效便捷,這些點能帶給用戶更實際價值,也是我們在設計產品時應該優先考慮的點。



          特別是在一些專業性的軟件中,如果我們為了追求簡約而弱化或者省略掉一些關鍵信息,還有可能會導致用戶錯誤操作的出現,造成嚴重的后果。試想一下當你在使用軟件編寫一個計算字段時,軟件提供給你了計算公式卻沒有就近給你提供計算公式的解釋和用法示例,導致你因為書寫上的不規范使得計算結果頻繁出錯。這時你可能會滿懷憤怒的抱怨為什么產品會如此難用,為什么不能配置過程中給到更多的反饋與幫助信息來減少配置錯誤的發生。


          如何與復雜共處


          前面我們了解了關于復雜的定義,認識了復雜與困惑之間的區別,也明確了在B端產品中復雜或許難以避免,復雜是出于實實在在的業務的需要而非某位設計師的錯誤喜好,既然復雜無法避免,我們就應該學會與復雜共處,管理與馴服復雜。那么如何與復雜共處呢,有一些策略或許可以給予我們一些思路。


          1.為產品注入規則


          復雜與困惑的本質區別在于復雜的背后隱藏著規則與邏輯,而困惑缺少這樣的規則與邏輯,讓人無法預測與揣摩,對應到軟件產品的設計,一款成功的優秀的軟件產品,應該是易學易用、能夠滿足用戶預期,用戶能夠直觀的理解產品的流程與主要功能,并通過產品實現自己的目標。那么具體到軟件的設計上我們應該怎樣做呢?


          這里可以看看我們團隊正在使用的研發管理工具TAPD,TAPD是一款敏捷研發協作工具,凝聚了騰訊研發方法及敏捷實踐精髓,其中敏捷開發的方法就是TAPD的內在規則與邏輯,有過敏捷開發經驗,理解敏捷開發流程的的開發人員能夠快速的上手使用TAPD,對于不了解敏捷開發的開發人員也可以通過產品幫助中心學習敏捷開發思想,進而理解產品的功能與流程,因此雖然TAPD功能與頁面結構相對復雜,但是基于對敏捷開發的認識用戶還是能從產品復雜的功能界面中摸索出一條操作路徑,實現自己的目標。這就是產品擁有內核思想以后能夠帶來的直觀好處,將原本零散的功能點通過特定邏輯鏈接成操作流程,幫助用戶更好地理解與使用產品。



          相同的在我們公司自己的一個項目中我們也運用了同樣的方法,在我們公司之前研發的一款crm產品中,為了給用戶提供最佳的銷售實踐,幫助用戶更快上手使用我們的產品,我們在設計產品時尋找了硅谷藍圖團隊做了顧問咨詢,并依照硅谷藍圖的銷售轉化路徑來構建我們的產品體系,確定產品功能,梳理產品中的業務流程。并希望在以后為客戶做實施的過程中能夠將硅谷藍圖的銷售方法一起帶給用戶,讓用戶能夠更好地使用我們的產品,實現產品的最高價值,為中小企業銷售團隊賦能。


          通過前面兩個案例其實我們可以感受到,當一款復雜的產品有了內在的規則與邏輯以后,用戶理解和使用我們的產品會變得更順暢,用戶不會迷失在茫茫的功能之中,通過理解規則與邏輯,用戶能夠對自己操作結果有一個大概的預期,而不是處于困惑狀態,作為設計師的我們也可以將這種規則邏輯作為我們設計的引導,讓我們的設計更為系統和有條理,讓產品不再是一堆功能的堆疊,各自為戰。


          2. 貼近用戶心理模型設計



          復雜是用戶的一種心理感受,用戶覺得產品復雜除了產品本身結構信息復雜之外,也是因為產品在設計上沒有貼合用戶的心理預期,用戶很難理解產品的流程與交互,所以貼近用戶心理進行設計就顯得尤為重要。這里我們需要先了解三個概念,實現模型、表現模型和心理模型,三個概念的釋義如下:

          實現模型:產品是怎樣工作的
          心里模型:用戶認為產品是怎樣工作的
          表現模型:通過設計來讓用戶認為產品是怎樣工作的


          表現模型越接近心理模型,用戶就越容易了解產品功能、容易與之交互。表現模型越接近實現模型,用戶越難理解產品,產品就越難使用。復雜產品在用戶體驗過程中的痛點在于用戶需要花費時間學習或培訓之后才能了解產品的運轉機制,很多B端產品在設計時更多的偏向于實現模型,用戶在使用產品的過程中會發現很多地方的交互和自己心理預期并不一致,使用過程中會遇到很多的阻礙,影響整體的使用體驗。對于一款復雜的產品而言,我們需要讓我們產品的表現模型更接近于用戶的心理模型,這樣用戶能夠更容易了解產品的功能,并與之交互。


          大家使用電腦時有沒有遇到過類似下圖這樣的電腦報錯信息,里面是一堆的專業名詞,看得人一頭霧水。這時候我們能做的只有默默的打開百度,去了解彈窗里面講的內容究竟是什么,了解后才明白原來這樣,然后按照百度上操作步驟一通操作,僥幸解決了問題。但是當下次我們遇到相同問題時,可能還是不知道如何解決,無可避免還是需要求助百度。這個就是表現模型貼近與實現模型會帶給用戶的困擾,用戶不是專業的開發者,他們不了解也不需要了解產品背后的實現邏輯,這對用戶而言是沒有價值的,給予用戶這些信息不能對用戶起到預想的幫助作用。貼近實現模型進行設計會讓用戶與產品交互變得困難,變相的是在人為的增加產品的復雜度,與復雜共處,我們需要學會貼近用戶心理進行設計。



          3.統一交互模式


          復雜的產品往往功能、頁面繁多,如果頁面內的視覺元素以及交互各自為戰,那么放大到整個產品就是一個災難,不僅是產品給用戶感官上不統一、整體性差,過多的交互模式也會增加用戶的學習與記憶成本,用戶在這些相視功能但是不同的視覺與交互的模塊之間容易陷入困惑,對用戶使用產品造成困擾。針對這個問題,現在越來越多的公司開始通過搭建組件庫的方式來規范自家產品內的視覺與交互,一個規范完整的組件庫的確能夠在很大程度上解決產品在視覺與交互上的一致性問題,通過模塊化解決方案,也能降低冗余的生產成本,實現產品快速開發。因此很多人也認為搭建好組件庫就能一次性的解決產品體驗一致性問題,但實際上就算一個產品有了一個自己的組件庫,依舊還會遇到體驗上統一性問題,這是為什么呢?


          在原子化設計理論中,粒子是構成頁面的最小顆粒,粒子構成簡單組件,簡單組件到復雜組件,再到區塊、頁面。雖然用組件能去構建頁面,但是還會遇到頁面結構、交互不一致的問題,設計師各自使用組件去搭建并不能提升我們的效率和解決設計一致性的問題,在末端設計并沒有做到約束。因此我們在構建好組件以后還需要繼續抽取出了頁面級的組裝結構和交互模式。



          這里我們拿B端產品中常見的列表頁來舉例,縱觀所有后臺列表頁面,抽取后無非就分為這么幾個區域。不同的業務可以通過基礎組件和樣式定義符合自己業務線的子模塊。比如列表頁中的篩選區,在不同的業務場景下,對篩選器的需求也各不相同,簡單的可能只需要使用標簽選擇就能夠完成篩選,復雜的可能添加很多的篩選項甚至選項之間還有且或關系,我們需要根據實際的業務場景設計適合的篩選器,但是需要注意的是一個產品中用到的篩選器形式不應太多,我們需要抽取歸納出三四種篩選器形式去覆蓋我們產品內所有的篩選場景。來保證產品內不會出現各種相識卻有各不相同的篩選器。



          B端后臺產品中比較常見的還有表單,我們可以歸納出產品內可能會使用到的表單類型,然后定義出具體的框架結構與交互,在具體的設計過程中在根據實際情況選用不同的表單區塊。


          1.分組表單

          一種常見的信息錄入以及信息展示表單,這種形式是我們最長用。



          2.分步表單

          分布表單適用于信息錄入項以及信息展示項過多,在一個頁面內已經不能合理清晰的組織傳遞信息,或者表單內容的錄入方式或者展示方式存在較大差異,不適宜在一個頁面內進行展示時。按照布局的不同也可分為橫向步驟和縱向步驟兩種。



          3.組合表單

          組合表單因其結構能夠承載更多的信息,每一個欄目都可以承載一個獨立的表單頁,有效的管理信息。


          4.彈窗表單

          很多時候我們也會用彈窗來承載表單,好處是交互銜接流暢,不用跳頁。



          將產品中類似的區塊做成最佳的交互模式范例,能夠最大的程度的規范我們產品中的交互,這樣才能真正的實現產品體驗上的統一,化繁為簡,讓復雜的產品也能夠調理清晰,上手簡單容易。在面對復雜的系統級軟件時,在統一組件樣式的基礎上還應該統一產品內的交互模式。



          信息歸納突出重心


          復雜的產品頁面內信息往往都特別繁多,如果不做好信息歸納,用戶將很難把握住重點內容,信息獲取效率低下,十分影響用戶的使用體驗,所以信息的強弱的整理十分重要,那么什么樣的信息是對用戶而言重要的信息呢?


          信息設計大師愛德華·塔夫特認為優秀的視覺設計應該是“將清晰的思考視覺化”,他還認為只有充分理解觀看者的“認知任務”及一些設計原則才能設計出優秀的產品。


          如何找到對用戶真正重要的信息需要借助到產品設計中一個十分重要的工具--用戶模型,通過調研的來得用戶模型是對于我們產品客戶的抽象歸納,通過用戶模型我們可以確定哪些功能對于用戶而言是高價值的重要內容該重點突出,哪些內容相對不是那么重要可以弱化處理,通過對于頁面內容強弱的劃分,用戶能夠更快的獲取到對自己有用的內容,盡管頁面仍舊復雜,但是信息劃分合理、層級清晰、表意明確的頁面人就能夠帶給用戶良好的用戶體驗,幫助用戶高效的處理任務。


          說在最后


          復雜是產品的本來特性,本身不含褒貶,但是如果復雜不加以控制,讓其發展為困惑與混亂,這對于一款產品而言絕對不是一件好事情,這樣即使產品功能上很優秀,用戶也無法長期忍受,一旦市場上出現替代產品,那么忍受已久的用戶也將拋棄產品轉向體驗更好的新產品。


          曾經我也是一個極簡主義的追捧者,但是經歷過越來越多的設計項目,我開始發現某些產品復雜性是必需的,將產品做得簡單并不是其核心訴求。真正需要處理的問題也不是復雜,而是混淆的狀態和由此產生的無條理性。解決的方法不是簡單的去除幾個界面元素,讓其在視覺界面上變得簡潔干凈,而是要讓產品擁有內在規則、一致且能夠被理解。



          文章來源:站酷   作者:Yone楊

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

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

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


          讓設計感暴增的8個畫冊標題排版技巧

          seo達人


          圖片

          其實畫冊的標題也能排出許多新意,本篇文章,蔥爺來給大家分享幾個可以給畫冊設計加分的標題排版技巧。

           

          01.描邊字錯位組合

          上圖是某院校招生畫冊的“學院簡介”排版,由于太過講究對齊,缺少變化,所以顯得不夠靈活,我們可以把標題的中英文詞匯拆開進行錯位排版,錯位時要注意左右的平衡,另外,三行錯位比起兩行錯位的變化會更豐富一些。

          圖片

          單純只是做錯位處理,效果并不怎么好,因為沒有層級關系,所以可以再加上字號大小的變化,突出重點詞匯,弱化次要詞匯。

          圖片

          這樣層級豐富多了,但是眾多很粗很黑的字體擠在一起略顯壓抑,把其中部分詞匯改成描邊后,整體就變得更透氣、更有設計感一些了,注意描邊要細一點,以避免描邊的筆畫重疊在一起影響識別性和美觀性。

          圖片

          標題排好以后,再根據標題調整一下內文、頁眉、頁碼的排版,內文通常會對齊標題中的某個字詞,但一邊對齊就好,不需要兩端都對齊,頁眉、頁碼可以作為裝飾來排版,填充一點顏色可以讓版面變得更活躍。

          圖片

          圖片

           

          02.彩色標題疊加灰色圖片

          還是拿前面的那個案例舉例,把學校圖片換成一張沒有去底的矩形照片,然后把它處理成黑白色照,移動至版面上方,標題使用藍色壓住圖片的左上角,這時標題就不是孤立的幾行文字了,而是與圖片形成了一個整體,這種排版方式在網頁設計中比較常見,用于畫冊的標題排版,效果也是很不錯的。

          圖片

          圖片做出血處理顯得更大氣,左下角的頁碼與標題左對齊,可以加強版面的整體性和關聯性。

          圖片

          03.手寫體搭配黑體

          同一個標題我們通常只會使用一種字體(不包括英文),但有時候也可以試試用兩種字體搭配來使用,比如手寫字體搭配無襯線字體,這兩種字體在風格上完全不一樣,對比非常強烈,能夠給版面帶來新意。

          圖片

          由于該中文標題過于簡短,所以搭配上英文會更豐富一些。

          圖片

          正文刻意與標題進行了錯位排版,當然,同時也保持著某些對齊關系,圖片的排版同樣如此,與正文錯位,但與標題左對齊,整個版面既靈活又很有序,符合學校畫冊的調性。

          圖片

           

          04.文字疊加色塊

          加色塊是標題設計中常用的手法,但如果只是用一個色塊把標題包住,那么效果是比較普通的,很容易像促銷折頁的做法。所以我們可以只把色塊作為標題的一個裝飾元素,用一個小小的色塊放在標題后面,使其視覺上更豐富、更突出。

          圖片

          圖片

          圖片的刻意錯位很關鍵,如果圖片與正文兩端對齊,那么英文標題、正文、圖片、頁碼都是沿著一條直線對齊的,整個版面就會變得生硬很多。

          圖片

          文字加色塊還有另一種效果也不錯,即把文字色塊合并在一起做成補丁效果,首先把文字錯位排版,然后分別給每一行文字加一個色塊把文字框住,色塊與色塊上下相連。

          圖片

          搭配上序號和英文標題,豐富標題的對比關系,使其更美觀、更有設計感,色塊可以根據需求適當超出文字的長度。

          圖片

          正文的排版我做了一點改變,把第一段單獨拿出來作為引文使用,剛好這段文字在內容上也正好是起到提前說明的作用,這樣處理后這個版面也變得有了一些新意,標題十分顯目。

          圖片

          圖片

           

          05.手寫體跨版

          在畫冊設計對于有些版面,可以排得大氣一點,比如把原本可以1P排完的內容排成一個跨P,這時標題也可以拉大跨版排列,這種做法可以加強文字的大小對比,也會有更多留白空間。

          圖片

          為什么用手寫體呢?宋體和黑體不行嗎?其實也可以,不過由于漢字的筆畫比較復雜,宋體和黑體又比較方正,所以拉太大排列時會顯得不夠靈活,如果是英文則會好一些,所以在排版的時候我還做了了傾斜與裁剪處理,并且搭配了英文進行錯位排版,不然會顯得過于單調。

          圖片

          06.標題與正文左右排版

          在豎版的畫冊中,我們通常喜歡把標題排在正文的上方,而如果把標題與正文左右擺放,那么又會有種不一樣的感覺。

          但不要把標題與正文水平對齊,那樣的話標題的空間就過小了,會顯得很壓抑,而是要把標題放在正文的左上方,并保持某些對齊關系。

          圖片

          如果把這種排版方式看成是分欄網格,那么它屬于不對稱網格,即正文欄應該比標題欄更大一些,以保證有足夠大的空間排列正文內容。標題欄可以有大量留白,頁腳可以與標題形成呼應,豐富版面的細節。

          圖片

           

          07.扭曲標題

          這種標題處理手法在海報設計中比較常見,其實國外很多畫冊也這么做,效果很酷,沖擊力很強。

          圖片

          用中文來做這種效果行不行呢?也可以,不過不適合太嚴肅的畫冊,用在設計類和時尚類的畫冊中會比較合適,比如前面列舉過的設計書籍的排版。
          由于文字較多,所以進行分行錯位處理,然后在頂部菜單欄中選擇對象-封套扭曲-用網格建立,把網格參數設置為3行5列。
          圖片
          移動網格的錨點使文字呈波浪形,如下圖。

          圖片

          拉拽錨點左右兩邊的手柄使波浪形變得柔和一點。

          圖片

          波浪效果做得差不多后,按快捷鍵E調出自由變換工具面板,并選擇自由扭曲工具,把標題扭曲成如下效果。

          圖片

          再調整一下細節,然后把它放在版面中,把內容篇章的序號處理成描邊樣式與標題疊加在一起,可以起到裝飾的作用。

          圖片

          扭曲的標題搭配上鮮艷一點的顏色,效果會更時尚,對于這種版面,正文也不要排得過于規矩,所以,我刻意把版面中的兩張圖片做了錯位處理。

          圖片

           

          08.打散排列

          通常我們會把標題文字集中排放,但對于設計和時尚類畫冊,我們可以打破傳統的做法,把標題做適當的分散排版,效果也很不錯,當然,標題文字如果太少就不合適了。

          圖片

          另外,為了使標題更特別 ,給文字加上下劃線效果會更好,并且下劃線可以根據需求適當延長,以加強這些分散文字的關聯性,甚至還可以加上英文做裝飾。

          圖片

          正文的排版與標題文字左右兩端保持對齊。

          圖片

          圖片

           

          圖片

          設計是一個不斷嘗試、調整的過程,排標題同樣也是如此。另外,標題的排版固然是很重要的,但是想要整體效果得到比較大的改善,正文、圖片、頁眉、頁腳、頁碼的配合也很重要,永遠要把整體的大效果擺在第一位。

           

          原文地址:蔥爺(公眾號)

          作者:蔥爺

          轉載請注明:學的UI網》讓設計感暴增的8個畫冊標題排版技巧

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          B端幫助體系二三事

          seo達人


          前言

          業務性強,內容復雜度高是To B產品的典型特征。新用戶需要快速認知平臺能力并順利上手,老用戶則需感知信息的變化、功能的拓展并迅速響應。體系化的幫助是通過在操作的不同階段提供差異化的引導及反饋,助力用戶在應用中成長。

          幫助體系是什么

          通過大量的案例積累及系統調研,發現“幫助”并不是單一的某個功能,而是一種體系化的能力,需要通過不同手段來實現。概括來說就是“在產品使用不同階段為用戶提供恰當的提示與指引,通過組件的靈活應用及能力創新,幫助用戶降低認知成本,提升操作效率?!?/strong>

          用戶對產品的應用周期經歷前、中、后三個階段,每個階段的設計目標都各不相同:操作前注重提升用戶的全局認知,深化理解,助力精準觸達;操作中助力提效,讓用戶知道做什么,怎么做;操作后明確反饋,幫助用戶明確結果。

          圖片

          操作前:引導用戶深化理解,提升全局認知

          用戶有新老之分,對系統的熟悉程度及應用訴求不同。因此針對不同用戶各階段的使用訴求進行場景化的拆分,提供差異化幫助。

           

           

          幫助用戶深入自主的認知平臺

          我們到陌生的地方會找導視標識或者找人尋求幫助,新用戶到平臺內也會面臨同樣的困境,遇到問題無從下手時會尋找含有【幫助】【客服】字樣的內容,那么幫助中心、智能助手這類有明顯特性的功能則會成為用戶遇到問題時的第一選擇。通過業務思考及行業調研,以簡潔、高效、情感化為目標最大化的發揮其屬性優勢,讓用戶在使用過程中更易理解和接受,平穩有效的幫助用戶渡過新手期。

          1、幫助中心

          幫助中心,一個時常被忽略并被嚴重低估的功能。它是平臺全量信息集合地,不僅能幫助用戶系統了解平臺概況,也能引導用戶行為,樹立品牌形象。為保證用戶高效、便捷的獲取幫助信息,在頁面表現上需突出內容本身,忌過度裝飾。從設計角度來看,一個好的幫助中心應該符合以下條件:框架簡潔清晰、信息突出并輔以錨點定位。在框架設計上一般將頁面分為導航區、內容展現區兩部分,導航與幫助內容對應性強,層級簡單,能讓用戶在短時間內了解平臺能力構成;幫助文檔內容一般復雜冗長,錨點定位可以充當文章大綱,輔助用戶精準定位。

          圖片

           

          2、智能助手

          通過內置的幫助和指導性說明來解答用戶使用產品過程中遇到的簡單、共性問題,降低人工客服響應成本。智能助手包含兩部分:入口與懸浮窗口。入口一般懸浮于頁面右下角,點擊后觸發懸浮窗口。

          圖片

           

          市面很多助手能力較單一,僅能機械處理通用問題,無法提供多樣化幫助,很容易讓人覺得是個沒啥用的擺設,對它慢慢失去信任。為重新喚起用戶的信任,需要在設計上注入一定的生命力,讓用戶覺得易接受、有選擇、有溫度,從而真正用起來。

          1)懸浮窗口能力多元化。作為承載智能助手核心能力的懸浮窗口,優化方向有以下三點:首先,智能助手與用戶的交流不再局限于單純的問答,而是根據賬戶屬性向用戶提供高頻問題集合,并根據用戶的回應拓展更多問題,提供多維化的幫助。這個主動性的幫助不僅讓用戶感受平臺的溫度,無形中也降低了用戶的思考成本,更快的熟悉平臺能力。

          其次,每個問題旁邊都提供“是否有用”的按鈕供用戶評判。此功能不僅為平臺答案提供了優化空間,也強化了用戶對平臺建設的參與度,讓助手與用戶共同成長。

          最后,對話窗口也可拓展輔助能力,例如常見問題、快訊、快捷入口等,為用戶所想的同時也提供更便捷的站內流動通路。

          圖片

          2)入口形象IP化、情感化。除了自身能力外,入口的設計則會提升功能的存在感,從而吸引用戶的關注。首先品牌ip形象的植入會讓入口更生動,在喚起用戶注意的同時強化品牌印象。其次擬人化的主動問候能提升平臺的親切感,拉近與用戶的距離。

          圖片

           

           

          助力用戶精準觸達

          新用戶對平臺相對陌生,恰當的引導能讓他們快速關注重點。老用戶對平臺的定位及能力相對熟悉,目標性更強,但在應用同時也抱有更高期待。因此恰當的引導能幫助他們快速了解平臺變化并精準觸達。作為產品設計者,也希望對用戶行為進行有意識引導,讓用戶能發現、探索平臺新能力,或能夠按照我們的希望使用產品。公告彈窗、新手引導、全局提示這三類方法可幫助用戶高效獲取信息并助力精準觸達。

          1、公告彈窗

          常用于系統升級告知,以模態彈窗表達,讓用戶聚焦當前內容并支持跳轉了解詳情。公告樣式根據內容細分為三類:版本更新提示、重點升級告知、常規通告,不同類型需根據信息量多寡差異化表達。設計時可輔以插圖或其他視覺元素烘托氛圍,并在文案上注入情緒化的表達,從而提升用戶的關注度。

          1)「版本更新提示」承載簡單介紹內容,讓用戶關注且快速獲取變更信息。

          圖片

           

           

          2)「重點升級」當有若干重要功能更新或新增時,可用此形式突出重點。

          圖片

          重點內容露出建議2-4組為佳,彈窗寬度可根據內容適配。

          圖片

           

           

          3)「常規通告」常用于文案較多的場景。設計上需要弱化視覺氛圍,突出內容本身。

          圖片

           

           

          2、引導類

          針對局部功能升級的提示說明,一般與元素綁定關系較強,可讓用戶直觀了解關注點,提升功能觸達率。雖然此類引導輕量便捷,容易幫產品提升數據指標,但要注意適度應用。根據功能重要度、操作復雜度將引導總結為分步式、氣泡、閃點、操作示意4類。

           

          1)「分步式引導」常用于頁面多個功能升級的引導組。當頁面有多個升級點,直接平鋪會讓頁面臃腫不聚焦。為了讓用戶高效獲取信息,建議一次僅顯示一條,通過「下一步」操作,逐步喚出剩余引導。為避免步驟過多導致用戶疲勞,建議最多不超過5步。

          圖片

           

          2)「氣泡式」相對輕量的引導,有足夠的提示性但不影響其他功能操作。

          圖片

           

          3)「閃點提示」微輔助型提示,常與氣泡引導配合使用。在需要關注的地方閃爍,點擊閃點后喚出關聯氣泡提示。不對用戶造成視覺干擾,又能引起一定的關注。

          源圖像

           

          4)「操作示意」當無法用圖文清晰描述操作路徑時,以動態形式表達。

          圖片

           

          3、全局提示

          重點信息的匯總或提示。此類提示完美融合于頁面,醒目且對操作無干擾,用戶可根據披露內容判斷是否處理。通過警示、徽標的應用向用戶傳達信息的變化并提供快速觸達的能力,無形中提升用戶響應效率。

          1)「警示」不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部,為用戶順利操作提供指引性幫助。既不打斷用戶當前操作,又足夠明顯,一般需手動關閉或事件結束后自行消失。不同顏色屬性不同:一般藍色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯誤或異常等情況。另外,也可作為反饋應用在一些需要明確指示的操作后場景,此處暫不展開討論。

          圖片

           

          2)「徽標」形態各異的小紅點。常出現在圖標、按鈕右上角的紅色圓點、數字或文字,簡單且醒目。表示內容更新或有待處理的信息,此類提示符合用戶心智,無需教育就能向用戶精準傳達提示意圖。

          圖片

          使用時注意無數字與有數字的應用場景。有數字的徽標給用戶帶來的心理壓力會更大,也會更吸引用戶注意力,同時需注意數字長度控制。

           

          操作中:具體的提示,助力高效填單

          存在于操作的具體任務中,通過提示、推薦、預置信息等方式降低用戶的認知及操作成本,提升填單效率。

           

           

          提示說明

          1、文案提示  

          平鋪在元素附近,對重點或復雜功能提供直觀描述或建議。帶有引導性的文案處理,會促進用戶優化填寫方案,輸入更合適的內容。應用類型有三:重點提示、輔助說明、占位提示。重點提示與輔助說明使用戶無需猜測;占位提示可使用戶能夠快速明確輸入規則。因表達側重不同,表單設計時三者搭配效果更佳。

          圖片

           

          2、工具提示

          此類信息作為文本解釋層級較低,無需直接展示。通過懸浮或點擊元素觸發對應說明,以氣泡形式出現。觸發式的展現既能避免非必要信息堆疊導致的頁面臃腫,又能保證需要的時候有跡可循。

          圖片

           

           

          智能化

          當一個系統背后的產品設計者考慮足夠全面,能夠預判用戶的預期,那么它就能主動的給用戶提供建議和幫助,甚至幫助用戶自動執行一些任務,最大化減輕用戶的決策壓力。但值得注意的是,“智能化”需要一定的產品能力及豐富的數據作為支撐,設計時需結合實際情況應用。

          1、信息預置

          系統根據賬戶屬性自動為用戶預置內容。如下左圖可見,僅需要填寫一條內容,其他對用戶利益無損的內容可通過預置選項來提升填單效率。

          圖片

           

          2、智能推薦

          此類設計的前提是平臺有足夠的數據積累,通過大數據或業務特色為備選內容打標簽建標識。常用的設計方法有兩種-為用戶提供可視化標簽,助力用戶快速決策;交互手段簡化,由多信息錄入變為直接選擇,強化推薦內容展示性,從而降低操作中的思考和錄入成本。

          場景一:「幫助決策」

          表單中有大量需要用戶錄入的字段,在無任何參考的情況下用戶用于決策的時間及輸入內容的合規性無疑對填單效率造成一定影響。下圖可見推薦標簽能幫用戶提供方向及邊界,輔助用戶決策,降低思考成本。

          圖片

           

          場景二:「提升填單效率」

          以單元創建為例,傳統路徑如下:新建>填寫表單>保存>再次新建>再次填寫表單…以此往復。用戶每建立一個單元均需要把同類型的內容填寫一遍,耗時費力。而智能推薦將常規表單輸入變為模版選擇,僅需2步就可完成多個內容創建:輸入關鍵詞>選擇模版。選擇和瀏覽的成本遠遠低于數據的頻繁輸入,模版設計則通過簡潔的樣式及內容層次化的展現提升信息獲取效率。通過路徑及交互方式的轉變,上線后數據反饋操作效率大幅提升。

          圖片

           

          3、預覽能力

          當操作過程較為復雜或結果難以預測時,可視化的預覽可及時展現結果樣式,方便用戶實時調整,提升操作安全感。

          圖片

           

          操作后:及時有效的反饋

          及時響應操作成果,將功能的運行情況、數據的對錯反饋給用戶,及時有效的幫助修復輸入中的問題。常見的反饋有以下四類:toast、表單錯誤校驗、模態彈窗、獨占式頁面,每種樣式因干預強度不同而適用不同的場景。

          圖片

           

          1、Toast:一般3s左右消失,因體積小、展示位置靠上、自動消失等特點時常被用戶忽視。常用于操作結果、系統性等等無明確后續指引的反饋,例如“提交成功”、“操作失敗”、“服務器無反應”。

          圖片

           

          2、錯誤校驗:當表單出現輸入錯誤時,按照就近原則在錯誤附近為用戶展示明確的提示性消息,糾正和引導用戶的輸入內容。

          圖片

           

          3、彈窗提示:提示性和阻斷性都很強,能夠讓用戶聚焦信息本身。通常提示內容可為用戶提供指向性引導,需要強關注。

          圖片

           

          4、獨占式反饋:提交后頁面切變為獨立展示的頁面級狀態反饋。比彈窗的阻斷性更強,信息獲取更沉浸。在設計時建議搭配狀態插圖強化氛圍,并提供操作按鈕為用戶提供通路。

          圖片

           

           

          章尾總結

          幫助體系的出發點就是在盡量降低人為干預的基礎上,減少用戶在不同使用階段中的刻意思考與尋找,從而提升操作的順暢性及用戶的認可度。綜上就是在不同操作階段可用到的設計方法,盡管有些手段并不起眼,但也正是這些點滴的聚集和系統的應用為用戶帶來無聲的幫助,讓B端產品使用體驗變得高效且富有溫度。

           

          原文地址:百度MEUX(公眾號)

          作者:商業用戶體驗部

          轉載請注明:學UI網》B端幫助體系二三事

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          日歷

          鏈接

          個人資料

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

          存檔

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