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

          首頁

          動效的質感

          純純

          01 動效的質感

          動效的質感主要由時間、速率、運動理念、運動方式等來表現。動效設計不僅僅只是動而已,作為設計師需要洞察更多的動效細節。通過對動效細節的把控去營造自然真實的動態體驗,并根據產品品牌特性去建立其動效理念。







          1.質感表達-速率

          速率影響著運動的質感。讓我們做一下對比實驗,在相同時間以及運動效果下,只改變運動元素的速率曲線并觀察它們的變化。兩元素為一組,一組速率曲線較陡峭而另一組則偏平緩。通過改變速率曲線,元素在下落運動中所呈現的物體質量也有明顯差異。運動曲線較陡峭且速率對比較大則會導致元素的質量更重沖擊感更強,反之較平緩的曲線元素運動則較為輕盈。







          2.質感表達-時間

          時間的變化感知是較為直觀的,我們可以通過調節運動時間的長短來表現物體的運動性格。時間越少,運動越快速干脆且可感知的運動細節更少。時間越多,則反之。







          3.質感表達-運動理念

          不同的運動理念會給物體帶來不同的質感表現。舉個例子一個活潑有活力的物體在運動的表現上會較為柔軟Q彈,就需要通過回彈擠壓來體現自身的質感。而運動理念生硬的物體,則相反。運動理念與產品品牌調性有關,根據品牌特性我們可提取一些適合的運動理念或在自然理念中吸取靈感,將其應用在自身的產品上可以更好的體現品牌價值。







          4.質感表達-運動方式

          運動方式依附于運動理念,是產品運動質感的一種表達方式。例如運動路徑是曲線還是直線?空間的景深程度是如何的?可以明確感受到空間感嗎?整體方式是基于效率還是表現力?在這一塊,也需要設計師根據品牌調性及產品屬性去作考慮。








          02 質感調節

          因為運動曲線的存在,動效才會表現的如此自然。設計師可以通過曲線的方式進行運動速率節奏的編排,從而實現設計師們想表達的動效調性。在影響運動質感表達的部分速率的編排占了比較大的比重,借此機會講述下運動曲線的基礎知識幫助大家更好的理解曲線。


          打開AE關鍵幀控制面板我們可以看到有兩種曲線的表達圖示;一種為速度曲線圖表一種則為數值(屬性)曲線圖表。







          速度曲線

          速度曲線記錄的是物體運動每一刻的速度變化。我們來分解下它的曲線圖表,x、y軸分別表示的是時間與速度。觀察下圖的曲線則可以得出物體起始速度為0呈靜止狀態,后續慢慢開始加速并且速度達到頂峰;最后物體運動至終點并停下。整體圖表展示較為直觀,經過分析我們可以得知整段運動其實就是我們熟知的緩動運動(起點和終點慢,運動過程快)





          對于速度曲線的編輯,設計師可以通過曲線手柄來控制運動節點的加速度。讓我們雙擊節點查看關鍵幀速度圖表來分析下速度曲線的基本規律。此時速度圖表顯示傳入速度(incoming Velocity)為0,影響為33%?!競魅胨俣取刮覀兛梢岳斫鉃檫\動起點的速度,而「影響」這個數值則可以理解為加速度。傳入速度需要百分之多少的加速度即可達到最高速度,數值越大即代表加速的幅度越大曲線呈現的陡峭程度就越陡峭。








          技巧貼士


          速度編排

          當設計師們想針對物體運動速度做一些特殊的編排處理,使用速度曲線會更直觀一些。例如:想要模擬小球彈跳過程中的滯空感,我們只需調節小球懸空時的速度大小及加速度即可。想要達到滯空的感覺,那運動中程球體的速度需要大于0讓球體持續運動,就能達到我們想要的效果了。






          表達式應用

          我們經常會在動畫內使用彈性表達式,許多設計師也遇到過表達式輸入后還是沒效果的情況。其實是因為當前關鍵幀的速度為0而導致的,除表達式所設置的彈性頻率、衰減度外;速度也決定著彈性的強度,我們只需根據速度調節自己想要的彈性效果即可。







          數值曲線

          數值(屬性)曲線記錄的是元素屬性隨著時間的變化過程。我們也來分解下它的曲線圖表,x、y軸分別表示的是數值(當前運動變化的屬性)與時間。而該曲線代表著物體運動速率的分布情況,也就是速度等于=物體運動的距離(數值)/物體運動距離所花的時間(時間)??赡芸粗酵唵蔚模ǔ踔形锢恚┑б豢磮D表還是比較抽象,我們可以一步步的將其拆解方便大家理解它的含義。


          Step.1

          我們先確定元素位移時間以及距離,在不添加任何緩動插值的情況下,賦予他們最基礎的線形運動。也就是從0~1秒它的速度是呈勻速的狀態。再將整條曲線分解成平均的幾個關鍵時間點,記錄元素在不同時間點所在的位置。





          Step.2

          根據速度公式,我們去測試下速度的變化對曲線的影響是什么?關于速度的計算公式其實我們都知道的,速度等于單位物體的位移距離除于位移所花的時間,也可以理解為圖表中的速度就是線段的斜率。





          Step.3

          接著讓我們將其速度提升一倍,從1秒的總時長提到0.5秒的時間。根據圖示我們可以觀察到當我們將時長加快時,速率線段與我們的x時間軸的角度越來越大。同理我們嘗試下將運動屬性數值降低一倍,我們可以觀察到此時速率線段與我們的x時間軸的角度越來越小。我們通過上述的拆解分析,可以得到一些規律。在數值曲線下,時間以及運動屬性數值影響著物體運動速度。根據曲線陡峭程度影響著運動速率快慢的規律,我們可以總結一個觀察曲線的技巧。曲線越緩和(貼近時間軸x)速率越慢,曲線越陡峭(貼近數值軸Y)速率則越快。





          Step.4

          在弄明白了數值曲線的基本規律后,我們將曲線做一些處理讓他更貼合于我們的現實自然運動。模擬現實物體運動的狀態,物體剛開始慢慢起步再到加速的過程。如下(P1)圖所示數值曲線在前半部分速率較慢,到達時間中點后突然增速并到達終點。將曲線作一定的平滑過渡處理就是我們所熟知的緩入(P2)曲線啦。







          運動曲線的使用建議

          對于不同的運動曲線模式(速度/數值),設計師們需充分了解其曲線模式的含義。我們可以根據設計場景去選擇適合的曲線模式,關于場景還有很多,我大概羅列了部分項目接觸到的特定場景出來。主要目的是想讓大家意識到熟練的掌握兩種運動曲線模式的重要性,別將自己的工作方式或習慣限定太死,靈活的變通很重要。



          速度曲線:

          1. AE動畫中部分無具體數值單位的動畫幀,例如(蒙版路徑),設計師們只能通過速度曲線進行調節。

          2. 使用彈性表達式需根據速度大小去調節彈性強度。


          數值曲線:

          1. 在UI交互動效的設計場景,數值曲線適應于落地開發的貝塞爾曲線插值器。

          2. 數值曲線是C4D動畫的默認函數曲線模式,在C4D中無法調節速度曲線。






          03 運動的類型

          通過上述分析我們對運動曲線模式的了解更進了一步,接下來讓我們結合案例探究下不同運動曲線類型的含義以及應用方式。減少大家在動效設計過程中的公式化硬思維,提升自身對于動效的編排能力。







          緩入曲線

          緩入運動即加速運動,物體運動的時候都需要一個加速過程,并不會馬上達到速度的最高峰。觀察自然世界,有許多類似的運動案例例如彈弓以及汽車發動等。在交互動效中緩入運動會運用在元素離開頁面的情況。



          動態感知

          這里的離開指的是元素永遠離開屏幕并且無法讓我們返回的操作例如,彈窗、通知等。元素將會一直加速至消失,且告知用戶該元素不會再出現在頁面某個角落了。







          緩出曲線

          緩出運動與緩入運動相反,描述的是元素的減速運動。類似于我們生活中行駛中的汽車減速的案例。我們可以利用緩出運動表示界面外的元素進入屏幕,即元素以高速度進入屏幕慢慢減速至靜止的過程。



          動態感知

          結合自然世界的運動規律來看,把頁面進入的元素比作是行駛的汽車,用戶當作是正在斑馬線上行駛的人,將馬路作為頁面空間。若汽車采用的是緩入運動(加速)的話,馬路上的行人則看到的是一輛不斷加速向他行駛過來的車輛。因為擔心車輛高速的逼近導致剎車不及時的情況,行人便會本能的作出躲閃的反應。其實頁面也是一個道理,進入的元素使用加速運動出現過沖的運動感知會讓用戶體驗時產生不適。







          緩動曲線

          緩動運動即我們所接觸的常規運動類型,在運動開始慢慢加速再到運動結束慢慢減速的過程。該運動符合自然世界大多數物體的運動邏輯,也是頁面中經常使用的曲線類型。



          動態感知

          閱覽Material design動效模塊中關于緩動曲線的描述,適當的增加曲線的不對稱感可以讓運動更加真實。我們可以根據頁面元素運動邏輯和產品品牌特性來設定緩動曲線。緩動曲線適用于大部分在頁面中運動的元素,當元素在頁面消失且用戶可進行返回等操作時也應使用緩動曲線。






          彈性運動

          在現實生活中,因為作用力與反作用力的存在。皮球觸碰到地面會不斷彈起,而用手推船,船就會離開岸邊。這就是我們所說的彈性運動。彈性曲線與其它曲線(常規緩動)有些許差異,彈性曲線由兩個值影響著它;彈性阻尼以及振動頻率。





          對比差異

          彈性曲線相比常規運動曲線更貼合自然運動現象,在運動的衰減過程更為真實。早在ios7中,蘋果就已經大范圍使用該類曲線。例如APP收起展開、預覽窗口收起等。彈性運動并非需要表現出明顯的回彈感,就算運動無明顯的回彈感其效果相比常規曲線實現的運動啟動速度更快,且會有更長的一段衰減距離。讓用戶更加集中于物體運動的衰減過程(結尾)而并非加速過程,也使得ios的使用體驗更符合自然規律以及交互反饋更為真實流暢。





          對接落地

          與常規的緩動曲線不同,設計師可在Framer、Protopie、flinto、principle等軟件根據自身需求來嘗試并輸出彈性運動相關數值提供于開發。對于不同(ios/安卓)平臺關于彈性數值單位的轉化,設計師們可根據MartinRgb的Animator list網站去模擬各端彈性運動的數值來對接開發。

          Animator list:http://www.martinrgb.com/Animer_Web/#





          動態感知

          彈性運動可賦予物體材質,通過彈性運動我們可以表達產品的品牌調性。例如面向低齡人群的產品或是娛樂類型的產品可在產品內大范圍的使用彈性運動去傳遞產品品牌的運動感知。除此之外,彈性也存在不少寓意。對于ios中使用的彈性運動,官方說法是基于用戶行為的獎勵反饋。如果用戶滑動操作UI元素的話,就有回彈,顯得用戶滑的力度很強,是一種獎勵性反饋使得用戶的體驗過程更為真實自然。彈性也具備提醒的作用,吸引用戶對元素的注意力以及提示用戶該元素可進行逆操作等。同時切忌在頁面中使用過多的彈性運動,設計師們在使用前需要充分的考慮當下頁面使用場景、產品品牌調性等因素。






          04 理念的形成





          動態語言

          現在越來越多的公司開始制定自己的設計語言/理念,像Material Design、IBM、IOS等。對于"動效"目前市面上大多數產品有著自己的動效規范,但并沒有上升到語言理念的層面。規范并不等同于語言,語言應反應其品牌特性和靈活性。為此最后分享下個人目前對于動效語言的理解,以及關于動效語言制定的技巧經驗。





          語言的構成

          作為互聯網設計師的我們都熟知視覺語言的概念,通常我們會根據產品所傳遞的品牌特質去制定產品的視覺語言。動態語言也是如此,通過提煉產品品牌氣質去傳遞一種感受。我們的動態體驗是什么樣的感受?是高效簡潔的還是活潑具有表現力的?為此我們可以找尋對應的品牌核心理念或是運動現象,組合提煉出符合品牌調性的理念和感受。





          提煉感受

          動態所傳遞的感受是感性與理性的結合,在感性層面我們根據產品的品牌形象提煉出相應的情感感知。而在理性層面我們需要分析產品受眾用戶特征以及產品類型業務屬性等,針對其特征進行產品體驗感知的傳遞。根據提煉結果,我們可以得出初步的動態感受。






          理念孵化

          以提煉的動態感受為出發點,理性的層面給予了我們大致的產品體驗感知,為我們的動效理念建成提供了框架。對此我們將繼續從感性層面出發,找尋可傳遞品牌感受的運動現象并加以組合提煉;將運動特征以及動態感受落點于實際的動態理念。這個過程與品牌設計非常相似,動效理念的孵化應充分考慮情感層面品牌感受的傳遞。而并非只考慮理性層面的感知,忽略其品牌氣質的塑造。





          語言形成

          到這一步,動效語言的雛形已形成。通過感性與理性兩個層面去呈現「感受」,明確產品需給予用戶什么樣的動態感知。后續我們可以結合動態理念去進行動效原則的總結,根據原則去輸出后續的動效規范并進行推動落地。





          語言的價值

          建立動效語言體系,而并非只是建立規范。動效語言的價值除規范統一及體驗優化外,更重要的是傳遞產品品牌調性。以動效為例,用戶使用產品所接觸的交互動效、視效動效等其表現的動態感知都在潛移默化的影響著產品的使用體驗以及品牌形象。在目前大家都在注重設計帶來的短期商業價值的環境下,設計師也應重視下產品品牌、體驗價值的建設。




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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          醫療應用系統的設計思維

          純純




          目錄


          一、項目背景

          二、項目分析

          三、風格探索

          四、設計原則

          五、深色模式

          六、設計規范

          七、總結


          一、項目背景


          這家公司主要致力于研發醫療大數據和人工智能驅動的智慧醫療產品,其產品主要用于疾病的預測、篩查、診斷和治療的各個環節,主要聚焦于人工智能醫學影像領域。


          產品定位

          1、開發定位:web應用;

          2、用戶群體:從事醫療行業的醫生;

          3、功能定位:解決的是醫生閱片花費時間過長的問題,能夠輔助醫生智能診斷的工具型智能應用系統。

          二、項目分析


          從前面的產品定位,可以得到以下三個關鍵詞:web、醫療、應用,同時根據這三個關鍵詞可以延伸出一些問題,然后開始著手準備前期設計工作。


          A、醫療設計注意事項

          1、醫生的操作交互模式習慣于之前固有的Pacs閱片系統,設計時要尊重現有的交互模式;

          2、因為多數影像科的使用環境都比較暗,所以界面整體風格采用深色模式。

          3、因為有很多專家都是比較年長的,考慮到這一特點,在制作設計稿時字號不能太小。但是信息內容又多,字號大的話信息很難布局,這是一大問題;

          4、和第3點類似,影像應用要求給影像顯示區域留有足夠的空間以,這就導致其它文字內容的空間又被壓縮了,其它文字內容的顯示又成了問題;

          5、安全性,涉及到很多病患的信息,如何體現安全性很重要;

          6、整體風格上趨于保守,因為是為醫院設計的,顏色使用上相對來說要克制。

          B、web設計注意事項

          1、最明顯的是用鼠標操作系統,鼠標的交互方式多,有hover、click、滾輪、左右鍵等等。而鼠標右鍵一般是瀏覽器自帶的功能,不方便定制。

          2、pc端瀏覽器右上角帶有關閉瀏覽器。同時自帶后退、前進、關閉的按鈕,有點類似于安卓系統自帶返回鍵。這些功能影響著應用信息保存的交互問題;

          3、布局問題,瀏覽器可自由伸縮,會影響頁面的布局;

          4、設計時不存在@2x、@3x這些問題,采用@1x設計就可以,可以給設計和開發帶來不少便利,有些切圖為適配高分辨率的屏幕需要切2倍3倍圖;

          5、頭部瀏覽器自帶菜單欄,會影響縱向空間的布局;

          6、什么時候新開標簽頁和什么時候在當前頁面跳轉問題。研究顯示,國內網頁多喜歡新開標簽頁,國外網頁喜歡在當前頁面跳轉,但是應用類型的網頁更多的還是在當前頁面跳轉;

          C、中后臺系統應用設計注意事項

          1、中后臺系統信息繁多,因此系統用起來體驗好不好、效率高不高尤為重要,在醫療行業更是如此。如何用設計區分信息的層次,并且在有限的空間展示盡可能多的信息是設計的首要任務,為了展示正確的信息哪怕展示方式不對也比設計的好看而信息展示不全要好。

          2、盡可能的優化操作流程,再精美的設計也不如優化一兩個流程效率來的快一些;

          3、交互點到為止,盡量少用復雜的交互方式,比如拖拽,雙擊和右鍵都盡量少用;

          4、對顏色和icon的運用要謹慎一些,以免造成多余的認知障礙。由于文字能夠傳達清晰準確的信息,無疑是更好的設計元素。

          5、即時反饋是提高效率的有效手段。

          三、風格探索


          A、布局

          我們采用左右布局的設計方案,將左側菜單欄固定,右側工作區域動態適配。菲茲定律表明:越遠難點擊,越近越容易點擊,靠近邊緣更容易點擊。因此菜單欄在左側時,當瀏覽器全屏時,點擊左側的菜單相當于是點擊邊緣的目標,這種操作路徑用戶所花的時間是最少的。而當菜單欄在上方時,因為上方有瀏覽器自帶的菜單欄,會影響用戶的操作,因此用戶點擊起來所花的時間更長,也容易操作失誤。

          B、色彩

          醫療產品多采用藍色作為主色調,藍色具有安靜、信賴、科技的色彩象征,然后綠色是生命、醫療的象征,所以最后選擇了一個藍色偏青的色彩,比較符合現有的產品調性。另外因為影像科工作環境多為暗室,所以界面整體采用深色模式設計,字體顏色的選取注意WCAG規范,文本和背景的對比度至少要有4.5:1。

          C、字體

          我們最開始設計demo時,常用文字使用的字體大小是12,而醫生試用后反饋字體太小。原來有很大一部分醫生專家都是比較年長的,12對于他們來說字體小了點,因此我們決定采用14作為主要字號,12作為輔助說明文字。

          D、圖標和圓角

          為了更好的搭配深色模式,我們決定圖標采用面性圖標(后文會講解)。圖標和按鈕的圓角也采用了直角硬邊風格代替了常見的有圓角風格。硬朗的圖標有一種精確性、科技感,更符合產品調性。


          四、設計原則


          A、層次清晰

          中后臺系統有信息繁多,這就需要設計來區分信息的層次,引導用戶去關注最重要的東西,“偷偷地”給用戶一種高效的體驗。這里根據《寫給大家看的設計書》當中的四大原則:對比、對齊、親密性、重復,來區分信息的層次。

          ①、對比

          對比即為設計元素的對比,可以是顏色對比、字體對比、大小對比等等。恰當的對比能讓看起來更有層次,能給產品提供一種韻律美。通過對比可以引導用戶的視線,減少用戶的選擇時間,間接的提高了使用效率。

          ②、對齊

          對齊作為設計的最基本原則,是建立秩序的一種最基本手段,合理的利用對齊方式能夠有效地提高用戶體驗。常見的對齊方式有左對齊、居中對齊、右對齊、兩邊對齊。在中后臺系統中常常出現標題長度參差不齊,表單內容長短不一的情況,這種情況不論是左對齊還是右對齊都會出現不整齊的問題。而這時,我們往往要考慮的已經不是美的問題,而是哪種方式更能夠提高用戶的使用效率。

          ③、親密性

          親密性能夠讓內容凝聚在一起,產生層次而不凌亂。信息的關聯性越高,它們之間的距離應該越近,反之就應該越遠。在本系統中頁面中的縱向間距采用小、中、大三種間距來區分層次,分別是8px、16px、32px,以此來體現頁面的組織性。另外,一些特殊情況,比如空間有限,最小間距可以是4px。其它不適應的情況統一采用8的整倍數定義間距。

          ④、重復

          相同的元素在頁面間的重復運用,可以有效的降低用戶的學習成本。也能夠幫助用戶識別出這些元素的關聯性。重復的元素可以是某個顏色,某種樣式,某個布局。這里主要講重復在不同產品之間的應用,不同產品之間有相同的結構布局、相同的配色能夠讓用戶快速上手我們的產品,同時也是對品牌感的一種強調。例如:由于醫生以前習慣于使用醫院的pacs系統來閱片,所以在影像顯示頁面,我們延用之前pacs系統的布局,讓醫生找到一種熟悉感。

          B、即時反饋

          人機交互時,系統及時給出反饋非常重要,反饋能夠給用戶確定性和安全感。如果用戶操作了系統,得不到相應的反饋,用戶往往覺得系統是不是出錯了,就會給用戶造成一種負面使用體驗。常見的反饋形式有確認反饋、警告反饋、錯誤反饋、狀態反饋。本系統中從患者拍片、系統智能分析、醫生審核、保存打印,各個步驟都應該有確認反饋、警告反饋、錯誤反饋、狀態反饋,只是反饋的形式可能是彈窗,可能是顏色的變化,可能是符號的提示等等。這里舉例最基本的按鈕一定要有normal、hover、click、disable,不然用戶不知道自己的操作是否起作用了,給用戶造成認知障礙。

          C、簡單有效

          奧卡姆剃刀原理講究設計時避重趨輕、避繁逐簡、以簡御繁、避虛就實,因此在設計時,我們會和產品經理商量有些功能是否真的有必要放上去,或者有些信息是不是可以隱藏。例如:搜索欄,按照醫生閱片流程來看,醫生是很少會使用到搜索功能的,即使用到了,搜索病人ID就足夠了,其它項目的搜索完全可以放到高級搜索里。再比如病人列表里,往往會因為列表項太多使整個表格看起來非常臃腫,于是我們篩選出了最重要的7項,其它不是那么重要的,我們就以自由定制化的形式放在右側,醫生可以根據自己的需要進行定制。

          五、深色模式


          前文提到,根據醫療產品的特性以及用戶的使用環境,我們的系統采用深色模式。然而深色模式并不是簡單的背景色使用深色那么簡單,因為背景變成了深色,相應的字體的顏色、圖標的風格、元素的布局等等都會產生微妙的變化,以下列出一些深色模式要注意的一些事項。


          A、顏色

          1、深色的選取盡量不要直接選用純灰色,可以往冷色系偏一些;

          2、白色背景上不會用純黑文字,同樣的深色背景上不要直接使用白色,否則會產生強烈的刺眼感,但是一些按鈕還是要使用白色;

          3、字體的中性顏色深淺建議使用白色的透明度變化來制作深淺,原因有兩個:一是透明度變化能夠讓字本身投射出背景色的色調,做到自帶色調的效果,能夠讓頁面更自然協調;二是利于設計和開發理解記憶,有一個量度去衡量。雖然通過透明度變化有時會碰到沒有背景色的問題,但是這種情況很少,而且也很好解決,增加一個背景就可以了;

          B、圖標

          最開始我們就像以往一樣,圖標的形式采用線性圖標。但是我發現在深色模式下,線性圖標變得單薄、空洞。我們分析是因為在白色背景下,線性圖標是深色的,深色具有收縮感,讓人眼能夠關注到“線”和被線包圍的“留白”,人眼關注的是整體;而在深色模式下,線是白色的,白色具有擴張感,白色的擴展讓人眼的關注點變成了“線”,忽略了“留白”,所以人的觀察感覺是缺失的,而且在大面積深色的壓迫下,線性圖標變得特別單薄。于是我們決定采用面性圖標來代替之前的線性圖標。

          六、設計規范


          原子設計理念

          原子設計理論由設計師Brad Frost首先提出,我覺得這套理論能夠很好的組織構建設計規范,也有利于團隊成員理解與協作,于是我把這套理論踐行于這套系統中。在原子設計理念中,一切設計都是由最小的原子組成,然后原子可以演變成分子,組織,模板,頁面。

          1、原子

          為UI設計構成的基本元素,文字、顏色、圖標、圖片、調色板、進度條、分割線、開關、單選框、復選框,也可以為抽象的概念,例如色調等。特點是不可再分割。


          2、分子

          由原子構成的簡單UI組件。按鈕、標簽、導航、輸入框、搜索框等。


          3、組織

          相對分子而言,較為復雜的構成物,由多個簡單的UI組件構成。彈窗、表單、列表、卡片、數據圖表等。


          4、模板

          以頁面為基礎的架構,將以上元素進行排版。例如消息模塊、列表模塊、項目模塊、表單填寫相關模塊。



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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司








          用戶體驗設計法則應該怎么用?來看看這些應用原理!

          seo達人


           

          1、菲茨定

          圖片

          選中目標所需時間與移動距離長短和目標面積大小有關。(與距離負相關,與面積正相關)

           

          現實中的應

          圖片

          在商場中尋找洗手間取決于標志的大小及步行的距離。為了滿足這兩個標準,標志設計得更大、更容易接近。

           

          設計應用

          圖片

          ▲ 左側頁面的CTA按鈕很小,沒有突出顯示,與表單的其他元素基本上沒有區分;右側頁面CTA按鈕尺寸很大,能讓用戶清晰識別。

           

          2、??硕?/strong>

          圖片

          決策所需要花費的時間隨著選擇的數量和復雜性增加而增加。

           

          現實中的應

          圖片

          與餐廳相比,快餐店的菜單選項有限。因此顧客點餐速度更快,門店提供的服務也更快。

           

          設計應用

          圖片

          ▲ 在Whatsapp上轉發消息時,會在“最近聊天”列表上方看到“經常聯系”的3個好友。這對用戶來說是一種簡單的交互,幫助用戶節省操作時間。

           

          3、共域定律

          圖片

          被一個顯而易見的邊框包圍起來的多個元素,被視為一個群組。(從屬于格式塔理論)

           

          現實中的應用

          圖片

          在服裝店中,衣服按照類型被分到不同的架子上來展示,即使對這家服裝店一無所知,顧客也會將一個貨架內的商品關聯成相似的東西。

           

          設計應用

          圖片

          ▲ 過濾器被封閉在產品頁面之外的單獨區域中,因此可以清楚地識別左右兩部分的差異。

           

          4、雅各布定律

          圖片

          用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的使用方式。

           

          現實中的應用

          圖片

          假設家中的陽臺是一扇推拉門,我們可能希望酒店的陽臺門也以同樣的方式操作。因此如果酒店有一個滑動門,我們可能會下意識地先去推門。

           

          設計應用

          圖片

          ▲ 以上是國外知名的電商網站導航欄設計,這幾個網站導航欄中顯示的信息及其結構都非常相似:左側是品牌標志,中間為搜索欄,右側為其他選項(購物車/個人賬戶)。

           

          5、系列位置效應

          圖片

          用戶更容易記住系列中出現的第一項(首因效應)和最后一項(近因效應)。

           

          現實中的應用

          圖片

          我們通常更容易記住某個電話號碼的前4位或后3位,這條法則也是銀行卡號被分成4組數字的原因。

           

          設計應用

          圖片

          ▲ 在亞馬遜主頁上,網站的第一部分總是顯示最重要的內容:導航包含logo、搜索和其他重要功能;輪播圖通過圖形設計吸引用戶的目光,引導新的交易或優惠。

           

          6、馮·雷斯托夫效應

          圖片

          又稱隔離效應。當存在多個相似物體時,與眾不同的物體最容易被記住。

           

          現實中的應用

          圖片

          在商場購物時,相較于普通裝飾的門店,我們更有可能記住或將注意力轉移到具有霓虹燈效果的門店上。

           

          設計應用

          圖片

          ▲ App上有新消息時,會在圖標上用紅點顯示,這樣的提示更清晰和突出,從而吸引用戶的注意力,引導用戶點擊并查看消息。

           

          7、審美可用性效應

          圖片

          用戶通常認為漂亮的設計更易用。

           

          現實中的應用

          圖片

          當參觀汽車展廳時,我們通常會對汽車精美的展示感到驚嘆,并立即對這個品牌產生積極的印象。

           

          設計應用

          圖片

          ▲ 在愛彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當訪問像愛彼迎這樣干凈簡潔的網站時,我們會下意識地信任這個產品,也確保了用戶對品牌的信任。

           

          8、峰終定律

          圖片

          人們評論體驗優劣,大多基于峰值和結束時的感受,而不是所有環節的平均值。

           

          現實中的應用

          圖片

          在足球比賽中,整場的觀看體驗將根據比賽結束(誰獲勝)和比賽高潮(誰進球最多/比賽中最激動人心的時刻)來判斷。

           

          設計應用

          圖片

          ▲ 在夜晚非常饑餓的時候,我們使用訂餐App選擇食物時,卻被告知付款失敗。這時候App界面設計的再好看也無關緊要,訂餐失敗就是從這次體驗中收獲的結果。

           


           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》用戶體驗設計法則應該怎么用?來看看這些應用原理!

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

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

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

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

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



          用設計詮釋搜索熱點

          seo達人



          圖片

           

          設計思考及詮釋方法

          我們先要去了解用戶是如何消費熱點內容的,基于用戶情景認知鏈路分析用戶在事件消費的鏈路,可以分為三個重要節點:1.熱點環境的感知;2.熱點事件的理解;3.事件觀點的產生。

          圖片

          結合用戶的消費路徑,我們將設計邏輯框架拆分為三個層級:

          1.氛圍背景層:分層呈現熱度氛圍,輔助用戶感知熱點環境;

          2.信息內容層:精細化拼裝管理,幫助用戶理解熱點事件;

          3.功能互動層:輕互動玩法設計,激發用戶參與抒發事件觀點

          圖片

           

          1. 熱點環境感知:分層呈現熱度氛圍

          從氛圍表現層面,助力用戶更快速的辨別事件的熱度及重要程度。設計師結合搜索熱點使用場景以及業務時效性配置訴求,歸類了兩種設計表現層次:1.日常熱度氛圍  2. 大事件熱度氛圍

          1)第一個層次:日常熱度氛圍

          主要應用于熱點新聞場景,時效性要求高,同時事件熱度也會在:“發酵爆發消退” 間實時變化,設計根據熱度“強弱”程度需求,劃分兩檔視覺展現階梯,以自動化的方式展現,滿足熱度的實時變化需求,輔助用戶感知當前事件熱度。“低熱氛圍”弱標簽設計用以展現上升/今日熱點,“高熱氛圍”色彩背景通頂效果+上榜標簽用以展現上榜熱點。

          如,“馬斯克收購推特”,搜索熱度持續上升,以第一階梯-標簽方式展示低熱氛圍;在 “馬斯克收購推特” 的事件熱度不斷增長,成為熱榜事件后,以第二階梯 – 高熱氛圍自動匹配 ,通過背景及榜單標簽的呈現,明確告知用戶當前事件的火熱程度。 

          圖片

           

          2)第二個層次:大事件熱度氛圍

          主要應用于熱點大事件或運營活動場景,個性化展現要求高,同時事件關注度及重要程度也不同,設計根據事件的關注度及重要程度劃分為兩檔階梯,以人工配置的方式展現,超強的運營氛圍,可以讓用戶充分感知當前事件的重要程度,“A級氛圍”頭部疊加場景元素設計用以展現大事件,“S級氛圍”整頁沉浸式視覺設計用以展現重大事件。

          如,冬奧會,重大事件,選用第二階梯 S級氛圍,打造超強的運營大事件會場認知。

          圖片

           

          前置突發大事件氛圍設計

          近幾年我們不斷的經歷各類突發大事件,如:疫情/暴雨/名人逝世等等,每次突然發生的事件都讓設計師措手不及,匆忙產出運營氛圍設計方案緊急上線,保時效就很難保障質量,因此我們在想能不能總結事件類型提前儲備設計,以備不時之需。

          不同突發事件會牽動網友不同的情感情緒,比如河南暴雨,我們為受難同胞擔心,為救助工作加油,為逝者哀悼;火箭發射成功,我們驕傲喝彩;名人結婚,我們送上溫馨的祝福。不同事件帶來不同的情感情緒,也要求設計師要用準確的視覺語言表達。

          因此我們在前置設計時也充分考慮了事件情感因素,通過對近一年突發大事件的歸類梳理,并推導不同細分場景下的用戶情緒,通過情緒分類的方式,總結兩種視覺設計表達形式:1.實景圖合成效果滿足嚴肅/莊重/權威場景情感需求;2.手繪效果滿足積極/歡快/慶祝場景的情感需求。結合以上思路我們共儲備6大類20個子分類場景的前置氛圍+金剛位等運營物料設計,保障突發熱點運營設計質效。

          圖片

          圖片

          截至22年Q1,前置設計已在38個熱點場景應用:

          圖片

           

          2. 熱點事件理解:內容精細化拼裝管理

          為滿足用戶不同事件場景下的信息需求,設計結合百度搜索:主要內容區(主要需求滿足)+ 延展內容區(延展需求滿足)的綜合聚合能力,通過組件分區布局+精細化規則管理,為熱點場景內容的高效拼裝打好體驗基礎。

          1)主要內容區

          主要內容區,能夠幫助用戶快速了解事件的主題、時間及主要內容,結合熱點事件長期的需求沉淀,設計將主要內容區又細分為主題區域及內容區域主題區域可承載拼裝事件主題、事件倒計時、會場分發導航等主題類組件;內容區域可承載拼裝圖文/視頻/直播等事件主體內容分發組件。通過不同區域內組件拼裝規則的制定,業務可以快速選擇所需組件進行頁面組織拼裝,達成分場景個性化滿足用戶主需求的目標。

          如:元宵晚會,熱點主要內容區 以“ 晚會直播時間倒計時+ 各衛視晚會分會場導航+圖文內容 ” 組件支撐起重大晚會預熱期的事件主需求滿足。

          圖片

          因為有設計拼裝規則,不同大事件活動,各場景內容可個性化滿足需求,交互布局設計上又可兼顧橫向一致性。

          圖片

           

          2)延展內容區

          延展內容區,能夠幫助用戶了解事件相關知識信息或提供事件相關服務。業務可根據事件場景需求,選擇多個延展內容模板與主要內容區進行拼裝,搭建完整頁面以呈現不同熱點事件內容。

          如:俄烏戰爭-戰事場景,脈絡卡幫助用戶快速了解事件進展 ;冬奧會-賽事場景,數據卡幫助可視化呈現賽事進展;博鰲亞洲論壇-會議場景,百科卡幫助用戶科普相關名詞知識。

          圖片

           

          3. 事件觀點產生-輕互動玩法強化參與感

          通過氛圍打造和內容組織,已經達成用戶需求滿足的目標,但到此截止,搜索結果的體驗還是理智疏遠單向的,搜索場景與用戶、用戶與用戶間也無法產生對當前熱點的討論與態度表達。因此設計師對用戶的互動行為認知習慣進行分析,并采取具體的設計策略逐步引導用戶參與互動。

          圖片

           

          1)互動喚醒 – 吸引圍觀增強互動意愿

          優化前的熱搜結果頁,用戶的討論內容都是隱藏在資訊落地頁評論區內,需要點擊進內容落地頁內才能參與“圍觀”或“討論”,除互動氛圍已脫離當前場景外,也削弱了用戶對此事件表態的參與積極性。

          通過彈幕滾動+輸入框組件組合外顯的交互設計方式,將用戶討論外露,不僅豐富熱點事件搜索場景的內容維度,同時基于從眾心理,進一步刺激用戶的參與欲望。彈幕結合事件類型配色來更好貼合熱點事件整體環境氛圍。

          圖片

           

          2)情緒抒發-輕互動玩法降低互動門檻

          而投票表態+彈幕輕互動組合效果設計,能進一步降低用戶交互心理門檻,讓用戶動一動手指就可以參與其中。在表態/投票抒發情感的同時也可以發彈幕聊聊對當前熱點事件的看法,使用戶互動情緒表達更充分。

          圖片

           

          3)驚喜反饋-強化視效打造記憶點

          原有設計風格,無法在去世祭奠、頒發勛章等莊重嚴肅場景精準的表達視覺情感,無互動反饋狀態僅有互動前后狀態變化。

          結合熱點場景積極外放情緒及莊重內斂情緒,視覺主要從形/質兩個維度進行優化升級,并增加互動反饋動效,同時運營可結合具體事件主題配置,綜合提升互動驚喜效果,打造產品記憶點。

          視覺層:通過更立體的形態和更豐富的層次質感,更精準的表達情感

          圖片

          動效反饋層:以主圖形+輔助元素,通過符合場景氛圍的動態效果設計,更充分的表達情感

          [優化輸出圖像]

          [優化輸出圖像]

          運營主題配置:在日常反饋基礎上,增加運營主題配置層級,為特定主題場景提供定制反饋效果

          源圖像

           

          寫在最后

          通過熱點環境感知分層呈現、內容組件合理布局拼裝滿足等設計手段,助力搜索平臺以更高效豐富的內容展現形態應對全年3萬+熱點大事件運營。會場拼裝呈現系統的應用場景也在不斷擴展,如營銷活動、品牌造節等。設計不會止步于此,我們將基于用戶需求不斷探索深耕,為用戶呈現更快速、準確、全面、有溫度的搜索熱點體驗。 

           

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

          作者:百度APP用戶體驗

          轉載請注明:學UI網》用設計詮釋搜索熱點

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

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

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

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

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



          做了近百個網頁,總結的高質量設計方法

          seo達人


          圖片

          圖片

           

          0設計網頁中遇到的問題

          面對企業級中后臺龐大且復雜的集合,會面臨各類問題:

          • 業務多,資源少
          本多個需求同時跟進,項目多且雜從而產生超負荷。也不便于更好地理解業務。
          • 人力成本高
          設計資源有限,設計完成后需要和不同業務線開發進行多次設計走查,影響設計師提效。
          • 沒有品牌性
          針對b端產品,多樣性設計無法形成品牌特性,傳達品牌特色,導致中臺業務線繁多但不“精致”
                                   
          • 體驗差

          官網設計中也有很多相似功能,面對繁多需求,設計者快速做出響應會產生重復勞動成本。只能做到滿足功能,用戶體驗并不是很友好。

          圖片

           

          0突破問題

          通過總結之前的工作,發現很多設計內容有50%以上的重復率,我們要做的是將這50%重復率形成設計體系化,建立資源整合,搭建規范化官網模塊,并把模塊設計反推給產品,在提高設計效率的同時也減少產品工作,減少協同成本。

          通過“收集需求——整合歸納——定義組件——代碼搭建“ 的過程提升設計效率。       

          • 第一步:整合資源,模塊的確立

          整合各個業務線資源,并根據業務系統進行分類:數據中臺,技術中臺,業務中臺。面對這三大類別,目前官網需求量會達到幾十個,而面這些繁多網站需求,首先要做的就是整合分類。

           

          通過對對業務線歸類,統計出高頻15+個組件模塊:

          Banner、產品優勢、產品特色、案例、信息內容、信息流程、合作方、聯系我們、關于我們、使用流程、功能介紹、手機\電腦信息展示、合作方、地理地圖、其他模塊等…

          圖片

          • 第二步:模塊梳理歸類

          并更具根據模塊類別的復用率進行再次梳理,產出設計模版。模版根據設計形式、排版布局等方面進行進一步延展,復用率高的模塊對應模板更豐富。

          圖片

           

          0設計語言(理念)的建立與模塊產出

          • 設計風格建立

          視覺體系上,B端產品不同于C端,設計更多為體驗服務,色彩的豐富度相對較弱,單一。要突出b端設計,我們決定從精致性上為切入點,選定“輕擬態”風格,即突出設計的細節性又不會因為過度設計影響內容。并根據業務體系與設計風格,完善設計語言關鍵詞提煉:科技、高效、簡約。

           圖片         
          • 字體與顏色規范

          色彩能夠起到視覺語言傳達和信息承載作用。企業級產品延用了matrix 的配色體系,以藍色調為主色,同時模塊產出深淺色系,便于多方面選擇。

          圖片圖片

          • 設計布局

          采用刪格系統定義布局,根據首頁和內頁展示形式進行基礎布局

          圖片         
          • icon再創新

          圖標也進行三大層級劃分,以應用于不同場景:

          圖片

          3D圖標

          3d質感圖標。用于重要層級模塊,數量控制4個以內。

          圖片

          圖片

          玻璃球圖標

          磨砂玻璃風格已經廣泛應用于ui產品中的很多地方,我們在磨砂玻璃基礎上,創新新的icon風格“玻璃球”icon,該風格能更換的和輕質感設計融合在一起,用幾何元素設計,通過拼接組合和系統icon設計,能夠在短時間內快速產出立體icon,適用少于8個類別的模塊icon。

          圖片 圖片

          圖片       

          圖片

          圖片

          輕擬態線性圖標

          3d線性圖標適用于多場景模塊,可大范圍出現在頁面中。

          圖片         

          三維設計

          banner模塊分為3d三維風格和二維平面圖片,根據不同業務線定義使用規則。如商業,公益相關產品,選定圖片作為banner展示更能準確傳達信息,而技術類官網用3d效果更能傳遞科技性。

          圖片

          圖片

          同時定義多種banner布局:左文右圖,文字居中,banner加搜索模塊,圖片banner等,

          可根據需求自由選擇。

          圖片

          圖片

          圖片

          幾何化形的裝飾元素

          為了體現網頁設計的“空間感” 網頁設計中加入幾何元素穿插,根據業務品牌語言 圓、三角、方定義輔助裝飾元素。(圓-業務 ;方-技術 ;三角-數據圓、三角、方定義設計幾何元素)

          圖片

          圖片

          多樣性變化 

          為官網模塊的產出依據業務線,在建立規范化組件的同時也需要考慮設計中的“區別性”業務線-營銷產品,更多體現商業性質設計采用暗色系,而技術類官網更多體現科技感,加入3d元素。在同一模塊的設計也加入背景白色/暗色和模塊的亮色/暗色。

          圖片

          圖片

          圖片

           

          0實際應用

          目前我們已經產出50+模塊,10個+網頁模版,通過代碼化,建立“云搭”這一網頁生成工具,建立中臺系統在生成平臺,目前已經支持多個業務線。從設計產出模塊到開發實現模塊代碼話再到產品拼接選擇,整體過程節約了設計資源,為產品研發提效提供一站式解決方案。

          后續我們將發布云搭二期文章,會為大家介紹設計師是如何從產品、交互思維,自主研發“云搭”這款工具的,敬請期待。

          圖片

          圖片

          原文地址:58UXD(公眾號)

          作者:環鐵藝術家

          轉載請注明:學UI網》做了近百個網頁,總結的高質量設計方法

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

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

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

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

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



          交互設計師專業能力體系

          seo達人


          一、交互設計師能力模型圖

          圖片

           

          二、交互崗專業能力描述

          能力模型圖中的每個點都可以很詳細的寫一篇專題文章,本文不做過多展開,只是拋磚引玉:大家說明具體能力維度可提升落地的點有哪些。其中一些能力點我之前的文章中也有提及,以后有機會我會針對其他能力點單獨梳理文章。

          基礎專業能力 

          圖片

          1.對業務與產品的理解

          一直在強調交互設計師要盡可能前置到業務中,在設計工作的起始階段對業務背景、業務目的、現階段存在的問題、產品規劃有一定程度的了解,為后續設計方案提供決策依據。

          除了承接上游需求,許多設計師自主驅動的需求都建立在對業務的綜合了解基礎之上,如果僅是體驗設計層面的優化,實踐中很難獲得上下游同事對其價值的支持和認可,想要落地就更加無從談起了。

          可以從以下幾點逐步加強對各業務線、各終端產品的理解:

          • 了解各個業務線或產品的階段性或長遠規劃。
          • 多與產品經理、運營等上游同事溝通,深入了解產品發展的歷史緣由。
          • 通過用研分析逐步了解不同產品的優勢與不足。
          2。需求分析與設計規劃

          需求分析主要是指與產品經理的協作配合,有時候也會直接與運營、銷售或者客戶對接。交互設計師介入一般有兩種方式:

          A. 業務方訴求明確,產品需求初稿規劃完成,此時交互設計師介入,基于產品需求目的給出體驗設計層面的建議。

          B. 只明確了要實現的業務目標,產品需求尚未明確,需要交互設計師與產品經理或業務方一起溝通共創,相當于協助產品明確需求的過程。

          在這個階段,交互設計師需要注意以下幾點:

          • 了解需求的背景與目的,需求方案的合理性,針對需求不合理之處提出質疑并綜合考慮給出建議方案。
          • 需求分析與設計規劃時要盡可能平衡業務訴求、用戶體驗、技術可行性與實現成本等因素。
          • 查看需求文檔雖然是基本功,但是對于新人而言這里容易踩的坑比較多。不同產品經理描述風格與方式不同,也難免有一些規則遺漏,所以查看時若存在問題及時與產品經理溝通。
          • 經過需求分析,交互設計師可以推導出整體的設計目標與設計策略。
          3.設計規范與組件

          設計規范是基于設計語言或設計指南而來的,不同公司產品會有不同的定義。根據業務復雜程度和產品特性,一些公司會梳理自己的設計規范,交互設計師重點關注交互層面的規范,也需要對視覺規范有一定了解。

          設計組件是以設計規范為指導原則,為提升產研協作和開發效率而設定的UI組件庫。這里需要注意:

          • 設計組件一般分為基礎組件和業務組件,基礎組件類似Ant Design;業務組件則是依據公司具體產品使用場景決定的,比如電商類應用:產品列表的產品信息、直播模塊等頻繁被調用的、由多個基礎組件組合而成的內容。
          • 由于不同終端交互設置和操作方式存在差異,所以可能會有針對移動端、Pad端、Web端、TV端等多終端設計組件。

          大家可以參考iOS人機交互指南與谷歌的MD系統級設計規范;目前市場上有許多開源的設計基礎組件,比如Ant design、滴滴、騰訊、京東、有贊、餓了么等。

          4.交互文檔

          設計方案具象化的呈現依靠“規范的交互文檔”,輸出交互文檔注意以下幾點:

          5.交互基礎原則

          這部分內容涉及到交互層面的一些“參考規則”,之所以叫參考規則是因為不是必須遵守,可能針對不同業務和產品會做適當補充或刪減。比如頁面打開方式研究、尼爾森可用性原則等。可以通過閱讀一些專業書籍掌握理論知識,然后在實踐項目中應用總結。

          6.主持各類溝通會與評審會

          交互設計師在日常工作流程中,會參與不同類型的會議,比如需求討論會、需求評審會、設計評審會(交互與視覺內評與外評)、測試用例評審會、開發問題討論會等。有的會議交互設計師作為參與方,有的作為主導方,因此需要對會議節奏和效率綜合把控。

          對于新人或初級交互,可以選擇性地參加其他交互同事組織的以上相關會議,了解和熟悉如何高效開會達成會議目的。

          7.評估設計排期

          在日常項目流程中,需求評審過后交互設計排期需要首先給到,下游的視覺設計師、前端研發、甚至包括后端研發、以及測試工程師都需要根據交互文檔給出各自更加精確的排期。

          因此評估交互排期在項目流轉過程中非常重要,如果評估排期少了無法按時交付,可能會造成下游同事時間不夠,甚至導致項目延期;如果評估排期多了,對于有上線時間要求的項目,總體時間可能又會不夠。

          所以交互設計師只要做到根據自己手頭時間客觀評估即可。這里對于新手或初級交互而言,有兩點注意事項:

          • 承接的項目類型由簡單到復雜過渡。
          • 交互排期需要包括“需求溝通時間、設計方案輸出時間、評審時間、評審后調整時間等”,剛開始排期可以給自己多預留1-2天。

          對于一些項目周期緊張或者頻繁變更,導致設計輸出時間增加的需求屬于特殊情況,需要另當別論。

          8.明確交互驗收內容

          關于交互驗收的流程和驗收的具體內容,我之前有梳理成一篇文章可供參考:如何做好交互驗收?

          9.軟件工具

          既需要熟練使用設計相關的軟件工具,比如交互常用的Axure、Figma、思維導圖工具等;也需要跟上“軟件出新的步伐”,比如Figma這種云端多人協作的設計工具誕生之后,過往使用Axure的交互設計師和使用Sketch的視覺設計師,都對它青睞有加。

           

          進階專業能力

          圖片
          1.對用戶與使用場景的理解
          這塊屬于用研相關的內容,對于設計師而言一直在強調“平衡商業目標與用戶體驗”。通過參與或者使用一些定性或定量的用戶研究方法,去真正理解產品對應的用戶特征、用戶想法和用戶使用場景。我們可以通過以下方式逐步提升用研能力:
          • 查閱公司內部已沉淀積累的用研資料。
          • 掌握并應用常用的用研方法,如“體驗走查、競品分析、AB測試、可用性測試、問卷調研、用戶訪談等”。
          這里有兩點注意事項:
          • 有些公司可能沒有資源推進用戶研究,但至少你需要先掌握相關理論知識,學到的有價值的東西在未來總會用到的;
          • 還有一些公司有專門的用研部門,在用研方法和工具使用方面會更加專業,這種情況設計師與用戶研究員協作配合會更加高效。
          2.數據意識和數據分析能力
          許多設計師在項目中估計都在思考一個問題:設計如何賦能業務增長?既然要衡量,那么數據指標就是最客觀的依據了,數據雖然不能完整體現設計價值,但至少可以驗證部分設計方案的優劣。這里設計師需要注意以下兩點:
          • 在日常工作流程中具備數據意識:無論是需求前期的分析階段,還是設計開始實施之前,亦或是需求上線后的效果復盤,數據都作為有力的客觀佐證,為你的設計決策提供依據。
          • 培養數據分析能力:實際項目的數據分析過程可能會非常復雜,涉及到不同類型的數據指標、數據分析方法的應用、數據查看與配置工具、復雜的業務因素等等。需要你對業務和數據都比較了解,是一種綜合能力的體現,需要日積月累的打磨。
          3.發現問題的主動意識
          在工作中無論是同事還是上級領導,都特別喜歡態度與行動積極的人。不要總是等著所謂的上游或者上級安排任務,自驅力要強,隨著工作經驗的累積,主動的發現問題、尋找解決方案、并推進問題解決。這也是區分不同水平設計師的標準之一。
          4.思維方式
          從認知心理學的角度分析,做一件事情經過“思想-決策-行為-結果-反饋”的過程,之后便進入了這個過程的一種正向或負向循環,所以思維方式是決定最終結果的本源。
          對于產品設計者而言,需要重點打磨這幾項思維能力:
          • 邏輯思維:分析和拆解復雜問題的能力。
          • 產品思維:多維度考慮用戶需求與業務訴求。
          • 數據思維:掌握數據的收集、分析和應用。
          • 系統思維:逐步學會結構化、體系化地看待問題。
          5.視覺審美
          目前在大多數公司有明確的交互崗和視覺崗,在工作流程中各有專攻,交互設計師在產研流程中發揮“承上啟下”的作用,所以需要了解視覺層面的理論知識,具備初級的視覺輸出能力。
          一些公司設定了“體驗設計崗”,雖然號稱是全棧型設計師,但專業能力還是有主輔性:比如主要專業能力偏交互,也具備一定的視覺專業能力。在互聯網發展的早期只有視覺崗位,后來誕生了交互崗位,目前所謂的全棧體驗設計師也是從最初的一個角色蛻變而來的。
          各自分工協作有助于產品迭代的高效性,交互偏向于業務和產品端,注重邏輯梳理和需求分析;視覺重點是表現層、品牌調性和運營活動的形象展現。

           

          通用能力

          這部分內容我之前特意寫過相應的文章,參見:交互設計師該如何提升“軟實力”?

           

          個人影響力

          圖片
          相信每位產品設計從業者在職業生涯中都處于不斷升級打怪的狀態,組織內你希望能夠持續晉升,組織外可能有人希望通過社交加強專業交流和學習。無論組織內外,建立個人影響力的有效方式大概有以下幾點:
          • 設計分享

            不限于具體形式,包括日常項目總結、軟件工具使用、設計方法論應用等。對內分享促進部門內學習提升;對外通過輸出專業文章等方式分享,沉淀積累的同時,也能幫助有需要的人,順帶還能結交一些靠譜的朋友,不亦樂乎!

          • 設計指導

            當你已經是有幾年工作經驗的中高階設計師,帶教新人是一種傳承責任,我們都是從初出茅廬一步步經歷過來的,非常理解眼前這個行業小白有多么渴望在正確的指引下持續努力。多給予別人幫助,畢竟予人玫瑰,手留余香嘛!

          • 設計創新

            許多人一聽這兩個字就覺得有點可笑,該做的事情還沒做好呢就談創新?其實創新在我理解更多是一種“微創新”,可能會體現在你的每一次需求洞察中、設計方案的細節中,不要小看微創新,點滴積累之后,你會比別人更有想法和競爭力。

           

          寫在最后:

          設計師不能總是輸出,更要持續輸入才會有源源不斷的創造力!想要系統地學習專業知識,性價比最高、成本最低、也最靠譜的方式是系統性地“閱讀專業書”。后面我會寫一個系列的專欄文章推薦“設計師必讀的專業書籍”。

           

          原文地址:人人都是產品經理

          作者:Viksea

          轉載請注明:學UI網?交互設計師專業能力體系

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

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

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

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

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



          Behance 首頁推薦的作品集為什么這么高級?為你拆解其中7個秘密

          seo達人


          1、錯開對齊

          如果你對自己的排版不是太自信,又擔心排版太死板,錯開展示是一個很容易上手的技巧。只需要把界面稍微錯開一下,展示效果就會好很多。下面就是一些Behance大佬用這種手法做的展示效果,可以從背景,作品擺放比例,留白,間距和錯開幅度上進行研究學習。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          2、增加層次感

          為了增加展示細節,豐富層次是一個非常好用的展示技巧。如果你的作品界面在視覺上比較寡淡,那么把一些界面元素提取出來,利用投影加多層次感,視覺效果上就可以很快得到提升。這個技巧在執行上也比較簡單,關鍵要注意投影的大小和顏色,千萬別做的太重。

          圖片

          圖片

          圖片

          圖片

           

          3、出界設計

          有時候,一些界面元素確實視覺效果好的元素太少,比如很多B端表格的界面,用這種方法可以增加畫面中的圖片率,將本來隱藏在界面外的圖片進行出界展示,更多利用圖片提升畫面的設計感。

          圖片

          圖片

          圖片

          圖片

          圖片

          甚至可以將banner圖中的元素進行出界,增加設計感。

          圖片

           

          4、傾斜設計

          傾斜設計,也是一個提升設計感的常用技巧。先在正視角度下擺好,利用技巧1錯開一下界面,然后整體旋轉一個角度就能很好的提升畫面表現力,增加設計感。但要注意用這個方法的時候,要保證界面元素的清晰度,不要出現鋸齒。

          傾斜后也可以適當增加一些圓點點綴

          圖片

          把一些UI 組件斜角后,結合層次感設計技巧

          圖片

          圖片

          傾斜設計+出界+底部方塊裝飾

          圖片

          傾斜設計后,增加一些半透明的裝飾層次設計

          圖片

           

          5、3D厚度設計

          現在3D設計非常流行,把自己做的界面增加一定的厚度然后結合傾斜設計,也能快速提升界面的設計感。

          但因帶有傾斜,很容易出現鋸齒。我有一個常用的小技巧是做的時候可以把圖做大一倍,然后再縮小放到作品集中,就能提升清晰度。例如我要做一份1920×1080的PPT,那么我就會先做一個2x 尺寸,也就是3840×2160然后再縮小,會比你直接做1x尺寸的圖要清晰很多。

          把界面增加3D厚度后,再稍微加一些比較輕量的3D裝飾元素,常用的有小球、方塊等3D元素能讓畫面效果更好。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          6、增加底圖設計

          這個技巧要注意讓界面與背景圖自然融合,關鍵在于需要找到一張非常好的圖片,考驗選圖的能力,存在一定的風險。如果你對這種包裝方式不大放心的話,建議你謹慎使用。

          比如這張圖,細節點在于界面左邊淺色配上底圖中左邊的白,右邊深色界面搭配右邊深色的山體顏色,看起來就很和諧。

          圖片

          下面這張圖用了一個跟界面中配圖同一個調性的圖片,為了防止干擾界面,還加了一點高斯模糊,效果也非常不錯。

          圖片

          這張圖的底圖用了一些比較具有設計感的圖形,整體比較簡潔高級

          圖片

          常用的一些底圖元素還有圓形,點等等

          圖片

          圖片

          圖片

          圖片

          用一些插畫元素作為底圖也是非常不錯的

          圖片

           

          7、套用樣機來展示

          前面提到的很多實用技巧,能看到都是不需要用樣機的,我自己更傾向于不用手機模型來展示,即使要用也是比較輕量的那種。有看過不少同學的作品集,其中的樣機用的太過了,不知道的還以為你成了賣手機的作品集。這也是我放到最后一條來說的原因,我更推薦你在不使用樣機的情況下把自己的作品展示做好。

          當然,如果用樣機也沒什么大問題,原則還是為作品服務的,保證清晰度,不搶作品本身的視覺就OK。用上了樣機,它就成了你作品的一部分,要保證樣機是最新的,且質量要高。

          關于樣機的話,彩云之前也幫大家找了一些非常高質量的樣機資源,需要的話可以點擊下面的文章看看內容,并找到獲取方式下載使用。

          2021年全網最新品質最好的樣機資源被我找到了,免費分享給你!

          2021年全網最好的樣機資源都在這里,收藏這一篇就夠了!

          圖片

          圖片

          圖片

           


           

          原文地址:彩云譯設計(公眾號)

          作者:彩云Sky

          轉載請注明:學UI網》Behance 首頁推薦的作品集為什么這么高級?為你拆解其中7個秘密

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

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

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

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

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



          無需手繪的AI矢量扁平幾何風基礎插畫:《鮮果派對》海報

          seo達人


          image

           

          工具

          工具:AI(Adobe illustrator)

          適合:零基礎入門

           

          扁平風的基礎思維準備:幾何形組合造型

          幾何形一直被視作是抽象造型的基礎元素,通過幾何形有意識的相互疊加組合,就可以使得這個造型呈現出可識別的對象,比如我們在這個教程里所表現的那樣:用幾何形畫水果。

          比起細膩豐富的傳統畫法,極簡的幾何平涂造型所創作的水果,看起來有著別樣的生動的特質,擺脫了對水果表面質感的依賴,轉向對形色的探索,是扁平插畫的基礎思維。

          常用的幾何形是:圓、方、三角,在這個教程里,我們就運用矢量軟件AI(Adobe illustrator)進行創作,接下就開始來打造我們的《鮮果派對》海報吧。

          image

           

          用方形塑造蘋果基礎形

          常見蘋果的畫法可以是圓形起步,也可以是從方形開始。

          STEP 01

          打開AI,新建一個文檔,運用粉色畫出一個正方形,這就是蘋果的起始形。起始形非常重要,它決定了接下這個蘋果的形狀走向。

          然后,我們把這個正方形改變為梯形,改變的方法有很多種,這里我們利用變形工具,進入【效果>變形>弧形】,在變形工具的面板里,將垂直這個滑塊調整為-15%。

          image

          STEP 02

          在選中上一步所變形成為的梯形的基礎上,進入到【對象>擴展外觀】對它做一次擴展外觀。

          擴展外觀就是讓這個形狀真正變為矢量梯形的路徑,如果沒有做這一步,這個形狀看似是梯形,其實還是原來正方形的矢量路徑。分辨真假梯形也很簡單,只要選擇這個形狀,看到路徑的走向仍然是正方形,那就是假性梯形,這就需要為它做一次擴展外觀。

          image

          STEP 03

          然后再選中這個梯形的基礎上,單擊左邊的工具欄里的【直接選擇工具】,就會看到四個角內分別帶有四個很小的圓點(仔細看是一個同心圓),拖動它,你會發現它會控制這個角,將它從銳利的角變為圓弧。

          根據圓弧離形狀中心的距離多少,弧度也會相應發生變化。

          image

          好了,蘋果的基礎形就完成啦~

           

          細節的魔力

          我們開始為蘋果增加葉片,葉片的畫法首先也是要從基礎幾何形開始慢慢演變而成。我們在葉片這個部分提供的基礎幾何形同樣是正方形。

          STEP 04

          用藍紫色畫出一個正方形,然后再復制一個正方形,將這個復制的正方形旋轉45°,變為菱形。再復制第一個正方形。于是我們得到了兩個正方形和一個菱形,將它們像下圖所示拼起來。

          然后再選中這個組合造型,進入到【窗口>路徑查找器】,在路徑查找器的面板中運用【聯集】將它們拼合成一個獨立的封閉的路徑。

          image

          STEP 05

          然后再利用控制形狀角度的小圓點,就像STEP 03那樣分別選中下方以及左右兩邊的圓點,將角轉為弧形。一片葉子就這樣制作而成。

          image

          問:感覺似乎這樣的方式比較麻煩,為什么不直接用鋼筆工具畫呢?

          這也是我在這一風格的畫法中想要重點強調的:盡量避免使用鋼筆工具,而用幾何形進行轉化,是保持扁平風格中幾何感和抽象感的訣竅。

          因為手動畫出的路徑畢竟不會特別嚴謹,這時就難免讓扁平風格失去了它本身的風格特點,而這時如果沒有較強的結構感,整個畫面就會看起來”平淡“甚至”無趣“。

          其實葉片的造型也可以探索出其他的幾何方式進行組合構造,本文只表現一種方法。其他的方法,可以留給你下去嘗試。

          STEP 06

          這時,把這個葉片的形狀的混合模式改為“正片疊底”,利用疊加的視覺效果增加畫面的幾何感和時尚感,這是在我們過去寫過的文章《超級可愛!插畫萌新必學的PS極簡馬克筆簡筆畫:盆栽篇》以及相關系列文章也都運用過類似的技法。

          image

          STEP 07

          最后,用線條增加最后的細節。這里所用的線條是較細的3px的黑色線條。這里的線條粗細要根據形狀本身的尺寸大小比例來確定??傊?,對細節的描繪可以克制一些,不要太過復雜。

          利用線形的組合以及形狀疊加的視覺效果,扁平風的簡約蘋果元素就畫好了。

          image

           

          準備好元素,完成海報

          STEP 08

          藍莓的畫法從矩形起步,對矩形的組合以及成形的演變方法,是我們重點要訓練的對象。中間的步驟我們已在文章前面詳細敘述過了,這里就不再重復??梢岳^續用這個方法演練下去。

          image

          STEP 09

          畫草莓的時候,運用了兩個梯形進行組合。利用葉片造型進行疊加,也能增加圖形的魅力。

          image

          STEP 10

          我們把其他的水果元素也畫好,我這里準備了一些比較可愛的櫻桃、西瓜之類,你也可以畫點菠蘿、芒果之類,注意要把握每一個水果的基礎形特點,然后在細節的部分加以強調

          image

          把每個水果元素放到海報的設計中時,要考慮的還有對水果元素之間的間隙的疏密均勻程度,元素可以較大,有些元素甚至可以滲出到海報之外,這樣會讓視覺效果更為延伸。

          如果經過路邊有家鮮果店,掛上這樣一張海報,應該效果是不錯的吧~ 先自我陶醉一波~

          image

          最后,獻上我的同類作品集小站

          當然,如果你想要臨摹或者參考更多,可以通過訪問下面這個網站,我在這里會放入更多類似的作品,繼續保持對這類風格的探索。

          image


           

          原文地址:飛屋設計

          作者:飛屋睿UIdesign

          轉載請注明:學UI網》無需手繪的AI矢量扁平幾何風基礎插畫:《鮮果派對》海報

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

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

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

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

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



          LOGO 設計技法(第三彈)

          seo達人


          1. 多層次線條漸變 LOGO(形狀分割)

          2. 條紋隱形立體 LOGO(封套扭曲)

          3. 條紋穿插 LOGO(新建畫筆工具)

          4. 角度漸變穿插 LOGO(描邊角度漸變)

          5. 半透明光影 LOGO(混合工具)

          6. 時鐘大小漸變 LOGO(替換混合軸)

          7. 不規則球形 LOGO(3D 貼圖)

          8. 原研哉的LOGO(混合工具)

           

          如果有跟我一樣不愛看文字的寶貝,可以劃到底部直接去看結尾處的視頻版本哦。話不多說,跟著我來細細分解一番。

          PS:本文所有案例均來源于網絡,只用作分析技法。

          圖片

          圖片

          首先我們來分析一下這個 LOGO,整體是由一些線條組成。長短不一的線條,通過漸變的明暗處理形成了字母 D 的輪廓。如果是使用常規的方法,一條一條地畫完線條,調整長短再組合在一起,那還不得加班到凌晨?學了這個方法讓你再也不用加班,來!

          圖片

          首先我們將繪制出 12 根線條,然后給圖形填充由黑到白的漸變色。

          圖片

          繪制出兩個長方形并左對齊,然后將右邊的直角轉為大圓角,拉到底的那種。這樣就形成了字母 D 的輪廓。接下來就是將兩組圖形組合到一起了。

          圖片

          為了方便觀察,我們將字母 D 的輪廓暫時改為紅色。因為漸變色是由上至下的,縱向切割線條不會有明暗方面的變化,我們只需要橫向切割,所以將 D 的左側豎向的線條刪除即可。

          圖片

          打開窗口—路徑查找器,找到左下角分割的按鈕。

          圖片

          全選中左側的圖形,點擊切割按鈕,就得到了左邊的圖形。

          圖片

          為了方便觀察,我們可以先將左邊圖形全部改為填色模式,然后將多余的面刪除。再調整每組線條的漸變色條,就形成了這種層次關系。

          圖片

          基礎層次和效果出來了,接下來還有很重要的一步,需要再調整億點點細節?,F在上去分層太多有些碎了,而且缺少 D 字線左邊的豎線,所以可以將一些線條合并,剛好可以形成字母 D 的左邊的豎。右邊有兩根線條過長,所以從間切開增加層次。再調整一下漸變的位置,讓整體更協調。

          圖片

          最后,再加上簡單的排版就完成啦!

           

           

          圖片

          圖片

          首先還是分析一下這個 LOGO,是由一些條紋經過錯位形成了立體的字母 K,仿佛隱藏在條紋下面。這樣的立體效果又該怎么做呢?其實非常簡單,來!

          圖片

          首先繪制出由七個長方形組成的條紋,注意條紋的寬度要和間距相等。

          圖片

          接下來就要使用要封套工具了,封套扭曲之前我們先來分析一下需要多少行數和列數。按照節點去劃分,最終形成 13 行和 9 列。

          圖片

          打開對象-封套扭曲-用網格建立,填寫 13 行 9 列,得到右邊的圖形。

          圖片

          先打出一個 K 字母作為墊底,根據 K 的結構調整網格。先選中節點向上移動,然后將兩側的節點向中間靠攏,形成突出的效果。

          圖片

          調整中間兩條條紋的寬度與字母 K 的中間部分對齊。

          圖片

          左邊的是一條垂直的筆畫所以只需要全選節點向上移動就可以了,但是右邊是兩個交叉的筆畫,所以處理起來會有點麻煩。同樣也是先將筆畫中部分的節點選中向上移動(如上圖左),然后再根據 K 的結構調整節點的位置。這可是個耐心活兒,需要一個個節點去調整。不過好在節點不多,整得也挺快。

          圖片

          最后,給圖形填充色彩加上排版就完成了。

           

           

          圖片

          圖片

          乍一看,這麻花扭得不錯。類似的圖形還有咱們中國結,但是中國結是單線形式,繪制相對比較簡單。這個是用條紋扭的,看上去更復雜一些。沒關系,其實也很簡單,來!

          圖片

          首先我們需要新建一個畫筆圖案,繪制出兩組條紋,分別填充紅色和藍色。

          圖片

          打開窗口—畫筆面板,將兩組條紋分別拖進畫筆面板,選擇圖案畫筆,點擊確定后,繼續確定就完成了新建畫筆。

          圖片

          接下來我們把輪廓畫出來。先繪制一個正方形,然后將三個直角改成圓角,是的還是拉到底的那種。

          圖片

          將圖形整體壓扁一點,并將端點繼續向外延伸,注意曲線要做到平滑。

          圖片

          選擇曲線,點擊畫筆面板中剛才新建的畫筆,瞬間就可以得到右邊的圖形。

          圖片

          將曲線復制一份,點擊另一個新建的畫筆。把其中一個鏡像翻轉后,將兩個圖形疊壓在一起。

          圖片

          接下來做出穿插關系就可以了。我們先來分析應該如何疊壓。如上圖所指的三個相交處應該把藍色調整到上面。

          圖片

          最后,再調整下細節,加上排版就完成啦!

           

           

          圖片

          圖片

          這個 LOGO 的特點在于漸變的類型和擴散的角度是圓形的,AI 里面的漸變卻沒有這種類型。但是我們仔細觀察它是有一個很清晰的切割的邊的,這樣就可以通過描邊漸變的形式去完成了。來!

          圖片

          我們先將圖形進行拆解,可以分成三個不完整的圓去組成。那么我們只需要做出其中一個圓形,重復旋轉 120 度就可以得到完整的圖形了。

          圖片

          我們先來繪制一個圓形,選擇描邊模式。接著將圓形的描邊加粗,加粗至完全覆蓋整個圓形的面積(如上圖右)。

          圖片

          然后給圖形填充漸變色,漸變的模式選擇—沿描邊應用漸變。

          圖片

          繪制一條直線,旋轉 120 度,然后將它與圓形居中對齊。直線作為參考線使用。

          圖片

          使用剪刀工具,將直線與圓形相交的點斷開,并刪除一部分節點,得到上圖中間的圖形。然后再將右邊的點延伸,就得到了右邊的圖形。接下來只需要將這個圖形進行旋轉復制就可以了。

          圖片

          將得到的圖形旋轉 120 度,并重復復制。注意軸心的位置,在圖形的下面并且與圖形垂直居中。

          圖片

          最后再加上排版就完成啦!

           

           

          圖片

          圖片

          光影效果的 LOGO,通常是使用漸變工具來完成。今天我們來使用混合工具嘗試一下。來!

          圖片

          首先繪制出 40 的輪廓。先大致畫出 4 和 0 的形狀,再進行修剪,將 0 的上面和下面的線條斷開。4 的每一條線段也需要斷開。

          圖片

          復制一份并縮小,放置在右邊,將 4 和 0 的距離分開一些。為了方便觀察混合后的狀態,先把透明度調整至 20%。

          圖片

          將大 40 圖形與小 40 圖形的每一條對應的線段進行混合?;旌喜綌翟O置為 500。

          圖片

          接下來,我們再來調整下透明度和細節。為了方便觀察,我們先將兩個圖形分開,先把后面的小 40 的透明度調至 0%,顏色改為白色。色塊疊壓較重的地方,也需要調整透明度,讓整體更通透。也可以將大 40 的線條顏色改為黑白漸變色,這樣光影的效果會更強。

          圖片

          最后再將兩個圖形合并到一起,加上排版就完成了!

           

           

          圖片

          圖片

          旋轉復制的工具,大家應該都會用了,但是像這樣的旋轉復制的同時,圖形的寬度也有規律的跟隨著旋轉變化,應該又怎樣做呢?

          圖片

          首先我們依然是先將圖形拆分一下,可以把它看成是由一組等粗的直線旋轉環繞加一組像是樹葉般有寬度的線條隨著旋轉而變化的圖形組合而成。這里我們給這兩個圖形起個名字,一個是“直線形”一個是“葉子形”。

          圖片

          我們先將簡單的“直線形”圖形做出來,先繪制一組橫豎交叉線條并建立為參考線,然后沿著參考線繪制一條垂直的直線。

          圖片

          以參考線的中心為軸心,設置旋轉角度為 15 度,進行旋轉復制。之后重復復制(快捷鍵 CTRL+D),直至旋轉一周。這樣就完成了“直線形”圖形。

          圖片

          接下來,我們來做“葉子形”圖形。先繪制出一大一小兩條直線,再將直線從等寬改為有寬度變化的模式。

          圖片

          使用混合工具,將兩個線條進行混合,指定步數為 22。取向要選擇右邊的那個弧形的。這樣就得到了 24 個規律變化的葉子狀的圖形。

          圖片

          一排葉子做出來了,怎樣把它們變成環繞形的呢,這就要用到替換混合軸了。首先繪制一個圓形,再把上面切掉一塊。

          圖片

          同時選中加圓形和葉子們,打開對象-混合-替換混合軸。就得到了上圖右邊的圖形,已經可以看出“葉子形”的樣子了,接下來還需要做一些細節的調整。

          圖片

          先將兩圖形的軸心與參考線居中對齊。再將葉子圖形調整到與直線垂直,只需要調整兩端的圖形,中間混合的圖形會自動跟著變換。

          圖片

          現在“葉子形”已經基本完成了,但是我們發現,使用混合工具后的圖形是中心對齊的,而不是底部對齊,所以接下來,我們需要手動將葉子調至底部對齊。

          先將圖形擴展,然后調每個葉子移動到與線條的底端對齊即可。

          圖片

          最后再加上排版就完啦!

           

           

          圖片

          圖片

          常規的球形 LOGO,之前的教程已經演示過了。那像這樣的不規則的球形 LOGO 又該怎么做呢?來!

          圖片

          首先還是來分析下,這個的構成。上面和下面有兩條直線,中間是有很類似 H 字母的形狀,后面也是直線。

          圖片

          按照上面分析得到的結果,我們繪制出相應的圖形。使用長方形,拼出不規則的圖形。最后再將右邊的直角改為圓角。

          圖片

          打開窗口-符號。將繪制好的圖形,直接拖進符號面板,默認選項直接點確定就可以了。

          圖片

          繪制一個圓形,并刪除一半。

          圖片

          選擇一半的圓形,選擇效果-3D 和材質-3D(經典)-繞轉,就可以看到上圖的對話框了,默認選項,點擊貼圖按鈕。

          圖片

          打開貼圖的對話框,可以看到左上角有一個符號選項,選擇剛才新建的符號,勾選右下角三維模型不可見。接下來就調整中間圖形的位置,開啟預覽后可以邊調整邊看到圖形覆蓋在球形的變化。調整至合適位置后點擊確定就可以了。

          圖片

          將得到的圖形進行拆分,解組和釋放復合路徑后,就可以得到右邊的兩個圖形,接下為他們填充顏色。

          圖片

          正面的圖形填充藍綠漸變色,背面的圖形填充較深的藍色。

          圖片

          最后將兩個圖形再組合到一起,加上排版就完成啦。

           

           

          圖片

          圖片

          原研哉為知美術館設計的 LOGO,由美術館的外觀瓦片提取而來,形成富有變化的水波樣。同時,色塊規律性的大小變化也組成了字母 Z 的形狀。我們來解析一下大師的 LOGO 是怎么做的?來!

          圖片

          首先我們來分析一下方塊的變化規律。左邊是由上至下逐漸變大,右邊是由上至下逐漸變小。中間是從中間向兩側逐漸變小,但是中心不在一條垂直線上。

          圖片

          那第一步畫出一大一小兩個方塊,然后使用混合工具,步數設置為 9。這樣我們就得到了由大到小規律變化的一組方塊。

          圖片

          那么怎樣得到由小到大再到小變化。很簡單,將剛才得到的一組方塊,鏡像復制一份,就可以了。

          圖片

          得到一組圖形之后,再將它們向斜上方,連續復制就可以了。注意要將方塊錯開,行距也要相等。

          圖片

          最后再將多余的方塊,刪除掉即可。

          圖片

          排版再加上大師的字,瞬間就高級了起來!你學會了嗎?

          有很多 AI 里面的工具,也許你認識它,它也認識你,但是你不知道它竟然可以干這種大事。來跟我們一起探索巧用 AI 工具做 LOGO 的更多更簡單的可能性。

          今天的教程就到這里了,下方視頻教程更方便哦,任何人看完不跟著做的話我都會傷心的 ooooooooooooooooooK?

           

          文末,點擊原文地址,可直接觀看視頻教程 或 文字版本,隨你選擇;

           

          原文地址:胡曉波工作室(公眾號)

          作者:yoyo

          轉載請注明:學UI網》LOGO 設計技法(第三彈)

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

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

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

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

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



          關于設計師作品集那些事2-提升篇

          seo達人


          1.順叔有話說

          各位廣大設計師朋友們大家好!送走2021迎來新的一年2022,我們又見面了,好久沒寫設計干貨了,不知大家是否還記得當年那個夏雨荷,啊不對~~是當年的那個順叔,已經有一些小伙伴留言,私信我催更了。

          最近順叔正好有一些時間,可以去沉下心來寫一篇設計干貨。我是一個比較佛性的設計師寫設計類文章也是同樣的佛系,了解我的人都清楚之前的文章一般時隔時間不是那么規律,原因是我希望更好的沉淀和進行總結,才能分享出來更好的內容給大家。也一直在構思、內容、框架,是否能幫助到一些人,在距之前的一篇《關于設計師簡歷作品集那些事》已有兩年之久,感謝平臺,收獲了很多粉絲以及單篇17萬的瀏覽量,同樣在之前的設計文章干貨中幫助了很多人,留言咨詢我也給予了一些指導,幫助很多人。有一些設計師順利進入到心儀的公司以及大廠。從自身方面也挺開心和成就感。 在平臺下面有很多留言的朋友,其中有設計師朋友ID:木十一小透明說,“本人以為如果有實例就更好了”的留言。這個必須有,那么今天就安排上,走起。

          此篇文章受用于正迷茫,懵B,正在準備作品集沖大廠的你,正好它來了!

          本篇文章會是上篇文章的進階提升2.0版本。之后也會陸續有3.0…本篇會從各個方面進行解析,思路流程,框架,以及作品集的規范性,組成部分等方面進行展開說。通過一些例子讓你更清楚如何去做自己的作品集。希望這篇文章結合上一篇作品集文章結合看療效會更加顯著。

          好了廢話不多說了 開整

           

          2.作品集的重要性

          作品集的作用不少設計師都知道它的重要性,但往往還有不少設計師不知如何進行梳理、排序、排版,放哪些作品。作為一個設計師需要有一個作品集,作品集是對于你能力上、成長、以及經歷上的判斷,在眾多的作品集中 如何能脫穎而出,這個也是需要一些技巧的。希望能通過本次文章能有所收獲。

          undefined

          現在平臺各種的作品集,各式各樣,結合現在設計流行趨勢是沒問題的,但有一些“機構”或設計師對于作品集來說還是有一些誤解和跟風,甚至同質化嚴重。我的理解作品集最初是自己的作品集合到一起進行排版做個整合。最終找工作的時候可以給面試官看的,僅此而已。但現在的情況有所不同,有很多已經忽略了作品集當中的作品能力核心質量,而是在最終的作品集的樣式表現使勁,導致現在的作品集華而不實,很多設計師把作品集搞的很漂亮,但核心的能力以及作品薄弱了,忽略了作品的本質。作品集的外表樣式來說是提升作品的品質感,和提升作品的可看度,是賦予作品靈魂,好的作品集不只是一個包裝而已,也是要有好的作品內容相結合才是最終的結果。

          對于作品集來說:

          2-1從大廠的角度對作品集十大衡量標準

          2-1-1對于設計師基礎判斷

          一份作品集是對于設計師從審美、創新、沉淀總結、設計能力,思考,作為基礎的判斷。

          作品集是一個敲門磚的說法,設計師要作出專屬個性,藝術范的作品集尤為重要,內容作為核心,包裝作為附加。

          undefined

          2-1-2從作品集看出是否團隊中所需要

          作品集所呈現的作品,作為專業性的面試官只要一眼掃過就知道它是不是我們團隊要找的人,從設計調性,人員的能力模型招聘需求方面,創新,能力都會快速鎖定,比如團隊中缺少插畫的設計角色,當一個作品集中看到求職者插畫能力,色彩能力,創意能力很強,那么很容易被鎖定?;蛘邎F隊中,品牌中調性是很年輕,潮,運用的設計技法比較新穎,好玩。那么作品集的作品,以及作品集的包裝很符合這個公司調性,那么也很容易被鎖定。

          契合度完全在一份作品集中初步判斷。

          undefined

          2-1-3通過作品集可以了解設計師的能力如何,哪些比較強項

          同樣作品集是一個設計師的沉淀,總結,整合。一定是把最好,最優秀的一面展示在作品集中。所以其中的設計作品,也是招聘者判斷設計能力的標準??焖倥袛嘣O計中你的插畫能力比較強,還是版式,色彩,交互哪個模塊比較有優勢。和招聘崗位職責的要求是否符合。

          通過作品集就知道專業性的長板和短板。

          undefined

          2-1-4設計的類別是否完整

          現在對于進大廠設計考核的標準簡直就像古代選宮女一樣,嚴格,全面,多才多藝,啥都會干。

          設計師的評判就是設計要好,有創意,色彩搭配,設計思維,設計流程,項目落地,審美要好,各種軟件要會,甚至插畫能力,C4D,AE動效,交互能力等等加分項。所以好多設計師都學雜了,沒有勇氣在學設計!無時不刻的在填充自己的能力。落后很容易被拍在沙灘上,對于招聘方看作品集的完整度就是看你在整個作品集中類別分類都有什么。說白了就是你都會啥絕活。比如IP形象設計,運營設計,視覺設計,品牌設計,插畫,還會交互 UI界面設計。這樣設計師就比較“吃香”,可以判斷你屬于綜合性設計人才。

          undefined

          2-1-5設計師的設計精細化

          對于設計師的精細化是從設計中看得出,細節上的處理,以及做設計的時候是否有精心化,把設計做到滿意及標準化。比如做設計的時候界面字體規范不對,圖標的粗細不同,畫的插畫比較粗糙等等。都是針對于設計師精細化的一種考核。對于精細化能考核看出,設計師是否對于設計的高要求,對于細節把握的程度,對于質的標準。很多剛進入行業的設計師在精細化上的確缺少能力。這也是需要工作多年后逐步的習慣性才會讓自己對于作品的細節把握更好,更穩。

          精細化也是對于設計師的一個態度問題。毛躁的設計師做的設計就傾向于粗糙,穩一點的設計師對于作品就會照顧得到精細化。在設計走查的過程中知道哪些存在問題,哪些需要更好的迭代和修改,也是考驗設計師的自我“修養”

          undefined

          2-1-6了解設計師的設計方法及思維

          在整個作品集中除了作品視覺以外,更多要看的就是設計思維,設計流程和設計推導,這樣才能體現出兩個維度.

          1.你在設計的時候是動腦了

          2.這個作品是你做的

          往往有一部分設計師做設計覺得最終做出效果圖就行了,但往往不是這樣的,設計師是需要思維靈活,具有天馬行空有一些創意創新思維的。所以做設計師的時候應該有一些推導呈現在作品集中,也是很多公司在看的。不止看視覺還要看設計師是不是有思維的設計師,思維是內核,設計作品的呈現,流程,方法給予的作品意義。

          比如做一個IP形象,如何定義,設計策略是什么,設計目標是什么,設計價值是什么,設計流程和設計推導是哪些等等這些就是設計師需要以文字或者圖片進行闡述的,所以我們要做一個會思考的設計師。

          undefined

          2-1-7設計師的總結能力

          設計師的總結能力是從設計方法進行總結,另一個就是從自我出發進行總結。往往這個環節是很直接。分析,歸納,沉淀,總結。

          總結是對于自己的一個自我判斷。具有條理清晰,透徹,具體,深入,明確,邏輯性強一系列特點。很好的總結能力在總結的過程中可以發現問題,解決問題。

          undefined

          2-1-8是否有落地項目

          作品集中的項目是否落地尤其的重要,主要考核你的經驗,是否能很快上手做設計工作,所以如果有真實項目是很重要的。其中項目價值,項目完整度,類型,項目中角色,項目中思考,項目中遇到問題如何解決問題,項目中協作,溝通等等。

          說白了如果有落地項目來公司就直接上手干活,如果沒有落地項目還需要進行前期的培養。時間成本,人員成本也是比較高的。如果有一個落地項目知道其中的過程,甚至參與過其中的環節那么在有新的項目也會得心應手。特別那種在校大學生最好有實習的機會去工作,這樣為自己攢一些能力,新手設計師同樣能參與到項目中是對自己的一種磨練和提升。

          undefined


          2-1-9作品集的差異化

          作品集的差異化,就是不同,獨特性,所以作品集一定要具有一定的自我風格,杜絕模版化,如果一個設計師套用一個模版,那么這個設計師是懶呢?還是設計不行呢?對于你能力產生一種判斷,設計的可以作為借鑒,但切勿抄襲。作品集的差異化,有特點,有設計感,有層次,從感官上眼前一亮,才有機會繼續往下觀看,這個也是技巧。

          undefined

          2-1-10.作品集的設計表現力

          對于作品集來說除了內核的內容作品以外,外包裝就是作品集,對于作品集的表現力說白了就是好看且好用。表現力各有所需,每個人定義的風格來說都具有不同,但無論選擇什么樣式,設計出的一定具有一定的藝術感和設計感,根據現在比較流行的一些技法結合到我們的作品集中,進行表現,比如線性的,透視線,酸性,大字,重復,圖章,標簽,等等都可以融入到設計的表現力中。

          說白了設計的作品集不要老氣,要新穎,獨特性,藝術感,設計感。流行的趨勢,就沒毛病。表現力也是通過色彩,圖形,字體,插畫等進行的版式。具有一定的層次感。如何進行表現力在后面會詳細提到,高清大圖配文字哦。耐心往下觀看!

          undefined

           

          3.從個人層面的作品集

          上面說的也很清楚,其實考核的標準也是設計師需要做到的標準。但從設計師角度來說對應現狀考核要求去做自己的作品集是一點問題沒有的,對于設計師大致核心的這四點

          3-1作品集做好看

          3-2作品集要全面完整及精細化

          3-3展示自己的設計能力

          3-4 設計思維和流程的體現

          其實無論是公司角度,還是個人角度核心的目的就是公司想找到合適的人,設計師想找到合適的公司。

          通過作品集進行前期的判斷,但不少面試官從作品集的“好看”忽略能力上的實用性。導致工作中一步一個坎,設計師的現狀覺得漂亮的作品集就能找一個不錯的工作,其實這個算是個病態。漂亮的花瓶,不實用也不易用。說白了最終就是作品集好看+設計作品精細化+落地 才是各方所需要輸出的最終目的。

          也祝找工作的朋友們,幸運!找到心儀的工作。

           

          4.作品集的適用范圍

          undefined

          遇到過工作了很多年了,也攢下來了很多作品,但最終做成作品集沒有思路進行去梳理,也不知曉有些作品該放還是該pass、梳理如何梳理、排序如何排序、設計如何設計、增加什么內容。

          也有遇到過視覺傳達專業的學生。干脆不知什么是作品集,自然更不知作品集如何做,也沒有什么作品,等等。所以讓大家清楚如何做成屬于自己的作品集

           

          5.設計作品集的八大流程

          5-1 作品集框架-框架要好思路清晰

          作品集框架好比一個腦圖規劃,會更直接更清晰可見,可以在Xmiand軟件中實現,比如信息的層級,頁數,結構,排序,都會有序規劃。脈路清晰,結構清晰在后期設計作品集的時候會更加快捷。

          比如首頁-個人簡歷-目錄-設計作品排序,然后首頁放什么內容,目錄放什么內容,更好的對作品集層級規劃。undefined

          5-2 作品集設計作品的分類-類別歸檔有序查找

          如果多年的設計師會有很多的作品,比如banner,UI界面,B端的設計,海報設計,插畫 ….很多,這個時候就要有分類,有歸類,在挑選作品的時候一定把最好的挑選出來,不好的千萬不要放,不要為了量,要質!這個環節我一般會建一些文件夾,分好類,比如banner,海報,字體,項目界面,插畫、然后把挑選的類別作品放入到文件夾中,在作品集排版的時候方便查找和使用,至少不亂!

          undefined

          5-3 作品集的風格定義-風格調性決定氣質

          風格調性決定氣質,就好比一個人的穿著,給人感官是可愛的,還是酷酷的!

          作品集同樣風格定義決定了氣質,比如想要酷酷的感覺,還是可愛風格,還是國潮 …

          在設計運用和表現中元素、色彩、板式、字體都會有不同表現

          undefined

          5-4 作品集色彩的定義-色彩覺得了作品集的風格

          色彩的定義和風格定義是具有關聯性的,比如想要做一個潮酷的風格那么對應的色彩在運用中一定是黑色,白色,或者灰色為主,搭配一些輔助的藍,紅,黃,等顏色

          如果調性上選擇可愛風格的,那么選擇的主要顏色一定是飽和度偏高一點的紅黃藍綠等顏色、通過對比色、鄰近色進行設計,顏色決定了作品集的氣質。

          undefined

          5-4-1 推薦幾款不錯的配色

          undefined

          5-4-2 推薦幾款不錯的漸變色

          undefined

          5-5 作品集的元素/圖形/版式收集

          這個環節基本就是為自己增加一些靈感元素,設計本身就不是閉門造車,多看看表現形式,排版,字體的應用,色彩的應用,元素表現等等。把好的元素,設計收集到 靈感庫中,最終在設計的時候結合自己的想法進行設計,也就是我們所謂的借鑒。

          undefined

          5-6 作品集設計

          在設計的時候一般情況下我都會使用PS、AI、SK進行設計。

          尺寸:1920*1080.16:9. PPI72

          顏色模式:RGB

          PPI:72PX

          舉例在AI中我會建立一個1920*8640(可放8個1920*1080)的畫板命名為畫板1,然后復制出一個畫板2,畫板3 或者更多,根據自己的版面多少就建立多少畫板。

          這個時候就可以在空白的畫板進行設計。在設計的過程中首先不要考慮太多細節,先給一個定義好的顏色,然后把元素,文字(先不考慮什么字體)先擺上。

          然后整體完事在進行細節調整,字體的大小、色彩的對比、元素的擺放位置。

          先做加法,后做減法。

          首頁干凈、簡約、核心的元素,文字凸顯出來即可。

          一般設計完通過AI 導出PDF格式

          undefined

          5-7 作品集導出PDF

          設計完畢,需要導出PDF的,切記!?。〔灰狿NG/JPG的長圖。

          怎么導出來PDF就不詳細說了,如果PDF都不會還做什么設計師!還做什么作品集!

          最后說一個導出小技巧:AI導出PDF的時候在預設選項中選擇,“高質量打印”不要問我為什么這樣選,信我就對了!

          undefined

          5-8 PDF進行壓縮

          正常情況下導出作品集PDF都會很大,一般招聘網站上傳限制30MB,如弄了一個500MB的傳不上去尷尬不尷尬,如果給面試官或者HR下載龜速很慢也很尷尬,講話了誰的時間都是寶貴的,下載這作品集就花了五分鐘,看你作品集的概率就減小了。很多壓縮的平臺,自己動動小手找一找!實在找不到問我?。?!

          undefined

           

          6.作品集的六大組成部分

          了解作品集組成部分在作品集布局時有效排序并設計,給作品集設計提供了快速有效的設計流程。

          6-1首頁(封面)

          封面是必不可少的,封面主導著整個作品集的規范,調性。同樣把圖形信息和文字信息匯總在一個版面中,更好更快傳達出信息,封面代表的個人展示的作品集的樣式,很直接,好看,潮酷或者創意都會具有抓住瀏覽者或者招聘者的眼球,所以第一封面在設計的過程中一定從色彩,創意,圖形,版式吸引才有更多機會和欲望往下觀看。

          先吸引,后詳細查看,一般招聘者或HR在篩選作品集的時候短短幾秒,怎么能在短短幾秒中脫穎而出繼續了解你,封面起到了很大作用。

          在封面需要展示的內容:

          6-1-1 作品集標題

          6-1-2名字/藝名

          6-1-3標簽

          6-1-4年份

          6-1-5英文

          6-1-6元素

          6-1-7圖形

          例圖

          下面作品集是我的學生栗子的作品集,過程中由我進行的指導。經學生的同意,拿栗子的

          作品集給大家進行講解。感謝設計師栗子 站酷ID:栗子Ocean

          undefined

          第一步

          首先在做作品集封面的時候把需要展示的文字,圖形,顏色先擺放上,然后在進行調整設計。初步的擺放略顯粗糙,層級變化不夠明顯,所以可以通過比較流行的線條,透視線,等作為背景,讓背景充實起來。

          undefined

          第二步

          定義風格,上面提及過,風格的定義主導了整個的調性,前期考慮到潮酷,年輕化的設計,沒有運用太復雜以及漸變的背景,干凈簡約,背景主要的功能就是襯托前面圖形和文字信息,背景和前面信息具有層次感更突出。這個時候嘗試用線條進行信息分割,線分割也要考慮布局這個作品集首頁運用的左右布局,左邊運用了AI工具欄的樣式,右邊線分割。具有了一定的設計感把一些文案進行區分文案信息要有文字的主次分明,在封面,作品集三個字是需要明顯的明顯設計角度出發點是要么大,要么顏色有變化,標題,副標題,以及內容在標準化設計中要有一個定義。

          風格定義:潮酷

          顏色定義:黑/白/綠

          圖形元素:黑白插畫

          裝飾元素:幾何形

          字體:中文,英文

          undefined

          第三步

          文案擺放入到布局的網格中,在字體中要有大小,顏色,粗細,中英文的變化,以及圖形結合文字/英文布局,從文字中定義主要信息層級,次要信息層級,以塊狀有序的進行排版。剛設計的時候不需要考慮顏色,都用一個顏色,或者白灰就行,一旦都擺放完畢,在根據情況給予顏色,比如整個畫面有黑,有灰,在來一個綠色,會更讓整個畫面更加的提氣具有變化感英文+圖形結合最終放在頂端底部運用,整個界面設計豐富了很多。

          undefined

          第四步

          文字,色彩,版式也差不多了那么還缺少一個圖形主角,圖形構圖,酷酷的雷電,時光機宇航員,以及小怪物,以黑白色調主調。和整體作品集風格契合度加強。視覺點具有一定爆發視覺沖擊點。文字信息和圖形信息結合傳達表現設計意義。

          undefined

          第五步

          最終到這一步基本接近首頁設計尾聲,進行精細化設計處理,以及設計走查,在做加法同時在做減法,把多余改去掉的去掉,增加的增加,整個過程中還缺少一些輔助圖形可以添加運用輔助圖形,以及比較酷酷的,復古一點的設計元素,增強設計感和視覺感讓畫面更飽滿。信息層級更清晰

          undefined

          總結

          運用了幾個步驟大致講了一下在作品集封面時候的步驟和思路。設計不可直接復制,但可給予一些靈感。通過這個步驟和思路清晰情況下在進行設計就輕松的多了。設計表現形式不止于此。還有更多表現形式。通過創意發揮出設計的本質。希望通過這個小例子給大家一些方向和靈感思路

          6-2.個人介紹  

          此頁的重要性就不言而喻了,可以說那是相當的重要了 !從作品集了解你的設計能力,那么從個人介紹中了解你的個人信息,教育背景,獲獎背景,項目背景,以至于你的聯系方式,有很多同學在個人介紹中忘記留聯系方式,導致尷尬到面試官聯系不到你!個人信息中,有項目一定要把項目寫明,并且在項目中擔任的角色,做了哪些工作。可以簡單描述,但必須要清晰。還有就是在個人介紹中個人照片一定要有藝術感點,別弄一個隨便的自拍照放上去,要有點質量,千萬別整個西裝革履打個領帶,那你可能整錯了,要做銷售那照片沒問題。

          信息層級:

          6-2-1.名字,

          6-2-2.教育背景

          6-2-3.電話/郵箱/微信

          6-2-4 .二維碼

          6-2-5.個人照片

          6-2-6.標簽

          6-2-7獲獎/參賽

          6-2-8.項目

          undefined

          個人信息頁從設計表現上延續了首頁風格調性。增加信息層級內容,在設計表現中線框瀏覽器樣式,以及英文線重復設計,并在整個設計中增加標簽以及透明塑料布作為視覺輔助效果,并在下面破損的紙樣式作為設計層級變化。讓視覺呼應切變化。增加了更大視覺感。通過復古的一些元素視覺效果順延。

          6-3.個人目錄

          個人目錄要寫清楚列表,這樣也會更清晰讓瀏覽者和面試官更好的找到要看的內容,引導面試官清晰信息類別層次!比如: 運營設計 品牌設計 項目設計 插畫 C4D等。什么樣的設計師針對性的進行排序和分類,根據自己情況進行類別分類!

          undefined

          目錄分類條

          undefined

          6-4.設計作品排序

          設計作品的排序其實也是有一些技巧的,要找運營視覺設計師,那么就需要優先放視覺的內容。要找UI設計就優先于項目部分!

          運營視覺設計師:比如海報,banner,主KV,插畫,H5,IP吉祥物,C4D。

          品牌設計師:主KV,包裝設計,VI,海報,字體設計,圖形設計,IP吉祥物等

          UI設計:banner,海報,插畫,H5,交互設計,B端,C端。

          電商設計師: banner,網頁設計,H5,專題頁,詳情頁,插畫,C4D

          當然了,如果沒有定義是什么設計師,還能做視覺還能做品牌,還能做UI部分的工作,那么從作品中挑選出不錯的放在作品集中,同樣也要考慮到優先排序問題。

          6-5.樣機展示

          樣機是什么?在作品集中是為設計提升B格、提升設計感的、作為輔助、提案所應用。

          如果沒有樣機作為設計顯得單調,如果有樣機是讓作品更有品質。但我發現部分設計師為了樣機而樣機,甚至用的樣機不恰當和設計內容完全不匹配,為了好看確沒有實際意義。頻繁用樣機也不好,樣機老氣也不好。所以樣機除了體現設計的品質,合適最重要。我發現作為學生做的樣機很喜歡都放在整合一頁展示,本身就是提升設計感,放大設計放在一頁顯得單調,還不如不放。所以作品集一定要單頁去排序擺放。會讓設計更具有品質感

          錯誤的樣機應用排版

          undefined

          正確的樣機應用排版

          undefined

          6-6.總結

          在最后一頁的時候最好寫一些總結性話術,可以從你的長板,短板進行說,千萬不要說客套話,也不要從網絡摘抄。要客觀的對于自己的評價和總結。讓面試官更清晰更快的認識你。

           

          7.常見作品集形式

          undefined

          在這幾種形式PDF是最常見的了,而且也是最經濟,方便,直接的,但要注意的就是大小上要注意,最好30MB-50MB最佳的。長圖來說不太建議,不要問為什么,你懂得!第三方設計平臺比如站酷,UI中國,等設計平臺。但這個在觀看的時候體驗感一般!最后一個就是官網,個人官網到不錯,但需要設計,程序,域名空間,繁瑣了點,在整個形勢中,PDF是比較直接的也是大家接受度比較多的。無論什么樣的形式,根據自己情況而去決定。但大家都在用也有一定道理。

           

          8.作品集的加分項是哪些

          undefined

           

          8-1.C4D在作品集中的體現絕對的具有一定的加分,無論是運營,品牌還是電商甚至UI都需要有C4D的呈現,品牌中IP吉祥物3D樣式,電商中詳情頁,banner應用3D樣式,運營設計中海報,視覺運用C4D,C4D的表現也無處不在。也備受設計師以及現在審美需求所需要。

          8-2.插畫最為近幾年的在設計中表現形式,講究情感化設計,通過內容進行圖形,插畫表現,更好的讓用戶所接受,同樣插畫在品牌設計,包裝,UI,運營備受關注和應用,如果有插畫能力那么在作品集設計作品中進行結合具有一定的加分項。

          8-3.包裝樣機,必不可少,也是作品集的加分項,但不要亂用和頻用,恰當適合為佳。

          8-4.設計的作品越多越好,但一定要好的作品放進作品集,作品集一定是把最好的東西,最能代表設計能力的作品展示出來。不要糾結于放哪幾個或者都要放。

          8-5.設計一定具有一定的規則,創意。比如banner,為什么要用這樣的創意,為什么要用這樣的字體,為什么要用這樣的顏色,都是有一定的技法和思維推導的,描述清楚。作一個思考的設計,而不是做一個素材的搬運工!

          8-6.解決問題是考核設計師解決事情能力,在項目中,甚至在設計中一定會遇到很多問題,比如溝通問題,協作問題,設計問題,在設計中遇到的問題是什么如何解決的。說明也考驗了設計師的總結能力,做事態度和做事解決能力!設計師的工作也是為產品,視覺,營銷解決交互,體驗,視覺的事情。所以如何解決也是看待你在工作中是否能把事情更好解決,也就是我們所謂的沉淀經驗。

           

          9.作品集的設計表現

          undefined

          undefined

          undefined

           

          undefined

          篇幅原因就介紹這些吧,還有比如用一些酸性的設計,線性的設計。等等,就不一一舉例了大家也可以在設計過程中發現美。如果有什么疑問和不了解的也可以隨時問我。以上的干貨希望大家慢慢吸收。篇幅有點過長。

           

          10.作品集的壓縮好物

          PDF壓縮好物,主要免費,在線的??ň褪且活D壓!好不好不要問,自己體驗才是真舒服了留言說一聲!

          undefined

           

          11.招聘職責參考物

          下面 在網絡上找了幾個互聯網公司的招聘信息,為什么要放這個,而且還是已經過去的事,目的是讓大家心里有個數,看看現在招聘對于設計師的職責,要求能力都需要會啥,啥行自己對照一下,哪塊不行補哪里,而且根據職責要求,工作內容進行作品集的設計以及排序。要有針對性的準備,不能盲目、迷失、要有個方向感!

          undefined

           

          12.你敢問!我敢答!

          下面 在網絡上找了幾個互聯網公司的招聘信息,為什么要放這個,而且還是已經過去的事,目的是讓大家心里有個數,看看現在招聘對于設計師的職責,要求能力都需要會啥,啥行自己對照一下,哪塊不行補哪里,而且根據職責要求,工作內容進行作品集的設計以及排序。要有針對性的準備,不能盲目、迷失、要有個方向感!

          undefined

           

          順叔最后想說

          這篇文章準備了很久,文字,以及配圖都是很精心的準備,希望能通過我的經驗分享大家能受益,這些年一直輸出些設計文章,對于每一篇文章我都是很精心的去設計以及寫內容。寫這篇也是經過了幾個凌晨。很用心在寫。當有人給我留言,通過文章有一些靈感,找到了不錯的工作,幫助到了他,對于我自身來說還是很開心的,具有成就感。賺到的就要給人,學到的就要教人,我雖然比較佛性,文章一年可能就一篇,但每一篇我都認真的對待。上一篇作品集文章達到了17W瀏覽量很欣慰,這篇是基于上一篇做的提升版,其中有很多技巧個人覺得還是比較有用。給正在迷茫,不知所措準備作品集的你一些靈感和思維,如果覺得不錯的話 希望多給順叔一些支持和點贊也不枉我認真熬夜的去寫這篇設計干貨!好了話不多說,希望能幫助到你!你的支持是我的動力。不斷的有設計作品和設計干貨。我們都是在設計路上的陪伴者??!

           

          原文鏈接:zcool

          作者:張增順

          轉載請注明:學UI網》關于設計師作品集那些事2-提升篇

          藍藍設計建立了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国产综合