<strong id="jzqzp"><pre id="jzqzp"><xmp id="jzqzp"></xmp></pre></strong>
<tt id="jzqzp"><span id="jzqzp"><blockquote id="jzqzp"></blockquote></span></tt>

          首頁

          彈窗篇 | 如何彈、什么時候彈?你需要知道的彈窗設計原則!

          分享達人

          彈窗到底該不該加?怎么加?用什么形態展示?真正的作用是什么?這些真的是產品經理說了算嗎?

          好的產品通常會在恰當的時間、合適的位置給出合理的反饋,彈窗也是必不可少的反饋方式,不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗,甚至誤導用戶,從而導致用戶流失。很多時候,產品經理會從商業角度、公司業務、資源限制等方面考慮問題,但這些未必是用戶所需要的,設計師不應該完全按照產品需求做設計,否則就成了只會照搬產品原型的“美工”。需要做的是從用戶角度出發,把產品需求轉化成設計目標,只有經過反復的推敲、認真分析,最終才能打磨出服務于用戶的彈窗設計,所以彈窗該不該加、如何加就成了設計師不可推卸的責任和使命。

          本篇文章將圍繞著彈窗類型、使用場景、轉化率及常見問題為側重點,將自己對彈窗的理解、設計經驗分享給大家,幫助大家對彈窗組件有更清晰的認識,為后續避坑設計出更好的彈窗做準備。




          本期大綱


          一、彈窗的基本介紹

          二、彈窗體系分類

          三、彈窗的使用場景

          四、如何設計有效的彈窗

          五、需關注的問題點

          六、總結




          一、彈窗的基本介紹


          1 彈窗的定義

          當我們與應用產生主動或被動交互時,頁面上層會彈出容器,將可承載的文本、按鈕、選項、標簽或表單等任一內容與之組合,就可以用來傳遞信息、狀態反饋、引導用戶等操作,這就是彈窗。

          彈窗的目的主要是為回應用戶或讓用戶回應,是用戶與產品間對話的一種方式,在線上各種場景中都有可能碰到,相當于產品的線上小助理。不同類型的彈窗其作用不同,但最終都是為了滿足跟用戶之間的友好交流。


          2 彈窗組件的構成

          彈窗組件的樣式很多,如浮層、對話框、下拉菜單、toast等,且iOS、Android官方平臺也都根據自身的規范對組件進行命名,不管如何稱呼,其常見的彈窗組件絕大多數都是由以下元素組成:

          ◇ 容器:作為承載彈窗的文本、圖片等內容,容器必不可少,有的彈窗直接以蒙層作為容器,如toast;

          ◇ 蒙層:為了和底層內容分離,避免信息混淆,通常會在界面上層(容器下層)設置一個不透明度為20%~60%

          的純黑色蒙層。部分小型彈窗不設蒙層,但會為容器設置投影,例如篩選器的展開、下拉菜單等;

          ◇ 文本:文本是彈窗傳達信息主體的必要條件,如標題、按鈕等,即便把文本融入圖片,也能一目了然;

          ◇ 圖片:用于運營彈窗傳達更多信息內容的方式之一,為了對用戶產生更強的吸引力,還可設計成動態效果;

          ◇ 表單:為成功進入下一步做準備,如輸入密碼(iOS設備下載應用前的必要步驟)。也可以是當前頁面流程的分支,例如輸入優惠券等;

          ◇ 選項:條件較少的選項可使用彈窗完成,單選、復選在選項不超過6個的情況下都可使用;

          ◇ 圖標:在弱化次要操作的情況下,通常會將關閉彈窗按鈕設計成圖標放在右上角或彈窗下方,目的是突出主操作,鼓勵用戶從彈窗中進入下一步,另外還有單選、復選、提示等按鈕;

          ◇ 按鈕:是進入下一步或回到上一步(去掉彈窗)的操作入口,部分應用也可以點擊彈窗以外的空白區域讓彈窗消失,但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設置按鈕。




          二、彈窗體系分類


          1 模態彈窗

          用戶在完成任務的過程中,界面會出現彈窗打斷用戶的操作行為,用戶必須通過主動點擊才可以進行下一步操作,這即是模態彈窗。

          模態彈窗通常能較好的獲取用戶的視覺焦點,并通過承載的內容、按鈕主次層級來引導用戶完成他們的需求,這也會根據用戶、產品側重點的不同,彈出樣式也有所不同,常見的模態彈窗有對話框、動作欄、浮層...等。


          1.1 對話框Dialog/Alert

          對話框是很常見的彈窗,主要在打斷用戶后并提供選項操作,對用戶的干擾較大,通常會配備1~3個操作按鈕,而且會把用戶最期待的或產品最期待用戶操作的按鈕突出顯示。

          對話框類型的彈窗主要分為主動、被動兩種觸發類型,主動彈窗:信息的二次確認、輸入內容、前置條件選擇、風險警示等;被動彈窗:版本更新、運營宣傳、消息通知、系統功能授權等。


          1.2 動作欄Actionbar

          動作欄是通過用戶主動操作后彈出的內容信息,基本都是從底部彈出,屏幕占用比例根據內容量的多少比較隨意,從小區域、半屏、再到全屏隨處可見。

          動作欄相比對話框則能承載更多、更豐富的功能信息,在用戶清晰感知當前操作及反饋的情況下,比跳轉到新的頁面更有安全感。


          1.3 浮層Popover/Popup

          浮層是指用戶操作某個功能/內容后,會在附近出現一個帶有視覺引導性質的彈窗,最常見的浮層就是下拉菜單/彈窗等,浮動于頂層窗口并指向觸發操作的位置。

          例如很多社交娛樂類型的應用右上角有一個“+”入口,里面會放置部分常用功能。部分浮層底部沒有設置不透明度的蒙層,為了與頁面信息更好的區分,會給浮層容器加上投影,避免與底部信息混淆。


          2 非模態彈窗

          相比模態彈窗,非模態彈窗屬較為輕量,觸發后以一種非阻礙的的方式呈現,不會打斷用戶的當前操作,主要是給予用戶即時反饋,讓用戶清楚應用當前的交互后狀態。非模態彈窗不強制用戶操作,根據反饋信息的重要程度及意愿,可在一定的時間內自動消失,也可等待用戶操作后消失,常見的有以下幾種:


          2.1 提示框Toast/Hud

          用于反饋用戶操作成功、警告、錯誤等當前狀態信息,可能出現在任何位置(底部/中間/頂部),在呈現樣式上,相同等級的模塊統一位置、風格即可,無需用戶有任何操作,出現2s左右自動消失。

          Toast只有純文字提示,例如格式錯誤、刷新成功、刪除成功等;Hud會使用文字+圖標樣式,例如添加到購物車、關注成功等。


          2.2 提示對話框Snackbar

          Snackbar早期只是Android系統的一種彈窗控件,后在iOS、Web前端都會使用到,可以看作是toast的加強版。一般只出現在屏幕底部,存在的時間比toast長,提供0~1個操作入口,可自動消失,也可與用戶產生交互后消失或者跳轉至其他頁面。

          Snackbar反饋的重要程度強于toast,例如,某個應用今天有重要提醒,同時又不想影響用戶的其他操作,會在用戶首次進入時彈出提醒,并提供關閉操作入口,等待用戶通過手動關閉(部分自動關閉),加強用戶記憶。


          2.3 通知Notice

          最有代表性的就是消息通知、系統推送,在設備未鎖屏的情況下,通常從頂部彈出,停留幾秒后自動消失,鎖屏后,不同設備彈出的位置也有所不同。Notice的前提是需要在應用設置中打開消息通知開關,具備應用外推送功能的,需在設備系統設置中開啟通知權限。


          2.4 透明指示層HUD

          HUD是一種在透明元素上通過填充、反饋用戶當前交互操作的指示層,實時生效,例如視頻類產品中的調整音量、亮度、控制進度條等。




          三、彈窗的使用場景


          當我們對彈窗體系有了一定了解后,就需要清楚什么場景需要設計彈窗?用什么類型的彈窗?產品最終都是服務于用戶,如果僅憑自己的主觀意見亂加一通,整的花里胡哨,彈窗就成了干擾元素,很大程度上會影響用戶體驗。什么樣的場景適合什么類型的彈窗,我們可以從以下幾點來說明。


          1 打斷用戶的操作

          風險警示:當用戶的某種操作可能存在風險,為避免操作失誤,會彈出對話框打斷用戶,并給予一定的風險提示引起用戶的注意,讓其有足夠的時間確認是否真的需要進行下一步操作,如:刪除、放棄福利機會、退出登錄等,會彈出對話框提示操作后可能引起的后果。

          前置條件:部分任務在流程中設有一定的前置條件,需要滿足條件才能進入下一步操作,通常這種情況會根據內容量的多少、重要程度以對話框或動作欄的樣式彈出,例如下單時選擇優惠券、支付方式。

          任務關鍵節點:用戶在滿足任務的基本條件后,需要操作一個關鍵步驟才能成功,則會彈出對話框讓用戶完成最后一步操作,例如提交訂單、表單、輸入支付密碼等。


          2 定制化彈窗

          這類彈窗主要從產品角度出發,不會過于在乎用戶是否需要、會不會反感,都會引導或強制用戶操作。

          例如產品發布新版本,會強制用戶更新,否則將無法使用。還有各大電商APP,在進入首頁時會彈出一堆紅包、優惠券,刻意將取消/關閉入口弱化,給用戶返回造成一定的難度,利用突出的視覺、動態效果突出主題增加吸引力,以達到轉化用戶的目的。


          3 二次確認

          二次確認也是一種打斷用戶的操作行為,但跟上面純粹的打斷用戶相比其作用更大,主要是在用戶已做好選擇的情況下再次彈出確認,以免操作結果造成用戶認知上的偏差。雖然從用戶體驗角度出發,用最少的操作、最簡單的流程滿足用戶所需是產品追求的目標之一,但通過權和利弊之后,二次確認的出現實屬迫不得已的折中方案,它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達、重要的內容加深二次記憶等作用。

          二次確認使用得當,可以避免用戶、產品的潛在風險,但若是從主觀角度一味的濫用,就成了對用戶的惡意干擾、影響使用體驗,導致出現因多步驟操作增加任務完成難度、降低轉化率、損害產品形象等問題,所以需要從業務(用戶側、產品側)實際角度出發,兩相其害(加-影響使用體驗;不加-造成一定損失)取其輕的考慮是否需要增加二次確認彈窗。

          當用戶的某個操作可能帶來不可逆轉、錯誤嚴重程度較高時,例如:放棄僅有一次機會的較好福利、手機系統還原、應用賬號注銷等,系統都會給予二次確認,降低用戶認知偏差后,以確保用戶是經過多次思考才做出的決定,即便后續給用戶造成損失也不會過于降罪產品,產品也算是“問心無愧”了。


          4 簡單提示

          常見于用戶操作之后的狀態反饋,即便用戶沒有注意到,也不會造成較大的損失、或結果已經注定,相對來說成本較低,大部分出現在任務過程中的提示(可重復)和結果反饋,以確保用戶知曉當前所處狀態。

          非模態彈窗toas樣式居多,例如加載中、操作成功、刷新結果、清除緩存等,可出現在其他類型的彈窗之后或同時存在。




          四、如何設計有效的彈窗


          1 前提條件

          優秀的彈窗需要從視覺、交互兩方面思考,視覺上簡潔、易懂,交互上可操作且可控。

          視覺層面:首先需要做到的是易懂,這時候就非常注重文案清晰程度及按鈕層級關系了,彈出的信息需能直擊要害,用戶看了能一目了然才是關鍵;其次,彈窗屬于一種干擾信息的存在,設計必須簡潔,在彈出時需要考慮是否會過度影響(影響是一定會有的、且看如何降低)用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋(傳統來電),自己會以最快的速度掛掉電話,回到游戲中后發現自己已領“盒飯”,即便來電是多么的理所當然,但心里必定是非常不痛快的,那么,如果來電以彈窗的形式且占據屏幕很小區域(如今的來電方式)是不是就給了用戶足夠反應時間及緩沖時間呢?

          交互層面:彈出的內容及操作入口需清晰可操作,雖然有時基于業務需求,產品更希望用戶能進行下一步操作而并非回到上一步,即便如此,我們也只能通過弱化次要操作以突出主要操作,用戶有來去自由的權利,如果弱化至用戶看不清、甚至找不到的程度,即便提供了次要操作入口,也會存在反面作用;另外需注意用戶對產品的可控性,不管產品如何期望用戶進入下一步轉化,但不能強制,一定要給用戶提供回去的路(強制版本更新除外),否則,任性的用戶可能會直接結束應用,甚至因產品過于霸道直接卸載。


          2 設計目的

          首先,設計師應該理解產品需求,分別從用戶側(能給用戶帶來什么?滿足什么樣的需求?避免什么損失?...)、產品側(能給產品帶來什么?產品如何期望?是否合理?能得到什么樣的結果?...)分析為什么要加彈窗,然后將分析的結果轉化為設計目標,以確保彈窗根據不同的需求,在恰當的時間、適合的樣式合理的呈現給用戶。

          其次,在得到設計目標后,同樣需要從設計側、技術側思考彈窗組件的一致性。從設計角度,團隊所有成員需要對該組件有清晰且統一的認知,了解組件的使用場景,以確保不會錯用、濫用,如果增加或更換新人設計師,很容易學習和上手,提升效率;站在技術角度,一致性的常用彈窗組件,便于開發做組件封裝后續復用,減少不必要的重復工作,大大提高開發效率。


          3 設計思路

          在UI設計中,組件的設計思路基本相通,旨在滿足產品的實用性、視覺的統一性,主要圍繞著以下幾點進行:

          ◇ 基礎定義:利用清晰易懂且簡短的文案描述彈窗組件的內容及目的。

          ◇ 類型及構成:明確彈窗的類型,如模態/非模態,將其拆分并注明每個小元素的具體信息。

          ◇ 規則用法:彈窗出現的位置、包含的具體內容及信息的展示規則,比如哪些場景可復用。

          ◇ 交互狀態:交互流程邏輯清晰,擬請產品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。




          五、需關注的問題點


          1 信息的層級關系

          設計彈窗時需要注意信息的主次層級關系,優先傳達用戶想要的或產品想要讓用戶知道的,以確保重要的信息在第一時間傳達給用戶。


          2 展現形式

          彈窗需要根據實際的場景合理使用,不能為了簡潔而過分刪減內容、更不能畫蛇添足。例如一些偏向于操作狀態、系統報告類的提示可以使用簡單的反饋,而可能造成用戶損失的提醒就需要刻意打斷用戶,給予更明確的提示甚至二次確認。

          △ 例如刪除內容就需要使用模態彈窗明確提醒用戶,如果用非模態很可能被用戶忽略從而帶來不可逆的損失。


          3 文案表述

          因彈窗本身承載內容有一定的局限性,固文案一定要簡潔且精確,能用一句話說清楚的就不要過于啰嗦,不僅容器的空間有限且用戶的耐性也有限,需要在有限的空間、有效的時間內清晰的表達出核心內容。


          4 彈出的時機及頻率

          針對運營彈窗,如果彈出的時間不對或過于頻繁,可能會造成用戶反感,所以需要把握好彈出時機及頻率。

          例如用戶有一張未使用的優惠券,如果用戶每次進入應用都看到彈出提醒,確實又沒有購買商品的意愿,總是被彈窗打斷真的就很煩,那么可以將提醒彈窗設置為每日首次進入應用時提示、每累計進入應用5次后提示、即將到期提示或者用戶有購買意愿且優惠券支持改品類時提示等,總之,需要控制在大部分用戶的可接受范圍內。




          六、總結


          本篇文章主要系統的分析了彈窗組件分類及使用場景,總結的雖然不是很全面,但能讓很多新手設計師清楚認知彈出組件的定義及用法。另外,彈窗不管如何設計,都需要有一個不斷優化的過程,要根據產品的實際情況不斷思考與打磨,通過腦暴或已知問題作出更好的改善。

          能清楚認知、理解、使用彈窗組件是一個成熟UI設計師必備的條件,當然,并不能以此定義設計師是否優秀,在此基礎上,還需通過持續的學習探索,挖掘出更多技巧,不斷提高自身的專業能力。

          文章來源:站酷   作者:大漠飛鷹JYSJ

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


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

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

          如何又快又好地設計B端表單?先學會這些表單設計樣式

          seo達人


          基礎表單 

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

          圖片

           

          分組表單 

          單次任務的表單頁中需要填寫內容眾多,且不同內容之中存在一定可分類歸納性。

           

          1) 標題分組

          表單項較多(超過了7個設置項)的情況下建議分組,分組標題能夠引導用戶完成表單填寫。但分組內設置項要有強關聯性,否則不能歸為一組,不能因為字段多為了分組去分組。

          圖片

           

          2) 卡片分組

          7-15個設置項,用標題分組不足以給信息做層級區分,為了讓用戶在操作時更聚焦,同時也需要給用戶更明確的操作引導,即可使用卡片分組。

          卡片分組之間關聯性更弱,分類更明確,多個設置項,多個分類。

          圖片

           

          3) 基礎分步表單

          如果每個組之間有邏輯先后順序,那么推薦使用分步表單,利用步驟條告知用戶完整流程和進度。

          通常在最后提交前讓用戶再次確認信息,并在流程結束給與明確的結果反饋。適用于具有明確的線性邏輯的任務和用戶在操作完成后就不再參與的復雜表單。

          圖片

           

          4) 標簽分組式表單

          如果每個組既沒有邏輯先后順序,也沒有關聯性時,推薦使用標簽分組,適用于表單內容過多,為減少加載時間將表單分頁展現的情況。

          圖片

           

          高級表單 

          1) 動態增減

          建議條目表單數≤3項,并且每個輸入框不需要單獨的標題使用。

          圖片

           

          2) 可編輯表格

          建議條目表單數2~5項時使用,以使得每行內容可被完整呈現。

          圖片

           

          3) 折疊面板編輯

          建議條目表單數在6~8項時使用。

          圖片

           

          4) 規則樹

          應用于規則編輯場景。適用于頁面中需要添加一個或多個對象,且每個對象都需要添加或編輯多組數據的情況。

          圖片

           

          5) 語句式表單

          讓用戶在預設的結構來完成語句,常用于設置、編輯規則類表單,表單讀起來更友好更人性化。

          圖片

           

          最后 

          希望通過前兩部分表單內容的學習,能讓大伙對B端表單有一個初步的認識和理解。

          在表單設計的第部分,將會為大伙分享實操性的方法來提升表單體驗,并能夠運用到實際工作中。

          如果想學習更多關于「B端表單設計」的內容,記得及時關注接下來的文章推送。

          慢慢來比較快,如覺得有幫助,請關注公眾號,點個贊&在看,謝謝!

           

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

          作者:Cassie

          轉載請注明:學UI網》如何又快又好地設計B端表單?先學會這些表單設計樣式

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

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

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

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

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




          你的擬人化LOGO真的應該再有趣一點

          seo達人

          咕嚕嚕

           

          圖片

           

           

          昨天晚上又夢到出去旅行了,是的,作為一名底層設計師,這已經是我連續工作的第 29 天,沒辦法,在如今這個內卷嚴重的時代,想要吃得飽,吃得香,總是需要舍掉一些類似于毛發的東西。
          如果不出意外,今天又是上班的一天,日復一日,再復一日,不知休息為何物。正當我打開電腦準備開干的時候,手機收到一條消息。  
           

          圖片

           

           

          不知道你們 tu 沒 tu,反正我是 too 了,雖然略微惡心,但是這突如其來的幸福感還是填滿了我的身體。我想做點兒什么事情來慶祝一下,思考了一陣子,我慌了,因為我不知道該干啥了……長期的做圖已經填滿了我的生活,好的,不掙扎了,我們做個 logo 慶祝一下吧……
          由于此刻我的心中只有給我發消息的猴子哥哥和他帶給我的滿滿幸福感,所以我們就做個猴子比心的 logo 吧,話不多說,開整!  
           
          圖片  
           
          我們先去網上找一堆猴子的卡通形象參考,目的不是為了直接抄他們的,而是看一下猴子的形象特征是什么。  
           
          圖片  
           
           
          我們可以看到猴子的基本特征就是臉部的兩個圈圈組成的一個類似于屁股的造型,我們先提取出來最基本的造型,正好這個造型可以由心形替代,我們優化一下。 
           
          圖片 
          然后我們去網上找一下比心的常規動作,好像應該差不多就下面兩種,我們選擇左邊肢體動作更豐富的。
          圖片
          好了,我們把剛才我們畫好的頭部直接安到我們找的這個圖片上,直接圖形化出來!我們盡量處理的幾何化一些,這樣圖形感更強烈。
          圖片 
           
          動態畫好之后還缺少面部表情,我去私聊猴子哥哥他昨天晚上過的怎么樣,他扔給了我一個非常隱晦的表情包,好吧,就他了。同理表情的處理也不要過于復雜,能用圖形代替的就用圖形代替。
          圖片
          畫到這里肯定是還差點意思的,有很多地方都缺點兒東西,比如下面部分切割的太生硬,身體部分空間太大,缺少一些點睛之筆,我靈光一閃,突然想到他為什么給我發那個表情,好的,有床,有制服,安排! 
          圖片
          像這些輔助小元素肯定不能畫的太具體,否則會影響整體的形象,所以我們把床簡化成了一個橢圓,制服的話直接簡化成一個小領結點綴一下即可,加上排版,我們看下成品。
          圖片
          發給猴子哥哥看了之后他很滿意,也很開心,但是同時提醒我別再做圖了,那么好吧,我試試離開電腦……  
           
           
          圖片 
           
          掙扎了一會兒,準備起床收拾一下屋子,但是真的是太亂了,衣服、襪子、碎發、衛生紙群魔亂舞,無從下手……沒辦法,我太懶了,最終還是決定叫一個家政服務來幫我收拾一下,等待的時候突然想起了最近在回看的哈利波特,里面每戶魔法家庭都會有一個小精靈幫忙打理家事。  
           
           
          圖片  
           
          我相信每一個設計師都有一個巫師夢……算了,這輩子是不能擁有了,我們就用小精靈擬人化一個家政服務形象來做一個 logo 吧…… 
          圖片
          我們找到多比小精靈的高清無碼照片,先看一下他的特征點是什么。 
           
          圖片  
           
           
          我們可以看到他的最強烈的特征點就是大大的耳朵,只要把耳朵畫的大,再搭配一個好看的臉型,小精靈的形象就出來了,我們先按照圖里的基本形象畫出來,然后注意不要完全和你的參考一摸一樣,否則很容易就會陷進去。 
           
          看下面的圖,我們甚至改變了耳朵的走勢,但仍然沒有丟失小精靈的基本形象。 
           
          圖片 
           
          確定了頭部基本形象之后,我們就可以對他進行擬人化動作提煉了,前面我們擬定的方向是家政服務,但是我找了很多掃地的圖片,動態都非常普通,畫出來肯定效果不好,于是我們轉換思路,只要有掃帚的話,不一定非得是掃地吧? 
           
          腦子不知道為什么不自覺地閃現出陳學冬「哈利波特騎著掃帚飛」,行~那就讓我們的小精靈像哈利一樣騎著掃帚吧。 
           
          圖片 
           
          找到比較合適的參考之后,我們用頭部替換大法,按照參考把基本的動態畫出來,由于這個動態比較有標志性,我們最好不要畫的和他一摸一樣,否則很容易被說抄襲,我們可以更改一下方向,然后不騎著掃帚,拿著就行,順便把上面的手比個耶。
          圖片 
           
          OK,基本的形態畫好了,我們找一個大眼睛的開心表情給他加上!
          圖片  
           
           
          畫到這里我們可以看到,雖然整體是挺好看的,但是和我們擬定的家政服務行業好像并沒有什么關系……
          沒關系,我們用空間彌補大法,將空間不合理的地方添加一些簡單的行業相關元素。 
          圖片 
           
          有了這些點睛的小裝飾,也就有了家政服務的感覺,ok,定稿,看一下成品。
          圖片
          這時候,家政小姐姐來了,我把這個 logo 給她看,說你看我畫的你可不可愛,她看了看我,又看了看手里的掃把,問我:家里有刀嗎?  
           
           
          圖片  
           
          一番折騰之后,終于出門了,路過了一家銀行,門口寫著存定期送 iPhone13,好家伙,這便宜能不占?我自信滿滿的拿出我的 8 看了看微信余額,嗯,手機一點兒也不卡……  
           
           
          圖片  
           
           
          里面的銀行接待員看我過門而不入,熱情的告訴我現在存定期可以換 13 ??!我說我知道啊,我不缺手機啊……扎了一萬個心,害,這時候我特想擁有一只嗅嗅(來自電影神奇動物,它會把一切閃閃發光的金銀珠寶裝進自己的口袋里然后然后帶給你……發家致富小能手呢?。?nbsp;
           
          圖片  
           
           
          他看我眼神發光有點冒口水,再次問我真的不來拿個手機嗎……沒辦法,太熱情了,進去看看吧。叫了號之后慢慢的等待,閉眼一思,嗅嗅對我那么好,我要給他畫個 logo!
          圖片
          和之前一樣,我們還是先觀察一下嗅嗅的基本形象特征。    
           
          圖片  
           
           
          大腦袋,鴨子一樣的長嘴以及毛茸茸的身體,ok,我們按照之前的思路畫一下。 
           
          圖片 
           
          面部定好之后我們接著給他找動態,我們觀察一下銀行里面標準服務禮儀姿勢,相比較右邊比較正式的姿勢,左邊伸出一個手服務的動態更生動形象。
          圖片
          定好動態,我們就把頭安到里面,然后畫一下大概的姿勢,接著進行優化,注意最好畫的圓圓可愛一下,否則丟失了卡通 logo 的特點。
          圖片 
           
          和之前一樣,我們針對于空間較為空曠的身體部分加入行業特征,給嗅嗅穿個小襯衫。
          圖片  
           
           
          我們需要注意的是畫行業特征部分的時候也要結合 logo 整體的感覺來刻畫,像襯衫的領口一般都是比較堅硬立體的,我們也可以處理的圓滑一些。
          圖片
          好了,終于到我的號了,銀行柜員熱情的問我要存多少錢,我決定反將一軍:你看我這個 logo 值多少錢… 
           
           
          圖片  
           
          不瞞各位,作為一個資深五迷老師,一直以來就有一個搖滾文藝青年的夢想,咱就是說也就是設計方面的才華實在太過于突出,要不然早就搖……餓死了。
          好的,雖然夢想很豐滿現實很骨感,但是吉他班是沒少報,正好今天有時間,就去上一下吉他課吧!  
           
           
          圖片  
           
           
          事實證明這一塊的飯確實不好吃,雖然我比較笨,但是老師還是經常鼓勵我:你要是能學會,豬都能上樹哦!哇你這彈的,真的和豬一樣!這么長時間了,就算你是頭豬,也應該會了吧! 
          ……
          好吧,你可以罵我,但是你不能罵豬啊,既然這樣,那就做一個豬彈吉他的 logo,讓他知道什么天外有豬! 
           
          圖片 
           
          設計思路和之前的一樣,就不過多啰嗦了,老方法,先去找一些豬的形象參考。
          圖片 
           
          然后根據你自己的喜歡去改變他的造型,只要不影響識別性就好。 
           
          圖片 
           
          豬豬畫好之后,我們去找彈吉他的姿勢參考。
          圖片 
           
          根據參考我們先把頭按上,然后畫出基本的身體走勢,可以稍微改變一下參考的方向,做的更有趣味一些。
          圖片 
           
          畫好之后我們再去填補一下不太舒服的地方,該刪減的刪減,該增加的增加,甚至可以給他加一個小星星,代表搖滾巨星。 
           
          圖片  
           
           
          畫到這里看似可以了,但其實還是可以有優化的地方,俗話說,沒有舞臺就沒有巨星,我們給圖形增加一個淺色圓形背景,使形象更整體更生動,這里可以把豬的部分五官突出出來,不至于太呆板。 
           
          圖片
          圖片 
           
           
          我拿著這個 logo 去給吉他老師看:“這個 logo 就送你了,以后你拿著他告訴大家,我們吉他社,就算是豬,也可以學會!”老師覺得很有道理,高興之余就把我的學費免了!
          你看,還是做設計香吧,什么夢想不夢想,有飯吃才是王道呀……  
           
           
           
           
          圖片  
           
           
          這一天整的,光做圖了……不行不行,得搞點兒娛樂項目??!來,掏出手機,把朋友們約出來搞幾盤狼人殺!
          圖片 
           
          不得不講這個游戲真的太費朋友了,玩的太次不行,沒兩下游戲就結束了,大家會罵你是個坑比,玩的太好也不行,大家說沒看出來你小子原來心機這么重……被搞了幾局心態之后,我決定還是回到自己的舒適區,做個 logo 吧……
          你看,別說你沒有思路,或許你此刻正在干的事情就可以作為一個方向呢? 
           
          圖片 
           
          這個游戲的精髓就是狼人的反復橫跳和偽裝,那我們的思路就是以狼為基本形象,給他做一個反復橫跳的動態,再加一個人的面具,可以可以,老方法,先找一波參考。 
          圖片 
           
          然后我們根據參考找到狼的基本特征,把臉部畫出來,并給他套上一個面具,wow,人性的陰暗面起來了呢。 
          圖片  
           
           
          好了,我們來找一下反復橫跳的動作,說是反復橫跳,其實就是跳躍就好啦,我們找一個不是特別夸張但肢體還算豐富的圖片。
          圖片 
           
          參考墊底,把頭安上,畫出基本動態,然后就是根據這個動態走勢將狼的身體部分畫出來。
          圖片
          光是這樣肯定還是不夠的,手單純的這樣舉起略顯癡呆,既然是帶有懸疑感的游戲,我們就讓他拿個放大鏡吧,正好把空間填補下。 
          圖片 
           
          好像是可以了,但是能不能再豐富一下呢,讓他更貼近狼人殺這種年輕人群體的卡牌類游戲的感覺,我們再根據一些空間可以填補的地方,增加一些細節。
          圖片 
          填補完空間之后可以看到,雖然沒加動效,但是整個 logo 感覺動起來了,反復橫跳的感覺也有了,這就是填補空間的魅力嗎!
          其實這些操作目的就是為了使圖形更整體的同時更貼近我們所設定的行業。
          圖片 
           
          不知道為什么,這個 logo 畫完之后,大家覺得我心機更重了……  
           
           
           
          圖片 
           
          累了一天,終于到深夜了。相信大家都已經馬上準備睡覺了吧,太好了,我終于可以開始看書學習了。

           

          好吧,確實是有點裝 13 了,要是真能看進去,那至于現在還在干底層設計嗎!真的,這個社會誘惑太多了,現在還能堅持每天看書的真的都是怪物吧,嗯?怪物看書?
          wc?!為什么靈感又來了呢……那就做吧……
          圖片
          設計步驟和之前講到的案例都是一樣的,我們不多說,直接開整,這次我們不先畫腦袋了,直接把參考拼湊在一起,然后畫一個草圖。
          這里我們嘗試用正負形的方法去設計,具體設計方法可以去回看之前的正負形教程。 
           
          圖片
          有了草稿就更好說了,我們直接標準化制圖出來就好啦~
          圖片
          我們在畫毛發的時候一定要注意它的一個走勢節奏感,而且不要畫的太多,切記它只是一個點綴。
          圖片
          果然還是做設計帶來的滿足感令人舒適呀,比看書什么的容易多了,好了好了,可以準備入睡了! 
             
           
          圖片 
           
          如果你想問不是睡覺了嗎怎么還有案例,那你就忽略了作為一個設計師最終的歸宿是什么了,你的客戶會讓你這么輕易的就結束這一天嗎?
          這不……他來了……
          相信大家并不會產生同情心,因為基本上每個設計師都經歷過吧……沒辦法,上帝發話了,除了起來接著肝,還有什么辦法呢?
          帶著一萬個不情愿的情緒,2個小時后,終于搞完了,然后…… 
           
           
          ????????????????????
          在電腦前靜靜地發呆了 5 分鐘后,我冷靜下來了,作為一個設計師,這件事情不是很正常嗎?忘記保存很丟人嗎????好像是挺丟人的……理性地講,遇到這種事不要怪你的軟件和電腦,只能怪你自己。
          好吧,事情已經發生了,不如看的開一些,化悲痛為靈感,我們常把自己比作設計獅,就做一個獅子愛做設計的擬人化吧…… 
           
          圖片 
           
          我們按照前面講到的設計步驟找一些獅子的卡通形象參考,然后用幾何化的形式給他畫出來。 
           
          圖片  
           
           
          那怎么能表現出愛做設計呢?一般容易傳遞出愛的動態就是擁抱了!我們把 PS 拿過來,簡單的給他畫一個擁抱的動作(下圖左)但是這樣單純的抱著它似乎并不能體現出我們對于設計的熱愛之情,不如我們把腳也畫上,四肢都抱著它,這個姿勢(下圖右),就挺舒服! 
           
          圖片 
           
          ok,我們把它圖形畫出來。
          圖片 
           
          又到了填補空間的時候了,我們如果把 PS 放上去,那似乎又對 AI 不公平了,我們應該雨露均沾,既然實在選不出要放啥,那就放個問號吧,同時我們把獅子的尾巴也加上。
          圖片
          圖片  
           
           
           
          有了這個 logo,以后軟件應該就不會崩潰了吧?
          算了,繼續給客戶改圖吧,最后,讓我們把「我愛設計」打在公屏上…… 
           
           
          圖片
          圖片  
           
           

          設計步驟:

          1.確定基本的形象和擬人化的方向;
          2.通過參考來提取形象的基本特征和賦予的肢體動態;
          3.圖形化處理;
          4.加入簡單的行業元素填補空間;
          5.細節刻畫及配色排版。  
           
           

          總結:

          其實擬人化的 logo 創作思路真的很開放,它可以是你生活中遇到的一些事情,看到的一些事物,都可以積累起來當做你的素材。
           
          我們在設計的時候只需要按照上面案例中所講到的步驟,先把基本的形象和繪制出來,然后去把形象直接安放到一個合適的動態里面,最后添加一些行業元素豐富一下空間就可以了。
            
           
          但其實很多同學在設計的時候都容易畫的和參考太像了,我們在刻畫的時候只需要抓住形象的基本特征點即可,其他的地方都可以自己快樂的發散來做,這才是設計的有趣之處嘛!
          希望大家不要過度依賴參考,多多的去發散自己的思維,做出有趣生動的擬人化 logo!
          好了,真的要睡了,設計師的假期,也可以過的很精彩呢……感謝大家聽我啰嗦,晚安朋友們。

           

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

          作者:告白天

          轉載請注明:學UI網》你的擬人化LOGO真的應該再有趣一點

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

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

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

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

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



          形狀跟設計有關系嗎? 有關系

          seo達人


          四個等距離圓點用線相交形成的正方體為四邊形。
          圖片 
           

          以點為中心,以直徑為距離旋轉一周所形成的封閉曲線叫做圓,也是中心對稱圖形。

          圖片

          這些形狀本身并沒有什么含義,但跟設計有關系嗎?

          有關系。 

           

           

          圖片

           

           

          同一張圖片正方形的視覺看起來穩固,但視線卻不容易有著重點,顯得呆板沉悶。

          圖片

           

           

          16:9的長方形能讓觀看者有沉浸的體驗感,視線也顯得寬廣,符合人眼的生理需要。(人的眼球視野基本是橢圓形,兩個橢圓形相加從中裁出的矩形就是16:9的長方形,更符合觀賞)

          圖片

           

           

          這也就為什么在生活中數碼設備、影院熒幕、書本、海報的大部分尺寸都以長方體為主的原因。

          圖片

           

           

          而圓形雖沒有長方形的視線寬廣, 但卻有著獨具一格的聚焦特點,能讓視線完全集中在圖形內部,體現出一種東方特質的藝術美感。

          圖片

          圓的使用場景不僅與生活息息相關,例如湯圓、剪紙、圓桌、太極、建筑等有關。

           

          「在東方」

          「在中國」

          更代表著團圓與美好寓意

          圖片

           

          二十四節氣「以圓為形,以氣為本」

          中國傳承千年的優秀文化

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          原文地址:修先森撩設計(公眾號)

          作者:修先森

          轉載請注明:學UI網》形狀跟設計有關系嗎? 有關系

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

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

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

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

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




          UI 場景下的春節氛圍設計

          seo達人


          目錄

          一、應用圖標設計

          二、金剛區圖標設計

          三、底部標簽欄設計

          四、導航欄設計區域

          五、頂部視覺區域

          六、背景氛圍強化

          七、模塊分類強化

          八、閃屏氛圍營造

          九、功能區域置換

          十、運營設計營造

           

          一、應用圖標設計

          應用圖標是用戶接觸產品的第一個環節,也是視覺差異化體現的重要部分。在春節主題氛圍中也是表現豐富多樣,從不同的方向體現出春節的濃厚氛圍。

          主要的處理形式會圍繞春節主題文案、生肖卡通形象、主題皮膚、春節元素和顏色等。以春節主題文案舉例,通常是春節祝福語和營銷結合的文案為主,設計在應用圖標底部居多,將圖形適當向上位移進行視覺平衡。也有一些產品結合自身圖標因素,將文案設計在頂部位置,也是為了保持整體結構的穩定性。

          圖片

          除了文案表達以外,配合生肖卡通形象也是較為常見的手法,可以是局部元素的裝飾,也有是作為皮膚使用的。比如今年是虎年,利用老虎的形象或者局部元素表達也是層出不窮。

          圖片

          無論是文字表達還是圖形結合,應用圖標上的表現都是在主題活動中優先考慮的場景,這是被用戶在眾多產品中發現的第一眼。

           

           

          二、金剛區圖標設計

          金剛區就像百變金剛一樣,將各種功能和業務聚集在一個區域,便于用戶進行快捷操作。在金剛區圖標上面進行設計發揮是最為普及的,春節期間眾多產品都在各種形式上面進行發揮,呈現出很多優秀的設計案例。

          最為簡單的做法就是將帶有春節主題的文案融入到圖標設計中,這個形式適用于各類節假日和活動主題中。表現手法也是非常簡單的,配合元素點綴和色彩渲染,很容易體現出主題氛圍。

          圖片

           

           

          保持圖標造型不變,在外形輪廓背景中融入春節元素也是一個可行的方向。比如將燈籠作為圖標背景,配合元素裝飾和色彩搭配,呈現出的春節氛圍也是非常濃厚的。

          圖片

          也有結合春節元素對金剛區圖標進行設計重構,帶來的感官體驗也是非常不錯的。運用到的元素涉及鞭炮、福字、元寶、紅包、糖葫蘆等等,結合中國紅營造出濃厚的春節氛圍。

          圖片

           

           

          將春節元素點綴到圖標中也是一種不錯的選擇,或者配合春節主題顏色進行搭配,也能夠營造出濃厚的新春氛圍。

          圖片

          金剛區圖標設計是營造氛圍的最佳區域,不會對業務布局和產品結構造成影響,能夠根據氛圍的要求作出靈活的調整。

           

           

          三、底部標簽欄設計

          底部標簽欄是用戶進行功能模塊切換最頻繁的區域,通常營造氛圍和金剛區一樣,都是非常直觀和效果顯著的區域。

          將春節元素融入到底部標簽欄圖標設計中,帶來的感官體驗是非常不錯的??梢允菃蝹€的春節元素,也可以是元素的局部裝飾,都可以非常直觀的傳達給用戶,突出春節活動氛圍。

          圖片

           

          也有將春節主題文字融入到圖標設計中,一種是直接結合字體設計和春節元素表達;一種是結合外輪廓背景,字體作為圖標部分鑲嵌入背景中。文字的識別性有助于用戶更快理解,傳達氛圍也是非常直觀高效的。

          圖片

           

          如果不想改變太多,也有一些產品只是在中間凸起模塊圖標上面進行氛圍設計,也能傳遞春節的氛圍。這樣的設計解決方案最大限度的保留了原本的設計內容,屬于弱氛圍營造,也能達到一定的氛圍營造目的。

          圖片

           

          除了在圖標設計上面營造以外,也能在底部標簽欄背景上面營造,配合中國紅營造出來的氛圍也是非常濃厚的。也可以是配合顏色和元素進行營造,比如煙花效果也是不錯的選擇。

          圖片

          底部標簽欄設計區域的氛圍營造效果非常顯著,無論是背景層面的營造還是圖標設計上的創新,都能帶給用戶非常直觀的體驗。

           

           

          四、導航欄設計區域

          導航欄+狀態欄通常是品牌色或者白色居多,也有少數產品會使用其他顏色進行設計。在春節期間這個區域也是作為氛圍營造的不錯選擇,除了利用中國紅作為顏色層面的選擇以外,也有結合春節元素進行設計表達的。

          圖片

           

          除了靜態的設計表達以外,也有結合動效的表達提高吸引力,突出春節濃厚的氛圍。(比如:途牛旅游)

          圖片

           

           

          五、頂部視覺區域

          頂部視覺區域和導航欄區域比較類似,不過頂部的范圍更大一些,運用的場景更多一些。除了首頁以外,在其他主界面也可以使用這個區域,帶來春節氛圍的營造。

          首頁 Banner 區域是頂部視覺區域面積較大的板塊,結合 Banner 進行背景營造,帶來的視覺效果也是非常突出的。

          圖片

           

           

          除了根據 Banner 效果營造以外,也有只是營造背景層面的形式,將背景顏色營造出春節的氛圍,效果也是一目了然。

          圖片

          在其他的主界面中頂部視覺區域也可以進行營造,比如個人中心的視覺營造,帶給用戶的感官體驗也是非常的直觀。

           

           

          六、背景氛圍強化

          除了在局部的區域進行背景的氛圍強化以外,也有將大面積背景進行春節強化的。通常是通過顏色來強化,比如通過中國紅來烘托春節氛圍,也會在背景中裝飾一些春節元素,進而增強氛圍感。

          圖片

          背景強化適合卡片式布局,更能襯托出空間感,強化視覺效果。

           

           

          七、模塊分類強化

          在大視覺模塊區域強化表現是較為突出的,為了體現精細化的表達,在細節的設計中也會加以注重。

          細分模塊的設計嵌入可以弱化視覺比重,也能達到融入春節主題的目的。比如在模塊分類的設計中,將春節主題字體替換到類別中,作為活動欄目的表達,也是非常不錯的設計表達。

          圖片

           

           

          八、閃屏氛圍營造

          閃屏和啟動頁本身屬于相同的表達,都是為了緩解用戶啟動應用時,等待過程中所產生的焦慮感。不過隨著閃屏廣告的概念,被區分呈現出來了。

          體驗了很多產品,發現還是閃屏廣告居多,以營銷活動為主的案例較多。單純突出春節主題表達的很少,以春節主題配合營銷活動設計比較多些。

          圖片

          不過啟動頁的位置作為主題氛圍營造是值得考慮的方向,作為品牌情感化的延伸是非常不錯的選擇。

           

           

          九、功能區域置換

          功能區域在這個環節我是作為整合而存在,指的是下拉刷新、空狀態、加載、主按鈕等等。在一些重點區域強化春節氛圍是很多設計師的首選,也有一些會在細微之處深入挖掘。

          下拉刷新對于一些內容更新頻繁的產品來說,是用戶操作非常頻繁的功能。通常情況下,是結合文案提示、默認動效、品牌元素、吉祥物動效等進行表達,而春節期間很多產品也嵌入了春節活動,將功能區域進行置換。不僅可以達到刷新的目的,也能帶給用戶春節的氛圍感。

          圖片

           

          在一些主按鈕比較突出的產品中,也會在按鈕的設計上面融入春節的元素,在細微之處帶給用戶氛圍感。

          圖片

          以上案例僅為列舉,功能區域置換是一個可以探索的方向,不僅可以達到突出主題的目的,也不會影響功能的操作。

           

           

          十、運營設計營造

          運營設計通常都是最活躍的,不會放過任何一個主題的參與,春節這樣的大節日更是重點參與的對象。

          在春節期間通過各類活動的設計突出春節氛圍,讓用戶在感受氛圍的同時促進消費。除了在視覺效果上呈現出豐富多樣的表達,在互動玩法上面也是費盡了心思,帶給用戶更多趣味和年味。

          圖片

           

          運營設計的營造主要是在專題活動的表達上呈現,也會配合 Banner 設計或者其他插入式廣告,還有彈窗廣告的結合也是較為普遍。

          圖片

           

          小結

          春節隨著時間的推移已經過去,本文梳理了在春節期間觀察到的移動端 UI 層面的變化,總結案例是為了探索大家的設計解決方案,積累更多不一樣的設計思路。案例主要以感官層面的為主,希望這些視覺表達層面的思路,可以帶給你更多靈感。

          本文主要是個人觀察所感,不足之處望大家自行補充,我們互相進步。

           

          原文地址:黑馬青年(公眾號)
           
          作者:黑馬青年
           
          轉載請注明:學UI網》UI 場景下的春節氛圍設計

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

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

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

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

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


          愛美有度——檸檬愛美品牌LOGO升級

          seo達人


          項目背景

          檸檬愛美依托百度龐大的流量與移動生態服務優勢,在“精準搜索+精準推薦”雙引擎下,用百度大腦結合大數據建立精準用戶畫像,通過下探業務目標、挖掘用戶訴求,結合百度APP生態,搭建搜索場景下的醫美科普內容服務平臺。

           

          1. 業務戰略升級

          近年來,醫療美容行業增速迅猛,行業亂象頻發,亟需提升整個行業服務質量和品質。本次業務戰略升級圍繞內容建權威專家科普解讀,打造用戶放心、安心的醫美服務保障品牌。目前設計價值重申迫在眉睫,品牌logo也應配合戰略方向優化升級,助力品牌心智打造。

          圖片

           

          · 設計趨勢變化

          隨著時代的變化,人們需求的變革,極簡化、扁平化已成為近幾年的品牌logo設計趨勢。品牌升級的背后除了商業模式的變革,也是順應新的設計流行趨勢變化。

          圖片

          2. 問卷調研

          · 設計問卷

          項目初期,我們采取一對一的訪談方式去了解產品背景和訴求,尋找設計抓手。通過精心設計的、有場景帶入的問題,讓參與者在放松的狀態下把他對產品定位等關鍵信息準確表達出來,這里需要注意的是邀約參與者必須包含各業務方向的產品決策人。過程中也對醫美行業、大環境的洞察分析以及目標受眾、競爭對手、產研方向等做了探討。

          圖片

           

          · 定量分析問卷結果

          通過分析問卷結果,我們與業務方達成了本次品牌升級的目標,希望通過品牌logo升級,傳遞出權威科普、服務保障、科技醫美的品牌定位。

           

          3. 概念探索

          通過前期調研我們已經有了明確的業務定位,但是我們所提供的服務要給用戶建立什么樣的心智印象?什么樣的品牌傳播能產生用戶共鳴?我們如何處理電商與內容的品牌關系?都仍是未知,這也恰好是品牌需要解決的問題。

          帶著這些疑問,我們收集并查閱了大量用研、品牌資料,我們通過金字塔模型從產品的功能屬性、實際價值、情感價值、產品個性、品牌精髓5個緯度逐一進行關鍵詞的發散與收攏,幫助我們進一步清晰檸檬愛美品牌“模樣”。

          圖片

          為了盡可能提煉出既符合產品理念又有用戶共鳴,且引發互動的品牌理念。我們將金字塔中的關鍵詞分別對應圖形參考案例,面向業務方發起了第二輪調研,在調研討論的過程中,我們不斷完善聚焦概念,“愛美有度”這個概念方案也一步步浮出水面。

           

          4. 方案設計

          · 概念鎖定

          經過長達1個月的不斷嘗試,逐步明確概念如何轉化成可執行方案。最終我們鎖定在“愛美有度”,“度”這個兼具名詞與動詞屬性,具有更大的想象空間和豐富的情感屬性。不僅暗指百度醫美垂類品牌,更傳遞的是平臺價值觀:內容有信度、服務有溫度、科技有態度的涵義,天然帶有積極的導向意義。

          圖片

           

          · 草圖繪制

          在草圖繪制過程中,最大的挑戰在于“檸檬”與“度”的圖形詮釋。首先我們需要一個不落入俗套的檸檬外形。其次“愛美有度”品牌概念如何通過圖形元素能讓用戶感知,又能精準的傳遞“權威保障”信息。

          手繪的方式簡單快捷,可以很高效的對齊大部分的設計共識。期間大家發散了很多想法,嘗試了很多方案。經過兩輪手繪下來,主體定格在“手托舉”的檸檬外形,虛形恰好是檸檬,建立品牌專屬記憶點。造型飽滿圓潤,充滿能量且呈向上趨勢,象征求美者的美好希冀,也體現了“愛美有度”的設計理念。讓受眾能感受到品牌傳遞的權威、專業、信賴。

          圖片

          圖片

           

          · 提案設計

          總結各階段結論,最終形成設計提案主線。采用視覺沖擊力強的圖片輔以文案,精準傳遞logo方案表達的設計概念,最終方案定稿。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          寫在最后

          品牌升級不僅僅是換個logo那么簡單,而是產品定位和策略發展落地中的重要一環。本次檸檬品牌logo設計,我們無時無刻都在思考如何更好地了解用戶,貼近產品,傳達理念。希望通過本次升級,用戶能感受到檸檬愛美品牌為了更好的服務用戶敢于突破,力求革新的決心和信心。

           
           
          原文地址:百度MEUX(公眾號)
            
          作者:陪你一起變美的
           
           

          轉載請注明:學UI網》愛美有度——檸檬愛美品牌LOGO升級

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

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

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

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

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



          看那么多高大上的海報有什么用?

          seo達人



          01.

          丹麥一家叫做Hugmun的設計工作室,為一家名為Cinemateket Trondheim的電影院,設計了一年的月度計劃系列海報。設計師用簡潔、抽象的插畫來表現與電影相關的內容,每一張海報都有著豐富、艷麗的色彩,標題字體根據不同插畫的氣質而做出變化。另外,大部分海報都有眼睛元素,旨在傳遞沉浸式觀影和穿越時空的體驗。 

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

           

          02.

          這是一個叫做Ostbahnhof派對的宣傳海報,該派對融合了音樂、藝術、政治等多種元素。設計的主題為:什么都行。意思是這里無奇不有,在這里干什么都行,傳遞出這是一個極度豐富、自由、包容的派對。所以,在設計上也比較天馬行空,拼貼風配圖、對比強烈的熒光色、密集的構圖和排版個性、個性十足的字體,無不傳遞出令人興奮、向往的視覺感受。 
           

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

           

          03.

          這組海報出自法國設計工作室:My Name Is Wendy,為一個叫做流星計劃的項目所設計,該系列海報都是以火車以及Meteor(流星)為設計主體。精細的插畫與簡潔、碩大的無襯線英文字母相結合,呈現出強烈的繁簡對比。為了突出主體,沒有搭配插畫的字母筆畫都相對細很多,內文的字號則盡量縮小,與Meteor穿插排版,整體看起來大氣而又細膩。以黑白灰作為主色,使海報的復古和工業氣息更加濃厚。 

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          圖片

           

          04.

          這組海報不知道算不算“新丑風”,反正我覺得還挺好看的,雖然色彩的飽和度很高、對比很強,但是并不刺眼,反而給人活潑、時尚的感覺,因為每張海報都有明確的主色。插圖雖然很搞怪,但是并不丑,反而挺有趣,加上簡單的動效,讓人感覺很魔性。大部分海報的主體都是由多個分散的元素組合而成,插圖與幾何圖形以及文字看似隨意實則有序的組合在一起,使整個版面看起來既靈活又很整體。 
           

          圖片

          圖片

           

          圖片

          圖片

           

          圖片

          圖片

           

          圖片

           

          05.

          這是一系列Nike鞋子的產品海報,很明顯這是一組基于網格系統排版的作品,所以整體看起來很嚴謹,而且平衡性非常好,但又不乏靈活,因為設計師把版面進行了不規則的切割,點線面相互穿插,彼此又保持著對齊的關系。色彩以黑色和淺灰色為主,但每個版面都保留了小面積的一兩個彩色,使畫面變得更有生氣。

           

          圖片

          圖片

          圖片

          圖片

          圖片

           

          06.

          這組海報的主題為西班牙時尚,展示了春夏秋冬各種時尚的西班牙服飾,海報中的字體和排版以直線為主,但圖片的輪廓幾乎都是圓潤的,這種強烈的對比增加了海報的現代感和時尚感,而且因此產生的留白也讓版面有更多呼吸空間。 

          圖片

          圖片

          圖片

           

          圖片

          圖片

           

          主題的設計也是一個亮點,以無襯線字體為基礎,組合搭配了幾種其他風格的字體,甚至還把個別字母置換成了幾何圖形,使簡單的畫面多了一些設計感和細節。另外,這組作品也給我們提供了幾組高級而時尚的配色方案:黑色配青色、黑色配橙色、黑色配紫色、黑色配香檳金。 
           

          07.

          這是一名新加坡設計師設計的一系列海報,由于他業余時間很喜歡看足球,所以一有空就會去設計一些知名球員的海報,截至目前已經累積設計了好幾十張,這些海報都是以球員,以及與其相對應的俱樂部隊徽、隊名、城市為設計主體,每張海報的設計形式都不一樣,但都有很強的形式感和視覺沖擊力。

          圖片

          圖片

          圖片

           

          圖片

          圖片

           

          圖片

          圖片

           

           

          圖片 

          多看永遠是學設計的第一要義,并且,我們有時還得跳出自己的專業、自己的工作領域去看,這樣才能吸取到更多、更新的東西,即使有些東西說我們看不懂的、用不上了,但仍會有收獲。

           

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

          作者: 蔥爺

          轉載請注明:學UI網》看那么多高大上的海報有什么用?

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

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

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

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

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



          你需要知道的彈窗設計原則!

          周周

          本篇文章將圍繞著彈窗類型、使用場景、轉化率及常見問題為側重點,將自己對彈窗的理解、設計經驗分享給大家,幫助大家對彈窗組件有更清晰的認識,為后續避坑設計出更好的彈窗做準備。

          淺談設計中的溫度——如何用互聯網思維幫扶鄉村孤寡老人和留守兒童

          分享達人

          前言

           _


          提及“設計的溫度”,不得不提我們老生常談的“情感化設計”,提出這一概念的美國認知心理學家唐納德·諾曼將設計拆解為三個層次:本能層、行為層、反思層,層層遞進。



          1/ 本能層的設計,是視覺的直接反饋,是指用戶第一眼看到的、感覺到的東西是否會激發用戶興趣;

          2/ 行為層的設計,注重的是效用,產品功能是否好用,易用,用戶使用產品過程中能否高效解決問題;

          3/ 反思層的設計,是情感化設計的最高層次,指用戶使用產品后,是否建立情感連接和記憶反饋。

          因而,它們是從美學訴求到效率訴求再到情感訴求的一個進階關系。


          如果一款產品在滿足基本功能,對于用戶有用,同時好看并且易用,使用完之后還能產生愉悅以及滿足感的話,那么這將是一款好的情感化設計產品,那必然是一個有“溫度”的設計。


          如果一個項目本身充滿社會使命和責任感,那么“有溫度的設計”將可以助推項目的落地鏈條,讓使用平臺的用戶有“溫度”,更讓項目背后的人員感受到“溫度”。


          因為,接下來陳述的項目是一個很有“溫度”的項目——用互聯網工具去溫熱社會中的窮苦灰暗,用互聯網思維去幫扶社會的鄉村孤寡老人和留守兒童,用有溫度的設計去踐行有溫度的項目。




          項目背景

           _


          隨著我國社會經濟的快速發展,農村青壯年勞動力轉入城市,人口老齡化趨勢加劇和家庭結構的演變,“空心村”越來越多,因此在鄉村出現大量的“留守兒童”和“孤寡老人”。據統計,在農村獨居和空巢老人超過3000萬人,留守兒童也達到了近2000萬人



          孤寡老人因為獨居生活、物質困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題;而留守兒童因為缺少父母監管和陪伴,極易產生很多身體及心理問題,這兩大群體是我國人群結構的重大組成部分,一個是未來的花朵和希望,一個是曾經發過光熱的遲暮老人,他們需要關愛和守護,需要有一座“有溫度”的橋梁,為留守兒童撐起藍天、健康成長;為孤寡老人送達溫暖、安享晚年。



          基于社會現狀,踐行社會責任,騰訊為村平臺聯合中國社會福利基金會、騰訊公益慈善基金會,預想搭建一個線上與線下結合的平臺,成立“為村暖心小站”,立足于脫貧地區的農村社區,主要服務農村的一老一小以及其他需要幫助的困難群體,解決日間照料、健康護理及心理關懷等諸多問題。




          設計思路

           _


          1,定義產品形態


          “暖心小站”的整個幫扶路徑是以線上+線下相結合的模式,依據產品需求,在線上可以招募志愿者、發布救助需求、觸達愛心人群;在線下建設實體服務站,開展具體的幫扶活動。從而形成一個從線上到線下的一個完整幫扶閉環。



          那在線上的呈現形態上,主要考慮APP和小程序兩種方式,經過對比分析,APP穩定性高、體驗好,但是在鄉村的受眾群體內,互聯網基礎還是很薄弱的,要讓村民朋友下載和適應一個新APP是一個難度非常大的事。而微信在鄉村的覆蓋面非常廣,占有率很高,那么依托于微信的生態、建立小程序,在推廣層面會更加便捷和高效。同時,暖心小站本身結構簡單,是一個非常輕量化的應用,這種特性也更適合以小程序為載體。



          2,確定產品結構


          在線上的產品框架上,設立兩大專區:關愛老人專區和呵護小孩專區,各自創建知識宣導、在線課堂、愛心募捐等版塊內容,同時在線上召集志愿者,在線下成立社區服務站,開展幫扶活動,然后志愿者們在線下實地服務打卡同步展示在線上的暖心小站。


          確定框架之后,梳理角色和場景。本項目主要包含線下服務站的站長,工作人員,志愿者以及社會的愛心人士。



          站長、工作人員、志愿者主要是通過線上為村暖心小站這個平臺發布活動信息、記錄服務概況、展示志愿者風采,社會的愛心人士通過線上平臺查看對應信息并參與對應活動,最終幫助農村的一老一小解決各種幫扶問題。


          經過梳理分析,平臺使用人群的年齡跨度較大,30歲到60歲這個群體占到了80%左右,所以在產品的呈現形式上將兼顧青年到老年的年齡跨度,讓設計更友好,讓產品有溫度。



          3,制定設計策略


          定目標


          基于前面分析,在農村現實環境中的孤寡老人和留守兒童,他們生活是灰暗的,情感是封閉的,他們需要有更多志愿者以及愛心人士給他們帶去陽光和溫暖,讓孤寡老人可以健康生活,讓留守兒童可以健康成長。 




          所以在設計目標的確定上:讓產品形成一個“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽光、感受溫暖、看到希望。



          定色


          品牌色的推導,是站在線下的實際場景感受來提煉,鄉村的孤寡老人和留守兒童的生活是貧苦的、灰暗的,他們需要金燦燦的陽光給生活帶來希望,而我們日常所的見的公益組織通常都是以紅色系為主,似乎已經形成了作為公益組織的標識色,因為這種大紅色傳遞愛心、帶來溫暖。


          這些顏色都很有代表性,黃色代表陽光,紅色代表公益,而暖心小站,將這兩種顏色進行疊加融合,形成陽光橙,再以陽光黃納入輔助色,形成溫暖、友愛、活力、陽光的色彩體系。





          定原則


          在設計原則上,考慮到我們的用戶群體年齡跨度比較大,一些年長用戶互聯網基礎薄弱,為了讓產品更有親和力,讓年長用戶都能輕松上手,所以在策略上制定簡單、易用、溫暖的設計原則,保持框架簡單清晰、交互簡單易用,讓產品有溫度,讓用戶覺得有用、好用、還想用。



          在“簡單”方面,保持產品的頁面框架要簡單,結構要清晰,讓用戶清楚知道自己在哪里,所以在產品形態上只做了內容頁的垂直展示,沒有過多瑣碎的信息入口,讓頁面信息更集中,瀏覽體驗更聚焦,讓年長用戶也可以簡單使用。



          在“易用”方面,簡單的框架和結構是易用的基礎,在視覺元素的排列上,通過加大的圖片、加大的間距、加大的圓角,通透的頁面布局可以讓內容陳列更集中,獲取信息更高效。頁面的間距以4px為基數,分為5個跨度,在統一性的基礎上讓界面更有節奏感,層級更清晰,從而提高產品的易用性。



          在“溫暖”方面,主要體現在在調性、元素、和內容上:

          調性:以“溫暖橙”+“陽光黃”為品牌色系貫穿始終,形成溫暖、陽光的整體基調;

          元素:在常規尺度上進行適當加大,加大的字體,加大的卡片占符,加大的點擊區域,讓產品更照顧年長用戶的操作習慣,讓產品更有溫度;

          內容:在內容及主圖的運營展示上,突出“溫暖”的調性,增強用戶的共鳴,拉近用戶與產品之間的距離。





          整體視覺呈現

           _


          整體以大面積的“溫暖橙”為基調進行鋪設,營造溫暖陽光的質感,頂部展示產品名稱和合作logo,增加產品的權威性和信賴度。


          自上而下,控制大的間距和留白,分別設置了熱門小站、一老一小專區、志愿者風采、活動回顧、學習園地等版塊。全方面展示了小站的基礎信息、輸送了對孤寡老人和留守兒童的健康資訊、匯集了志愿者服務的風采、記錄了幫扶活動的結果反饋、以及陳列了關愛老人和小孩的相關線上課程。



          一老一小的入口及詳情:通過大頭圖的形式加強專題感知,引導用戶點擊。詳情內展示相關的關愛資訊和助力入口,讓用戶可以選擇性的進行點對點幫扶。



          小站詳情:分為小站介紹、人員風采、小站活動、和運營概況四個部分,清晰展示線下暖心小站的各項事務,讓線上用戶對線下小站有更全面的了解。



          個人中心:功能簡單,布局簡潔,根據不同身份類型展示不同入口。作為站長的話,擁有志愿者審核、活動管理的權限,整體表現形式以統一的卡片式陳列,讓內容更聚焦。




          秉持“簡單、易用、溫暖”的設計原則,盡可能地讓產品陳列簡單、操作流程易用、設計滿足功能凸顯溫暖,讓用戶想用,讓產品好用。


          經過多次推導與線下團隊配合,小站1.0在今年5月初上線,第一批試點小站正在使用中,得到了較多正向良好的反饋,為鄉村的一老一小帶去了許多暖心的幫扶行動。



          上線反饋

           _



          產品上線之后,通過在線上發布活動信息召集志愿者。在線上順利舉行了多場暖心活動,比如在重慶馬蜂社區的服務站內為當地留守兒童舉辦了多項課業輔導的活動,在重慶周家寨服務站新建了日間照料室,提升老人的居住生活質量。


          今年5月20號,在中國互聯網公益峰會上,為村暖心小站進行線上交流展示,獲得了很多與會代表的關注和認可。




          截止2021年7月,平臺上線了兩個試點小站,共舉辦了數10次線上+線下結合的活動,活動參與了520人,受到36000人以上的關注。暖心小站的建立和運營,對鄉村的“一老一小”提供了更加有針對性和個性化的服務,同時加強對當地社會組織的培育和孵化,提升了服務對象的生活質量,促進和諧社區建設,助力鄉村振興。


          通過這些試點小站的成果和反饋,讓設計目標也得到一定程度的印證,讓產品體現了“有溫度、有故事、可以連接情感”的橋梁。




          設計反思

           -


          隨著互聯網的發展,人們對于產品不再是簡單的形式服從功能,而是逐步轉向形式服從情感。讓設計回歸情感,讓有溫度的設計去創造有溫度的產品,可以增進人與產品之間的情感連接,讓產品更有生命力。再者,用有“溫度”的設計思維,去捕捉和解決社會問題,通過具有社會責任感的設計,推動社會進步,形成堅實有用的“設計力”。


          那么,如何提升自己的設計力呢?可以概述三個保持一個向善。



          保持熱忱心

          設計需要堅持,而堅持源于熱愛,保持熱忱之心會發現許多美好的事物,同一個需求會自發性地探索很多不同的解決方案,因此會洞察需求背后最本質的東西,切入要點尋找最優解。


          還有一句話:“設計路上,唯有熱愛,方能抵御歲月漫長”。


          保持敏感度

          這里的“敏感”指的是設計師要有好奇心,善于發現新事物,善于追蹤最新行業動態,是一種職業敏感,是一種自覺行為,表現為熱情、興奮、敏銳,對新事物充滿熱情,對于新發現充滿興奮,能夠特別敏銳的捕捉社會痛點解決設計難題。


          保持共情力

          生活中常說,有共情的人往往都特別感性、多愁善感,淚點低笑點也低,因為特別有代入感,而且對事物特別專注。


          設計上所說的共情力則需要保持感性,同時也需要理性加持,不偏不倚。讓設計師自己能切換到項目內的各種角色,不把自己當成局外人,將自己融于產品本身,隨時切換為不同用戶的視角,更能深入地發現、分析和解決問題,讓設計站得住腳、更接地氣,讓設計有依有據。


          讓設計向善

          設計的最終目的是傳遞需求、解決問題,這就意味著設計的初衷不同,那么最終的導向也會截然不同。

          設計向善,保持“善”的初心,主張設計回歸社會、回歸到人心最本質的出發點,做有溫度的設計、有仁心的設計、可持續的設計。


          關注社會問題,保持一顆敏感而善良的心,用“設計向善”解決社會痛點,堅實鞏固自己的設計力。


          文章來源:站酷   作者:峰HENG

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


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

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


          「新手向??!」“8點”網格系統是什么?

          分享達人

          一、前言

          1、代碼>原型

          無論是高保真還是低保真原型,設計人員在軟件中的展現所有效果,最終目的都是傳遞給開發人員進行實現。當開發人員開始使用代碼還原頁面時,設計就不可以再隨意修改。

          最重要的不是在設計軟件中展現的效果,而是實際在用戶設備上實現的效果,因此在設計時,要提前考慮代碼實現的成本。

          2、盒子模型

          盒子模型是一種描述對象尺寸和間距的方法。有四個部分組成:“邊框Border”、“邊距Margin”、“填充Padding”、“元素本身Element”。

          • Border:圍繞元素外圍的邊線。

          • Padding:元素及其子元素之間的間距。

          • Margin:元素和其相鄰對象之間的間距。

          3、什么是point(pt)

          點(pt)取決于屏幕物理尺寸大小,是絕對尺寸單位。對應@1x圖的1px。

          像素(px)取決于實際屏幕顯示分辨率,是相對尺寸單位。在@2x圖情況下1pt=2px,在@3x圖情況下1pt=3px.

          4、@1x

          建議使用“@ 1x”進行設計,其他尺寸圖可以從@1x進行衍生。

          如果是以@2x進行設計,那么若要得到@3x則要先縮小50%然后再擴大300%,增加了不必要的工作量,并且很容易出現奇數、小數等不便利數值。

          5、使用像素網格

          創建的每個UI元素都應該和像素網格對齊,防止出現半像素的“鋸齒“效果。

          文本由于其圖形的特殊性,難免會出現無法對齊像素的情況,這里可以忽略。

          6、文本元素

          文本是頁面中最重要的元素之一,但因為其本身的多樣性,產生的不同的字體、行高很難和其他元素一起適用網格。因此給文本設置基線網格,將基線網格采用4pt進行等距劃分,來和其他元素進行和諧搭配。

          二、8點網格

          1、基本原理

          使用8的倍數來定義區塊和內部元素的尺寸,間距等。

          當區塊元素為文本(例如按鈕)時,將文本設置成其余部分一致(或者平臺預先定義好)的大小,然后使用padding來確定區塊大小。如果是全寬的元素,使用padding來確定高度,并使用一致的水平邊距來確定寬度。

          2、兩種方法

          • 硬網格:將元素放置在以8為增量定義的顯示網格中,使用額外的透明背景元素,和前景元素組成一個整體。

          • 軟網格:保證元素之間的的間距為8的倍數,以此獲得更快的處理速度,從而得到更流暢的體驗。

          三、為什么重要

          1、保持一致性

          當所有尺寸都遵循相同的規則時,就有了一致的UI。

          2、更少的決定=更少的時間

          減少自定義的尺寸規則,得到更快的代碼運行速度。

          3、多平臺設計

          無論設備外形如何,主流的屏幕的屏幕尺寸長寬值至少有一個維度可以被8整除。

          有一些屏幕的尺寸無法被整除(iPhone 6的375*667pt),只需要保持padding和margin一致,適當調整區塊的大小來進行適配。

          四、實施技巧

          1、對齊網格

          確保開啟了“對其像素網格”選項。

          2、Rems和變量

          如果根文根大小設置了16px,則可以使用0.5rem的增量在8點網格上構建布局。

          如果不喜歡這樣做,或者是不喜歡rems的使用方式,可以使用CSS或預處理器間距變量來處理布局,同時保留變量以供后期維護。

          3、定義你的網格

          大多數軟件都可以設置快速“微調”,一般默認為10px,sketch中可將其調整為8px,便于快速的工作。

          4、捷徑

          學習并善用快捷鍵,提高工作效率。

          5、框架你的圖標

          圖標設計通常需要進行視覺修正,因此,在其周邊放置透明框架(例如Hard Grid的方式),來保證整體的一致性。

          6、放大、縮小

          設計時經常會放大預覽界面來進行設計,這會導致會略整體;如果以縮小的尺寸會導致看不到細節,因此要經常變焦畫面來確保能看到整個畫面。

          文章來源:站酷   作者:YMOOM

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


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

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

          日歷

          鏈接

          blogger

          藍藍 http://www.bjlmtradeweb.com

          存檔

          一本到在线视频免费不卡观看_久久人人超碰97精品_一级做a爱过程免费_猫咪最新永久在线网站