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


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

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

          圖片

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

          有關系。 

           

           

          圖片

           

           

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

          圖片

           

           

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

          圖片

           

           

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

          圖片

           

           

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

          圖片

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

           

          「在東方」

          「在中國」

          更代表著團圓與美好寓意

          圖片

           

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

          中國傳承千年的優秀文化

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

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

          作者:修先森

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

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

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

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

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

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


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

          ui設計分享達人

          一、前言

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

          這些高級UI設計趨勢,我不允許你還不知道!

          ui設計分享達人

          正文


          如果移動應用程序不符合最新的設計趨勢,那用戶可能會放棄你設計的產品。 

          考慮到趨勢永遠不會保持不變,而且總會有新的趨勢出現,讓應用看起來既現代又漂亮是一項挑戰,但遵循設計趨勢對于每個產品設計師來說都是必須的。 

          我們了解到,跟蹤行業中的所有趨勢和趨勢并不總是可能的??偸怯行碌闹改稀赢媰热?、視頻、新的插圖方法以及許多其他概念,您需要先抽出時間學習和測試。 


          這是我們總結出的 2022 年移動應用 UI 設計趨勢

          1、運動和動畫 
          2、手勢和滑動體驗 
          3、90年代風格 
          4、圖形深度 
          5、黑暗模式 
          6、排版 
          7、增強現實和虛擬現實 
          8、漸變和透明元素 
          9、舒適的視覺效果 



          1、動效和動畫

          我們都喜歡看視頻,并在 TikTok 或 YouTube 上花費大量時間。視頻內容和動畫更具吸引力和互動性。統計數據顯示,大多數人在使用應用程序之前都會觀看說明視頻。動畫和動作設計使內容更具吸引力。 

          與具有長描述的靜態內容不同,動畫可以保留用戶的注意力并使應用程序更具吸引力。用動畫突出重要的東西是一個好主意。例如,您可以為應用程序中的按鈕設置動畫,以使用戶與應用程序的交互更好、更直接。像圖標動畫這樣的微動可以顯著改變您的應用程序的體驗。 

          借助動畫,您可以強調應用功能、提高轉化率甚至銷售數據。 




          2、手勢和滑動體驗

          與電腦上的網頁端相反,手勢和滑動體驗使移動設備更具吸引力。我們每天花費數小時滾動和滑動操作。按鈕和其他動作可能會刺激和分散注意力。這種設計趨勢成為現代應用程序設計的最高優先事項之一。一些應用程序創建者甚至根本不支持按鈕的使用。按鈕會造成混亂并占用過多的屏幕空間。 

          建議用滑動功能替換按鈕。嘗試滑動動作的動畫會很有幫助。例如,圖書應用程序通常使用動畫來翻頁。 




          3、90年代懷舊風格

          90 年代的風格影響了所有領域,甚至是移動應用程序的設計。 

          設計師使用類似于 90 年代流行的 PlayStation 游戲(例如,馬里奧或吃豆人)的復古字體、圖像、圖形。擁有 90 年代的氛圍,您有機會獲得兩代人的興趣:年輕人喜歡復古的東西,而老年人則喜歡懷舊。 

          這種趨勢并不適合所有產品,但如果復古風格適合您的應用程序,嘗試一下也不錯。 



          4、賦予圖形深度

          扁平化設計看多了用戶會覺得很沉悶。人們喜歡看到更真實和互動的內容。圖形中的陰影和圖層賦予它們 3D 效果、體積和深度,使人們可以享受更逼真的圖像。 

          這種趨勢可以與任何元素一起使用,在屏幕上創建對象層次結構并幫助用戶更輕松地瀏覽應用程序。 

          然后,關于3D效果,我們來聊聊。3D 是一項革命性的技術。3D 圖形幾乎可以在任何應用程序中使用。例如,開發人員可以使用 3D 成像技術來構建存儲建筑物和房間內部地圖的應用程序。它可以非常適用于游戲并改變玩家的整體體驗。因此,在您的應用程序中為圖形添加深度時,請考慮 3D 趨勢。 




          5、黑暗模式

          暗模式是已在許多應用程序中高度使用的最大設計趨勢之一。最近,設計師也提供了在應用程序中在標準模式和暗模式之間切換的機會。所以用戶可以選擇他們最喜歡的任何模式。 

          深色主題設計將背景變為深色模式,并使字體和其他元素變為淺色/白色。 

          例如,現在在 Facebook 等最受歡迎的應用程序中都可以使用深色模式。切換到深色模式有助于人們減輕眼睛疲勞并更方便地瀏覽。 




          6、排版

          選擇正確的字體是移動應用程序設計中必不可少的一步。用戶在瀏覽頁面的時候不是一個字一個字的讀的,而是成行的“掃描”方式來瀏覽。因此,使用能夠正確設置重點的字體非常重要。 

          設計師已經開始使用不尋常的字體。文字不再看起來那么無聊,也不會迷失在背景中。其目的是使設計更明亮、更新穎。 

          正確選擇的字體將有助于:
          1、定下產品調性; 
          2、提高品牌知名度; 
          3、提供更好的視覺體驗; 
          4、提高可讀性。 

          通過組織排版為您的用戶提供愉悅且可讀的用戶體驗:設置點大小、行距和層次結構。 

          請記住,不尋常的“瘋狂”排版并不適合所有產品。定義文本在您的應用程序中的具體功能。如果它提供了額外的信息功能,請不要對字體進行太多實驗。但是,例如,在在線雜志中,您可以使用各種版式,使布局更有趣。 



          7、增強現實和虛擬現實

          虛擬現實和增強現實為用戶提供了一個難得的機會,讓您只需通過手機即可獲得互動體驗。 

          在新一年中,這種神奇的 UI 移動設計趨勢趨于增長和傳播。這種設計趨勢的關鍵在于應用程序的界面讓您感覺自己置身于應用程序中。引人入勝的設計元素和游戲化是這種體驗的關鍵。 

          這是一個結合我們之前討論過的趨勢的絕佳機會,例如動畫和 3D 效果。首先,精心制作的動畫和 3D 觸摸可以在您的應用設計中支持 VR。 

          你還記得那些來自 Instagram 的功能嗎?讓我們可以通過應用程序和移動相機將不同的角色放置在我們想要的任何地方嗎?然后你就知道這有多有趣了。此外,它不僅有趣而且高效。例如,宜家使用 AR 來展示一件家具在您家中不同位置的外觀。 




          8、漸變和透明元素

          這個UI設計趨勢是關于漸變和透明度的。設計師通常在按鈕和應用程序的背景上使用漸變。移動漸變趨勢突出了應用程序的基本部分,并使人們專注于特定方面,從而賦予他們層次感。 

          移動應用程序設計中的透明元素表達了對某些應用程序部分的深度和驅動力,使設計更清晰、更具吸引力。 

          您可以使用從淺色到深色主題的過渡,從而將屏幕分成兩個邏輯部分。此外,您可以在按鈕上使用漸變主題,使它們在屏幕上彈出。 

          玻璃擬態的概念也值得一提。glassmorphism 背后的想法是柔化明暗設計元素之間的對比。設計理念使用類似于磨砂玻璃表面的透明模糊背景。 

          玻璃態的主要特點:
          1、透明度和背景模糊; 
          2、透明物體上的細光邊框; 
          3、分層; 
          4、鮮艷的色彩。 




          9、舒適的視覺效果

          舒適的視覺效果是大部分用戶都喜歡的。用戶和應用程序開發人員都喜歡這種最近的移動應用程序設計趨勢。 

          移動應用程序設計不應該只是美觀。它應該讓我們的眼睛看起來更舒適。因為一整天,我們可能都會盯著屏幕看,但看多了,我們會感到疲勞和眼睛疲勞。為了減少這種不利影響,應用程序開發人員創建了一種我們可以舒適使用的設計。 

          舒適視覺設計趨勢的概念是為您的應用程序使用自然的色彩、舒緩的圖像和簡單的布局。這些技巧通??梢栽谮は霊贸绦蛑姓业健K鼈儼ㄗ匀坏恼鎸嵳掌?,具有平靜的色彩和結構簡單的輕元素,很少有深色主題設計。 




          如果讓你的UI設計更好呢?

          這里有一些建議: 

          1. 多看別人的優秀設計
          分析它們的優缺點,從他們的經驗中學習。 

          2. 使用標準導航
          不要使用異型的導航欄,這會讓你的用戶迷失在應用中。 

          3. 使用優質的配圖
          抽象藝術、插圖、真實照片趨勢——一切都有助于吸引用戶的注意力。 

          4. 多看前瞻設計趨勢
          實時更新自己的設計知識庫,使設計水平使用保持一流。 

          5. 擅于總結與回顧
          可以計劃,三個月或半年總結回顧之前設計,總結不足之處。 

          6. 多于他人分享
          做設計不要怕被人看,或許有時候別人順口一說,就點開了難題。 

          7. 保持良好的心情
          遇到事不要慌,掌握好自己心情,才能掌握好你的設計。
          文章來源:站酷   作者:UI范
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


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

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


          淺談B端設計系統

          ui設計分享達人

          什么是設計系統?



          設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包

          是在設計價值觀和原則、設計標準指導下的各種共享的設計模式和組件資產,,是將產品設計團隊聯合在一起共同打造的一套質量和效率上都有所保障的可行性解決方案,能夠解決產品視覺、交互體驗一致性的問題、幫助傳達統一的品牌認知。幫助團隊快速完成產品迭代和功能開發! 

          為什么要構建設計系統?


          問題1:

          隨著業務的拓展,產品和項目數量不斷增加,發展中期設計和交互上不一致性的問題浮出水面,需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗,以滿足用戶預期并向其傳達統一的品牌認知。

          問題2:

          無統一的設計規范和交互原則,沒有統一的UI組件庫和代碼庫,各團隊設計和前端需花費大量資源陷于低質量溝通協作和重復造輪子,拖慢產品和項目設計和開發節奏。

          問題3:

          產品項目數量 vs 產品設計師,人員配比嚴重不足的情況下,團隊的設計師們無法從雜/亂/急的日常需求中剝離出來,影響構建產品壁壘的質量和速度。

          設計系統的價值


          產品側:

          保證可復用模塊的交互體驗的一致性。如同一個產品類型不同分支多個團隊完成的時候,可以保證產品團隊使用同一份設計規范快速完成產品原型設計。 

          設計側:

          把設計師逐漸從不必要、重復性勞動中解放出來,節約出來的時間和精力放到更多有價值的工作上去。更多去關注對用戶需求和業務邏輯的深入挖掘,如果每個設計師都具備產品用研、交互、組件化等一條龍能力,才能體現tob產品設計師的價值,才不會被別人稱作是拖拽組件的“工具人”。 

          開發側:

          形成開發資產,可以提升研發效率,降低維護成本。開發工程師無需再重復開發同一個組件,只需要去組件庫里調用即可,配合業務邏輯,高效完成界面開發。做到開箱即用。 

          測試側:

          標準化的設計規范,是測試人員最喜歡看到的。1是1,2是2的設計準則,提升了測試效率。例如,設計規范規定彈窗footer區按鈕組居右,那么測試人員只要測到不居右,就可以給產品提優化建議了。 

          主流設計系統-他山之石可以攻玉!


          無需猶豫,直接基于現有的優秀的開源設計系統,

          設計系統的打造不必從0-1構建, 例如:Ant Design業界優秀的開源設計系統,我們完全可以站在前人的肩膀,最終生產出符合達觀品牌、業務特性的設計系統。


          阿里Ant design:https://ant.design/docs/spec/introduce-cn 
          阿里的teambition:https://design.teambition.com/ 
          華為devui:https://devui.design/design-cn/design-value 
          餓了么elemnt:https://element.eleme.io/#/zh-CN 
          有贊:https://design.youzan.com/index.html 

          字節跳動 Semi Design:https://semi.design/zh-CN/

          字節跳動 Arco Design :https://arco.design/

          Material Design:https://material.io/ 
          Lightning Design System:https://www.lightningdesignsystem.com/ 
          Microsoft fluent :https://www.microsoft.com/design/fluent/#/ 
          eva.design:https://eva.design/ 
          Atlassian design:https://atlassian.design/ 

          以原子理論構建設計系統


          原子理論設計介紹

          首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost提出的,他從化學元素周期表中得到啟發,發現在化學世界中,所有的物體都是由原子構成,原子組合構成分子,分子組合構成有機物,最終形成了宇宙萬物。根據他的理論,設計體系主要包含 5 個層面:原子、分子、組織、模板、頁面。


          原子理論設計不是一個線性的過程, 它更像是一個心理模型,來幫助我們把用戶界面看作是一個連貫的整體,同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面,讓我們更深入的了解每一個概念哦~


          原子層(Atoms):

          原子是物質的基礎組成部分,是構成設計系統的最基礎元素。

          在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。

          簡單概述下來就五個字:色、形、質、構、質;



          分子(Molecules)層

          在界面中,分子就像是一個由UI元素組成的相對簡單的組織。如:按鈕、彈窗、搜索框等。

          以按鈕為例,它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關聯原則組合成一個分子,圖標和文字互相配合傳達意義,顏色定義了按鈕的特性,間距為按鈕定義了一個尺寸和規范。


           組織(Organisms)層

          分子+原子組合成更復雜和可擴展性的模塊,這個稱之為組織(區塊組件),如:列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。

          以表單為例,一個表單我們可以通過數量的組合,以及間距的調整,元素的增減,在界面中表達不同的場景和含義。



          模板(Templates)層

          由原子+分子+組織構成的更復雜更具拓展性的模塊,如:分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。本質就是線框圖,模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構,頁面中的信息是占位作用,而不是頁面的最終內容。


          頁面(Pages)層

          帶業務邏輯的場景案例如:標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板;

          頁面是模板的具體實例,填充了真實的內容(圖片、文字等)后形成頁面,也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖,將占位符替換為有代表性的真實內容,使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的設計方案。



          關于設計系統的常見認知誤區



          誤區1:設計體系就是設計規范或者組件庫嗎?

          許多人認為設計系統就是單個代碼庫、組件庫、設計規范,但實際上他們不是一個層次的東西,準確度的來說設計體系包含設計規范,組件庫也是建立在設計體系內的,組件庫是記錄和共享設計模式的工具,就是設計體系工具化和表現層的部分;


          誤區2:設計體系的存在扼制了組織內創造力,會替代掉設計師?

          拋出這個問題,是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點,我個人是很難以認同這個的,對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合,需要調動整個團隊的想象力和創造力,最終達到一個統一共識才有可能被實施和執行;

          好的設計系統可以通過流程和機制促進創造力的,而且好的設計資產可以幫助大家從不必要的、重復的勞動時間內節省出來,當然也不能過度依賴過往的沉淀資產,把自己定位為設計系統的創造者,而不是使用的工具人,不斷的創造和貢獻好的解決方案被整個組織采用,就不必再擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。不會替代掉設計師,反而是一個企業內部尊重設計師價值的開始!是企業對設計文化的認可!


          誤區3:設計系統是一勞永逸的嗎?

          設計體系是動態的,永遠是隨著組織需求和用戶需求而變化的,一切說自己已經完成了設計體系的建設的人都是錯誤的,都是將將靜態的設計規范曲解成了設計體系。


          誤區4:設計系統由少數人員生產,我們負責用就行了?

          正確管理機制:少數人負責管理,多數人參與貢獻;避免你做、我用模式,這種生產消費模式非常內卷;避免如:我一個設計師為啥要用你的規范;這規范做的太垃圾用處不大,我才不用,用你做的規范;我苦逼做業務,你晉升拿結果的負面心態;

          然設計系統也不是簡單的靠少數的人1-2個月用愛發電就能完成的,設計系統是一群人,對一種做設計文化的認可,每個與之相關的人都應該是設計體系的貢獻者與布道者!


          需要克服的潛在難題


          當然設計體系也容易出現一些缺點,這些問題需要設計體系的構建者們去摸索去克服; 
          • 產品業務復雜性提升,提升建設難度

          • 難以控制創造與控制間的平衡;

          • 復用與定制間的平衡,刻意追求復用率而容易丟失整體觀,為特定業務目標服務時不如靈活集中化式方法等

          • 資源問題,容易被當成是輔助項目而缺乏預算等資源….

          • 缺乏良性有效的組件庫更新迭代機制,虎頭蛇尾….

          • 收益短期不明顯,搭建體系的長期收益難以被組織短期內察覺;


          盡管有一系列潛在的問題,但總的來說設計體系的帶來的收益是大于這些投入的,總的來說方向是沒錯的,下一個關鍵問題是:我們如何去建立一個更優秀的設計體系。

          文章來源:站酷   作者:從你的世界經過



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


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

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


          深入聊聊“用戶體驗設計”那些事

          周周

          我們創建用戶體驗的設計方法為“以用戶為中心的設計”。

          日歷

          鏈接

          個人資料

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

          存檔

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