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

          首頁

          設計賦能商業變現初探

          lanlanwork


          關鍵詞解讀

          為了更好的理解接下來的文章內容,筆者會首先對以下關鍵詞進行解讀:商業變現、設計賦能、價值鏈理論。

          圖片

          關鍵詞

          1. 商業表現
          杰克·韋爾奇在《商業的本質》一書中提到:商業歸根結底是一項“團隊運動”,必須依靠團隊的力量。就企業而言,筆者解讀為「商業」的本質是:企業團隊(個體、群體)通過創造一系列的價值活動實現企業和外部客戶之間價值交換的運行模式;而「變現」則是指在此系統中“企業收入-支出成本”所得的實際收入,提升收入總額和降低支出成本均可以實現“變現”的目標。

           

          2. 設計賦能

          設計師站在用戶和業務的視角,能夠從全鏈路的視角出發,洞察各利益相關者的關注點,運用專業的設計方法去挖掘產品和設計的機會點,最終促進業務持續健康向上發展。

           

          3.“價值鏈”理論

          價值鏈的概念最早是由美國哈佛商學院的邁克爾?波特教授在其著作《競爭優勢》中提出的,稱作“價值鏈分析法”。把企業內外價值增加的活動分為“基礎活動和支持性活動”。基礎活動即企業生產經營的主體活動,涉及產品的物質創造及銷售、轉移買方和售后服務的各種活動,支持活動是輔助基礎活動,是通過提供采購、技術投入、人力資源、及公司范圍的職能支持的活動。不同企業參與的價值活動中,并非每一個環節都會創造價值,只有特定的價值活動才能真正創造價值。企業要密切關注組織的資源狀態,特別關注和培養企業在關鍵價值活動上獲得競爭力。

          企業保持競爭優勢,既可以來源于價值活動所涉及的市場范圍的調整,也可以來源于企業合作或調整價值鏈所帶來的收益。

          隨著社會分工的細化和專業化以及互聯網的普及和發展,價值鏈的內容也不斷向前發展,目前已發展為“合作競爭的價值鏈”理論。

          圖片

          合作競爭價值鏈

           

          價值鏈理論包含4個構成要素:價值主張、運營模式、界面模式和盈利模式。

          1.價值主張:包括價值主張、客戶關系、客戶細分三大部分。

          1. 價值主張:不但包含了企業的戰略方向,而且包含了企業提供給客戶滿足其需求的價值項,比如“快捷的渲染服務-10s出高清效果圖”。
          2. 客戶細分:確定目標客戶群體,并對其進行細分,探索不同細分市場的客戶需求。
          3. 客戶關系:是在明確用戶需求的前提下,找到吸引顧客、留住顧客、轉化顧客的方式,從而對所提供的產品和服務進行不斷的改進以維系和形成良好的長期往來關系,C端業務中常見的客戶關系即是“會員”。

          圖片

          價值主張

          2.運營模式:企業將資源和能力轉化為產品服務的過程模式。包括關鍵業務、核心資源兩大部分。企業的產品和服務作為企業價值創造的載體,需要通過一定的過程將資源和能力轉化為產品和服務,通過優化流程、提高效率則可以減少該過程中涉及到的成本和費用。

          3.界面模式:包含重要伙伴和渠道通路兩個部分。通過渠道通路,企業可以將自身的產品和服務傳遞給客戶,客戶也可將信息、資源、能力等回饋給企業。而企業的合作伙伴,在一定程度上促成了企業的產品和服務的產生,是企業外部的重要資源。

          4.盈利模式:包含包括成本結構和收入來源兩個構造塊,企業可以通過“開源節流”以實現商業的高效運作。

           

          賦能維度提取

          初步確定4個維度

          可基于價值鏈模型從“公司角度”或“具體業務角度”去作分析,可更加靈活的應用該理論。但需注意,以上構成要素中,設計師很難全面切入,定要找準設計切入方向,才可發揮最大價值。

          那么我們來看如何確定設計賦能維度?

          一方面,在上述的價值鏈理論中,“客戶關系”“重要伙伴”通常會有專業的商務、銷售、售前、運營人員去維系,盈利和收入模式也會有高層管理人員進行制定和分析管理,設計師在工作鏈路上很難觸達盈利模式和客戶關系相關的內容?!爸匾锇椤眰?,設計師通常會進行客戶調研、競品分析等,以挖掘更多的產品機會點,促成業務價值達成,因此在賦能方向上,“重要伙伴”會合并到價值主張側進行分析,不再單獨展開來講。

          另一方面,基于價值鏈理論的指導,我們進一步提煉企業或具體業務的核心價值鏈:企業需要將資源和能力整合,去生產或研發承載企業價值的產品/服務;產品/服務經過銷售到達客戶側,客戶付費購買則企業產生營收。在這條關鍵鏈路中,「生產/研發鏈路」「產品/服務」「銷售鏈路」「客戶/用戶」都是非常重要的環節且缺一不可。而設計師基于“全鏈路”的設計思維,利用豐富的設計研究等方法均可以在此四部分進行有效切入挖掘業務價值,因此初步確認將此四部分對應價值鏈中的「運營模式」「價值主張」「渠道通路」「客戶細分」作為設計切入的賦能維度?!干a研發鏈路」和「銷售鏈路」作為直接賦能“降本”和“增收”的關鍵鏈路可作為設計賦能的持續探索方向。

          圖片

          確認賦能維度和方向

           

          基于維度對業務進行分析,找到更加細分的賦能維度乃至設計機會點

          雖然初步確認了賦能維度,但是對于設計師如何尋找設計賦能機會點尚沒有清晰的思路,因此筆者從自己負責的房產業務入手,嘗試進行分析和挖掘。以下為簡要的分析,僅供大家參考。

           

          1.價值主張:房企業務在當下重要的價值主張在于探索全鏈路的業務解決方案。

          思考設計可以做什么:

          1. 目前的解決方案是否完整,能否在房產上下游繼續拓展。
          2. 已經有的解決方案客戶是否真正用起來,能否真正滿足客戶的需求?
          3. “數字化精裝”到底如何做到數字化?
          4. 競品做了什么?
          5. 如何鏈接到C端消費者?(客戶對戶型對喜好如何,對裝修風格喜好如何)…

          設計做了什么:

          1. 對新房營銷客戶的核心訴求進行分析,基于C端消費者的購房鏈路整理客戶關注的數據,提供到產品側進行參考。
          2. 對同類產品進行詳細競品分析梳理得出產品的基礎功能、進階功能、增值功能,并且將報告提供到產品側在后續的產品設計中進行參考。
          3. 基于對業務現狀的分析,整理出期望的業務表現,根據表現的內容整理出可衡量的指標以及尋找可切入的設計機會點。

          圖片

          業務現狀分析

           

          2.客戶細分:提供更加精細化的產品和運營策略。

          思考設計可以做什么:

          1. 目標客戶的類型?
          2. 不同地產大客戶的共性和差異性?
          3. 形成清晰的地產客戶畫像?
          4. 地產客戶下的細分角色?不同角色的關注點?…

          設計做了什么:

          1. 通過“桌面調研、定性調研”的方法調研“新房營銷”場景下的主要用戶角色,梳理得出“決策者-營銷總、管理者-案場銷售主管、使用者-置業顧問”的用戶角色畫像,聚焦所服務客戶(用戶)的特征、動機、日常工作分析,為后續的產品功能規劃提供參考。
          2. 根據當前客戶細分情況,整理在客戶細分側期望的表現,整理可衡量標準以及可切入的機會點。

          圖片

          目標客戶分析

           

          3.運營模式:將資源和能力轉化為產品和服務的過程。前文已經提到,優化流程、提高效率均可以減少該過程中涉及到的成本和費用。針對此部分筆者還未進行系統分析,因此簡單說明。

          1. 一方面可以思考產研基建能力建設是否完善,是否有進一步優化的空間。
          2. 另一方面可以思考產研、商務、運營等角色涉及的協作流程是否高效,能否進一步提升人效。

           

          4.渠道通路:跟增收有直接的關聯,在C端業務中表現為「購買轉化鏈路」,而在面向大B客戶的業務中,可細拆為“產品/服務”從「觸達客戶–>新簽–>續約」的全鏈路。

          圖片

          面向大B客戶的轉化鏈路

           

          思考設計可以做什么:

          運用鏈路分析法,對轉化鏈路進行系統梳理,并明確鏈路中期望的目標表現,發現可用于衡量的數據指標和可挖掘的機會點。參考下圖以“觸達鏈路”為例進行詳細說明:

          圖片

          “轉化鏈路”分析

           

          首先,需要對線上和線下的觸達客戶渠道進行枚舉和系統梳理。比如線上涉及到官網、推文;線下涉及到展會、沙龍。線下渠道包含宣傳冊、折頁等,可透出二維碼引流到線上渠道;線上渠道還可以通過推文轉發分享、搜索等進行引流。

          其次,在觸達鏈路中我們期望的目標表現是什么呢?在這個過程中,我們期望越來越多的人進入官網;希望線上的推文被大量分享;希望線下觸達的客戶量越多越好,期望品牌曝光次數越多越好,因為品牌曝光意味著觸達客戶量的機會增加,觸達客戶量也有可能隨之增加。

          再者,如何衡量目標是否達成呢?最終指標:一方面是觸達客戶數量,觸達量增加很可能意味著轉化率提升;另一方面是咨詢率,在觸達客戶增加的同時,咨詢率提升意味著對業務感興趣的客戶多,轉化的可能性就更大。過程性指標包括官網訪問量,推文閱讀量與分享量,單場活動觸達客戶量等。觸達鏈路的主要目標是引流和拓客,最終轉化與否還要依賴新簽過程,因為轉化率不會作為觸達鏈路的最終指標。

          (此處推薦大家使用GSM模型的方法確立目標表現及衡量指標,在后續的文章中會進行詳解,本文暫不詳細說明)

          圖片

          GSM模型

           

          最后,在觸達鏈路中,切入賦能的方向在哪里呢?

          一方面線上線下的渠道能否進一步拓寬?-分析現有渠道,線下客戶掃碼二維碼后打開的是H5頁面,關閉頁面后無法再次查看頁面,進而無法了解業務。因此建議增加“小程序”作為線上客戶留存渠道,一方面可以依賴微信生態方便客戶再次查看,另一方面在留存的同時還能提高客戶間的傳播分享。(下圖是基于已有小程序時的觸達鏈路)

          另一方面,已有渠道的品牌曝光量能否增加?-分析現有的官網,在官網中透出“酷家樂地產業務”的入口較深,且布點少,這些都影響了業務曝光度;于此,我們可以去思考,SEO搜索酷家樂時是否可以透出“酷家樂地產業務”?線下渠道是否可以增加可被客戶帶走的物料?線下展會中播放配音視頻,通過聲音傳達到更多客戶處,然客戶產生興趣,吸引客戶前來了解業務。

          沿著上述的思路和方向,我們可以思考更多可切入的方向與機會點。

           

          初步歸納整體研究思路

          上述的分析是基于價值鏈理論,從「價值主張」「客戶細分」「運營模式」「渠道通路」4個維度進行切入,從實際業務著手運用專業的設計方法進行分析,整理得出期望目標達成的具體表現,以及確定目標可衡量的數據指標或軟性評估體系,最后挖掘出可賦能的方向以及機會點。

          圖片

          從業務著手,嘗試挖掘賦能方向和機會點

           

          由此,筆者也形成了相對清晰的研究思路:

          基于價值鏈理論,選取賦能變現相關聯的維度。從維度切入,運用專業的設計方法對業務進行系統梳理,挖掘維度下更細分的方向,并且確定相關的評估體系用以確保目標達成。由于單條業務挖掘的方向可能有限,因此后續需要對其他典型業務進行分析,盡可能從業務實踐中抽離賦能方向,并且最后應用到其他業務實踐中。

          圖片

          設計賦能商業變現的研究思路

           

          影響因素:

          1.產品/業務的生命周期:

          產品/業務所處的生命周期不同,所選擇的維度也會存在差異性。筆者當前所負責的業務還屬于從0->1階段,業務品牌影響力需要不斷增大,對外營銷推廣渠道也需要不斷拓展,因此在業務的品牌影響力建設、渠道拓展方面都存在可深入挖掘的方向;而對于其他相對成熟的業務,賦能維度仍需要側重在運營模式優化(內部流程優化、提效降本)和銷售轉化鏈路的優化與升級(直接影響營收)兩個方向。

          2.業務類型:

          B端業務和C端業務的類型不同,可挖掘出賦能方向也會存在一定差異性。尤其是在銷售變現鏈路上,B端業務重在分析「觸達客戶」->「新簽客戶」->「續約客戶」的鏈路,需要對轉化鏈路中涉及的商務、運營、市場人員的角色及其作用進行深入了解;C端業務更重在從消費者的角度對C端轉化鏈路進行分析,包含「初識/了解」->「產生興趣」->「下單購買」->「多次回購」->「分享推薦」的完整鏈路,更要側重于分析消費者的心理和購買動機。由于目標用戶/客戶、轉化鏈路、業務屬性的差異性,賦能變現的切入方向也會存在一定的差異性。

           

          總結

          本文從“價值鏈”理論著手,選取設計賦能可切入的4個維度「價值主張」「客戶細分」「運營模式」「渠道通路」。并且從實踐出發,將上述維度落入到具體業務中進行分析,挖掘更加細分的賦能切入方向以及機會點。

          讀完該篇文章,希望各位設計師們可以達成以下2個目標:

          1. 了解價值鏈理論的概念,并且將理論應用到當前自己負責的業務中進行分析。

          2. 在設計賦能商業變現中找準設計賦能可切入的維度以及挖掘細分的維度和機會點,并且真正落實到具體業務中。

          以上內容為設計賦能商業變現的初步探索,在后續的持續探索中會力求總結出更系統的理論框架和方法并分享給大家。

           

          參考文章:

          書籍:《競爭優勢》

          書籍:《商業的本質》

          論文:價值鏈、商業模式相關的學術論文

           

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

          作者:瑤一

           轉載請注明:學UI網》設計賦能商業變現初探

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

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

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

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




          B端問答丨B端項目趕工,不重視設計應該怎么辦?

          lanlanwork


          重視自己

          圖片

          我見過同學都會抱怨設計頁面還原很糟糕,導致他不情愿將自己更多的精力花在的設計頁面上,進而在公司常常無所事事。

          首先給大家講的就是自己重視自己,因為很多設計師遇到這類情況就會自暴自棄,對于頁面細節的驗收也不會太過于上心(設計師會說:提出來他們也不改,后面也不想再提了)導致的結果就是隨著日積月累,一個頁面缺少20%的設計細節,十個頁面、五十個頁面?或許就會是一個災難。

          因此在設計不受重視時,首先要做的就是自己重視自己。在工作產出上做到用心、負責,對于 需求、設計驗收 都認真對待,因為只有自己做好了,這樣才能夠要求團隊的其他成員進行協助。

          比如一個版本結束后,將設計細節當中的不同問題 指派給不同的前端工程師,將頁面上各類設計細節進行明確的標注,這樣都能夠讓 研發同事知道你對待工作的態度。一個項目團隊,肯定不會討厭一個認真負責的人。

          這里建議大家能夠有一個固定的設計驗收表,這樣能夠幫助你。(關注公眾并點贊收藏本文章,后臺回復 “驗收” 即可)

          圖片

           

          提出問題

          出現上訴的問題,其實本質上是“項目趕工”所導致的。我曾經和很多開發都深入聊過這類問題,他們也不是想要刁難咱們,更多是因為項目功能的開發時間都不夠,更別提設計細節。

          而目前大多數團隊的項目開發方式還是采取 “敏捷開發” (與之相背離的是瀑布流開發,如果不了解的同學可以進行百度),因此在每一個迭代的初期,都可以和項目負責人進行溝通,明確出設計細節還原的具體時間以及設計細節還原要求。

          這樣能夠在項目剛開始,就和大家明確項目設計要求,比如這一期因為對于功能來說,確實是比較復雜,這樣作為設計師也知道項目整體情況,對于要求進行適當的放寬,那究竟如何放寬,就需要有一個頁面還原相對量化的標準。

           

          頁面還原的標準

          圖片

          設定一個頁面還原的基礎標準,本質上是在幫助對開發同學,在理解設計細節上有更深的認識。很多時候你會發現是,一些很明顯的錯誤他們其實是不知道的,比如一個淺灰色和白色,對于他們而言感官上都比較類似,而一些很小的細節作為開發人員很難觀察到,而通過一個標準,他可以對自己的頁面進行檢查,看看是否有問題,比如:

          基礎階段:

          頁面布局形式、顏色色值、字體大小、控件使用、關鍵元素缺失

          中級階段:

          描邊的粗細、細節背景顏色上的區分、設計資源的模糊

          高級階段:

          控件動效、頁面內容文案、提示信息…

          當然在這里只是一個簡單舉例,指定頁面還原標準的最終目的是能夠讓開發有量化的標準進而能有更好態度對待設計師、設計細節。并且標準的確定,能夠幫助你在會議上明確迭代標準,進一步提高團隊間的協作效率。而人總是會犯錯的,比如我寫文章也會偶爾出現錯別字,因此在嚴苛過后也要互相理解。

          當然除了標準,Design Token 也能夠幫助前端快速理解基礎樣式,之后有時間可以單獨來講。

           

          明確后續迭代時間

          當我們首先做好自己,接提出問題,然后確定好還原標準后,最主要的就是需要在一個版本后知道剩余的問題究竟應該在何時進行完善。

          通常解決時間存在兩種不同的情況:

          • 1.在后續 1 – 2 個版本進行迭代,將之前的問題進行解決
          • 2.將問題匯總,后續進行一次體驗上的大版本更新

          這兩種方法本身并沒有什么好壞之分,對于我們而言,就需要將設計細節上的各類問題進行匯總,也會要求設計師需要有一個屬于自己的設計體驗需求池:

          通常這類需求池會包括以下幾類問題:

          問題描述、問題圖片、負責前端、以及后續迭代時間等等…

          這樣等問題出現過后,就能夠確定相應問題對應的開發人員以及后續的時間。畢竟表格是項目管理當中最好用的工具。

           

          真誠溝通

          當你在團隊當中遇到問題時,更應該多和團隊成員協商溝通。因為都是同事,溝通解決問題才是成年人做事的風格。比如吃一頓飯聊聊問題,大家下樓抽抽煙一起聊聊,偶爾買杯奶茶犒勞為頁面辛苦還原的前端同學,有時候緊張的氛圍往往因為一兩句玩笑就能夠得到舒緩。希望大家都能夠在工作當中順順利利,少一些煩心事。

           

          原文鏈接:CE青年(公眾號)

          作者:CE青年

          轉載請注明:學UI網》B端問答丨B端項目趕工,不重視設計應該怎么辦?

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

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

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

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



          JS 如何實現占位符

          前端達人

          占位符

          –首先了解一下占位符的概念。占位符就是先占住一個固定的位置,等著你再往里面添加內容的符號,廣泛用于計算機中各類文檔的編輯。
          –格式占位符(%)是在C/C++語言中格式輸入函數,如 scanf、printf 等函數中使用。其意義就是起到格式占位的意思,表示在該位置有輸入或者輸出。
          那么在JS中,如何實現占位符呢。

          JS操作

          首先可以說明在js中,是沒有占位符這一個概念的,那我們怎么實現該功能,這個時候就可以自己定義一個方法,去實現該功能。

          String.format = function() { //字符串中賦值變量 if (arguments.length == 0) return null; var str = arguments[0]; for ( var i = 1; i < arguments.length; i++) { var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm'); str = str.replace(re, arguments[i]); } return str; }; //使用方法 const h = 1; const l = 2; var key = String.format("{0}-{1}",h,l); console.log(key); //key:"1-2" 
                      
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17


























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

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

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

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

          node.js案例,寫一個簡單的get請求,請求有50%的概率,要求數據在一個json文件中

          前端達人

          • 案例目標:實現GET的主要屬性為req.method,并且生成隨機數

          1. 使用nodejs,實現一個Ajax的get請求方式
          2. 將lib里的data.json文件請求獲取出來
          3. data里面的數據為
            
                                    
            1. {
            2. "success":[
            3. {
            4. "data": "你贏了",
            5. "message":"請求成功",
            6. "code": "200"
            7. }
            8. ],
            9. "fail":[
            10. {
            11. "data": "你輸了",
            12. "message":"請求失敗",
            13. "code": "200"
            14. }
            15. ]
            16. }
          •  案例準備

          •  案例代碼

            
                                    
            1. // 1.定義核心模塊 http fs path
            2. const http = require('http')
            3. const fs = require('fs')
            4. const path = require('path')
            5. // 2.創建服務
            6. const server = http.createServer((req, res) => {
            7. // 2.1 如果url地址為/getList 執行代碼
            8. // -req.method 為請求類型
            9. // 生成隨機數,大于0.5為0,小于為1
            10. let render = Math.random() > 0.5 ? 0 : 1
            11. // console.log(render)
            12. // 2.2 拼接字符串,為讀取數據傳參
            13. // -__dirname為獲取的目錄地址
            14. // -lib為存放數據的名字,data.json為讀取的文件
            15. const filepath = path.join(__dirname, 'lib', 'data.json')
            16. // -console.log('拼接的地址', filepath)
            17. if (render === 0 && req.url === '/getList' && req.method === 'GET') {
            18. // 2.3 讀取data文件
            19. fs.readFile(filepath, 'utf8', (err, data) => {
            20. // - 打印錯誤信息
            21. if (err) {
            22. console.log('錯誤日志', err)
            23. return
            24. }
            25. // 讀取的為json數據,設置請求頭,如果不設置,則打印亂碼信息
            26. res.setHeader('content-type', 'application/json;charset=utf8')
            27. // - 返回數據
            28. let jsonArr = JSON.parse(data)['success']
            29. let jsonStr = JSON.stringify(jsonArr)
            30. res.end(jsonStr)
            31. })
            32. } else if (render === 1 && req.url === '/getList' && req.method === 'GET') {
            33. fs.readFile(filepath, 'utf8', (err, data) => {
            34. // - 打印錯誤信息
            35. if (err) {
            36. console.log('錯誤日志', err)
            37. return
            38. }
            39. // 讀取的為json數據,設置請求頭,如果不設置,則打印亂碼信息
            40. res.setHeader('content-type', 'application/json;charset=utf8')
            41. // - 返回數據
            42. let jsonArr = JSON.parse(data)['fail']
            43. let jsonStr = JSON.stringify(jsonArr)
            44. res.end(jsonStr)
            45. })
            46. }
            47. })
            48. // 3.啟動服務
            49. // 8111為端口號,默認8000,盡量使用8開頭,如果使用其他,咋不會正常運行,會報錯
            50. server.listen(8111, () => {
            51. // 服務提示信息,運行代碼后的提示
            52. console.log('端口1111已經開啟')
            53. })











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

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

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

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

          聽說你的作品集還差個封面?

          seo達人



          圖片

           

          01.你是誰

          可能很多人在面對作品集封面的時候想的都是:怎么才能吸引人?怎么才能成功引起面試官的注意!雖然吸睛這點是一個比較重要的因素,但是更重要的還是你是誰。

          作品集展現的是你的過往作品,可能每個項目或者作品風格有所區別,但是整個作品集可以看成一個你的作品。

          你想通過你的作品集展現你的哪些能力?展示你的審美,甚至展現你的思想。都需要你經過仔細的思考。所以先想清楚你想表達什么,或許你的問題會迎刃而解。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.展現優勢

          我發現真的有很多人作品集里面的作品很優秀,但是封面卻草草了事,或者隨便做了一個跟自己的優勢毫不相關的封面。舉個栗子,有些人可能非常擅長插畫或者C4D,但是卻非要學別人表達極簡、抽象等等風格,導致直接結果就是面試官看了封面就興致全無。不要覺得好東西都在后面,我要在后面展示??赡苊嬖嚬俑緵]看到后面,就關了看下一個!

          所以,學會展現優勢,從一個好的封面開始吧!

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          a

          03.個人色彩

          可能很多同學看了前面兩點會說,你說了半天這么抽象,但我還是沒思路啊,不知從何下手。別急,下面給大家提供一個具象可實操的思路。

          個人作品集,要有自己的特點,避免扔在千千萬萬作品集中石沉大海,讓人印象深刻的方法當然還是得從自己下手,畢竟你跟別人永遠不可能一模一樣,你要展現的還是你自己,總的來說就是要具有個人色彩。

          舉個栗子:你可能擅長LOGO,就做一個自己的LOGO;你可能擅長插畫,就畫一個自己的形象,結合自己的興趣和特點;你可能擅長C4D,就建一個自己的模型,像打造一個個人IP一樣的展示自己。

          結合個人色彩,展現自己的閃光點,總是比千篇一律的排版更讓人印象深刻。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          今天所有的作品集封面參考圖已經貼心地為各位打包好啦!

          點個“在看”,去公眾號回復品集封面001就可以下載啦!

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》聽說你的作品集還差個封面?

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

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

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

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



          設計要知道-HMI設計必看!車載HMI的設計入門

          seo達人



          一、汽車 HMI 是怎樣的領域?

          HMI是Human Machine Interface 的縮寫,其實就是人機交互,汽車HMI設計主要是研究人與汽車的人機交互界面,是駕駛員和車輛交互的橋梁。當然不止界面的設計,也包括開關、按鈕、大屏、語音等等。側重的是在完成交互任務的流利順暢,同時增強駕駛樂趣,是人與界面、人與車各系統的體驗感受。

          要是想了解HMI領域,必定得從HMI的載體開始說起,HMI經過了四個大的階段演變,市場目前正處于第三階段,第四階段也在過渡中。

          圖片

          十年的交互界面,可以說是發生了質的變化,一是界面設計多元化,從工業時期追求性能的簡單粗暴,現在界面有設計簡潔現代,也有百變換膚,考慮到了用戶的審美需求;二是從交互的角度來講,做了沉浸式導航界面,提升駕駛專注度。還有交互體驗的增加,有了車聯網和車內芯片強大的計算能力,汽車也能夠更靈活、更貼近使用情況的向用戶提供信息(如導航,路線推薦,胎壓檢測,用戶習慣記錄等等)。語音解放了駕駛員的雙手,讓交互更溶于駕駛場景當中。

          圖片

          OK,有了對比感受才更加強烈,我再從以下幾個方面詳細聊聊我對汽車HMI的理解。

          HMI的前景就更不用說了,雷軍的最后一次創業也放在了”造車”上面,可見互聯網的各大巨頭都想分一塊蛋糕。更是高價招人。現在阿里的斑馬、百度的Car  Life 和Apollo、騰訊的 Ai in Car、 谷歌 Android auto、蘋果 CarPlay、華為車機應用等,一線的互聯網公司都是早早布局車載,可以說是最新的一個大風口,更是不少設計師想轉型HMI設計,要想入局車載可以看看已經有成熟的設計規范。大家可以自取《HMI設計必看!車載中控的前世今生》。

          從目前的發展趨勢,智能汽車駕駛艙的發展方向主要集中在三個方面:更大的屏幕,自動化的控制界面,以及語音交互。目前智能車載系統的功能仍然非常有限。在垂直應用場景中,語音交互的體驗和技術的穩定性仍有很大的提升空間。

           

          二、車載系統的形態

          現有的車載系統分為三種,全面接入內置智能系統、平臺解決方案、軟件應用程序。

          圖片

           

          1、全面接入內置智能系統

          汽車廠和汽車制造商,將先進的技術應用到汽車的駕駛艙中。例如Tesla X,硬件、軟件和人機界面都是車廠整合。不僅能夠實現多媒體系統的深度集成,而且還能夠與駕駛員進行車內診斷和控制系統的深度集成。連接互聯網絡同時提供API接口,可以自定義應用程序和獨立開發者提供定制服務等。在提高汽車性能的同時,汽車制造商也在努力改善駕駛艙內的體驗,以提高市場競爭力。

          圖片

          車廠開發的技術可以更好地與汽車兼容,然而大部分傳統車企沒有強大的相關研發能力,語音交互相關的人工智能技術并不是車企的強項。因此也會找一些科技巨頭來合作,提供平臺解決方案。

           

          2、提供平臺解決方案

          目前科技巨頭都在為駕駛場景提供駕駛解決方案,例如,蘋果、谷歌、亞馬遜、Nuance、阿里巴巴和百度、華為、騰訊都為智能駕駛艙創建了平臺和操作系統。使用軟件平臺定制HMI單元,科技公司提供軟件平臺,車企自己定義介入的硬件與服務。平臺和系統可以將其技術和服務集成到汽車專用操作系統中,為汽車駕駛員提供完整的智能駕駛體驗。

          圖片

          技術巨頭憑借其先進的技術研發能力和與汽車制造商的緊密合作,有效的優化了相關產品和服務的質量。但是為了快速搶占市場,科技巨頭公司通常更愿意提供通用類型的平臺服務,很難為不同的車廠提供定制化服務。還有因為本身的市場競爭,會存在系統壁壘,如CarPlay系統需要插入蘋果手機。但在相當一段時間內這也是可能的一種解決辦法,因為這減少了HMI的整合成本,而漫長的汽車設計流程周期常常掣肘著汽車人機界面整合的發展。

           

          3、軟件應用程序

          軟件公司開發各種智能駕駛相關的便攜硬件和軟件服務。常見的方法是,通過將外部硬件與汽車連接,在通過軟件服務來優化汽車駕駛艙的性能,將普通汽車變成智能汽車。

          這些公司的服務和產品非常靈活,通??梢栽谥付ǖ膱鼍昂吞囟ǖ男枨笾袨橛脩籼峁┒ㄖ苹姆?。然而,這類服務往往需要一些額外的操作和硬件設備的支持。說到這里軟件的應用程序分為兩種方式,一個是車載小程序,一個是應用軟件。

          與手機小程序只在入口、開放程度、定位等方面略有差異有所不同,BAT三家車載小程序在喚醒方式、交互方式、構建場景等方面也呈現出不同的側重和戰略打法。三家都基于自己對車聯網的理解,勾畫出小程序在車載場景下如何進行應用延伸,其目的都是為用戶帶來智能網聯汽車的體驗提升。那說說車載小程序的優點。

           

          3.1車載小程序的優點:

          圖片

          • 車企強勢,曲線救國

          因為車企掌握大部分的話語權,在強勢的車企面前,全家桶組合可能不能達成合作共識。因為車企更想選取不同領域的頭部產品來搭建服務生態。此時車載小程序作為一種相對輕量的解決方案,容易進入到車聯網的生態之中。

          • 即用即走貼合場景

          在汽車環境下,所有的功能都是為了車主更高效的完成任務而產生的,快速、便捷的人車交互方式是其基本要求。

          “即用即走”的小程序是工具型產品再好不過的載體了。特別是BAT還為車載小程序開發了場景識別、自動喚醒的功能,在交互上除了語音之外,也能通過傳統的觸碰或者更加高級的手勢完成人車交互,這讓車載小程序的交互無比接近人類想象中的無人駕駛形態,也讓車載小程序有了更加強大的生命力,至少短時間內不會被新的應用所替代。

          • 快速搭建加快車載發展

          BAT都為小程序的開發者提供了開放的開發環境,甚至還提供固定模板幫助開發者加快開發速度,降低開發成本,這使得很多創業型的中小型開發者也可以參與到車聯網的生態建設中來。

          由于車載小程序和手機小程序的底層框架是打通的,這也是說,如果某個小程序在移動端上沉淀了足夠多的用戶,并且適用車載場景,具備服務能力的話,就可以快速完成車載小程序的移植,這對于建設豐富的出行服務生態和車聯網都是具有實際意義的。

           

          3.2現有車載小程序 

          圖片

          • 騰訊車載小程序

          騰訊車載小程序目前大致分為三類:出行服務小型車、生活服務小程序和視聽服務小程序,其最大特點是基于位置和場景會被自動喚醒。比如用戶經過加油站、停車場、旅游景點的時候,有些購買和支付的服務就會主動彈在車機上,用戶再通過語音完成操作。

          如果說手機小程序是“人找服務”,那么騰訊車載小程序則進化成“服務找人”。

          傳送門:(關注公眾號私信我領PDF)

          圖片

          • AliOS車載小程序

          基于算法和豐富的生態服務體系,AliOS車載小程序的最大特色是自帶場景智能感知的基因。得到車主授權后,車載小程序可以圍繞行車場景,實現上車前、行車中、下車后自然串聯的智能化場景服務。

          譬如,用戶可以在車上通過觸控、語音、手勢等多模態交互方式,咨詢附近的推薦餐廳,小程序會基于用戶的喜好作出推薦,還可以預約排號;到達餐廳附近,系統會自動喚醒小程序,為用戶找到停車場;下車后,車載小程序會無縫連接到手機小程序端,用戶可以在手機上查看餐廳的預約信息等。

          相比騰訊車載小程序,AliOS車載小程序的開放程度稍高,但也和手機小程序一樣,僅限于阿里系的商業生態之內。

          傳送門: https://miniapp.alios.cn/index#/document

           

          • 百度車載小程序

          百度也在為自身搭建智能系統。所以相比騰訊和阿里,百度車載小程序的分類更加細致,場景也更加豐富。車企可以根據車型定位和自身需求,自行定義和組合可供使用的車載小程序。

          所以很多科技公司轉向百度生態,讓大哥帶小弟的方式,一起進入到車企。百度開放的生態可以將自己主要功能接入百度App、百度地圖、百度貼吧、百度網盤百度系App上運行,還可以在愛奇藝、wifi萬能鑰匙等外部App平臺上運行。騰訊和阿里基于位置或者場景,可以自動喚醒小程序有所不同,百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒。

          傳送門: https://chelianwang.baidu.com/homepage/openPlateform/design.html

           

          三、車載系統的特點

          梳理整個汽車的HMI 的發展其實我們追求的就是三個方向:

           

          1、操作(快捷、精準)操作行為無法超過3秒

          隨著大屏、多屏化的發展趨勢,觸摸和語音控制應時而生,為了增強操作合理性,以及減少或避免觸摸屏的誤觸功能。從信息輸入來看,以觸控、語音為主,手勢、視覺交互為輔;從反饋輸出來看,以視覺、語音、觸控交互為主,嗅覺交互為輔。

          人機交互定義需要區分車輛是行駛中還是靜止狀態,車輛在行駛中,對于需要駕駛員操作反饋的交互行為需要遵循3S原則(上面提到的三秒原則),降低安全隱患。甚至有一些交互動作在車輛行駛過程中需要禁用的。

           

          2、信息(清晰、聚合)信息功能需要高度聚合

          得益于計算機算法的強大,汽車功能越來越完善,信息量也越來越大,為了讓用戶有更好的體驗,避免過多信息的干擾,必須做到界面顯示輕量化。

          保障關鍵信息是醒目的,容易讓用戶視覺快速捕獲,在各種環境場景下具有良好的可見性和易讀性,無需駕駛員費力尋找和識別。

           

          3、反饋(明顯、高效)高效的交互方式

          在駕駛的過程當中,司機的雙手被占用,于是眼睛和耳朵感知要提高,與移動端的視覺顯示不同,HMI設計師需要注意除了基礎的視覺顯示規范外,還需格外注意與安全相關信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

          在車輛行駛過程中,對于司機來說,聽覺反饋也是很有必要考慮的場景,通過語音反饋司機需要獲取的信息,能讓司機盡量保持視覺焦點在路況上。多場景的融合考慮信息獲取的效率,能減少在開車過程中的安全隱患。

           

          四、車載的開發流程

          車企現在對智能系統的設計越來越重視,因為只有把軟件實力提升才可以更好的掌握話語權,而且用戶研究與設計流程整合的方式能夠幫助汽車制造商在競爭激烈的汽車行業中先人一步博得用戶喜愛。

          汽車HMI設計開發需要按照整車開發的流程進行,這樣在造車的各個階段才能有效的管控和輸出設計產物,由于HMI設計涉及的相關范疇廣,只有按照既定的流程才能設計出符合車機環境的系統界面。

           

          1、整車開發流程

          在解答如何展開HMI體驗設計前,我們需要了解現在汽車的整體設計工作流程,一輛汽車的生產需要經過V型的開發流程(從目標的制定到目標的驗證的過程)

          圖片

          大體可以分為六個階段:

          1. 產品戰略階段
          2. 概念設計階段
          3. 設計開發階段
          4. 工程車階段
          5. 生產階段

          圖片

           

          2、HMI設計開發流程

          然后我們來說一下HMI設計流程,HMI和C端B端的的設計大部分一樣,也是需要與汽車工程師,市場人員,設計調研人員合作。不同的是HMI的設計更多會反復測試保證安全性優先的情況下,滿足功能需求,整個HMI設計過程中及設計和實現是機密結合的 。

           

          HMI設計開發四大流程

          圖片

          • 需求分析調研評估

          在整車開發項目中,HMI體驗設計應該從立項時開始介入,主機廠在通過市場調研和用戶需求分析等調研方法,分析出市場上存在的潛在需求后,從平臺化角度評估需求的導入和定型驗收,和樣車研發同步進行。

          • HMI創意設計

          在得到用戶需求分析和市場調研的數據后,將這些數據轉化成為設計目標,得到初步的概念設計,之后在功能定義和產品開發達成一致之后,即項目目標正式確認,可開始進行細節和具體流程的設計;

          主要包含以下細分模塊:產品功能配置、內飾設計、市場競品對標、人因分析、硬件約束、軟件約束、功能需求定義、交互設計、視覺設計

          • 工程實現驗證評估

          在驗證評估階段中,通過臺架仿真測試,或者提供特定評價用車和培訓用車以及進一步的分析和質保路試。進行體驗驗證和設計迭代。之后是系統開發、硬件開發、軟件開發、整車測試與評價。即可開始生產批量試制(PVS)。

          • 開發測試

          最后是工程開發驗證階段,跟進實車功能測評,生產批量試制流程凍結后,會進行批量生產前總演習(OS),全面驗證批產。所有流程環節都驗證成功凍結后,產品則開始投入批量生產(SOP)。

           

          整個分析下來HMI設計流程看似和互聯網的開發流程大體相似,其實還是有很多不同,甚至可以說沒辦法完全復用的。因為兩者的側重點不同,關于汽車HMI設計與互聯網設計原則的差異,和具體HMI的設計流程細節我們下次講!

           

          原文地址:七醬設計筆記 (公眾號)

          作者:郝小七

          轉載請注明:學UI網》設計要知道-HMI設計必看!車載HMI的設計入門

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

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

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

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



          JavaScript作用域和閉包

          前端達人


          前言

          深入了解閉包和作用域鏈就需先了解函數預編譯的過程


          一、預編譯

          JavaScript:運行三部曲:
          語法分析–預編譯–解釋執行
          預編譯:
          發生在函數執行的前一刻。
          函數聲明整體提升,變量只聲明提升。
          1.函數預編譯的過程:
          1.創建AO對象Activation Object(執行期上下文,其作用就是我們理解的作用域,函數產生的執行空間庫)
          2.找形參和變量聲明,將變量和形參名作為AO屬性名,值為undefined
          3.將實參值與形參統一
          4.找到函數聲明,將函數名作為屬性名,值為函數體。
          例:

          function test (a, b){ console.log(a); c = 0; var c; a = 3; b = 2; console.log(b); function b (){}; function d (){}; console.log(b); } test(1); /*答案:1,2,2
          答題過程:找形參和變量聲明,將變量和形參名作為 AO 屬性名,值為 undefined, AO{
           a : 1,
           b : undefined,
           c : undefined
          }
          函數聲明 function b(){}和 function d(){},AO{
           a : 1,
           b : function b(){},
           c : undefined,
           d : function d(){}
          }
          執行 console.log(a);答案是 1
          執行 c = 0;變 AO{
           a : 1,
           b : function b(){},
           c : 0,
           d : function d(){}
          }
          var c 不用管,因為 c 已經在 AO 里面了
          執行 a = 3;改 AO{
           a : 3,
           b : function b(){},
           c : 0,
           d : function d(){}
          }
          執行 b = 2;改 AO{
           a : 3,
           b : 2,
           c : 0,
           d : function d(){}
          }
          執行 console.log(b);答案是 2
          function b () {}和 function d(){}已經提過了,不用管
          執行 console.log(b);答案是 2*/ 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33
          • 34
          • 35
          • 36
          • 37
          • 38
          • 39
          • 40
          • 41
          • 42
          • 43
          • 44
          • 45
          • 46
          • 47

          2.全局預編譯它和函數預編譯步驟一樣,但它創造的是GO(全局對象):
          1.生成了一個 GO 的對象 Global Object(window 就是 GO
          2.找變量聲明…
          3.找函數聲明…

          任何全局變量都是 window 上的屬性
          變量沒有聲明就賦值了,歸 window 所有,就是在 GO 里面預編譯。
          例 :

          function test(){ var a = b =123; console.log(window.b); } test(); 答案 a 是 undefined,b 是 123 先生成 GO{ b : 123 } 再有 AO{ a : undefined } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12

          想執行全局,先生成 GO,在執行 test 的前一刻生成 AO
          函數里找變量,因為GO和AO有幾層嵌套關系,近的優先,從近的到遠的, AO里有就看 AO,AO 沒有才看 GO。所以函數局部變量和全局變量同名,函數內只會用局部。

          二、作用域精講

          作用域定義:變量(變量作用于又稱上下文)和函數生效(能被訪問)的區域
          全局、局部變量
          作用域的訪問順序:函數外面不能用函數里面的。里面的可以訪問外面的,外面的不能訪問里面的,彼此獨立的區間不能相互訪問。

          1.[[scope]]: 每個 javascript 函數都是一個對象,對象中有些屬性我們可以訪問,但有些不可以,這些屬性僅供 javascript 引擎存取,[[scope]]就是其中一個。[[scope]]指的就是我們所說的作用域,其中存儲了運行期上下文的集合。

          2.執行期上下文: 當函數在執行的前一刻,會創建一個稱為執行期上下文的內部對象(AO)。
          一個執行期上下文定義了一個函數執行時的環境,函數每次執行時對應的執行上下文都是獨一無二的,所以多次調用一個函數會導致創建多個執行上下文,當函數執行完畢,執行上下文被銷毀。

          3.作用域鏈:[[scope]]中所存儲的執行期上下文對象的集合(GO和AO),這個集合呈鏈式鏈接,我們把這種鏈式鏈接叫做作用域鏈。

          4.查找變量: 在哪個函數里面查找變量,就從哪個函數作用域鏈的頂端依次向下查找(先查自己的AO,再查父級的AO,一直到最后的GO)。
          函數類對象,我們能訪問 test.name
          test.[[scope]]隱式屬性——作用域

          作用域鏈圖解:

          function a (){ function b (){ var bb = 234; aa = 0; } var aa = 123; b(); console.log(aa) } var glob = 100; a(); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12

          0 是最頂端,1 是次頂端,查找順序是從最頂端往下查
          在這里插入圖片描述
          在全局預編譯中函數a定義時,它的[[scope]]屬性中有GO對象。
          在這里插入圖片描述
          在函數a執行前先函數預編譯,創建自己的AO對象,并存儲在[[scope]]屬性上,與之前存儲的GO成鏈式。同時函數b被創建定義。
          在這里插入圖片描述
          在b被創建時,它生成的[[scope]]屬性直接存儲了父級的[[scope]],它有了父級的AO和GO。
          在這里插入圖片描述
          b函數執行前預編譯,生成自己的AO,存儲在[[scope]]屬性中。

          詳解過程: 注意[[scope]]它是數組,存儲的都是引用值。
          b 中 a 的 AO 與 a 的 AO,就是同一個 AO,b 只是引用了 a 的 AO,GO 也都是同一個。
          function b(){}執行完,干掉的是 b 自己的 AO(銷毀執行期上下文)(去掉連接線),下次 function b 被執行時,產生的是新的 b 的 AO。b 執行完只會銷毀自己的 AO,不會銷毀 a 的 AO。會退回到b被定義時(仍有父級的AO和GO)。
          function a(){}執行完,會把 a 自己的 AO 銷毀【也會把 function b的[[scope]]也銷毀】,只剩 GO(回歸到 a 被定義的時候),等下次 function a再次被執行時,會產生一個全新的 AO,里面有一個新的 b 函數。。。。。。周而復始。

          思考一個問題:如果 function a 不被執行,下面的 function b 和 function c 都是看不到的(也不會被執行,被折疊)。只有 function a 被執行,才能執行 function a 里面的內容a();不執行,根本看不到 function a (){}里面的內容,但我們想在a函數外面調用b函數怎么辦呢,于是閉包出現了。

          三、閉包

          閉包的定義

          當內部函數被保存到外部時,將會生成閉包。但凡是內部的函數被保存到外部,一定生成閉包。
          閉包的問題:閉包會導致原有作用域鏈不釋放,作用域中的局部變量一直被使用著,導致該作用域釋放不掉,造成內存泄露(就是占有過多內存,導致內存越來越少,就像泄露了一樣)
          例:

          function a(){ function b(){ var b=456; console.log(a); console.log(b); } var a=123; return b; } var glob = a(); glob(); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11

          答案 123,456。
          function a(){ }是在 return b 之后才執行完,才銷毀。而return b 把 b(包括 a 的 AO)保存到外部了(放在全局)當 a 執行完砍掉自己的 AO 時(砍掉對AO存儲地址的指針),因為b還保存著對a的AO的引用,所以內存清除機制不會清除掉a的AO, b 依然可以訪問到 a 的 AO。

          閉包的作用:

          1.實現共有變量

          function test(){ var num=100; function a(){ num++; } function b(){ num--; } return [a,b]; } var myArr=test(); myArr[0](); myArr[1](); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          答案 101 和 100。
          思考過程:說明兩個用的是一個 AO。
          myArr[0]是數組第一位的意思,即 a,myArr0;就是執行函數 a 的意思;
          myArr[1]是數組第二位的意思,即 b,myArr1; 就是執行函數 b 的意思。
          test doing test[[scope]] 0:testAO
          1:GO
          a defined a.[[scope]] 0 : testAO
          1 : GO
          b defined b.[[scope]] 0 : testAO
          1 : GO
          return[a, b]將 a 和 b 同時被定義的狀態被保存出來了
          當執行 myArr0;時
          a doing a.[[scope]] 0 : aAO
          1 : testAO
          2 : GO
          當執行 myArr1;時
          b doing b.[[scope]] 0 : bAO
          1 : a 運行后的 testAO
          2 : GO
          a 運行后的 testAO, 與 a doing 里面的 testAO 一模一樣
          a 和 b 連線的都是 test 環境,對應的一個閉包

          2.可以做緩存(存儲結構)

          function eater(){ var food=""; var obj={ eat : function (myFood){ console.log("i am eating"+food); food =""; }, push : function (myFood){ food = myFood; } } return obj; } var eater1 = eater(); eater1.push("banana"); eater1.eat(); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17

          答案 i am eating banana,eat 和 push 操作的是同一個 food
          在 function eater(){里面的 food}就相當于一個隱式存儲的機構
          obj 對象里面是可以有 function 方法的,也可以有屬性,方法就是函數的表現形式

          3.可以實現封裝,屬性私有化
          只能調用函數方法,不能修改函數的屬性。

          4.模塊化開發,防止污染全局變量


























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

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

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

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

          React 組件中的事件處理、組件(受控、非受控)、函數柯里化

          前端達人

          事件處理

          在React中獲取虛擬組件中的標簽的值

          1. 使用組件的 refs屬性
          2. 在虛擬組件的標簽中定義事件,在事件中通過 箭頭函數 獲取標簽的值
          3. 使用事件對象——event

          事件處理:

          • 通過onXxx屬性指定事件處理函數(注意大小寫)
            • React使用的是自定義(合成)事件, 而不是使用的原生DOM事件 ———為了更好的兼容性
            • React中的事件是通過事件委托方式處理的(委托給組件最外層的元素) ————為了高效
          • 通過event.target得到發生事件的DOM元素對象 ———不要過度使用ref

          使用event.target屬性:

          //創建組件 class Demo extends React.Component{ myRef = React.createRef() //展示輸入框的數據 showData = (event)=>{ alert(event.target.value); } render(){ return( <div> <input onBlur={this.showData} type="text" placeholder="失去焦點提示數據"/> </div> ) } } //渲染組件到頁面 ReactDOM.render(<Demo/>,document.getElementById('test')) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18

          React事件處理和Dom事件處理區別:

          1、在 語法 上的不同點:

          • React事件名采用駝峰命名法,即事件名首字母大寫。如onclick(Dom)——onClick(React)

          • 響應事件的函數在React中以 對象方式 賦值,Dom是以 字符串方式 賦值

            <button onclick= ' clickMe( ) '>提交</button> ——Dom方式 <button onClick={ clickMe( ) }>提交</button> ——React方式 
                    
            • 1
            • 2

          2、在阻止事件的默認行為有區別:React事件是合成的,DOM事件是原生

          • Dom:返回false
          • React:顯示的調用事件對象event.preventDefault

          React事件處理函數

          • 1、使用ES6的箭頭函數

            class MyComponent extends React.Component{ constructor(props){ super(props); this.state={ number:0 } handleClick=()=>{ ++this.state.number; console.log(this.state.number); } render(){ return( <div> <button type='button' onClick={this.handleClick}>點我</button> </div> ) } } ReactDOM.render(<MyComponent/>,document.getElementById('example')); 
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
            • 8
            • 9
            • 10
            • 11
            • 12
            • 13
            • 14
            • 15
            • 16
            • 17
            • 18
            • 19
          • 2、在組件中定義事件處理函數

            class MyComponent extends React.Component{ constructor(props){ super(props); this.state={ number:0 } this.handleClick=this.handleClick.bind(this); } handleClick(){ ++this.state.number; console.log(this.state.number); } render(){ return( <div> <button type='button' onClick={this.handleClick}>點我</button> </div> ) } } ReactDOM.render(<MyComponent/>,document.getElementById('example')); 
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
            • 8
            • 9
            • 10
            • 11
            • 12
            • 13
            • 14
            • 15
            • 16
            • 17
            • 18
            • 19
            • 20
            • 21
            • 注:這種方法的好處是每次render渲染都不會重新創建一個回調函數,沒有額外的性能損失,但是如果在一個組件中有很多的事件函數時這種在構造函數中綁定this的方法會顯得繁瑣
          • 3、在給事件賦值時綁定this

            class MyComponent extends React.Component{ constructor(props){ super(props); this.state={ number:0 } } handleClick(){ ++this.state.number; console.log(this.state.number); } render(){ return( <div> <button type='button' onClick={this.handleClick.bind(this)}>點我</button> </div> ) } } ReactDOM.render(<MyComponent/>,document.getElementById('example')); 
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
            • 8
            • 9
            • 10
            • 11
            • 12
            • 13
            • 14
            • 15
            • 16
            • 17
            • 18
            • 19
            • 20
            • 注:但是此方法在每次render時都會重新創建一個新的函數,性能有一定的損失,但在事件處理函數需要傳參數時,這種方法就比較好

          事件流

          在該示例中,3個div嵌套顯示,并且每個元素上均綁定onClick事件。當用戶點擊紅色區域的div元素時,可以看到,控制臺先后輸出了child -> parent -> ancestor,這是因為在React的事件處理系統中,默認的事件流就是冒泡。

          const style={ child:{ width:'100px', height:'100px', background:'red' }, parent:{ width:'150px', height:'150px', background:'blue' }, ancestor:{ width:'200px', height:'200px', background:'green' } } class Example extends React.Component{ render(){ return( <div onClickCapture={()=> console.log('ancestor')} style={style.ancestor}> <div onClickCapture={ ()=> console.log('parent')} style={style.parent}> <div onClickCapture={ ()=> console.log('child')} style={style.child}></div> </div> </div> ) } } ReactDOM.render(<Example/>,document.getElementById('example')); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31

          在這里插入圖片描述

          • React默認的事件觸發方式:冒泡方式
          • 若將事件觸發改為捕獲方式:需要在事件名后帶上 Capture 后綴
          <div onClickCapture={()=> console.log('ancestor')} style={style.ancestor}> <div onClickCapture={ ()=> console.log('parent')} style={style.parent}> <div onClickCapture={ ()=> console.log('child')} style={style.child}></div> </div> </div> 
          
          • 1
          • 2
          • 3
          • 4
          • 5

          事件委托

          在合成事件系統中,所有的事件都是綁定在document元素上,即雖然在某個React元素上綁定了事件,但是,最后事件都委托給document統一觸發。因此,在合成事件中只能阻止合成事件中的事件傳播

          React 阻止的事件流,并沒有阻止真正DOM元素的事件觸發,還是按照冒泡的方式,層層將事件交給上級元素進行處理,最后事件傳播到docuement,觸發合成事件,在合成事件中,child觸發時,e.stopPropagation() 被調用,合成事件中的事件被終止。因此,合成事件中的stopPropagation無法阻止事件在真正元素上的傳遞,它只阻止合成事件中的事件流。相反,如果綁定一個真正的事件,那么,合成事件則會被終止。

          • 默認事件流是冒泡的,所有事件統一由document觸發,在React中阻止冒泡方法是調用e.stopPropagation()
          • React的合成事件是可以找到原生的事件對象
          • React中的合成事件中只有一個全局對象event,該對象不是原生的event,但通過它可以獲得event對象的部分屬性。每個事件觸發完后React的全局對象event就會被清空,因此不能在異步操作使用

          事件類型:
          在這里插入圖片描述

          收集表單數據

          非受控組件

          表單數據由DOM本身處理。即不受setState()的控制,與傳統的HTML表單輸入相似,input輸入值即顯示最新值(使用 ref 從DOM獲取表單值),即不受React控制改變表單元素提交的值的方式,稱為:“非受控組件”

          class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault() //阻止表單提交 const {username,password} = this alert(`你輸入的用戶名是:${username.value},你輸入的密碼是:${password.value}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用戶名:<input ref={c => this.username = c} type="text" name="username"/> 密碼:<input ref={c => this.password = c} type="password" name="password"/> <button>登錄</button> </form> ) } } //渲染組件 ReactDOM.render(<Login/>,document.getElementById('test')) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18

          受控組件

          在HTML中,標簽<input>、<textarea>、<select>的值的改變通常是根據用戶輸入進行更新。在React中,可變狀態通常保存在組件的狀態屬性中,并且只能使用 setState() 更新,而呈現表單的React組件也控制著在后續用戶輸入時該表單中發生的情況,以這種由React控制的輸入表單元素而改變其值的方式,稱為:“受控組件”。

          class Login extends React.Component{ //初始化狀態 state = { username:'', //用戶名 password:'' //密碼 } //保存用戶名到狀態中 saveUsername = (event)=>{ this.setState({username:event.target.value}) } //保存密碼到狀態中 savePassword = (event)=>{ this.setState({password:event.target.value}) } //表單提交的回調 handleSubmit = (event)=>{ event.preventDefault() //阻止表單提交 const {username,password} = this.state alert(`你輸入的用戶名是:${username},你輸入的密碼是:${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用戶名:<input onChange={this.saveUsername} type="text" name="username"/> 密碼:<input onChange={this.savePassword} type="password" name="password"/> <button>登錄</button> </form> ) } } //渲染組件 ReactDOM.render(<Login/>,document.getElementById('test')) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32

          受控和非受控元素都有其優點,根據具體情況選擇

          特征 非受控制 受控
          一次性檢索(例如表單提交)
          及時驗證 ×
          有條件的禁用提交按鈕 ×
          執行輸入格式 ×
          一個數據的幾個輸入 ×
          動態輸入 ×

          函數柯里化

          高階函數:如果一個函數符合下面2個規范中的任何一個,那該函數就是高階函數。

          1. 若A函數,接收的參數是一個函數,那么A就可以稱之為高階函數
          2. 若A函數,調用的返回值依然是一個函數,那么A就可以稱之為高階函數

          常見的高階函數有:Promise、setTimeout、arr.map()等等

          函數的柯里化:通過函數調用繼續返回函數的方式,實現多次接收參數最后統一處理的函數編碼形式。

          function sum(a){ return(b)=>{ return (c)=>{ return a+b+c } } } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          函數柯里化的實現

          class Login extends React.Component{ //初始化狀態 state = { username:'', //用戶名 password:'' //密碼 } //保存表單數據到狀態中 saveFormData = (dataType)=>{ return (event)=>{ this.setState({[dataType]:event.target.value}) } } //表單提交的回調 handleSubmit = (event)=>{ event.preventDefault() //阻止表單提交 const {username,password} = this.state alert(`你輸入的用戶名是:${username},你輸入的密碼是:${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用戶名:<input onChange={this.saveFormData('username')} type="text" name="username"/> 密碼:<input onChange={this.saveFormData('password')} type="password" name="password"/> <button>登錄</button> </form> ) } } //渲染組件 ReactDOM.render(<Login/>,document.getElementById('test')) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30



























          
          
          
          
          
          
          
          
          
          
          
          

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

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

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

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

          獨家曝光!大廠設計師的交付細節全公開

          seo達人


          很多新人設計師初期會只關注行業趨勢和手活的提升,而忽略更偏向團隊賦能的“設計交付”(Handoff)環節,但后者其實更能甄別設計師的業務深度。畢竟美上天際的設計圖,落地性無法保證,也只是鏡花水月,完全無法轉化為商業價值。

          在下面的部分,我根據自己的經驗列出了一些值得關注的交付細節,供各位設計師參考。

           

          產品背景和邏輯交付

          很多UI設計師在交付時沒有“解說”的概念,認為這屬于交互和產品寫文檔時負責的部分,其實不然。尤其對于一些中小型互聯網公司,如果沒有配齊產品和交互人員,或者缺乏相應的產品/交互說明產出,UI設計師需要適度補足這些缺失的部分。

          具體說來,就是在高保真設計稿中加入少量的說明解釋類頁面,用最簡潔的語句和配圖快速傳達任務的背景和目標,以便開發人員快速進入狀態,準確理解需求,降低在開發過程中掉鏈子的幾率。

          部分云交付平臺(如摹客、Overflow等)支持上傳后快速連接出流程圖,在實際工作中非常實用?;ㄉ蠋追昼姇r間連接好頁面間跳轉關系并配上說明,開發同學理解起來就舒服多了。

           

          設計稿及圖片素材交付

          首先,直接說結論:用云平臺交付設計稿,別發什么壓縮包!

          很多Ps時代的設計師都經歷過手動標注的過程,之后又逐漸轉為了使用插件(如Sketch Measure)導出的HTML交付包的方式。但:類似Sketch Measure這樣的插件大多是個人作品,兼容性和可靠度完全沒有保障;此外,導出壓縮包的方式面對改稿時的痛苦指數是非常高的。以國外行業軌跡來看,云交付一定是大勢所趨。

          針對國內設計行業現狀,云平臺大致有圖中的3種選擇:

          具體使用方式上都大同小異,下載針對自己設計軟件的對應插件,然后選擇所需的內容上傳。成功后直接將鏈接發給開發工程師即可,但切記還要確認:

          • 設計稿上傳時選擇了正確的設計倍率(尤其是對于移動端設計);
          • 所有的素材都已經標記好切圖,并能正確地在云平臺顯示和下載。重要項目最好下載所有素材逐個檢查,尤其注意圖片質量、文件大小和分辨率;
          • 界面細節是否有重點信息遺漏,可以借助平臺自帶的一些標尺、卡片、圖釘等工具補充說明;
          • 如有復雜交互或動效,考慮補充GIF / 視頻供開發人員理解和參考。

          “設計倍率”對于很多經驗較淺的設計師是個難點,如果沒有十足把握可以選擇摹客這種自帶全平臺切換算法的云平臺,這樣即使選擇錯誤也可以在云平臺二次修改。素材檢查也是很多設計師都會忽略的點,很多時候就是這一步把關不嚴,導致最終界面還原度不足。

           

          圖標交付

          圖標具有一定特殊性,交付方式往往不局限于傳統圖片格式交付,還有SVG雪碧圖、字體圖標庫等等特殊方式可以使用。

          • 傳統圖片格式(PNG、Webp等)交付時,注意內容四周透明區域大小的正確,同時還要準備hover / disable 等不同狀態下的版本;
          • SVG雪碧圖的方式一般需要特定的插件導出資源包。這種方式導出后可以上傳到云平臺的網盤中,并和開發溝通好。
          • 字體圖標庫(iconfont)的方式需要先轉換好svg,并保存在字體圖標網站上,最后通過網站打包。最后同樣需要上傳好 + 溝通好。

           

          設計規范及組件交付

          部分云交付平臺擁有全面的設計規范管理功能,開發交付時,除了能提供必備的圖層信息和CSS樣式代碼外,還能提供變量名稱(Variables)、組件代碼(Snippet),樣式表(Stylesheet)等更多專業的開發信息。

          • 在設計軟件中封裝好了組件,上傳后平臺就能夠自動識別,并可以綁定組件代碼、添加關聯鏈接或其他描述信息;

           

          • 之后,所有使用了該組件的設計稿,開發人員都能輕易地獲取到和組件模塊的開發信息,大大提升開發效率和還原準確度;

           

          • 平臺還能自動識別頁面使用的顏色和字體,并集中歸納。手動編輯相關變量名稱信息后,就可以導出開發所需的樣式表文件,非常方便。

           

          動效交付

          最后簡單提一下動效的推薦交付方式:

          • 一般場景:視頻(Mp4)或動圖(Gif、Apng、Webp)格式是最推薦的,效果可控度高。不同方式主要是幀率、質量、兼容性方面有區別,具體差異不贅述,可自行檢索。
          • Lottie / JSON 方式必須要借助AE插件導出,同時對動畫內容有一定要求,比如不支持表達式和Alpha通道等,使用前需要做好規劃。
          • SVGA的方案對內容本身限制較少,但是需要在代碼中載入一個微型的播放器,建議提前和開發人員商量。
          • 動效說明書的方式只適合復雜度不太高、且必須100%由前端實現的場景。

           

          總結

          總體來說,選擇一款足夠好的云交付平臺是事半功倍的關鍵。近年一些自帶交付功能的在線設計工具(如Figma)崛起,但從訪問速度、易用性和功能豐富性的角度來說,依然和專業的云交付平臺有著不小的差距,所以我依然建議使用摹客這樣獨立的交付平臺來保證交付品質。

           

          原文地址:UI中國

          作者:摹客產品協作設計

          轉載請注明:學UI網》獨家曝光!大廠設計師的交付細節全公開

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

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

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

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



          火爆全網的設計風格、科技感的代名詞

          seo達人



          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          可以看到今年流行的輕擬物風格和以前還是有所不同的。

           

          01.透明材質

          這種風格最大的特點一定少不了透明的材質。毛玻璃材質是最常見的,透明磨砂的質感會讓人感覺畫面十分清透、充滿科技感。

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.光線折射

          除了透明材質之外,還會經常與光線折射相結合,營造一種晶瑩剔透、夢幻輕盈的氛圍感,使畫面整體質感大大加分。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          03.漸變幻彩

          質感和氛圍感到位之后,加上明亮絢爛的色彩漸變配合,會讓整體作品不僅有質感、有細節、還十分吸睛。整體風格明亮治愈、有一種超前的科技感和脫離感,難怪微軟和國內大廠都爭相使用這種風格。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》火爆全網的設計風格、科技感的代名詞

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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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