<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          有了這個插畫庫,作品亮點暴漲呀!

          seo達人


          一、數量非常多

          我翻了好一會兒一直沒有翻到底~O(∩_∩)O~,只能用數量眾多來形容啦!各種小場景的插畫無論是獨立使用,還是組合使用,肯定可以滿足很多場景需求了。

          圖片

           

          二、顏色可以任意調節

          這絕對是一個非常優秀且人性化的功能,里面提供的插畫作品不像一些平臺屬于圖片格式,只能下載固定配色的版本。這里提供的作品可以在平臺自定義顏色,展開拾色器隨便發揮,簡直是要逆天啦!??!

          圖片

           

          三、人性化的格式選擇

          該平臺提供了 SVG 格式,方便下載之后進行二次編輯。如果你覺得已經很完美了,也可以選擇下載 PNG 格式,也是非常人性化的。

          圖片

           

          四、免費使用

          這里提供的資源是可以免費使用到個人或者商業場景中,關于這一點也是值得推薦的理由。大家可以在平臺的相關規則說明中了解到,注意時刻關注規則說明的變動。

          圖片

           

          五、其他優勢

          平臺還提供了一些別的風格,如果感興趣的同學可以自行體驗一下,也可以指定內容搜索,整體使用下來還是蠻不錯的。

          圖片

           

          六、欣賞一些插畫作品

          黑馬哥為大家復制了一些插畫作品,大家可以感受一下作品的風格和質量,如果感興趣的話可以訪問體驗一下。

          圖片

           

          七、獲取網站鏈接

          關注黑馬家族微信公眾號,后臺回復關鍵詞“插畫庫”即可獲取鏈接。

          unDraw 插畫素材庫網址:https://undraw.co/illustrations

           

          八、創作一下吧!

          黑馬哥也運用這個插畫素材庫的資源完成了一組作品,以此給大家做一個案例示范,感興趣的同學也可以嘗試一下。

          圖片

          圖片

          圖片

           

          九、布置一個作業

          根據黑馬哥完成的案例,大家可以舉一反三。根據以下提供的高保真原型,完成一組小作業,

           


          作者:黑馬青年


          轉載請注明:學UI網》有了這個插畫庫,作品亮點暴漲呀!

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


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

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

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


          那些要打馬賽克的設計…

          seo達人



          提到馬賽克,大家會想到什么呢?是不是爺爺家那臺黑白電視沒信號的時候出現的畫面,還是小時候玩的街機格斗游戲里的人物(那……似乎是看小豬佩奇長大的我們不懂的世界)

          圖片

          馬賽克像素風格的誕生源于早期 8 位/16 位計算機有限的存儲空間和圖像表達能力。都說時尚是一個輪回,現在我們能看到很多海報設計采用馬賽克的形式,以營造更強的趣味感的形式來吸引人的注意力。

          圖片

          這次就給大家演示簡單容易上手的這 4 種馬賽克形式的海報案例展示:

          圖片

           

           

          圖片

          夏天到了,大家一起來吃瓜吧!先畫一個簡單的西瓜圖標,在 Ai 里執行【對象】→【柵格化】。

          圖片

          繼續在 Ai 里選擇【對象】→【創建對象馬賽克】,就可以得到下面這個馬賽克西瓜,是不是灰常簡單!拼貼數量這里跟本身圖的大小有關,大家可以多嘗試~

          圖片

          這個馬賽克西瓜現在都是一個個方塊組成,把邊緣的色塊規整一下,就可以啦!

          圖片

          用同樣的方法再畫一個笑臉跟對話框增強趣味:

          圖片

          然后我們再來做一下背景,一組夏天的清涼配色送給大家,這里我用的是 Ai 里的網格工具用錨點來添加漸變色。

          圖片

          最后環繞圖形排文字,這張圖形馬賽克海報就完成啦!

          圖片

           

           

          圖片

          我這里選用粗細筆畫變化比較大的一款宋體,后面馬賽克的效果處理會更明顯些。

          圖片

          打開 PS 建一個新的畫板【1200×1600】,背景色改黑色,文字白色,然后把文字圖層轉換成→【智能對象】,選擇【濾鏡】→【像素化】→【馬賽克】,數值如下。

          圖片

          新建一個【閾值】圖層,數值如下:

          圖片

          就可以得到這個馬賽克字體的效果啦!

          圖片

          在 PS 里蓋印一個圖層然后把圖拉進 Ai 里進行【圖像描摹】,然后【擴展】,就可以得到矢量的馬賽克字啦!然后可以更改顏色,這次我想做一個更潮流電子的感覺,所以選用了綠色,然后再加入一些裝飾線條增強畫面感。

          圖片

          這里我還選了一個像素的英文字體來增強畫面形式感,再加入其他文字信息跟裝飾圖案。

          圖片

          然后再加入一些漸變色塊,增強顏色層級,豐富畫面。

          圖片

          圖片

           

           

          圖片

          本來這里也只打算做一張案例的,萌萌心血來潮說,要不再試試?這不就又多做了一張,真是歡(要)天(了)喜(老)地(命)了。

          第一張把人物拉進 PS 里處理,選擇→【圖像】→【模式】→【灰度】處理成黑白的,然后再選擇→【圖像】→【模式】→【位圖】數值如下(半調網屏數值越大,方塊就越小,反之亦然)。

          圖片

          然后再選擇→【圖像】→【模式】→【灰度】,在灰度的模式下再選擇【RGB】模式即可,把人物摳出來,我是提前在有顏色的情況下先扣了圖,半調效果做了之后,按之前扣好圖的人物輪廓再取一個半調的人物輪廓即可。

          接著我們再來做背景半調的處理,我直接用的 PS 透明背景截圖然后用處理人物的方法同樣處理了一個半調背景,再疊加顏色即可(偷了個小懶)。

          圖片

          繼續豐富畫面,選一個高挑的英文,在 Ai 里先擴展一下,然后再選擇【對象】→【封套扭曲】→【用網格建立】。

          圖片

          用選擇工具,分別選中上中下三行的錨點,進行移動,中間的往右移動,上下兩邊往左邊移動,即可得到:

          圖片

          最后環繞人物擺上文字信息就可以啦!

          圖片

          不要停,繼續做第二個案例,其實第二個案例用到的方法會更簡單,一秒出圖不夸張,第二個想做復古一些樂隊的的感覺,于是找了一張人比較多的圖,拉進 PS 里,新建一個閾值圖層,這不,效果就出來了!

          圖片

          跟上面一樣的方法,我先在有底色的那張上把人物扣好,然后再用這個輪廓把閾值圖層的人物摳出來,好像差點什么?哦,樂隊的吉他!然后我趕緊找了把吉他放上去!

          圖片

          我覺得還可以再豐富一下畫面,于是我用 Ai 填充圖案的方法,加了點馬賽克的紋理,再找了張斑駁的紋理疊在上面,這樣復古感就更強烈了!

          圖片

           

           

           

          圖片

          最近疫情又反復了,這不今天下著雨也收到了社區讓我們去做核酸的通知,于是我隨手拍了張圖,不得不說,拍出了我的辛酸,于是我決定,這次的案例就用它了!誰手機里還沒有幾張街拍呢!

          圖片

          熟悉的套路,在 PS 里做效果,選擇→【圖像】→【模式】→【灰度】處理成黑白的,然后再選擇→【圖像】→【模式】→【位圖】→【圖案仿色】。

          圖片

          得到這個畫面后,再選擇→【圖像】→【模式】→【灰度】,在灰度模式上再選擇【RGB】模式,再選擇→【圖像】→【調整】→【漸變映射】,這個背景就處理好啦~

          圖片

          最后配上我辛酸的文案,最后這張海報就做好啦!大家可以試試這種簡單方法拯救一下你相冊里的照片哦。

          圖片

          本次教程就結束啦!快帶我去你的收藏夾吃灰吧!


          作者:大熊

          轉載請注明:學UI網》那些要打馬賽克的設計…

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


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

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

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


          B端設計經驗總結-幫助新人快速上手

          seo達人


          本篇文章總結了交互新人在初工作過程中可能面臨的疑惑與問題,并結合自身經歷總結了相關設計經驗,希望能夠幫助新人設計師快速上手B端設計,游刃有余的應對工作中面臨的各種機遇與挑戰。首先,作為一名新人,在剛入職做設計時可能遇到哪些問題呢?看看以下問題,或許你會感覺很熟悉:
          • 需求文檔不規范怎么辦?
          • 承擔了很多與產品相關的工作,是好還是不好?
          • 需求量大,如何推動需求排期合理化?
          • 經常插入或變更需求怎么辦?
          • 如何更有效的解決問題?
          • 需求是否有價值?
          • 如何做好體驗優化?
          • 怎樣做好設計,并提升設計的說服力?
          • 應該具備怎么樣的知識才能更好的應對日常需求?
          • 我應該掌握哪些專業知識與能力?

          上述問題看起來比較雜亂,但是通過一定的分類整理,可以概括為兩個方面,即:「專業能力」與「職業能力」。

          圖片

          圖1 專業能力與職業能力

          專業能力:

          與設計直接相關的能力,是完成設計工作不可或缺的組成部分,比如 需求挖掘、需求分析、方案設計、用戶研究等內容。

          職業能力:

          崗位要求需具備的一些能力,可以幫助設計師更好地處理工作過程中遇到的問題,比如溝通能力、規劃能力、驅動能力、執行能力等,可概括為“發現問題-解決問題”的效率與能力。

          隨著設計師項目經驗和工作經驗的增加,其所具備的專業能力和職業能力也會不同程度的成長與提升。下面會首先對新人設計師所應具備的專業能力進行總結和說明;其次對與職業能力常見的問題進行一定的解答與建議,希望能夠幫助到各位設計師同學。

           

          一、專業能力

          設計師首先要明確設計工作的主要內容,從需求分析、用戶分析到將抽象的需求轉化為具象的設計方案輸出,再到跟進設計方案上線;通過定性定量的方式跟進用戶反饋,持續推動用戶體驗優化及挖掘更多用戶場景和訴求均是設計師日常工作過程中的核心工作內容,接下來我們初步分析:

          圖片

          圖2 設計師主要工作內容

           

          1、需求分析與用戶分析

          當設計師拿到需求后,切記要多去追問為什么。因為產品經理給到設計師的需求更多情況下是具體的功能,而對于為什么要做該功能是需要設計師去深入洞察和挖掘的。此階段,設計師要明確「業務目標」「業務指標」「設計目標」和「設計指標」的概念,參照下圖所示。

          圖片

          圖3 需求分析與用戶分析

          以“某客服平臺改版”的需求為例進行簡略介紹,其業務目標是:解決客服人員工作過程中遇到的痛點,提升客服使用體驗,同時期望縮減客服人力成本投入,并明確具體的業務指標。設計側接手項目后,通過 用戶觀察、用戶訪談等用戶研究手段,了解平臺痛點,并從「業務層面」和「設計層面」總結歸納。

          圖片

          圖4 客服系統分析

          對于業務層面的突出問題,通過與產品多次溝通形成相應的產品策略,并落實到具體方案中。而對于設計層面的問題,為了更系統準確的了解客服人員的痛點,設計側又進行了二次調研。首先整理訪談提綱對客服人員進行訪談;其次整理了問卷提綱,通過發放問卷進一步驗證調研結論的準確性,并全面收集客服人員的建議。并且沉淀各角色人員的用戶畫像,了解各角色人員的主要工作事項、關注點及痛點。調研發現,客服人員的主要工作內容聚焦在以下事項,并且客服人員對系統的整體滿意度較低。

          圖片

          圖5 用戶分析-客服主要工作內容

          結合業務目標及對業務和用戶的分析,設計側將“提升用戶核心工作流程的工作效率及平臺整體的用戶滿意度”作為設計目標。由此設計的重點也放在核心操作路徑優化和整體體驗提升上面。通過對調研結果進行系統梳理,整理出高優先級優化內容,并推動埋點功能上線。最終,設計側拿到核心操作路徑優化前后的數據對比,達成設計目標。

          建議各位設計師拿到需求后不要急于產出設計方案,多去進行需求分析與用戶分析,它可以幫助設計師更深入的理解業務,挖掘業務本身的問題,了解用戶的使用場景、關注點、痛點、期望與建議,為后續開展方案設計提供設計依據。在設計評審時呈現自己的思考與分析內容,也會大大提升設計方案的說服力。

           

          2、需求轉化為設計

          關于設計目標的重要性在上述部分已有講解,因此本部分重點講解「設計系統」與「設計原則」。在日常工作中,除了上述提到的平臺改版等較為復雜的需求,絕大部分情況是產品經理梳理清楚具體的需求或功能點,經需求評審后將其給到設計師,由設計師在敏捷迭代有限的時間內快速產出最優的設計方案。而對設計系統的充分了解和應用是B端設計過程中不可缺少且非常重要的一部分。

          設計系統的構成

          《Design System》一書中對設計系統的構成進行了詳細的解讀,筆者將其中與工作關聯性最強的部分進行了整理,并且結合工作經驗簡要談談自己的理解。

          圖片

          圖6 設計系統的構成

          • 設計原則:

          設計過程中需要遵循的指導原則與依據,有利于保障系統的易用性,提升用戶滿意度。由于設計原則的重要性,筆者會在下文中進行詳細描述。

          • 設計組件:

          通常包含基礎組件、復雜組件和業務組件?;A組件即原子組件,例如按鈕、輸入框、下拉框等,可用于構成復雜組件或業務組件。復雜組件通常由基礎的原子組件構成,但仍然在多條業務中具有通用性,例如 表單。業務組件通常用在特定業務場景下使用,具備復用性的同時可保證設計統一性。由于各公司通常具備成熟的組件庫或使用ant design和iview組件。因此設計師在業務支撐過程中更多是從業務組件入手,本著“標準、統一、復用”的理念,沉淀豐富的業務組件以提升設計統一性、以及設計與開發效率。

          • 設計模式:

          同類場景下用戶行為的統一模式,從而避免多種設計問題出現,有利于形成統一的用戶心智,符合系統設計的一致性原則,例如上傳、搜索、批量操作等。需要通過詳細的設計規范,對模式的使用場景、解決的問題、遵循的原則以及模式具體如何應用進行詳盡細致的說明。某些設計模式可以沉淀為組件來達成模式的統一應用,而對于不方便沉淀為組件的模式,需要整理詳細的規范文檔,方便設計師查閱與使用。

          • 控件庫:

          將設計資產(組件、模式、圖標、插圖等)整理為symbol控件,在axure、sketch等設計軟件中可快速使用控件搭建頁面,提升設計效率。

          • 視覺樣式:

          通常包含顏色、布局、字體、圖標、動效、插圖等,是保持全局樣式視覺統一性的重要基礎。

          • 設計規范:

          對視覺樣式、組件、模式等如何應用進行詳細的設計說明,包含設計原則、使用場景、使用流程與反饋等,產出通常為設計規范文檔,對于新人設計師,一定要熟記、掌握和學會如何應用。

          設計原則

          關于B端設計原則,設計師對“高效、清晰、可視化”等原則一定不會感到陌生,但是筆者一直在想設計原則的得來是否能夠更加有依據。由此上網看了很多文章,也結合自己支持的業務去思考,基于個人經驗將設計原則總結概括為三個部分:「設計指導原則」「事實性原則」「可用性原則」。 

          圖片

          圖7 設計原則

          設計指導原則:

          B端設計原則的頂層指導原則,是整個平臺設計的全局性原則,通常由 業務定位、行業屬性、客戶標準、用戶特征等因素綜合得出。

          比如公司內部的客服系統和面向房地產行業的設計管理系統,客服系統從業務定位出發是希望客服人員工作更加高效,而客服人員從自身動機出發也期望更加高效的完成目標,以取得不錯的績效。一般在設計時,設計師考慮到信息密度的問題,會將部分信息折疊收起,但是對于客服人員來說,他們更希望將全部信息鋪開展示,通過瀑布流的形式他們可以快速檢索信息,提升工作效率。而對于房產的設計管理系統,業務定位是提供全鏈路的解決方案,讓客戶滿意是非常重要的業務目標。

          由此,滿足客戶的標準和使用人員的訴求對于系統設計來說非常重要??蛻魰谛袠I屬性的特點提出要求,比如更加注重科技感,用戶希望頁面更直觀,信息密度小等,設計師要綜合多種考慮去制定全局的設計指導原則。

          • 事實性原則:

          基于業界的定律去設計,為最優設計方案提供更多依據。比如??硕伞⒎拼亩傻?。除此之外,設計師更要懂心理學,了解用戶在觀察、閱讀、記憶等方面的影響因素,并且將其應用在方案設計中。如此,設計方案便有理有據,經得起推敲。

          • 可用性原則:

          比如尼爾森十大可用性原則和設計界其他的一些可用性原則,設計師相對來說都比較熟悉,需要結合業務特征進行靈活的運用。

          基于設計目標、設計系統、設計原則進行具體的方案設計,會幫助設計師從“完成方案”到“完成最優方案”進階,同時也有利于:保障設計統一性,提升設計與開發效率;形成統一的用戶心智模型,提升用戶體驗;平衡設計與技術,降低技術開發成本,保障功能按時上線。

           

          3、需求挖掘與反饋收集

          通常可使用定性、定量的用戶研究手段去挖掘用戶訴求以及收集用戶反饋。定性調研通常包含:用戶觀察、用戶訪談、焦點小組、啟發式評估、可用性測試等。定量調研通常包含:問卷調研、數據埋點、后端數據拉取、AB測試等,新人設計師可以選擇適合當前業務發展階段的調研方法。與用戶研究相關的資料較多,大家可以自行搜索學習,此處不再贅述。

          這里筆者強調一點,即使用“體系化的設計思維”去整理用戶反饋的體驗問題。通常來說,調研后收集到的用戶反饋是相對零散的,即便按功能模塊分類整理,并且對優化帶來的價值進行描述,業務人員也很難理解優化某一個體驗問題帶來的價值,從而導致設計師在推動體驗優化需求排期時遇到阻力,且由于roi的投入產出比低體驗優化被無限延后。此時設計師需要進行體系化的梳理,重點在核心工作人員的核心工作路徑優化,預估優化后帶來的數據價值,以此去PK其他需求證明體驗優化帶來的價值。在上線后也需要及時跟進真實的使用數據,拿到量化的數據結果及時同步相關人員。

          圖片

          圖8 體系化整理體驗問題

          二、職業能力

          新人設計師需要逐步培養自己“發現問題和推動問題解決”的能力,多交流,多思考,多總結。這里有幾個小建議給到大家:

          • 建立規范意識,通過標準化規范化的流程解決問題

          在產品的敏捷迭代過程中,產品—設計—研發—測試等各環節必須保持規范化的運行節奏,一旦某環節出現異常,則會影響敏捷迭代的整個流程。比如需求變更的問題,可以在敏捷迭代復盤會上提出,并且跟大家一起分析背后的原因,找到行之有效的解決方案。若是因為客戶提出臨時加需求,可以考慮需求置換,但是如果是產品經理個人的原因,說明需求優先級排序出現問題,可能需要建立一套標準的優先級評估規范來避免或減少此類問題。

          再舉個例子,關于“需求量大,如何推動需求排期合理化的問題”。可以先去梳理當前存在的問題,以及帶來的影響,同時提出解決方案,跟業務人員一起探索,達成一致后運行解決機制就能解決該問題。

          圖片

          圖9 需求排期機制

          • 找準設計邊界,學會衡量利弊

          作為設計新人,一定要學會明辨職責范圍內的事項,找準設計邊界。比如產品經理離職了,在短時間內設計師承擔了部分產品經理的職責,統籌需求收集,給出設計方案,把控敏捷流程,保證產品迭代正常進行,且符合設計師職業和專業能力范圍內時,設計師是可以承接的。但同時我們需要不斷跟進業務招聘新人,讓專業的人來做專業的事情,避免將個人精力全部花費在與產品相關的事項上面。

          日常工作中設計師一定要學會明確邊界,切忌將工作重點轉移到非設計相關的事項而偏離了設計本身,可以多用系統性的思維去思考和分析利弊,相信此時設計師就會有自己的答案。

          • 學會借力,必要時學會依靠團隊

          設計師,尤其是新人設計師,在工作中遇到的問題很可能是憑一己之力無法解決的。這時候可以考慮借力,向領導借力,向團隊借力,可以說出自己的想法,尋求大家的建議。不僅可以收獲到經驗,還可以提高解決問題的效率。舉個例子,筆者剛剛畢業入職后,要去整理所負責的移動端產品的體驗優化,采取了“群策群力”的方式,邀請團隊的設計師一起進行體驗走查,在2個小時的會議時間完成了整個產品的走查,并且收集到非常多的有效建議,依靠團隊的力量達到事半功倍的效果。

           

          總結

          作為一名“過來人”,回想起自己還是設計新人的時候遇到的問題,踩過的坑…內心很感慨。因此,一直都想寫一篇文章,將自己的經驗和心得總結下來,希望本篇文章能夠幫助設計師少走彎路,快速成長。

          最后,借用在《騰訊產品法》一書中看到的一段話送給大家,我想設計也大抵如此。

           

          階段一:以片面、固化的眼光看問題,只看到零散的表象和靜止的格局。解決方案呈點狀隨機分布。

          階段二:以宏觀、系統的眼光看問題,能看到產品與產業、產品與其他產品的關系和位置。解決方案開始具有系統性特征。

          階段三:以動態、演進的眼光看問題;能看到時間長河中問題變化的趨勢。解決方案能夠助推產品順勢成長。

          設計者修煉產品設計能力的過程本質上就是一個思考力進階的過程。

           

          參考書籍

          《在騰訊產品法》

          參考文章

          尼爾森的十大可用性原則與場景案例

          《Design System》相關文章

          《Pin Design》年刊文章

          作者:瑤一


          轉載請注明:學UI網》B端設計經驗總結-幫助新人快速上手

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


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

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

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


          UI動效設計指南!三個要素打造流暢的動效體驗

          seo達人


          一、持續時長和速度

          動效設計中的持續時長和速度是兩個密切相關的因素。在動效設計中,需要確保動效不要移動得太快或太慢,從而影響可用性,破壞使用體驗。

          那么,動畫的最佳時長是多少呢?

          一般來說,標準的UI動畫時長應該在200毫秒-500毫秒之間——這組數字是基于我們大腦的處理能力而得到的時長區間。

          小于100毫秒的動畫是瞬時的,不會被用戶注意到;如果時長大于1000毫秒(1s),會讓用戶感到動畫很緩慢,帶來一種拖沓的感覺。

           

          同時,我們也要考慮其他可能影響動畫速度的因素:

          屏幕尺寸:由于手機和電腦有著不同物理尺寸的屏幕,尺寸的不同會影響動效的速度,屏幕越小,運動路徑越短。對于移動屏幕,動效速度應保持在200-300ms之間,平板電腦應該保持在400-450ms之間;

          圖片

          web動畫:在瀏覽網頁時,我們更習慣于網站的即時響應效果,因此網站的動畫速度也更快。因此對于網站來說,轉場動畫的時長保持在150-200毫秒之間,更符合用戶的瀏覽習慣。

          以上提到的區間是相對保準的動效時長,并不是一成不變,具體的動效時長和速度需要根據具體的需求、場景,靈活分析。

           

          二、緩動

          現實中的物體由于受到重力、阻力等因素的影響,速度并不是恒定不變的。換句話說,物體都會有加速、減速、平滑等不同的運動狀態。

          為了使動畫更真實,我們需通過緩動來模擬出這些因素,讓界面中的元素運動的更自然,避免過于死板。

          圖片

          緩動決定了元素在運動過程中速度的變化,常用的類型包括:線性勻速、緩入、緩出、緩入緩出。

           

          1、線性勻速

          當元素沒有受到物理力的影響,速度保持恒定,就會發生線性勻速運動的效果。

          線性勻速在改變元素位置的設計中使用相對較少,更多是用在改變元素的狀態、屬性(透明度變化)等不涉及元素位置改變的設計中。

           

          2、緩入

          緩入對應于元素的加速曲線,通常用于當對象從靜止到加速離開用戶視線的過程。例如一輛汽車駛出時,速度從0開始逐漸增加,然后在駛出時達到最大值。

           

          3、緩出

          緩出是緩入的對立面,用于屏幕上的對象從高峰值進入,逐漸減速直到到達特定位置的過程。例如一個人從屏幕外全速進入屏幕內時,進入畫面時的速度最高,然后逐漸減速到零。

           

          4、緩入緩出

          緩入緩出也稱為標準曲線,指對象從畫面的一個部分移動到另一個部分,整個移動過程中始終保持在幀中,通常用于為在同一界面中改變位置的元素創建動畫。例如一個鐘擺,它的速度從峰值開始,緩慢減速到0,然后再次加速,不斷在一個固定的位置區域循環。

          圖片

          需要注意的是,不對稱標準曲線會使物體的運動變得更加自然。

          在使用緩入緩出時,要強調減速而不是加速,因此減速的時間要比加速時間要長。在這種情況下,用戶會更關注物體的后半段,從而更容易關注物體的新狀態。

          圖片

           

          三、動效編排

          動效編排是指對界面中不同的元素進行統一、有序的編排,讓元素間更協調,通過更流暢的動效來引導用戶的注意力。動效編排包括平等互動和從屬互動。

           

          1、平等互動

          平等互動指對象根據相同的規則移動。

          在這種情況下,界面中的元素會變得整齊有序。以界面中的卡片列表為例,平等的互動編排保證卡片一個接一個,從上到下以一種協調的方式出現,能夠從上到下引導用戶的注意力。

          圖片

          如果不按照這種編排規則,界面中元素的出現順序會產生混亂,從而影響用戶的瀏覽。

          在表格類頁面中,元素的運動情況會更復雜。

          在表格視圖中,應該按照對角線的方式來引導用戶的關注點。如果使用水平方向的運動讓元素一個一個展示,會造成元素的加載時間過長,用戶的瀏覽路線來回曲折,體驗不流暢。

          圖片

           

          2、從屬互動

          從屬互動指界面中有一個主體對象,用來吸引用戶的注意力,界面中的其他元素都從屬于這個主體對象。這樣的編排方式讓用戶的注意力更聚焦到界面中重要的元素上,保持元素的運動主次更清晰。

          還需要注意元素的運動曲線。如果一個元素不成比例地改變大小,例如從一個正方形變成一個矩形,那么元素應該沿著弧線移動。

          如果元素的大小按比例變化,元素應該沿著直線運動。

          此外,我們可以將曲線運動分為兩類:垂直向外(水平開始,垂直結束)、水平向外(垂直開始,水平結束)。

          例如如果頁面上下垂直滾動,頁面中的元素應該以垂直向外的方式展開,先移動到右側,然后向下運動。如果頁面是水平滑動,元素則以水平向外的方式展開。

          另一個問題是元素的運動路徑相交時,元素間應該遵循物理定律,不能互相穿越?;蛘咴谠匾苿忧皩⒃靥嵘阶钌蠈樱寗有Э雌饋砀匀?。

          圖片

           

          四、UI動效設計常用到的軟件

          當看到一個好看的動效時,常常會有小伙伴問到使用什么軟件做的。

          目前有很多軟件可以進行UI動效設計,借著這次講解動效的機會,我簡單列舉三個自己用過并感覺還不錯的軟件,僅供參考,建議大家可以去親自體驗一下每款軟件。

           

          1、ProtoPie

          圖片

          ProtoPie是一款輕量級的動效軟件,將頁面原型、交互和動畫整合到了一起,既可以直接在里面設計高保真的UI頁面,還能讓這些頁面快速動起來。

          ProtoPie操作頁面設計簡潔,上手相對簡單,沒用過的新手也能快速開始。ProtoPie通常和Sketch搭配起來使用,先在Sketch里設計UI頁面,之后導入到ProtoPie中進行動效設計,效率賊高。

           

          2、Principle

          圖片

          Principle也算輕量的動效軟件,相對更成熟。Principle通常是和Axure搭配使用,產品經理或者交互設計師在設計界面原型和交互時用的比較多。需要注意的是,Principle只能在MAC系統中使用,可能對于不熟悉它的人來說,剛上手使用可能會有一點點困難。

           

          3、After Effects

          圖片

          AE作為一個老牌的設計工具,大家應該都或多或少接觸過。AE功能非常強大,可以實現很多復雜的動效效果,但操作起來相對復雜,學習成本也相對較高。

          目前大部分的動效都可以通過這三款軟件做出來,小伙伴們可以根據自己的需求,選擇適合自己的動效軟件,從而提升設計效率。

           

          五、最后

          以上就是UI動效設計需要考慮的三要素,希望通過這些內容能幫助你對動效設計有更多的認識和思考。

           
          作者:Clippp

          轉載請注明:學UI網》UI動效設計指南!三個要素打造流暢的動效體驗

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


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

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

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


          萬字透析 [行為設計與觸發式引導] 賦能體驗

          ui設計分享達人

          循序漸進的內容結構,不放目錄了,內容框架如下:

          1. 為何說應用程序是一種行為設計

          ————用戶行為視角進行設計和解決問題

          2. 行為設計下的設計模型理念

          ————運用模型理解行為、設計行為

          3. 行為設計不能沒有用戶引導

          ————挖掘行為設計重要的部分“引導”

          4. 正在被濫用的用戶引導

          ————煩人的引導信息源源不斷

          5. 善用觸發式引導賦能體驗

          ————讓觸發式引導更棒的5個建議
          ————新一輪的趨勢,克制與降噪

          分割線-------------------------------------

          應用設計為啥要行為設計視角?是因為酷還是更有挑戰性?可拉倒吧,我都癱工位上了還卷啥?只是在實際的設計過程中,通過觀察或共情用戶行為可以反映出很多問題,可以幫助洞察出更多價值或新的機遇。

          此前我在試圖尋找一款具還不錯的機械美感鼠標,但是沒有一下子找到合適的,準備第二天摸魚的時候再看看,結果第二天上午十點左右,手機回復消息時,就收到了一條淘寶的通知。是關于鼠標的,你猜對了,之后我就順勢打開了淘寶,看看是否會有新的收獲,淘寶根據我的搜索行為記錄,果然在首頁零零散散穿插了不少鼠標,我在首頁看到了一張鼠標商品圖,我迫不及待的點開,結果發現是穿了身衣裳的羅技G502HREO,不禁感嘆道這些商人們的洞察力。 


          那么回過神來,你是否已經感受到了行為視角加一點點同理心一點點洞察力,就可以產生如此奇妙的價值?

          1|應用程序就是行為設計

          1.1|數字化應用下的用戶行為

          應用程序本質就是數字化服務,只是將行為方式進行了轉變,以及采用了網絡進行信息交互。當我們有了需求后就會使用這些應用程序提供的功能完成需求。比如原本要在菜市場才能完成選菜、選量、付錢、帶回家,而通過數字化服務則可以足不出戶,在手機設備上完成購菜。當然了,這也意味著行為方式或成本的變化,但是本質不變。



          數字化視角下,我們看見用戶實現需求僅僅是手機上敲敲打打就做到了,而其本質只是調整了實現的行為方式,基本就是內容輸入輸出、查看選擇、傳遞交換,再深入點就是界定用戶輸入什么輸出什么,看見什么選擇什么等一系列設定,自下而上來看,就是圍繞產品服務或產品目標展開,然后界定功能服務的范圍與內容范圍,通過交互與信息框架定義用戶行為的方式與范圍。 



          1.2|功能背后是行為的精心編排

          應用本身就像是一個行為框架,盡管不能嚴格控制,但它規定了用戶行為的方式、范圍、路徑以促導用戶實現需求,表象是各種功能的設計,而背后也可以看做是用戶行為的精心編排,而超出預期的用戶行為則可以看作違規或設計漏洞,而我們通過數據埋點或數據分析來密切關注用戶行為,也正是為了檢驗設計編排是否合理或滿足商業預期,如此看來我們為何重視用戶行為與數據收集也就很好解釋了。

          1.3|行為視角的三級維度兩層映射

          或許你在疑惑知道了行為設計視角又如何?實際在產品設計過程中,行為視角確實能帶來太多驚喜,以至于一些場景化交互問題,我會代入行為視角思考每一步行為過程,而不是單純的考慮流程與線框圖。我認為行為表現能夠清晰反映出一個用戶的特征,當我們說通過一個人的行為表現了解對方時,也就這個意思啦,愈發真實自然的行為表現越能反映出一個人的特征畫像,這應該也是為什么HR會用“行為面試法”來篩選應聘者的原因吧。



          那么回到應用設計上,當我們通過技術手段收集到了用戶數據,也只是一些數值罷了,唯有清楚數據涵義并結合用戶行為視角,才能夠分析還原出更有價值的信息,當獲取到足夠的用戶行為信息后,我們就可以還原出相對真實的用戶特征畫像,以用于行為設計分析改善,來驅動產品體驗或是商業目標。



          2|行為設計下的設計模型應用

          說到行為設計,不得不提到HOOK模型與福格行為模型吧,一個產品往往不僅需要行為設計也需要習慣培養,唯有這樣才能使得用戶能夠熟練掌握應用并產生粘性,HOOK上癮模型,一個關于如何讓用戶對產品上癮或培養習慣的模型;福格行為模型,解釋用戶發生行為的條件與關系式的模型。

          2.1|行為的開始:福格行為模型



          簡單概括就是要產生行為,就需要一瞬間產生內在的行為動力“動機”,并且有足夠的“能力”執行,還需要適當信息提示來助推行為產生。我用人話解釋一下哈,在此前了我們玩一個動動手指就行的小游戲。

          一、首先伸出左手,掌心面朝自己;
          二、然后仔細盯著中指的末端;
          三、為了更佳集中注意力,把其他四個指頭慢慢握攏;

          好了,是的就好了,這個過程中,我說開始一個小游戲其實就是為了形成一個動機,而后續一系列步驟引導就是對應的觸發信息,當然了動動手這么簡單的事兒,我相信大家能力十足。其實這個模型就是告訴我們要想行動起來就要讓你“想做、能做、開始做”。

          首先是一個開始:提示觸發
          第一個是來自我自身或腦海里的提示觸發,通常管這個叫做需求,洋氣點叫做“內部觸發”,比如剛剛肚子叫了,感覺有點兒餓了,當然了這些“內部觸發”隨機且不穩定,來自我們的心理活動以及身體本能。
          而生活場景下的各種應用程序則需要媒介對我們產生觸發,與之前“內部觸發”相反,這些誘因我們稱為“外部觸發”,你在生活中看見的廣告、好友安利的商品、手機通知消息、小紅點提示、鈴聲震動等一系列均是外部觸發。

          具備一個行為動力:動機
          凡事我們要做出行動前都會有一個動機,還記得剛剛我說肚子餓了嗎?是的,于是大晚上的我想搞點兒燒烤吃吃,想到肉香四溢,酒足飯飽的感覺真是快樂啊,也不用吃藥抑制胃酸過多的痛苦了。
          而讓你打車的動機、點外賣的動機、網購鼠標的動機、打開網頁閱讀的動機,你是否已經清晰看見,總歸是有一個的,甚至會有多個。



          能夠進行執行的條件:能力
          當一切剛剛好,觸發有效,動機也有,可以做了嗎?不不不,能力才是執行的硬核條件,如果我的能力相差懸殊我可能會直接放棄或降低預期調整目標,所以我想到燒烤店就在小區,票子也足夠,腿腳也麻溜,這不,燒烤已經擰在手里了。所以你看,現在的應用程序不斷在降低操作難度或消費門檻不就是這個理兒嗎?


          *你白天忙沒時間娛樂?沒關系,直播午夜檔、24小時轟趴派對等候你。
          *你工作完腦力體力有限?沒關系,這些短視頻幽默好玩不費腦,不喜歡輕輕一劃下一個,不想滑?沒事兒,短視頻已經在流行自動播放下一個呢!
          *最近手頭緊了?沒關系,咱們的商品統統優惠哈,還能分期付款,再不行還能組團砍一刀來點兒優惠。



          產品設計中的可用性、易用性、統一性各種交互定律,以及各種營銷手段不就是在不斷的降低難度促成用戶行為的發生嗎?總之產品會想辦法讓你更輕松用起來,讓你慷慨消費起來。

          大概是該動一動了:行為
          就像前面動動手指的游戲一樣,當行為發生前的三個條件同時滿足時,我就該動起來了,我的行為向著動機目標有序的進行著。

          2.2|行為的習慣:HOOK上癮模型



          HOOK上癮模型的核心在于使用產品后,會獲取酬賞激勵,我們為了追求更多的花樣酬賞,以加大投入,并且持續的投入會提升對產品的價值積累,同時我們行為上就會不斷的反復,之后就會留下慣性的操作模式,即習慣。整個過程中觸發與行為部分即福格行為模型部分,而新的部分主要包括多變的酬賞與投入部分;


          多變的酬賞:激勵上癮的根因
          社交酬賞:產品社交互動中的反饋激勵,例如常見的分享點贊、評論互動、人際關系建立等,在社交類產品中是極具分量的部分,良好的社交酬賞能夠很好的激勵用戶參與互動與自發的創作內容,屬于UGC重要的一環。

          獵物酬賞:這就包括了金錢獎勵、知識、資訊、娛樂等一系列你主動在產品中搜尋的信息或資源滿足。當你還處于清醒活躍的狀態時,腦子不會突然的呆掉而是胡思亂想或想找點內容填充無聊的時光,于是你打開手機一個又一個的短視頻、資訊文章或是圖文段子。

          自我酬賞:以自我為中心的快感滿足,如產品體驗中的操作感、成就感、終結感。我們為什么要玩游戲?因為游戲有各種操作感可以滿足自己,并且還有豐富的美術視覺,一旦我們獲取對戰中最優數據或MVP時是不是很興奮!因為有成就感,這時你完成了最后一個敵人的擊殺!恭喜你完成最后一擊!是不是終結感也很不賴。



          持續的投入:習慣的培養
          上癮就是一次不夠還想要,習慣就是不知覺的在對應場景中重復某個行為,一旦當你在某個產品中不斷的注入你的投入,你也會獲取更多的激勵與成就,它可以是你存儲的照片、發布的動態、收集的歌單、你的粉絲團、你的名氣信譽或是技能收獲,慢慢的你會對該產品的價值評估提高,你會越來越難以割舍,甚至想要推薦伙伴在這里和你一起,而接下來就是另一個觸發再次把你拉回來。

          因為什么而上癮:期待沒有止境的舒服
          實現上癮就這么簡單嗎?想想好像不是,所以根因是什么?你有沒有同樣的感受,貌似大部分人對工作并不上癮,是因為沒有酬賞嗎?貌似對有酬賞的家務也不會上癮,甚至學習打卡也不叫人上癮,反而是刷短視頻、刷帖子、玩游戲、線上交友、語音派對這些娛樂更叫人上癮,這是為什么呢?
          回到前面的行為部分再結合HOOK的酬賞部分來看,如圖,你是否會有什么啟示呢?



          酬賞快樂
          讓你痛苦不堪的產品必然是與上癮無緣的,對于自身有益且美好快樂的事物我們會追求,反之則避免或逃避,尋求短暫的刺激來麻痹痛苦,不過這只是讓用戶接受和樂意使用的初步條件,上癮?還不至于。

          充滿期待
          為什么模型中指出是多變的酬賞?因為不是一次性滿足,而且還是多元化的滿足刺激,想象一下你,打開短視頻,看完一個后接著下一個,但是相似度極高,于是你繼續滑動,一個又一個,但是內容依舊極其相似,你開始反思,情緒低落,對后續的內容不再充滿期待,你停止繼續并退出了應用。這是另一個重要因素,帶有期待,我們會本能的追求希望逃避恐懼,如果對后續不再抱有期待或希望時,那么這將是中斷心流與上癮絕緣的一個信號!

          沒有止境
          你是否有發現不論是追劇、短視頻、搞笑段子、游戲等一系列讓你短暫成癮時,都有一個相似點,似乎沒有受到干擾時,根本沒有終點,你可以忘卻時間持續性的沉浸其中,享受著一個接著一個的高潮或激勵。
          如果要打造一款成癮的熱銷產品,我想這三個點也是值得深思熟慮的因素,HOOK模型是精簡的,但是內涵不止于此。


          而對于習慣養成型,則有一部分是因為逃避痛苦或麻煩,我之前離單位比較近,到公司不會太早,但是研發工作卻很積極,以至于我為了避免耽誤研發或形成負面的同事形象,我都會早上習慣性的打開工作群看一下有沒有紅色的“@”,如果有的話,則趕緊看一下什么情況回復一下。

          2.3|更完整的行為設計模型思考

          在以上的模型中,找到了用戶行為調動的方法,以及習慣養成甚至成癮的關鍵點,但是結合應用程序設計的特征,我注意到還有一些行為層設計的關鍵點散落在各個環節,為更好滿足設計應用的目的,我在HOOK上癮模型的基礎上細化了一些值得注意的節點,并試圖在應用設計的過程中找到了節點的映射關系,驗證可行性,在此我會穿插一些案例進行各個節點介紹。



          2.3.1|觸發

          為什么在我們生活的場景中,處處充斥著廣告或品牌的概念,因為商業產品需要觸發!唯有當你了解一個產品的用途時,你有了內在需求才能及時的想起對應的服務品牌,并使得這些產品有機會被你翻牌子,然后你打開這個應用,應用:多謝恩寵~


          外部觸發的誘因,就是在適當時候提醒你是否需要,讓你產生動機,或是引導你完成某個事件的動作,例如電話鈴聲響起,你掏出你的手機查看并思考是否接聽。然后發現是騷擾電話你掛斷了,這時手機彈出通知,是否開啟騷擾電話攔截?然后你又開始點擊查看騷擾電話攔截服務。

          精髓在于打造良好的品牌賣點與口碑,在適當的情景能夠激起用戶的使用欲或消費動機,能夠激起或助推動機、引導輔助用戶行動、提示反饋牽引用戶。



          2.3.2|動機

          不論是出于自身需求還是外部誘因產生的動機,一個讓你做出行動前的心里動力,之所以被分為感知、情感、社會三個成層面,則是為了在適合的場景下給出更被需要的動機的觸發指引,例如在炎熱的大馬路上,出于感知動機口渴,我推出冰爽的飲品更容易被需要或產生購買動機。并且當一個動機無法直接滿足時,我們還會有更多間接的動機。



          2.3.3|規劃

          大多時候我們處于慣性思考的狀態,習慣性做事兒,但面對復雜的目標,我們都會預先進行一個規劃,這不像屁股癢癢了就反射性伸手撓一撓這么簡單,這個過程中圍繞心理活動展開,給予已有目標與動機,我們會初步的思考以下多個問題,我該怎么去做?我能夠做什么?先做什么再做什么?并且這個過程中會結合能力與自我感知進行決策,觸發這一行動前可能還會補充很多間接的動機來完成初始目標,所以可能對一些間接動機先規劃行動起來。



          特別是當用戶身處于產品應用中,所有活動事件我們應該給予一定的信息可視反饋,以便于用戶決策規劃和判斷實行難度,這需要設計者做好一下幾點;


          可視化:有效的反饋軟件或設備當前狀態,給出相關信息讓用戶決定哪些行動是合理可行的。


          用途示意:簡單直接的體現出可以交互的形式或范圍,例如顯示一個帶有放大鏡的按鈕,就可以感知與搜索放大有關系,并且是一個按鈕可以點擊交互。


          引導信息:進行輔助示意的提示,特別告知用戶應該操作哪里或如何操作的指引信息,減少溝通或理解的成本。

          2.3.4|能力

          能力會直接影響動機的強弱,能力不足就會消弱動機甚至放棄行動,如果動機高漲那么就可以做出更有難度的事情,這一關系在福格行為模型中有明確體現。在應用設計中,則更多以有效性、效率指標、交互原則及相關定律展開,目的則是減少門檻與使用阻力,幫助用戶建立操作信心和有效易用的開展任務。



          2.3.5|行動

          當以上多個條件就緒后,那么你就要開始行動了,即使是準備五分鐘開始,那么的你的等待都是具有目的性的行動,一旦時間到了便會觸發生效。而行動正是與一切產品開始交互的開始,行動過程可能會具備多個子目標或動機來達成你的最終目標,也就是你面對復雜目標的動機規劃,在進行中,你可能還需要一系列反饋來告訴你,是否符合預期,需不需要調整規劃來達成最終目標。

          2.3.6|反饋

          如果說你的行為沒有任何反饋或是延誤錯誤的反饋會這么樣?混亂。想象一下燒壺開水去,聽不見咕嚕咕嚕,看不見熱氣或翻滾的氣泡,直到你不小心碰到手上,該死的,燙出泡泡來了。難以想象沒有反饋是多么的混亂,以至于我們沒辦法獲取有效的結果來糾正下一步的行動或規劃。



          這個階段里,反饋不僅僅是指用戶行為發生后的變化響應,也包括了用戶反思和比較的過程,在產品應用的過程或實現較為復雜的目標時,目標與動機都會面臨拆解和階段化實現的情況,那么每次我們對階段目標付出行動后,就需要比對結果反饋是否符合預期,是否需要對后續的規劃做出調整來達成最初的動機。



          反饋階段是整個行為設計中重要的一環,如果不能給予用戶即時有效的反饋,后面的一切設計階段都將是徒勞,并會給用戶造成糟糕的體驗。那么如何做好這一環,這不僅要做好產品可視化內容、用途示意、引導信息,還需要在用戶行動的過程中,做好產品交互的約束、映射與反饋。

          約束:通過提供物理硬件、流程邏輯、文字描述、符號標注等一系列方式來約束引導用戶的行為,幫助用戶理解避免操作出錯。

          映射:在用戶交互的過程中給予即時有效的映射反饋,使得用戶在持續的操作過程中能夠追逐到對應變化的結果,例如通過滑動屏幕的進度條來感知和控制屏幕亮度的調整就是一種映射的表現。



          反饋:用戶進行任何操作后,應給出即時有效的狀態反饋或是撤銷操作,并且盡可能的與操作前的信息保持關聯,以符合用戶的預期,若未能操作成功,則給出失敗的原因或解決方案,甚至主動進入修復中,避免用戶在界面前不知所措。

          2.3.7|酬賞

          多變的酬賞,也許是為了快樂,也許是為了逃避麻煩與痛苦,在完成目標的同時我們必然會獲取滿足,如果在滿足的同時給予了你額外的、意外的激勵,誰不愛呢?鼓勵用戶發布或互動,獲取社交酬賞;給予用戶首充獎勵,獲取獵物酬賞;豐富的資料編輯,讓用戶完成更個性的展示,獲取自我酬賞;面對復雜任務,完成后給予情感化的激勵或獎品反饋。

          2.3.8|期待

          杜絕一成不變,不然只會呆板無聊,人總是會對新事物保持興趣,想象一下每天刷著一成不變而乏味的短視頻你會滿足嗎?不論是推出新的活動、新的玩法、新的功能、新的挑戰、新的好友、新的八卦總是會讓用戶有所正向期待,愿意更多嘗試與投入,就像抖音的短視頻一樣,嘎然而止意猶未盡,期待下一個更精彩。

          2.3.9|投入

          所在產品上產生的數據、時間投入、金錢投入、關系來往都將是產生情感或上頭的重要原因,我不能想象時常來往老友,好好地說斷交就斷交,也沒辦法突然的將我在音樂應用中辛苦集成的歌單說刪就刪,因為這一切對我們都有特別的價值,未來的某一天我依舊需要。那些產品年度報告不就是在喚起應用時的回憶進行情感升溫嗎?

          2.3.10|回到觸發

          再一次的,可能是我突然想起來需要了,可能是一個手機Push通知、一個短信、一個廣告、一個回訪電話,總之又一次的吸引到我了,并且此情此景所見所聞,我有了興趣也有了動機,新的一輪又將開始。

          3|行為設計與用戶引導

          [行為設計用戶引導就像是西方不能失去耶路撒冷]


          它是在任務能夠進行的基礎之上建立的指示信息。這是一對玻璃門,它約束了只能推開拉開,而用戶引導就是貼在玻璃門上的“推開”或“拉開”,它們告訴我們最好怎么做,以快速作出正確或符合預期的行為。用戶引導是幫助用戶快速成功的捷徑,在程序應用中不論是出于用戶體驗還是商業目的都具有極為重要的作用與影響力。



          其實在行為設計模型中的諸多環節都是要運用引導設計的,不知道你是否也感知到了,這些引導可以從用戶動機喚起開始-到動機助推-行動指引,出于不同目的,這些引導信息甚至可以覆蓋在整個行為設計環節中,在適當的時候產生各種意想不到的效果;



          3.1|從體驗視角看用戶引導

          國內的應用五花八門包羅萬象,即使被廣告吸引完成下載,但打開后,甚至可能不知道從那里開始這個應用的探索,這個應用究竟能做什么,有什么服務亮點,于是乎就需要一系列的用戶引導幫助我們開始探索和了解這個復雜的玩意兒,如果不能讓用戶快速抓住亮點(也就是Aha時刻),那么就很難保證之后的時段里不被卸載。

          而這個數字化的時代,為了給用戶提供更優質的服務,企業則需要引導用戶在產品中產生數據,以幫助企業獲取更多信息了解用戶,并提供更契合的服務或是推薦匹配來改善體驗。



          3.2|從商業視角看用戶引導

          產品出于商業目的,不論是業績指標、用戶留存、消費轉化,往往都需要用戶引導來促成目的。就商業轉化來看,這時候用戶引導就像是導購一樣,通過培養用戶消費心智從而達成消費行為的動機,而關心用戶在應用程序上的消費行為、復購行為、支付中斷行為等,也是為了做好導購獲取更多收益。 



          3.3|常見的引導類別與形式

          為了滿足不同的業務目標,用戶引導出現了各式各樣的類別與形式,從廣泛的視角來看其實就是各種信息提示,并且為了方便用戶進入下一階段,可能會直接附屬相關操作或路徑。通過促達的程度我們可以歸類到這三個類別中:



          主動式:在你還沒有透出任何行為目的前,收到的引導性通知,用于吸引用戶啟動程序進行消費或互動。干擾較弱的形式有應用內外的通知、應用內彈窗等,中等干擾的有短信通知、郵件通知,再強一點的還有電話推銷。

          陳列式:在應用場景中,將相關的引導信息直接陳列在界面中對用戶進行引導,可以在不操作的情況下直接看到,例如常見Banner形式、缺省圖形式、注釋信息、懸浮Tips等。

          觸發式:用戶有意圖的進行操作后給出的引導信息,相對來說是一種用戶接受程度高、體驗親和、動機相對吻合的類型,展現形式豐富,有彈窗、Tips、Toast、注釋信息等,具體根據場景做搭配。

          4|正在被濫用的用戶引導



          4.1|被淹沒在引導信息中

          手機似乎響了一下,嗯?屏幕沒亮,錯覺嗎?
          手機剛剛是不是震動了一下?有短信嗎?
          我剛剛看手機干嘛來著?嗯?供奉戰犯吳啊萍被刑拘?看看


          你是否有過這般恍惚?明明什么聲音都沒有,卻好像清晰的聽見手機在呼喚你,每每打開手機時,除了個別還在艱苦奮斗的強迫癥們,總是會看見一個又一個的小紅點,點開手機通知欄,一長排的通知等候著你的光臨。點開一個應用A,閃屏說應用B有活動,逐點擊進入應用B,閃屏說去應用C點份午餐吧,然點開進入應用C,閃屏說來應用A專治無聊,對哦,我是無聊來應用A的啊,好一個圈圈圓圓圈圈開屏大法;

          圈圈圓圓圈圈
          天天年年天天的我
          深紅色的引導
          商業的陷阱
          指標的陷阱等你
          不懂工作規劃重要的我們
          都以為摸魚也能讓工作完成
          相信就一天 搞定工作
          .......不好意思,給唱起來了

          然而回到了應用A,別急,還有青少年模式引導、最新活動引導、會員續費引導、求你開個通知引導、底部消息99+引導等等。
          這是一個眼花繚亂的世界,稍不注意就忘了我本來是做什么的,當時我只是準備買一個鼠標,但我在淘寶的短視頻中神游了許久,直到點開一則評論被問答?你來淘寶是干嘛來的?我終于回過神來,我只是來買個鼠標的,我這點兒注意力還真是廢物呢,以至于手頭的事兒擱置了這么久。
          而你,又在如何應對的呢?


          4.2|目的不純的引導信息

          沒幾個應用是做慈善事業的,總歸會有一套自己的盈利模式,商業指標造就了這些目的不純的引導設計,例如用戶取消訂購時的種種阻擾、為推動新內容不斷發出的騷擾引導、特定場景對用戶的消費心智干擾、帶有隱瞞信息的協議引導等,甚至還有一些令人不爽的強制性引導。
          商業視角下,用戶掏錢,則俯首稱臣,不掏錢則軟磨硬泡引導消費,很多時候不是在引導用戶體驗,而是在引導用戶參與消費罷了,而設計師能做的,也許只能是想辦法讓用戶錢花的舒服點吧。



          4.3|開始想要回歸平靜



          很熟悉吧,如果不夠我還能列舉,碎片化的時間似乎都被刷手機的習慣占滿了,每次打開手機都會被各種引導所吸引,久而久之一得閑大腦就渴望來點兒數字化補品[刺激多巴胺],我們習慣打開這個,再看看那個,盡管眼睛是不樂意的。


          不知道什么時候,高效便捷的服務能力不再是一個產品的核心指標,取而代之是讓用戶刷個不停,沉浸其中不得自拔,但我們也知道刷手機的若干不好,干擾視線、干擾學習工作、虛度光陰、還能砸到臉、睡不好、快速近視...


          于是有那么一批人開始意識到,并減少手機上的引導帶來的干擾,忽略一早起來手機上的若干通知、逐步加強對小紅點的忍受、對各個群組逐一免打擾、關閉若干應用的通知授權、體驗先進的適老化設計、設置免打擾時段等,想想沒有了這些引導干擾,少看一看屏幕,也不會損失什么。

          5|用戶引導的救贖之路

          5.1|善用觸發式引導

          為什么我們不反感快遞到貨的取件短信、不反感1008611查詢后的話費流量情況短信、不反感求職后的Offer郵件通知,因為這一切的通知或引導,都是在你動機觸發后給出的結果,它們可能正是你所需要的,甚至你正在期待的搓搓小手。



          所以這也解釋了為什么那些“預判設計”可以快速出圈,被用戶所青睞,因為這些預判設計并不是憑空捏造的,而是基于用戶行為觸發預測了動機,為后續帶來了的行為方向的指引,就此我們為用戶提前準備好了相關操作或服務供給,例如常見的截圖后,打開微信輸入欄更多按鈕,會直接提供截圖選取服務。

          那么如何做好觸發式引導呢?
          除了擅用行為設計的方法與視角,這里再分享五個我自己的見解

          5.1.1|借“機”行事

          我們的精力是很有限的,不該濫用引導,應該結合用戶特征或行為觸發來洞察需求,再用友好且符合用戶意圖的內容來引導用戶,提高轉化和品牌溫度,而不是一味的引導轟炸,不然有一天被打上垃圾信息的標簽了,發送再多的引導通知也不會有結果,所以找到一個合適的或是用戶自己觸發的“契機”很重要,商業與體驗平衡很重要。

          5.1.2|借助社交

          除了一些工具類或沒有社交屬性的產品,大多數產品可以通過社交來建立用戶之間的聯絡,并以社交消息來做功能引導或用戶召回引導等,例如:



          當然了,控制好時機并保證內容真實性也很重要。而借助社交是因為我們喜歡跟有共同點的人靠攏,彼此會有更多話題與樂趣,通過好友背書、社交擴列與社交酬賞做杠桿,讓引導事半功倍。

          5.1.3|循序漸進

          引導設計需要耐心,分成必要的步驟循序漸進,不要一股腦兒塞給用戶,也不要過于拖沓冗余,適當的階段給予獎勵,調動積極性,就像游戲關卡設計一樣,采用階梯式用戶行為引導。并且從開始到結束不要信息斷層,減少跳失率,我就看見過很多用戶因為廣告是穿搭而下載了某個應用,結果安裝后玲瑯滿目,找不到興趣點,最終選擇了吐槽卸載。

          大多數消費場景,講究的是循序漸進的心智引導,欲速則不達,目的是建立用戶信任、接受度、消費意向、好感度等促成消費結果,我們常見的電商好評、權威認證、專家推薦等就是在引導消費心智,這也體現了為什么一個好的銷售會先跟你拉近距離而不是“哥!人傻錢多不”。



          5.1.4|行為視角

          行為視角的作用不用多說了吧,結合用戶當前的行為我們可以洞察出下一步行為方向,提前做好準備,當然了,不要過分揣測,對應的引導要考慮服務范圍、服務時間、服務要求、服務場景等,可以是面向全局用戶、也可以是私人定制服務,重點是要契合用戶意圖,借“機”行事。

          5.1.5|光明磊落

          好的引導設計應該讓用戶覺得有價值、靠譜、不過分干擾,而不是為了指標做出一堆陰暗設計,老生常談的惡心案例應該就是網頁上的彈出廣告吧,明明顯示了關閉按鈕,點擊后卻發現還是假的,直接就給跳轉了,盡管我們說把用戶當作小白,但不是當傻子,用戶總歸會發現上當的時候,到時候就該差評或控訴了,所以長久看來,為保證口碑與競爭力,還是建議光明磊落少些陰暗的引導設計。

          5.2|開始克制與降噪

          作為一個設計者,說來慚愧,安裝一個新的應用程序后,一下子根本搞不清楚怎么用?有什么用?不得不說引導設計還是很重要的,但引導并非是讓我迷茫的主要原因,龐大而臃腫的功能反而是主要原因,并且一旦功能倍增后,就很容易丟失服務焦點,以至于即使做用戶引導也不好下手,做完了迭代又還要反復改。
          現在的應用底部菜單從4個趨于5個,頂部Tab也越劃越多,首頁也是玲瑯滿目的,這對于用戶體驗是一個挑戰,即使是專家級用戶,也難以用到大部分的功能,這是一個信號!新一輪的趨勢可能是克制與降噪了。

          5.2.1|克制什么

          克制業務范圍,下鉆業務優勢,好的產品不是什么都做什么都有,而是應該定位清晰,業務更清晰,盡管很多產品有著類似的服務,但是每個用戶都有自己產品上的小圈或價值積累,產品優勢也有差異,不會因為有類似功能就輕易轉移陣地,例如直播。一個產品想通過擴展業務豐富跨界優勢是很難實現的,還記得支付寶做社交的嗎?


          幸運的是嗅覺敏銳的企業已經注意到了,如你所見,應用市場有了更多的極速版APP,微信支付寶等APP也允許用戶配置核心服務之外的功能模塊搭配,似乎軟件們又開始輕盈好用了。



          5.2.2|降噪什么

          減少干擾,注重效率。一個好的產品應該注重效率,快速幫助用戶找到要的、快速幫助用戶完成任務、快速完成信息匹配等,看見隨申辦APP獲得了GXA好體驗獎了,不過想想新一代的數字化服務不就該如此嗎?讓流程簡單易懂,辦事少走兩趟,結果反饋更及時,惠民政策早知道。



          不知道什么時候開始適應和喜歡清晰簡潔的產品設計,就像我喜歡逛逛無印良品,找一點精致自然的物件,有時候設計也是,多一點克制少一些喧囂,當滿屏都是重點都是標簽引導、文字說明時,哪里還有什么重點,就像小紅點誕生時,醒目的提示能幫我們找到重點,但現實處處是紅點,哪里還弄得清什么是重要的。


          就像一個簡單模塊入口設計,又是封面/標題/描述,又是用戶信息/互動數據/品類標簽啥的,這么多信息,我擱這兒讀書呢?為什么不循序漸進呢?找到用戶正真會看的焦點信息很難嗎?


          終于,在工信部的要求下,廣告與算法推送也得以控制,這意味著干擾又少了,但是這也側面反映了產品對用戶數據的過分收集甚至有所交易,如何讓用戶放心用,隱私或權限的最小可行獲取又何嘗不是“降噪”的重點。


          6|回顧

          洋洋灑灑的寫了一大片,也非本意,怕詞不達意,只好多分一分內容節點,至于這么多字究竟在說些什么,我們簡單回顧一下;

          6.1|行為設計部分

          數字化應用即經過精心編排的行為設計,本質是通過不一樣的行為方式完成我們的需求,通過行為設計視角我們可以共情以洞察出更多的用戶需求,并且在進行數據分析時,也需要善于使用行為視角洞察分析用戶特征或痛點,這種方式我們可以記作三級維度兩層映射。而上癮模型與福格行為模型則可以為設計提供更多的指引,同時可以在模型的基礎上完善更多環節來作用于實際的設計過程,幫助我們打造受歡迎的產品。

          6.2|引導設計部分

          用戶引導是非常具有價值的設計,好的行為設計不能缺失引導設計,而現在引導設計正在被濫用,它的優勢正被埋沒,被用作一些不友好的地方,產品體驗也因此大打折扣,而掌握觸發式引導設計,通過借機行事、借助社交、循序漸進、行為視角、光明磊落五個方法也許能幫你改善。對于現在的數字化產品現狀,或許克制業務范圍,下鉆業務優勢,減少干擾,注重效率會帶來更多驚喜。

          原文地址:站酷

          作者:泡泡_PAO


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


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

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

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


          設計師如何避免反復修改?

          ui設計分享達人

          最近新的一批應屆生開始步入職場,讓我想到自己剛入設計這一行時,遇到的大大小小問題感到很是無助。今天這篇是結合自身經驗寫給入行不久的設計,希望你們眼中有光心中有夢對設計仍不忘初心。

          前言

          相信你在設計工作中一定遇到過這樣的場景,當好不容易拿著設計稿推進時,被各種角色提出意見:
          “我覺得這個設計不高級”,“我覺得這里可以再大一點,顏色更亮一點”,“我覺得可以試試競品那樣”,“算了,還是用第一稿吧”等等,然后陷入無限改改改的循環中,往往做著做著就開始懷疑自己是不是不適合設計






          為什么會發生這種情況?

          我認為有3個方面的問題

          1、視覺的主觀性

          每個人的審美不一樣,天然會摻雜著主觀因素,導致每個人都能很容易的提出自己的意見。而我們對設計關注往往是各種好看概念稿、當前流行趨勢等等,導致我們過于追求視覺表現,而忘記從需求層面出發

          2、用戶洞察缺失,設計方案不符合用戶認知

          每個需求都是有具體的目標用戶,用戶身份不同,同一個問題背后的需求也是不一樣的,當與真實用戶脫節,業務理解不到位,很可能就把整個需求理解錯誤,這樣修改的幾率就很大


          3、目標不清晰

          沒有理解每個功能是什么,背后要解決的問題是什么,滿足了什么需求,能夠得到的價值是什么

          產品或運營提出一個需求的背后,往往都有一個非常明確的結果預期,他們也需要層層審核。我們不應該想“他是不是對我有意見”“他不懂設計的吧,就喜歡瞎BB”“每次都這樣針對我,設計做的真沒意思”等等,而是需要主動溝通,了解為什么?只有充分的理解需求,才能尋找更正確更好的解決方案。



          我們做稿子時常存在問題是我們僅僅關注了設計視覺表達環節,整個項目流程我們理解的過于狹隘,騰訊百度這些大廠設計流程往往從項目立項設計已經開始介入了



          如何解決?

          想要提升設計方案的說服力,首先要從思想上改變對設計認知,然后再從執行層上落實每個小點

          1、體系化的思考

          1. 1、拓寬邊界

          這里需要設計師站在更高的視角,把設計從表現和執行抽離往前后延展,在整個過程中往前去挖掘需求和規劃產品結構,往后做到把控和沉淀,跳出視覺認知層,才能宏觀看待整個業務改版



          1.2、轉換視角

          從不同的視角看待問題,學會拆解問題和解決問題,從產品、設計、開發不同的角度來全盤看整個產品,分析這個需求的投入產出比是否足夠,是否能達到目標(包括設計目標和產品目標)。設計、產品、開發從來都不是對立的,都是不同角色為了整個產品發力。



          1.3、追本溯源

          我們在開始著手項目的時候,不要單點去看要在某個頁面要做什么改動,而是從問題入手,和產品同學對齊好目標,結合設計理念。


          最后找到發力點在哪里,循序漸進,這樣很大程度上能避免項目的反復,對設計流程的準確把控也是輸出優秀設計方案的基礎。



          1.4、認知創新

          有些新設計師認為創新就是把原項目進行翻天覆地的改變,初入職場會覺得負責的業務和項目都很小,沒有什么意思,其實創新的維度有很多,包括設計工作流程的優化,還有從小的問題點著手去深挖和思考,找到合適的解決方案并打磨細節給用戶創造驚喜。



          陌陌情感化設計和貝殼旗下被窩家裝產品圖標設計異曲同工之處,大方向上都是利用大色塊、細節處用線條勾勒,整體設計輕量化符合年輕人喜歡,但兩者又有不同之處。陌陌對表情和動作的處理線條更簡潔更抽象,而被窩家裝圖標融入品牌IP趣味化表達,傳達出詼諧、幽默的正面情感

          2、理解需求

          設計師往往對信息的獲取比較片面,很多往往坐等原型,然后刷網站找圖接著打開軟件擼圖,這種不充分理解需求就開始做設計的行為,屬于思維懶惰,就被稱為常說的美工

          我們在需求階段設計師應該主動跟需求方深入溝通,搞清楚以下方向的問題:




          3、明確目標

          明確目標是為了最終設計方案可衡量,設計師工作不是提供一個天花亂墜的方案,而是盡可能走在一個正確道路上提供給需求最合適的方案,只有大方向不錯的情況下才有好壞之分



          4、實際案例帶練

          4.1、前期分析

          在業務探索初期,舊版滿足了業務方和用戶的基本訴求。但是隨著業務擴張與更新迭代,我們逐漸發現現有的租售模塊實價登錄信息不能提供用戶有效的參考價值,該頁面點擊到實價登錄頁面的用戶量極少



          (1) 價值點展示不足,人均點閱量較低

          這個改版的背景是在租售業務上優化實價登錄社區的需求,租售詳情頁的上內容的呈現還是舊版,現有框架和內容對社區價值點展示不足。


          解決辦法:優化信息框架,豐富該房屋社區信息,滿足用戶找房時了解社區資訊需求
          比如整個社區在該市的排名、整個社區的配置圖、口碑評分等以及在實際找房場景過程中,用戶會找這個社區內同格局同戶型的房屋等等

          (2) 與用戶預期不符,跳出率較高

          整個591APP是臺灣地區關注度最高房屋的產品,但是從二手房引流過來的用戶很少,埋點數據不理想


          解決辦法:除了在視覺上也要與本身租售的業務分開,讓用戶理解注意到該模塊的價值外,另外在體驗層也需要優化

          4.2、用戶分析:深挖用戶真實的場景訴求

          為了更好的明確實價登錄的價值定位,以及確認用戶期望什么的信息呈現,我們在實際改版時對用戶做了多輪的摸底調研,挖掘用戶在使用關注功能時的真實場景訴求。


          在調研過程中,我們發現使用實價登錄的用戶分兩類,分別是觀望期的用戶和決策期的用戶,這兩類用戶雖然都使用,但是對實價登錄功能的場景訴求是不一樣的。



          (1) 觀望期用戶

          觀望期用戶一般是有買房計劃,但是對于自己要買什么樣房或能賣什么樣的房子需求沒有那么明確。這類用戶大多數是了解為主,從慢慢對比中做到心中有數

          (2) 決策期用戶

          決策期的用戶大多已經線下看過房,有些甚至已經到了和議價階段,他們對于自己的購房訴求已經十分清晰。在這個階段的用戶,期望提供更多有關體現房源價值的信息,比如掛盤時間、成交表、周邊完善程度等等,這些信息一方面可以展示出目前房源再市場內的定位,重新調整價格預期;另一方面也能了解到業主心里預期,提升線下斡旋的成功率

          我們可以從這兩類用戶的使用訴求看到,大家都期待能提供更豐富有效的信息,幫助自己明確需求和輔助決策。

          4.3、設計目標

          由上述信息得出我們的設計目標,提高租售模塊的實價登錄的點閱、降低跳出率,當我們的設計方案每個細節,都是以目標為導向時,你輸出的方案將更有說服力



          4.4、設計實踐

          結合實價登錄歷史現狀和不同階段用戶場景使用預期。我們在本次關注改版上制定了對應的設計策略。

          (1) 首屏

          舊版分析:僅滿足用戶基本使用,其中承諾的誤差率未達標,與內政部信息同步也存在問題;同時,視覺上更像是內容說明展示,點擊感不明顯


          優化策略:圍繞用戶買房租房場景,為用戶提供最新的實價登錄信息,同時添加點擊指向性箭頭,告知用戶可點



          通過對首屏不斷的優化和迭代,打磨體驗細節和設計細節,首頁的點閱提升了43%

          (2) 實價詳情

          從框架層對功能和層級進行梳理,原層級主要功能不突出,根據功能的重要層級以及用戶使用頻次進行梳理,將入口進行提煉,同時針對多樣化需要增加新的入口

          舊版分析:用戶在不了解社區情況下缺少關注動機;折線圖不明所意;同社區是否有成交與當前用戶缺乏聯系;查看更多實價登錄卻到社區詳情頁與預期不符


          優化策略:圍繞用戶買房租房場景,展示與用戶切身利益相關信息






          (3) 保持規范,風格統一

          關于顏色

          整個產品主色是橙色,但是目前租售詳情頁上藍色橙色混用,當然設計的改版也需要鍥機,所以我們這次改版沿用橙色,當好區別之前的藍色,達到凸顯實價登錄模塊的目的



          配色從樸素到亮眼跟從LOGO配色,“暗藍色”到“亮橙色”增強年輕感,加強了顏色的對比度,讓品牌感知更加直接,增加品牌視覺分量

          關于圓角

          圓角,代表友好、親和,具有更強的內指向性。我們對于圓角的取值上也做了足夠的思考:結合房屋特性,卡片內需承載的內容信息眾多,圓角太大會影響邊角信息的呈現,所以我們在圓角選取上將圓角數值整體縮小,采用了可根據場景精細程度選擇合適數值的圓角(4-6-8px),使卡片容器信息展示更聚焦。



          5、高效溝通

          設計師不僅要會設計,還要能夠有理有據的,跟需求方陳述自己的設計方案。尤其是在項目合作和設計推進時,非常重要。方法可以分為以下幾點:a.有邏輯;b.能堅持;c.會妥協。



          5.1、有邏輯

          向別人推進自己方案之前,先把自己要表達的內容梳理清晰,進行調整和簡化。試想你小時候全校上臺發表考試獲獎感言,是不是有個長長的稿子
          多問自己一些為什么,比如下面稿子類似于廣告位的地方,當前目標是提高點擊率。但是整個模塊展示是在另外的業務上,也是存在突出的同時不能太突出的問題



          初稿給出的時候也是出于2個方向考慮,方案一是出于頁面整體風格一致性同時優化視覺,稍作強調;方案二考慮到方案一視覺引導弱了,用重色強引導達到產品目標。2個設計方案都可達到產品目標,剩下的就是調優了

          5.2、能堅持

          在符合最終產品目標的設計方案,必須堅持。但是,你要有證據證明為什么它值得或者能夠堅持。


          這里再分享一個案例來,臺灣用戶往往特別注重個人隱私,基本不開通系統定位,但是買房租房位置選擇及交通地域選擇是第一步,否則后續搜索無法定位到用戶預期。所以此次產品目標是加強導航的視覺層級,當然這只是優化需求里面一個小需求

          經過競品分析、加強品牌感知和用戶使用習慣等方面確定使用品牌橙。但是這個橙飽和度比較高,在測試階段非專業人士提出疑問導航這個太刺眼,讓整個頁面感覺不高級,讓產品和交互再次懷疑這個橙色是否需要調整



          這個時候設計堅持是非常有必要的,因為大量結果驗證是可達到產品預期也符合用戶使用習慣,僅因為大陸同事質疑就在測試環節隨意修改,這個是非常沒必要的。測試環節離上線時間是非常緊迫的,這個急促的時間推翻重來結果也可想而知

          5.3、會妥協

          體驗設計會有很多不可控的因素,是在各種局限下做出最合適的選擇。要處理好問題的優先級,分清楚哪些是核心目標,哪些是兼顧目標,這樣才能更有效的管理自己的時間以及項目的進度。

          6、方案闡述

          6.1、什么是清晰有效的設計方案?

          清晰設計層面來說就是方案能做到方向明確,方案明了;有效字從設計層面來說就是輸出的方案可以解決存在的問題,能達到設定的目標以及可以切實落地。



          清晰和有效的維度是不一樣的:清晰更多是針對設計,在于不同方向/方案的差異度和側重點;
          有效更多需要聯合設計上下游(用戶/產品/開發),對于優秀的設計方案來說兩者相輔相成,缺一不可

          6.2、清晰:方向明確,方案明了

          數量并不代表一個設計師的專業,最多只能說明設計師技法嫻熟。在評審的過程中,不建議將所有的設計方案直接平鋪。而是你要先經過自己思考、衡量與推敲,挑選出最優的 1~2 個方案進行方案評審,并給出設計說明,陳述方案的思考邏輯。

          在設計最初期先思考有哪些途徑達到目標,確保所有實現手段的方式都有考慮到,整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸,才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。



          之前的例子比如目標答案是提高點擊率和閱讀量,我從3個方面闡述方案的可行性
          方案一:沿用當前頁面的比較扁平設計樣式,選用大間隔大標題區分模塊,在頁面里加入品牌色裝飾強調我們的模塊,吸引用戶點擊;
          方案二:可以采用卡片式設計突出點擊感,吸引用戶點擊;
          方案三:因為頭部有用橙色裝飾強調,所以整個頭部模塊不用卡片式呈現,突出后面2個模塊

          這樣3個方案給需求方,即滿足對方產品需求,又滿足設計需求,對方就不會全盤否認設計方案,走入改改改模式了,就算對方有修改意見也能說出具體點去修改,而不是說我覺得不好,不夠突出這樣非常主觀的想法



          強調一點:我們在方案都沒說服自己的情況下不要推出去,專業度是每次和對方碰撞中中慢慢建立起來的,如果說服不了自己的情況下,推出去對方很大可能性要你試無數稿對比;另外在闡述發需求方時候,也要注意語言的引導,慢慢理解對方的意圖

          6.3、有效:解決存在的問題、能達到設定的目標、可以落地的方案

          初入行時認為滿足了需求方便是好的設計,當其他角色提出不同意見就會覺得他們不懂的設計。這些現象是因為設計師在項目前期沒有正確思考需求本身需要解決什么問題、方案能否達到團隊共同設定的目標,以及方案是否能平穩落地這三個維度



          (1)解決存在的問題——從問題出發

          我們在實際輸出方案的時候,不能從產品經理的需求文檔開始,而是要把考量維度更前置,從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋,內部團隊的聲音,同時對問題進行篩選和甄別。

          比如下面同一個產品按鈕2種懸浮狀態,左側案例按鈕hover狀態是由正常狀態面型變成線型;右側案例按鈕hover狀態是正常狀態下加投影。



          如果我們僅從產品需求文檔開始,不去深究其背后的原因,很可能把右側hover狀態直接變色處理,沒有去思考hover的幾種樣式哪種是更適合當前場景的的,這樣簡單粗暴的處理方式多了之后使得產品體驗大大折扣



          (2)能達到設定的目標——從目標啟動

          問題還需要結合目標一起考慮,解決問題的思路并不完全等同于目標,目標是大家一起制定的未來產品的發展方向。比如之前導航的案例,未發版前部分工作人員認為顏色偏重,但是從產品目標和品牌調性及目標用戶審美上是沒有問題的



          (3)能落地的方案——技術可以實現

          在輸出設計方案的時候,需要考慮到開發實現的可行性,需要消耗多少資源去實現這個需求,最低成本達到目標的路徑是什么。最常見的就是情感化設計,下圖案例2個空狀態下的場景,原本考慮到趣味性及品牌屬性加入動效,但是開發的業務需求已經排到下月,最后只能以靜態圖展示,先滿足基本需求后續有時間再進行優化



          再例如下面三組數據的排版方案一:文字最左邊間距30px,文字最右邊間距30px,中間一組數據中間對齊;

          方案二:三組數據分別在360px寬的格子里距離左邊30px。方案一在視覺上可能更加合理,當寬度是1200時右側不會空太多,但是按方案二的邏輯寫更加便捷,一組數據樣式可以解決3組數據的排版,大大提高開發效率,如果用方案二評審加入開發實現方式的思考,那么按過稿率大大提升了



          以上是跟進項目一整個具體過程,了解背景、分析問題、設定目標、到方案推導及執行輸出、再到方案的落地,整個過程與產品研發溝通非常順利,最后也獲得良好的用戶反饋,整個團隊滿滿的成就感是非常開心的



          總結

          進入互聯網公司工作初期,大多數人對設計的理解更多停留在表現層,對設計的判斷標準更多是好不好看、喜不喜歡。但作為設計師我們不要盲目的去畫設計圖,只有在設計方案前,更好的理解和分析了需求,才能很好地服務用戶幫助用戶使用產品;同時,只有站在用戶的角度去分析理解產品,才可以幫助產品站在全局的視角提升用戶體驗和設計需求,從而打造優秀的用戶體驗。這2點綜合起來才是設計師價值的體現。

          原文地址:站酷

          作者:貝賢設計筆記

          轉載請注明:學UI網》科幻機甲風格海報怎么做?

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


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

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

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


          科幻機甲風格海報怎么做?

          seo達人

          圖片

          我們在去做這種類型的風格時,要學會總結,機能風的海報版面雖然整體呈現較為復雜的效果,但如果仔細觀察,基礎的元素都比較簡單。

           

          大家在做之前可以去先總結,通過觀察這類作品可以得到以下元素,比如:

          01. 電子元件/芯片

          02. 機械感元素

          03. 不規則標簽

          04. 警告符號,裝飾性符號等

          05. 黑白灰及熒光色的搭配使用 

           

          圖片

          然后我在準備教程案例就開始畫呀畫,畫了蠻多適合應用在機能風格海報中的元素,最后干脆想了一下,那就索性把所有的畫完,源文件都送給大家吧…

          教程突然就變成了素材分享…

          下面我們來先看一下本期分享的素材,總共分為四個部分,每個部分的形狀細節都有不同的差別。

          圖片

          圖片

          圖片

          圖片

          但是下載素材只是第一步,很多同學平時電腦里也攢了不少素材了,誤以為收藏等于學會,下載等于精通…

          設計畢竟是個手藝活,還是要動手試試才知道怎么使用。

           

           

          圖片

          01、首先我們從我給的素材里面挑選幾個元素,我這里選擇了三個,大中小。

          圖片

          02、人物摳圖后,先觀察一下,人物本身自帶了黃色的輪廓光,那么主色我們就盡量要選擇黃色了,畫面才會有合理性。

          圖片

          03、這一步就是將圖形按照較為平衡的構圖方式進行放置,可以和人物有適當的疊壓穿插關系。

          為了避免圖形太過零碎,強烈建議大家可以先以一個大色塊為主,可以避免主體散亂。

          圖片

          04、接下來將文字信息進行空白處放置,注意這里比較主要的信息就三塊,人名,活動名稱,時間地點,編排上主要突出這三個部分即可。

          多余的裝飾性英文信息適當縮小,起到一個點綴的作用就可以了。

          圖片

          05、最后添加一個紙張褶皺的效果,因為我元素及色彩處理的比較簡單,所以加深質感的處理,可以讓海報更有層次感。

          圖片

           

           

           

          圖片

          接下我們看第二個案例,這個案例我打算使用元素拼接的方式讓畫面更整體,細節可以適當處理多一些。

          01、老規矩,開始挑選圖形元素…

          挑元素的過程確實是…太爽了,怪不得大家這么喜歡素材,盡管素材是我一個一個畫的,但是我挑的時候也感覺…太方便了…

          這里我順便將元素組合了一下并且加了個顏色。

          圖片

          02、如果只是在畫面中間這樣放置的話,四周缺乏呼應的元素,所以大家可以根據已經選好的圖形特征自己簡單畫一些。

          效果如下,是不是感覺完整性好多了。

          圖片

          03、然后圖片放置進圖形中,圖片整體也是呈現紅色調的,所以整體的色彩和元素我已經用了紅色,那么建議重點的信息在這里都用白色,可以簡單做一個色彩突出的作用。

          無論裝飾元素和文字有多少,最終還是要想辦法突出重點信息,這兩者本身并不沖突。

          圖片

           

           

          圖片

          看第三個案例,先選元素。

          01、順便選一些簡單的圖形裝飾元素,比如箭頭條形碼等。

          圖片

          02、這個圖片本身已經蠻好了,底色也很簡單,所以我不打算摳圖了。

          圖片

          03、接下來注意觀察圖片,底部有大量的黑色,所以我們的標簽部分可以直接放圖片下方就可以了。

          其余文字環繞人物進行編排即可。

          圖片

          04、正在這個案例中,我想添加一下類似毛玻璃和磨砂的效果,增強圖形的質感。

          圖片

          05、按照這個方法,我為其他地方也添加了這樣的磨砂效果,下圖為最終效果。

          圖片

           

           

          圖片

          01、看第四個案例,先選元素。

          其實我個人還是更喜歡這種帶圓角的感覺,感覺有點高端的樣子…

          圖片

          02、將元素和人物圖片進行合理構圖,其實就是控制每個元素的大小和位置,放置他們的錯落感,保證人臉不要被色塊遮擋,文字信息順便也放置進元素中即可。

          圖片

          03、還是按照上個案例做磨砂效果的步驟,我們再加幾處磨砂效果。

          下圖為最終效果。

          圖片

          04、注意這里的磨砂效果除了加描邊,我還加了投影,讓整個畫面的色塊錯落有點縱深感。

          圖片

           

           

          圖片

          01、第五個案例我們換一下人物…一個題目做了四個案例,估計大家已經看膩了…挑幾個圖形元素。

          圖片

          02、我們將圖片和元素做一下結合處理,人物的部分我做了錯位的處理,有點視覺迷幻的效果。

          人物名字放置圖片頂部即可。裝飾性文字可以適當的跟元素做一個整體排版處理。

          圖片

          03、最后,老方法,再加幾個磨砂效果,你別說…這個效果確實有點上頭,普通人受不了這種誘惑…

          不要怪我非要做的花里胡哨,花天酒地也不是我想要的方式…

          圖片

           

           

          圖片

          01、第六個案例,還是…

          挑幾個圖形元素…

          圖片

          02、人物圖片本來是這個樣子,背景是白色,不好處理整體的色彩變化,而我…也不想摳圖…

          所以在ps里加了一個漸變映射效果。

          圖片

          03、圖片用一個元素,標題用一個元素,這樣就做好了構圖排版處理。

          圖片

          04、但是到這一步,畫面還是會有點空空蕩蕩,填充一些呼應的元素即可。

          最后,再加入紋理的效果疊上去就可以了。

          圖片

           

           

          圖片

          01、第七個案例,挑幾個細節較為復雜的元素,這次我們是單獨拿來做背景使用。

          圖片

          02、為了做出層次感,可以給色塊適當添加漸變色和投影,有點立體的效果會更好,因為本來就都是偏白色的,沒有投影和漸變的話效果不明顯。

          圖片

          03、重點信息我們就用以復本來的顏色就好,可以多一點裝飾性元素作為點綴,不然白色的背景還是有點空,有一些點線面的變化版面會舒服一些。

          圖片

          04、最后…

          再加幾個磨砂玻璃效果…

          這次我是真的膩了膩了…

          圖片

           

           

          圖片

          01、第八個案例,元素選好之后,我這里直接處理了漸變的效果,作為背景,有了一點質感。

          圖片

          02、黑白的人物放上去就很適合,這一步我們就搞定了背景和人物的畫面整體處理。

          圖片

          03、然后將文字編排進畫面中,但是整體除了黑就是白…

          顏色有點太單調了,所以我們要換換顏色。

          圖片

          04、這個顏色…

          就…

          挺好…夜店風的感覺…

          圖片

           

           

          最后來放一下合集

          圖片

           

           

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

          作者:王猛奇

          轉載請注明:學UI網》科幻機甲風格海報怎么做?

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


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

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



          B端營銷創意|數字藏品能否成為B端業務力爆發的新介質?

          seo達人


          圖片

          品牌價值“藏品化”的可能性

          通過對阿里云用戶調研發現,數字藏品這項技術有著廣泛的用戶認知基礎,有91%的阿里云用戶對阿里云推出數字藏品感興趣,其中81%的用戶比較感興趣及非常感興趣,40%的用戶曾經購買過數字藏品。這項結論讓設計師們非常興奮,這就意味著利用數字藏品傳遞阿里云品牌價值存在確實的可行性

          圖片

           

           

          圖片

          致敬里程碑 

          設計師和業務團隊就數字藏品的設計方向進行了多輪溝通和論證,以阿里云飛天5K紀念碑為表現形態的思路脫穎而出。

          出發點是設計師們想借此項目重塑營銷品牌心智,回到“為了無法計算的價值”阿里云品牌主張,用“飛天5K紀念碑”這個開發者心中的圖騰,在網站上進行數字藏品與任務平臺的聯動,通過創意與品牌為業務帶來用戶增長價值。

          圖片

          回溯歷史,阿里云飛天5K是阿里云計算技術發展的一個里程碑,飛天5K集群上線是中國云計算最值得紀念的時刻,代表了中國云計算技術人勇敢追夢、追求極致的理想主義精神,其在用戶心中的意義不亞于一次成功的“登月”,這種寄托已經成為阿里云品牌的核心資產之一。

          圖片

          圖片

          圖片

          圖片

          圖片

          因此選擇云計算開發者的精神圖騰——“飛天5K紀念碑”作為創意原型,進行數字藏品的設計,進一步拉進與用戶的距離,同時能在開發者圈層中打造心智,營造傳播聲量,鏈接阿里云品牌與用戶間的情感共鳴。阿里云首款數字藏品讓用戶充滿期待,用戶關注的將不僅是藏品的使用價值或增值價值,更多的是一種不可替代的情緒價值

          圖片

           

          圖片

           

           

          圖片

          業務目標的自然融入

           破圈裂變組合拳

          在整體方案設計上,團隊將拉新的核心目標和飛天5K數字藏品做了深度結合,利用「阿里云IP品牌價值+首發造勢+大促氛圍+精準的種子用戶裂變+所見即所得的虛擬權益」的超強組合拳,構建了完整的爆點傳播鏈,帶來規?;略鲇脩?,完成了一次成功的破圈嘗試。

           多端聯動引發爆點

          通過所見即所得的虛擬權益,突破用戶預期,引發了活動參與用戶通過微信群、朋友圈、微博、論壇等各種平臺的自傳播,形成穩定裂變鏈條,吸引更多玩家參與。同時官方通過阿里云App、官方微博、鯨探App、鯨探小程序形成流量矩陣為活動背書,引爆活動傳播。

          圖片

          用戶因情感的喚醒,通過數字藏品活動自然的完成了對阿里云產品的了解,并在主會場產品力彰顯、爆款價格吸引下,成為了阿里云新用戶,幫助業務完美的完成了既定目標?;顒觾H僅上線6天即完成一萬份數字藏品的發放,首購ROI達到58,同比上一次奧運小寶的拉新活動提升230%。

           

           

          圖片

          未來之路 

          數字藏品未來將成為阿里云傳遞品牌價值的重要載體,更多承載了中國云市場情感的作品將定期與用戶見面,逐步形成阿里云獨有的云數字藏品矩陣,賦能云業務的發展。

           

          原文地址: 阿里云設計中心(公眾號)

          作者: 阿里云設計中心

          轉載請注明:學UI網》B端營銷創意|數字藏品能否成為B端業務力爆發的新介質?

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


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

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

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



          在UI布局排版中,讓界面快速出彩的7個技巧

          seo達人

          一、優先考慮重要內容

          圖片

          優先考慮重要的內容,在頁面中保持重要的信息占比更大、更明顯。

          為了讓用戶能夠快速看到關鍵信息,可以通過滾動的交互方式和指導性的按鈕設計,幫助用戶找到他們想要的信息。

          圖片

          ?▲ 例如《紐約客》網站的布局設計,在中間位置優先展示最重要的資訊,突出重點,網站兩側的資訊展示相對弱化。

           

          二、保持合理的視覺層級

          圖片

          頁面中清晰的層級結構對用戶來說也很重要。通過打造明確的視覺層級結構,頁面內容的主次關系會更清晰和合理,方便用戶更容易理解頁面信息。

           

          圖片

          ▲ 在Netflix影片詳情頁的布局中,保持了清晰的視覺層級關系。跳到詳情頁后,我們首先會看到頁面頂部的預告片和大尺寸的白色高亮播放按鈕,然后是關于影片的介紹和其他功能。

           

          三、使用非對稱布局

          圖片

          對稱布局和非對稱布局在日常設計中都很常用。對稱的布局能夠讓頁面看起來更加統一、整潔,但也導致頁面效果缺少對比,效果單調。

          非對稱的布局剛好可以彌補這個缺點,在保證排版整齊的基礎上增加頁面的對比關系,讓頁面看起來更有吸引力。

          ▲ 例如在這個網站首頁中,左圖右文的非對稱布局設計讓整個頁面看起來更有對比性和沖擊力,快速吸引用戶的注意力。

           

          四、使用間距

          圖片

          通過間距,能夠將頁面中不同的版面和內容劃分出來,讓頁面的布局更豐富。

          同時,通過調整間距的大小能有效區分內容間的關聯程度。例如,同一組信息采用間距小的布局方式,讓內容的關聯更緊密。

          圖片

          ▲ 在Instacart頁面中,上下有兩種不同的布局方式,通過增加間距,讓頁面看起來更清晰。

           

          五、打破統一的布局

          圖片

          過于統一的布局方式會讓頁面看起來很單調,無法突出重點。

          如果想讓頁面中的某個內容吸引用戶的注意力,可以嘗試在打破一致的布局情況下,讓頁面看起來更有節奏。

          圖片

          ▲ 在Airbnb網站中,圖1、2和5采用了相同的尺寸,圖3和4打破了統一的布局,讓頁面看起來更有動態感。

           

          六、使用網格

          圖片

          網格系統是使用網格作為輔助,進行頁面設計的方式。通過使用網格系統,可以更準確地定義頁面的布局。

          圖片

          當然,網格不僅能用在頁面布局設計中,在其他類型的設計(海報、畫冊等)中也常用到,是非常值得設計師學習的系統。

           

          七、保持對比

          圖片

          在設計頁面的布局關系時,要盡可能做到圖文搭配,保證既要有文字、按鈕等元素,也要有一定量的圖片,讓頁面保持對比性。

          圖片

          ▲ 例如這個網站首頁中,左右兩部分采用了一致的布局方式,以圖片作為背景,文字和按鈕等元素與背景產生對比,提高頁面的沖擊力。

           

          最后

          通過這些實用的布局技巧,希望能夠幫助你設計構建出更好的界面布局~ 對界面中內容的劃分和信息的掌控帶來進一步的提升。

           

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

          作者:Clippp

          轉載請注明:學UI網》在UI布局排版中,讓界面快速出彩的7個技巧

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


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

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

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



          P了兩個圓,價值800萬?

          seo達人


          下面這兩個圓大家可能不熟悉,這個是萬事達的最新logo,就是由兩個圓組成,價值800萬。那為什么兩個圓形能夠價值這么多,今天跟大家聊聊,幾何在整個設計中的運用,怎么讓你的圖形更高級。

          圖片

          圖片來源于網絡,版權歸作者所有

           

          一、幾何簡史課 

          歐幾里得常被稱為“幾何之父”,因為他寫了一本叫《幾何學》的書,這是數學史上最有影響力的著作之一。

          圖片

          幾何圖案來源于幾何學,幾何學是數學中對形狀和線與面之間關系的研究。圖案被定義為“重復的裝飾設計”。

          在設計中,幾何圖案反復使用形狀和線條來創造引人注目的設計。幾何圖案非常適合用于設計,因為從本質上講,我們的眼睛自然會被它們吸引。通過將幾何圖案與合適的顏色相結合設計引人入勝的視覺內容。

          圖片

          世界內外的一切都可以通過數學來推斷和理解,這正是許多文化將幾何視為神圣的原因,從一開始就被人類直觀地使用和理解。

          因此,幾何形狀和圖案在藝術和設計中具有很大影響力。從伊斯蘭藝術到包豪斯運動、立體主義、裝飾藝術等等,幾何圖案一直并將繼續在設計中發揮關鍵作用。

          圖片

          我們可以將幾何設計用于從品牌到產品、插畫、網站、應用程序設計等等的任何設計中,下面帶大家看一些幾何圖案在不同設計環境中的運用案例。

           

          二、幾何在設計中的運用 

          1、平面設計

          圖片

          雜志封面設計結合了三角形和充滿活力的各種配色,創造出炫酷的圖案,色彩繽紛的效果。

          圖片

          平面設計師 Atul Charde 設計的長途汽車,展示了幾何圖案可以很好的吸引人的注意力。Charde 還結合了黃色、橙色、海軍藍和白色的配色,創造出一種正在忙碌行駛的感覺,很生動形象的體現了長涂汽車的概念,十分契合產品。

          圖片

          幾何設計也非常適用于包裝上面,用簡單的形狀組成復雜的圖案來包裝產品。

          圖片

          這瓶酒使用簡單的線條來創造一個有趣的幾何圖像。這是一個很基本的設計方法,但通過巧妙地結合顏色填充幾何形狀,設計感就出來了。一個復雜的圖案就是由一個簡單的圖形組成的。

          圖片

          圖片

          盧塞恩紐巴德俱樂部音樂會系列海報,用繪畫與幾何的結合,表現了音樂的非常規和自由特點。

          閃電形、星形、三角形表達音樂的激烈抑揚頓挫感;圓形、傳達音樂的平靜、緩和感;自由筆觸有序直線,傳達音樂的有序、綿長感。

           

          2、品牌

          圖片

          Nymble 健康套盒品牌視覺提取品牌首字母“N”與人奔跑時的姿態結合,雖然是簡單的幾何線條和點,卻非常有動感,簡潔而傳神。

          圖片

          圖片

          圖片

          品牌延展部分是對品牌標志更進一步的理解和演繹,沿用了標志中的點、線元素,通過對點與線的位置、距離、粗細、大小的調整,構建出一整套可變的網格圖案。

          圖片

          圖片

          涉谷時裝周2020-2022的視覺設計用圓形幾何化的視覺語言,將SFW2020組合成圖標,并拆分重組成為輔助圖形,運用到畫面整個體系中。從2020-2022,通過不同視覺展現不同的視覺風格,2022的工業鬼馬感、2021休閑時尚感、復古都市感。

          圖片

          圖片

          玻璃質感和幾何圖形的結合完美詮釋主題,體現宏大精致的美。元素簡潔,通過細膩的質感增加豐富的對比。

          圖片

          圖片

          這是一款國外的披薩品牌的logo設計,特別之處在于logo的名字和圖形看似分開,實則是用一個郵票作為一個整體。圖形的人物是一個由幾何組合,用黃金比例切割出年輕媽媽的樣子。

          圖片

          圖片

          圖片

          這是國外的一個茶飲品牌的包裝設計,插畫的人物服裝和植物元素是當地人的特點,設計師將這些具有豐富變化的民俗服裝用幾何圖形有規律的重新組合。

          通過將復雜的事物用幾何有規律的概括后,再通過合適的配色,呈現的整體設計感很強。同時在文字以及裝飾框上,也統一用了這種具有民俗風情的風格,在字體上也會用幾何作為流蘇一樣去代替字母一部分的筆畫。

           

          3、插畫

          圖片

          圖片

          簡單幾何元素拼綴出的人物、場景,色彩上深淺深的對比,圖形上方圓方對比增添了畫面的呼吸感和視覺沖擊力。

          圖片

          圖片

          這種風格的插畫區別于以往的插畫風格,整體是幾何體和不規則形狀組合而成,噪點的運用和顏色的搭配完美,夸張的手法,大膽的設計讓它脫穎而出。

          圖片

          無論是簡單的圖案還是復雜的圖案,幾何設計都可以完美地制作出引人注目的壁畫。

           

          4、網頁設計

          圖片

          圖片

          這個網頁運用極細的線條,規則的塊面,將界面的功能展示區域分明,簡約不失嚴謹,傳達出品牌的專業度。

          圖片

          B端設計的頁面采用圓角卡片,以及大規模幾何體使用,界面立體感和層級感比較突出,立體幾何插畫的表現效果很好可以在UI中運用。

          圖片

          配圖用三維幾何體,搭配很年輕化的色彩風格,顯得畫面感很強。整體色調很舒服,界面干凈整潔,很年輕。

          圖片

          圖片

          這組網頁設計首屏融入幾何元素包裹著主圖,靈動多變的幾何裝飾打破慣性的設計思維,創造出新奇的視覺效果。

          圖片

          圖片

          這個體育網頁頭部使用紅色和黃色,運用對比色,視覺沖擊力強,使用三角形和異形,簡單的幾何圖形,營造頁面的空間感。

          圖片

          圖片

          背景采用柔和的微漸變點綴淡淡幾何圖形,既不會喧賓奪主分散用戶的注意力,又可以避免純色背景的單調。

           

          5、UI設計

          圖片

          這個綠植商店頁面采用大圓角搭配圓潤的線性icon,用幾何拼接形式表現插畫,整體風格自然簡潔。

          圖片

          這個醫美產品的UI設計,按鈕和產品的背景沿用同類型的幾何圖形,類似超級符號的存在,加深品牌印象的同時,打破常規背景圖的形態,使頁面充滿生機活力,貼合醫美產品賦予肌膚青春活力的初衷。

          圖片

          從畫面感來看,有點像游戲或者娛樂產品風格的界面。背景用很多幾何元素符號,畫面感很活躍。

          圖片

          這組啟動頁設計,通過人物和幾何圖形穿插,突出人物主體,拉開主體和幾何形的層次感;并運用色彩疊加的方式,畫面更具青春、趣味和視覺沖擊力。

          圖片

          圖片

          這是一款體育運動場館預訂的產品,用幾何形狀表達不同的運動,簡約又生動,也與整體高級感匹配。

          圖片

          幾何插畫設計風格,頭部卡片像一個抽象的人物,整體風格偏年輕化,卡片和背景生動有趣不單調,顏色多彩充滿活力。

           

          三、最后 

          今天的分享就到這里,期待每天一個小知識點,可以給你的設計路上增加一點點能量。

           

          原文地址:我們的設計日記(公眾號)

          作者:叮當貓

          轉載請注明:學UI網》P了兩個圓,價值800萬?

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


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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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