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

          首頁

          常見科技風格分類

          ui設計分享達人

          老板:給我來一套科技風,要炫酷,要眼前一亮的感覺

              你:好嘞~(叮叮當當咚咚當當)

              老板:哎呀,我要的不是這種太花了,不夠高端

              你:給您改(叮叮當當咚咚當當)

              老板:哎呀,也不是這種太素了

              你:行,改....(我刀呢)


              沒做過科技風格的新人缺乏對常見科技風格的了解,很容易根據甲方模糊的描述及要求,主觀性的設計,還會在甲方要改的情況下十分委屈,我做的就是你描述的炫酷科技風啊。科技風格大類本身特征就是炫酷,眼前一亮的感覺,甲方沒有了解只能粗略的表述。設計師主動了解市面常見的科技風格細分及其使用場景。就能夠問出甲方爸爸更細化的需求,更客觀的根據使用場景選擇恰當的細分科技風,減少不斷重改的成本。


          FUI:

              FUI 就是 Fictional User Interfaces (Fictional GUI),就是 Fantasy User Interfaces,就是 Fake User Interfaces,就是 Futuristic User Interfaces,這些用戶界面它們是科幻的,是未來派的,是奇幻的,是虛假的.觀賞性大于實用性。

              并不是所有風格的FUI都適合應用于現實中,比如——半透明介質且信息復雜的的UI,只適合出現在影視作品里面(和一些視頻游戲當中)。它們的表現性強,看起來復雜精密,但對于信息展示功能很弱。其存在的目的是更好的配合場景,不會遮擋演員的臉部。想想看主角對復雜的數據一頓操作猛如虎,讓觀眾眼花繚亂,對主角更加崇拜。


          1.商務科技風:

               精致、高端、輕質感;簡約干凈、形體線條精細;功能感強

               應用:

              車載UI;金融UI;各種科技工具類產品的登錄注冊或官網Banner;商務海報等

              特征:

              1.商務科技配色較為嚴肅,低調。背景以深藍色,深灰色背景居多。

              2.元素的形狀并不復雜、外輪廓整體規則,周圍的細碎裝飾較少。

              3.強調品質感,會模擬一些較為細膩玻璃、金屬或啞光的微質感。對于光的使用較為克制,較少大范圍的使用輝光,多在邊緣使用較細的流光,看起來更加的犀利精致。

          (偏商務科技風格例子-圖片來源于網絡)

          2.扁平科技風:

              整體風格偏向機械、直觀,其扁平特征是元素扁平純色塊或漸變,弱化圖表空間感及體積感。多組扁平的數據可    視化圖表,在空間層次的表現上更多是在同一平面上。

              非常適合多數據后臺數據展示,強調信息數據的清晰展示,較多使用純色面元素作為底板,減少了環境的背景外擾因素。且數據分組展示,功能分區明顯。

              設計成本及實現成本較低,為目前大多數數據可視化大屏展示所選擇。


          (偏扁平科技風格例-圖片來源于網絡)

          3.HUD(儀表盤)科技風:

              視覺多使用單色,點線元素??梢耘c現實背景結合度高。

              應用:

              電影(漫威系列FUI)、游戲、企業產品宣傳視頻、AR等展示型為主

              特征:

              1.顏色使用上單色居多,尤其多亮色白,亮色藍,同色相多透明梯度變化。無質感或毛玻璃質感。

              2.簡潔而不簡單,層次豐富,典型風格HUD??臻g層次感豐富,使用半透的結構線3D模型或晶格模型,顯得輕        巧而精致,用戶能夠透過信息層看到場景層,

              3.極簡科技風需要設計師把控好細碎元素的體量和數量,對信息不會進行過多的視覺干擾。

              ps:

             極簡科技風數據的展示容量大于扁平科技風,看起來很復雜高端但通常實用性差。如果使用過多的數據,則顯示    相似類型的圖表展示相似的數據集在視覺上可能會缺乏新鮮感,但更易于理解和理解。具有不同的圖表在視覺上是令人興奮的,但用戶需要花費更多時間閱讀。


          (偏極簡科技風格例-圖片來源于網絡)

          4.賽博炫酷科技風:

              賽博朋克又稱數字朋克、網絡朋克。

              應用:游戲、H5、運營banner配圖等需要強視覺氛圍的運營。代表電影如:攻殼機動隊、頭號玩家、銀翼殺手等

              特征:

              1.張揚奇幻的娛樂感,技能風、故障風、視覺沖擊強烈。常見元素:全息投影、義體、立體城市、高達機械元素  等。

              2.人造光是賽博朋克在視覺上最大的特征,背景暗色,常用熒光黃、紫、藍、粉 、綠燈內外發光,模擬霓虹燈管自發光效果,重點元素高亮輝光。

              3.色彩冷暖撞色對比強烈,如:紅藍對比青紫對比黃橙對比等。

              4.數碼屏幕與全息投影是霓虹燈的一種延伸,既能體現未來世界的高科技的感,也能體現出人造和虛擬的概念。部分元素前后疊影色彩錯位,有頻次的閃動,模擬電子科技的偶發故障。機械化IP形象和字體設計常見金屬感和拼接感。

          (偏賽博科技風格例-圖片來源于網絡)

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

          文章來源:站酷  作者:唐小蔥

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

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

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



          情感化設計心理學:用戶心理定律及優秀案例分析

          ui設計分享達人

          將普遍存在的人性用戶心理規律運用于設計,增加設計的溫度。

          近來對用戶心理比較感興趣,去看相關設計資料的時候發現相關內容重復性較高,多方搜集資料結合自己的一些分析總結出一篇補充。

          定律是鑰匙,在遇到讓我們上癮,持續付出或獲得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能為我們的后續的設計吸收。










          undefined

          undefined

          undefined

          undefined

          undefined

          最后想說,設計師的價值不僅僅在視覺,好的設計必是好用好看好懂用戶的??珙I域學習補充自己的視野,多思多想,掌握鑰匙,開啟用戶不同的心門。

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

          文章來源:站酷  作者:唐小蔥

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

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

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


          交互設計中排行榜設計詳解

          ui設計分享達人

          “今天吃什么?。俊?

          “不知道啊,看看大眾點評,哪家店比較靠前”

          “一會去看什么電影?”

          “我看豆瓣上,這部片子評分特別高,我們去看這個吧”

          當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時,會發現當你面對的選擇越多時卻越不知道該如何做決定,或者當下做了決定后會一直思考做的這個決定是不是最好的,這恰恰是當代絕大部分用戶在實際生活中面臨的問題-選擇困難。面對用戶的選擇需求各大平臺都有自己的方式,幫助用戶做決定的同時,引導用戶購買目標產品,極大的降低了用戶的選擇成本,其中排行榜就是平臺的常用套路。用戶的選擇成本是什么?排行榜為什么能夠幫助用戶降低選擇成本?如果排行榜僅僅是用來降低用戶的選擇成本,為什么所有商家都對排行榜趨之若鶩?下面帶你了解為什么人人都愛排行榜,及我們生活無處不在的“顯性”“非顯性”排行榜。你可能不知道是我們的生活正在被各種排行榜所支配!


          排行榜的本質是一個沒有感情的信息篩選機制,將所有相關的同類事物之間通過比較,從而反映出同類事物的客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可,比如我們買衣服會首選淘寶,電子類產品會首選京東,看電影會看豆瓣評分,這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選,由于錨定效應使得用戶降低自己的選擇成本,可以準確快速的做出選擇。同時由于用戶的從眾心理或者羊群效應,也會對上榜主體產生強烈的品牌認可,為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量以及平臺背書標簽,比如:B站的百大up主,各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名,那么這一切背后的原理是什么?


          一個完整的排行榜是由平臺、上榜主體、用戶三大組成部分,俗話說屁股決定腦袋,不同的定位決定了排行對三大組成部分不同的作用,當然背后的原理也不盡相同。


          1.選擇類排行榜-降低用戶選擇成本

          在沒有各種應用前,當我們決定購買什么東西或去哪家消費時,前期需要花費大量的人力、物力去搜集相關的信息進行整理集合對比集合信息后才能做出決定,也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后,做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本(前兩個階段發生的成本是交易費用,而不是選擇成本)。在備選集的建立過程中,包含的選擇越多,用戶選擇的難度就越大,選擇成本就會越高。

          選擇性排行榜在備選集建立完成后,利用沉錨效應在用戶心理建立潛意識的目標參照,幫助用戶完成擇優決策,降低用戶的選擇成本。(另一方面平臺在幫助用戶降低選擇成本的同時,也影響著用戶的最終選擇,在接下來的平臺側方面會有詳細的分析)。

          比如說:當我需要買個耳機時,如果在沒有各大應用的前提下,我需要通過找到我身邊的耳機發燒友或數碼電子方面方面的內行人對耳機進行了解,收集信息建立備選集,但由于京東在電子設備購物方面的權威性,我會優先查看京東的耳機類排行榜,也就是說京東幫助我完成了前期對于信息的搜集及備選集的建立,而用戶出于對平臺權威性的信任,根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息,最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找,以及用戶對信息確定性的尋找過程。

          2.信息類排行榜-滿足社交需求

          在馬斯洛需求中,當個人的生理需求和安全需求被滿足時,與他人建立情感聯系或關系成為人們最強烈的需求,即社交需求。社交又分為:為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如:QQ音樂新增的撲通社區、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

          無論是“功利社交”還是“共情社交”首先需要的是溝通,溝通的本質則是信息的流通,但當雙方都沒有可以溝通的信息時則社交不成立,而類似:微博熱搜、今日頭條、澎湃新聞等信息類排行榜,則給有社交需求的用戶提供了可以展開話題相通的談資。

          選擇類排行榜中,提到的從眾心理(又稱羊群效應),是指人類由于對信息壓力規范壓力,會希望融入到群體中尋求安全感的特性,即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感,會熱衷于瀏覽此類排行榜來獲取實時信息,融入群體生活。每天早上,在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件,在上班電梯或工作間隙討論各自掌握的信息,及對事件的見解,甚至在與他人有相同的見解或之后,會對對方產生莫名的親近感等等,這些都是在滿足大眾自己的社交需求。

          3.分享類排行榜-自我確認需求

          過年期間各家app紛紛都推出了自己的用戶年度報告總結榜,不知道你有沒有參與到其中,并把這些報告的截圖分享到自己的朋友圈!在我們的日常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序,人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外,還需要清楚自身在大數據下的自我確認,通過各種各樣自我測試類榜單,判斷自身的能力、情緒、價值等等,來達到自我認同,否則就會感到焦慮不安。

          加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解是“社會是舞臺,人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程,我們想要呈現給觀眾怎樣的形象,需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己,為了維持自身的平衡防止崩潰,人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己,讓用戶更加清楚的認知自己,同時通過分享,滿足自我確認以及他人確認的需求。

          我目前只總結出這三種類型的排行榜,如果有小伙伴想到其他類型歡迎在評論區提出,大家一起參與討論。

          無論哪種排行榜,用戶信任的基礎都來自對平臺的信任,那么用戶為什么信任平臺?排行榜對平臺意味著什么?背后原理是什么?下面我們來討論排行中平臺的影響及背后的原因。


          對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性,選擇成本是品牌經濟學的核心,而用戶對于排行的信任首先要建立在平臺品牌的權威性下的結果。

          1.平臺權威性—用戶側

          從我們記事起,我們對世界的認識來自我們的父母或老師,而這些教導我們什么是對、什么是錯的長輩或老師,對當時剛來到這個世界的我們來說就是權威的化身。長大后我們對于權威的認可則更傾向于某一領域的專家,比如:醫生、律師、教授等,認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠,可以幫助普通用戶節省研究這一領域問題的工作,做出更輕松的決定,雖然不一定是正確的。

          搜索我們會第一時間想到百度,需要觀看影視、書籍會想到豆瓣,想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性,形成品牌號召力,推動著用戶做出需求決策。另一方面排行榜中也會說明數據來源,比如京東會在排行榜頁面有明確的榜單說明,豆瓣根據平臺數據更新,汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明,減少用戶做出決定中的思考、猜測,獲得用戶的信任,增強平臺的權威性。那對于平臺來說權威性的建立意味著什么?

          2.平臺權威性—平臺側

          • 影響用戶的決策方向

          平臺權威性對用戶來說意味著說服力和影響力,在減輕用戶的決策壓力的同時,也影響著用戶做出平臺所需的決策方向;

          • 平臺自帶話題性

          平臺本身的權威性也會為平臺承載的內容帶來討論的話題度,加大平臺承載內容的傳播范圍。比如,每年蘋果發布會都會帶來范圍極大的熱度討論,而app store內的熱門推薦自帶話題度和討論熱度。

          • 輸出口優化

          排行榜作為內容輸出口,在平臺權威性的背書下,產品優化自身的價值,而平臺也可以通過排行榜優化自身平臺價值。

          • 平臺盈利

          平臺權威性下,可以通過多種方式達到盈利,比如蘋果app store應用商店內的付費應用,百度的鳳巢系統、微博熱搜的第3、4位排名等。

          3.平臺權威性—廣告告知

          在平臺完成建立權威性后,部分平臺開始利用排行榜進行商業變現,比如百度、58的競價排名等,現在大部分應用會使用明顯的方式告知用戶,防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”,淘寶、小紅書推薦猜你喜歡的“廣告”。


          上榜主體作為整個排行榜的內容中心,由于排行榜自帶的競爭機制、篩選機制,使得上榜用戶會很樂于分享出去,比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。

          由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度,以及各種潛在資源,比如:流量、資源、人脈、某一領域影響力、平臺背書等等,這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感,比如bilibili不同粉絲量級會送出相對應的粉絲牌。

          而平臺方也利用上榜主體挖掘潛在的用戶,為平臺帶來更多的新用戶,加強平臺權威性,形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量,帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站,簽約西瓜視頻”,各大平臺也時不時會出現搶占流量up主的情況。

          排行榜資源的建立

          排行榜設計要達到用戶攀比的效果,很重要的充分條件就是相同需求好友基數足夠大,這樣才能構成排行榜設計成功的必要條件。

          • 同系同門資源導流

          對于已有成功產品的公司,可以借助平臺相互間的導流完成初試資源的搭建,比如:微信初期借助QQ好友流量,帶來好友初期的爆發;抖音最初的活躍借助今日頭條的流量輸入。

          • 自建用戶體系

          不斷推送已關注好友的信息流,當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交,你要先有這個人聯系方式才能要求好友,關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等,不斷社區建設推送動態信息流和好友卡片推薦。

          • 偽造

          當應用建立初期,沒有很多的資源和內容時,需要平臺自行填充內容,使得排行榜信息量大,增加用戶活躍,才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等,或是平臺pgc發布推送的內容。


          面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化,根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

          在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成,其他則根據不同產品類型及產品需求決定是否展示。

          1.頁面tab

          在首頁底部或頂部tab形式出現,多出現在以UGC或文字信息為核心的產品,以內容信息為主,常見以信息熱度為主要功能的資訊、新聞類應用。比如:知乎、今日頭條、36氪。

          知乎熱榜內容完全展開;36氪分為話題榜、人氣榜,話題榜僅展示前5條,人氣榜展示10條,僅在前5條有名次圖標,在36氪熱榜的中部還會出現收藏榜,綜合榜。

          而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”,點擊“查看更多”后,展開“頭條熱榜”及“今日關注”“北京熱榜”,整個交互形式類似微博熱搜。

          2.圖標入口

          首頁功能入口處明顯排行榜圖標,優先級較高,常見自帶推薦屬性,能夠幫助用戶快速選擇,減少選擇成本,比較依賴榜單的應用。比如:豆瓣、音樂類、騰訊動漫等應用。

          其中豆瓣、網易云音樂由于各種類型的排行榜很多,在圖標點擊開后,在當前頁面平鋪不同維度榜單類型,用戶進行點擊跳轉;騰訊動漫相對榜單類型較少,在左邊側邊欄切換不同的榜單。

          3.商品詳情頁榜單入口

          用戶查看商品詳情時,可能會希望能夠橫向對比同類商品,才能最終決定購買那件商品。常見于電商類應用,比如:京東、拼多多、得物等。點擊后進入不同的榜單頁面,獲取更多產品信息進行篩選。(淘寶的商品詳情頁沒有排行榜,但在首頁卻存在隱形排行榜,在隱形排行榜模塊會有詳細說明)。

          4.搜索-篩選(無明確搜索目的)

          當用戶沒有明確搜索目的時,搜索框的下方,平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶,比如:微博熱搜、淘寶熱賣、抖音熱榜等。


          沒有明顯排名及規則,但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前,位置越靠前,在用戶心目中的默認位置越靠前,比如淘寶的“有好貨”、編輯精選等。

          1.編輯推薦/小編推薦

          在平臺建立初期沒有特別的內容供平臺呈現,這時候就需要平臺人工有目的的推薦一些內容,不同于“猜你喜歡”建立在用戶的行為數據下,編輯推薦更多的平臺希望用戶看到的內容,一方面作為平臺內容的輸出口引導用戶,另一方面內容是平臺自己發布內容,也可以保證內容的高質量。

          2.猜你喜歡/相關推薦

          平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期,并且存在大量的平臺用戶使用數據,“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性,各大應用平臺適用性強,一般出現在首頁部分。

          3.年度總結排行榜

          朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜,這些其實是用戶自己確定了解自己,且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓,清楚的認識自己。

          4.TOP排行榜

          不知道大家小時候看沒看過《第10放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫?,F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦,這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜,從眾多選擇中選擇出部分答案,給出理由,而用戶只需在已被篩選過的內容中進行決定,節省選擇成本,比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定,但可以迎合用戶對確定性需求的各種盤點性質的排行榜,比如抖音的TOP榜哥就是盤點各種內容,人物。

          5.搜索-篩選(有明確搜索目的)

          相比其他排行榜,篩選后的內容已經體現了用戶的具體需求,高效明確的給用戶提供選項,引導用戶快速選擇。


          排行榜一般由必需的榜單頭部、上榜主體,及非必需的榜單規則、更新信息構成;而上榜主體由必需的主體信息、排序,以及非必需的推薦理由、排名變化、熱度信息構成。

          好的榜單能夠快速吸引用戶快速找到自己的需求點,引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部

          1.唯一性榜單頭部

          當排行榜在整個應用中有且只有一個時,通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出,增加平臺的品牌權威性。

          2.可復用性榜單頭部

          有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況,為了平臺的統一性、降低后期的維護成本,一般會使用可復用的榜單頭部,如豆瓣、京東、QQ音樂等。

          得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配,但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案;馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式,通過更換文案底圖達到適用不同主題;京東就相對比較簡單,只是更換標題的文案達到多主題適配。


          排行榜上榜主體由于不同的場景業務需求,一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式,其中主體信息及排序為排行榜必須信息,而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

          1.純文字形式

          純文字的排行榜一般是以內容(或標題)加排名的形式出現,常見以信息為主的排行榜,比如微博、知乎、今日頭條等以信息為主要關注點的應用,或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準,因此會在標題及排位外,增加各種突出熱度信息的表現形式,如關注熱度人數,或是“熱”“新”“爆”等等表示熱度的標簽,如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。

          2.圖文結合形式

          相對于純文字形式,圖文結合的排行榜因為圖片信息的增加,使整個榜單主體占居更多的空間也可以展示更多的產品信息,輔助用戶進行選擇。

          • 圖片形式

          上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式,延續了用戶閱讀新聞類資訊的習慣;而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖,因此沿用至線上使用的也是豎版圖片形式;而京東、大眾點評、馬蜂窩則使用方版的圖片形式,大概是因為產品的多樣性需要考慮多種圖片的適配問題。(視頻、游戲類由于使用場景大部分采用橫版圖片形式;但由于游戲封面、宣傳海報也會有豎版的形式,比如:游民星空、小黑盒)。

          • 左文右圖VS左圖右文

          每當設計圖文結合的部分,首先要考慮到底是采用左圖右文還是左文右圖的形式呢?可能很多人會說這兩種形式沒有什么大的區別啊,有什么可糾結的!或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的,因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

          人類對畫面的閱讀及掃描方式通常為三種布局方式,包括:古騰堡圖(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中產品列表頁中最常使用的就是F型布局模式,F型布局是雅各布·尼爾森(Jacob Nielsen)在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是,眼睛從上/左,水平移動到上/右,然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后,向右掃動的次數會越來越少,并且會隨著向下移動,眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面,即自左向右自上而下的閱讀模式,越向下信息獲取效率會越低

          因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式,比如:騰訊動漫、愛奇藝、得物等等。

          3.橫排+列表表現形式

          說到排行榜我們一般第一個會想到領獎臺,很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜,平臺用戶的注意力大部分集中在第一名,而領獎臺的形式模仿現實生活中的獎勵形式和儀式感,將整個排行榜的關注范圍從第一名擴展至3名,另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系,增加了第一名的高度。(目前這種形式我只在微博的明星勢力榜及抖音的直播總榜中有看到)


          榜單規則是排行榜規則的描述,是平臺權威性的體現。榜單規則有些平臺本身具有數據庫,會有相關的平臺數據支持如京東;而汽車之家則依靠“汽車工業協會”外部的數據支持,增加平臺的權威性及榜單的可信度;

          信息更新一般存在在榜單頭部和上榜主體的中間,有些是固定時間更新,也有類似微博熱搜是實時更新的模式,而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。


          排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案,但歸根到底因為人們對于不確定性的懼怕,無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式,結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同,排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯,以及用戶操作行為背后的思考及心理效應,提出合理的設計,幫助用戶了解產品功能,滿足用戶需求。


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

          文章來源:站酷  作者:9號自習室
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何選擇確定B端后臺設計風格及細節優化

          ui設計分享達人

          如何選擇合適的B端設計風格?

          1.B端后臺分類:

          根據服務對象劃分:

          一類支持有C端前臺,支持前臺產品管理各種資源。第二類服務企業,提高企業工作效率和營收。


          根據后臺功能:

          1.監控運營:時效性強,旨在實時反饋異常情況,快速判斷下達命令,回復信息、多用于數據控制中心。

          2.數據分析:數據結果的對比和分析趨勢,時效性要求并不高,了解整體和各部分數據水平,助力決策。

          3.記錄管理類:主要用于人員、設備、資產等增刪改查,文本信息容量大,頻繁便捷的操作。

          4.系統配置:權限配置、設備功能配置,操作為主。


          2.后臺深淺兩大風格分類:

          淺色:適合文本信息多密集的表單列表類后臺,淺色更符合人眼白底黑字的閱讀習慣,瀏覽速度更快,信息獲取效率更高。


          深色:圖像信息密集的后臺適合圖片、數據可視化圖表等;深色對彩色的圖像信息襯托更強。信息獲取速度較慢,長時間可能視疲勞。


          3.作者常向產品方提供的風格參考

          較常見

          1. 經典商務風(導航深、內容淺)——專業、高效、成熟、可信賴(對照深色西裝人物形象)

            優點:市面最常見的風格,普世性高,大多數用戶可快速接受,層次分明

            缺點:視覺缺乏記憶點

           2.輕量科技感(導航淺、內容淺)——簡潔、明快、輕量、年輕(對照白襯衫打領帶男性)

                優點:視覺清新明快更年輕化更輕量,對其他文本及圖形展示包容性高,就像A4白紙一樣容器存在感弱

                缺點:純白色導航+頁面層次略曖昧。

           3.藍色科技風(導航中、內容中)

                適合:適合科技屬性強的產品界面,圖像圖形展示

                缺點:對其他色彩信息有干擾,持續性長時間觀看易視覺疲勞

           4.暗黑科技風(導航深、內容深)

                優點:對色彩表現力強

                缺點:密集文本信息獲取速度會下降,持續性長時間觀看易視覺疲勞



          4.精準選擇風格時可以進一步的考慮:

          1.整體行業風格

          比如美妝和科技行業的整體設計基調就不太相同。


          2.產品想要傳達的氣質:

          理性可靠 or  簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討


          3.目標用戶的群體特點及喜好。

          根據目標用戶的性別、年齡層、受教育水平,審美水平考量(可能包含多種角色,選取1.2個核心角色為參考)帶入目標用戶工作場景及愛用物常用物品味,去判斷基調。

          如主要用戶群:40+男性用戶,本科以上受教育水平,使用windows電腦進行專業管理操作,審美傾向明確內斂。

          如主要用戶群:20-40歲,男女比例約6:4;大專;操作水平參差


          4.使用場景及高頻的操作。

          例如:最常使用數據分析管理,需要快速閱覽多條數據,對數據進行比對,更適合淺色風格展示表單數據。


          5.判斷獨立的平臺是否為獨立開發

          獨立開發的,可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。


          5.如何讓后臺設計更具特色:



          1. 重點色的使用



          “731配色比例”70%的面板色,30%的導航面板色,10%的強調色。(這里的用色比例可以根據內容具體再去調節只是大概比例)品牌色或重點色:強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。

          2.圖標的優化

          后臺高頻出現的圖標,值得我們花時間去統一設計打磨,調整圓角粗細疏密,符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的,好的設計在細節處也要動人。

          B端工具類圖標識別性第一,美觀性第二。B端導航圖標更多是在基礎造型上打磨,不需要加花里胡哨的漸變、投影,導航圖標一般在24px-16px大小,太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色


          3.空狀態小插畫

          空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。

          圖形化狀態語言,輔助用戶理解內容??梢詫a品機械蒼白的文案設計表現的更加具有溫度,具有引導性。讓乏味的工作出現一些共情小彩蛋,有趣的插圖動畫可以緩解等待的焦慮。



          4.登錄注冊頁

          純色背景卡片式:簡單大方更聚焦登錄操作

          插畫背景:場景化展示產品的功能及亮點,讓用戶更有心理預期

          幾何圖形背景:最后和品牌圖形相關,加深用戶對產品的品牌印象。

          照片背景:相關場景或產品類型,具象圖片信息更直觀


          5.圓角的大小

          不同大小的圓角傳達產品不同的氣質,大圓角親和、小圓角精致、中等圓角大眾中庸。



          6.優化信息層級

          優化信息層級,區分信息主次可以使閱讀更快,操作更快,界面更有節奏感。

          這時候你就是那個考前畫重點的老師

          判斷一個頁面里最重要的是那些信息或操作,強化它!并弱化輔助信息;

          判斷一個模塊里那些是重要信息,強化它!



          6.新人需要避免的雷點:

          1. 追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板,滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多,反而干擾信息獲取效率。


          2.反常規用戶習慣的操作。尊重用戶習慣,不要為了個性化去嘗試改變,不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維,曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。


          3.數量多,動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打擾。之前看過一個反面例子后臺,在每一步操作后都出現大的場景動效鼓勵完成,如果作為一個長期使用的工作者,我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。


          4.新人建議多看Antdesign和Element等成熟的組件,創新類組件樣式,最好和和開發商量是否能夠實現。


          5.在確定主要風格及2-5張主要頁面后,就應該著手基礎規范(色彩字體等,不然后面越做越亂)。


          6.一段時間一個審美,同一界面中的元素風格不統一。


          7.避免大面積使用高飽和高明度的色彩,及曖昧含糊的臨近色彩。長時間使用眼睛會累,產生不耐煩焦躁的負面情緒。

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

          文章來源:站酷  作者:唐小蔥
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          研究了上百套圖標,總監卻告訴我圖標要這樣畫!

          seo達人



          01.圖標是什么 

          圖片

          要做好圖標,首先我們要知道圖標是什么?在一般認知里,圖標可以定義為一種圖形化的符號或標識,用于幫助我們理解某些復雜功能或操作,尤其在數字化領域里,可視化的圖形符號,更利于高效的展示信息和引導人機操作交互。也有人稱之為icon或eikan。

          a

          1.圖標的發展史

          圖片

          圖標的歷史可以上溯到人類文明發源伊始,最早的象形文字,巖洞壁畫等都可以算作圖標的一種,為我們后代研究人類文明產生了珍貴的歷史意義。但今天我們研究的圖標主要以計算機系統發明為分界線,看看這短短幾十年間,圖標是如何演化的。

          圖片

           80年代的初期圖標還是黑白單色

          圖片

           90年代慢慢多了些色彩,形狀也更豐富

          圖片

           到2000年后,隨著顯示技術的發展,圖標也越來越形象

          圖片

           圖為iOS1-8圖標變化

          從最早的Xerox Sta系統到最新的Mac os10,再到現在人手一臺的移動智能機,每個階段都擁有其獨特的圖標風格,2010年已經到了智能移動時代,拿最知名的iOS系統每個階段升級,圖標的變化來看,也歷經了初期的擬物-扁平-微質感的好幾個階段。

          圖標作為UI必不可少的部分,能夠使界面更加精致,今天也分享給大家一些大公司的設計規范,其中包括很多系統的圖標規范和定義,幫助大家更好地參考和學習。

          圖片

          w

          02.  圖標的分類 

          圖標因其良好的辨識性和無障礙溝通特性,在各種場景下被廣泛應用,同樣,因使用場景的不同,圖標所代表的意義也不一樣。

           

          1.應用圖標

          圖片

           iOS14桌面應用圖標

          a

          應用圖標指的是我們設備界面上的應用入口,通常具有較強的品牌特性,可能與logo一致或與其核心功能一致, 如instagram 就是一個簡化的相機正視圖,亞馬遜則是一個購物車形象,國內也有不少產品直接使用了能夠代表產品的文字,需要注意的是,界面圖標必須遵循對應系統下的尺寸規范。

          圖片

           華為EMUI 10應用圖標

          d

          2.功能圖標

          與應用圖標不同的是,它主要作為界面中的功能入口,一般為簡潔易辨識的符號,根據不同產品調性,圖標風格也可以多種多樣,并且不強制必須為標準形狀,異形圖標能讓界面更為生動,整體風格的發揮也有了更多空間。

          圖片

          d

          3.輔助圖標

          輔助性圖標通常存在于有較多長文字時,搭配作為輔助說明,在UI中,可能還具備一定情感化的作用,在提升用戶接收信息效率的同時安撫用戶情緒;所以整體可能需要具備更多細節,作為畫面補充的一部分。

          圖片

           如:缺省圖標

          s

          4.與logo的區別

          雖然這兩者特性極為相似,都是圖形化的符號,但logo是為整體品牌服務的,具備其獨一無二的專利特性,甚至可以是IP形象或文字;兩者的關系可以理解為父子。

          圖片

           圖中的圖標就很好繼承了logo的特征和風格

          圖片

           但有的也只是普通的界面輔助,風格和樣式并不一致

          a

          03. 圖標的繪制 

          能夠繪制出高質量的圖標是每個UI設計師必備的能力,本次我們以功能圖標為例,為大家展示具體的幾個繪制步驟和要點,希望幫大家在細節上避開影響圖 標精致度的一些小細節。

          d

          第一步:建立圖標網格

          圖片

          功能圖標因形態結構各異,難免存在尺寸不一的情況,必須考慮其整體視覺的協調一致,最好的辦法就是建立圖標網格,也可以稱為圖標盒子,當圖標形態分別為長、方、圓時,有一個合理的比例限制。

          圖片

           將常見圖標形態約束在圖標盒子內

          當然,網格不是絕對的,要學會靈活運用,當與個別圖標形態無法完匹配時,也不必拘泥,一切以達到視覺和諧為首要。我通常會在圖標網格外圍預留一個安全區域,可以規避切圖出現不完整的情況。

          a

          第二步:具象功能

          有了網格,第二步則需要我們根據功能,找到與之對應的實物形象;如筆記本是記錄,電話是通話,時鐘代表時間,日歷代表日期等等。

          圖片

          這些功能相對比較容易找到現實中的實物,如果是比較抽象的功能呢?就需要我們發散思維,找與之相近含義的事物。如隱私功能,隱私是沒有實物的,但是我們可以通過“隱私”這個詞延伸:不公開的、隱藏的、鎖起來的、被保護的,繼續根據這些詞延展:就可能是密碼、盾、鎖、遮眼等等。

          圖片

          時刻記住一點:用大眾都能理解的物體形象去表達。如果用戶看到某個圖標過于復雜,需要反復思考它代表的含義,也無法預測點擊后的結果,那這個圖標就失去了提效的作用。

          d

          第三步:簡化結構

          有了功能的具體形象,下一步就是思考如何讓圖標變得更簡潔易辨識。

          圖片

           畢加索《公?!?/span>

          圖片

          畢加索創作《公?!窌r,從初稿到最終成品歷經了11個版本,最后只用寥寥幾條線來勾勒,但我們依然能一眼認出牛的形態。繪制圖標也一樣,需要我們思考如何省略無用細節,化繁為簡,提取他們的主要特征。

          f

          第四步:善用布爾運算

          有了簡化的圖標形象,我們接下去應該思考如何讓圖標變得更為規范耐看。

          圖片

           如桃心圖標,就是兩個簡單圓角矩形組合而成

          圖片

           桃心圖標,也可以做的更圓潤

          圖片

           不同組合下的布爾運算,圖標形態特征也會不一樣

          這一步的訣竅就是盡可能使用基礎圖形去組合拼貼,這樣做出來的圖標,尤其在適配不同尺寸大小切圖時不易拉伸變形。

          f

          第五步:處理細節

          統一性

          圖片

           風格:線性、面性統一

          圖片

           斷點細節一致:平角、圓角

          圖片

           圖標氣質一致:是圓潤還是尖銳硬朗

          隨著功能界面的不斷復雜化,大家早已不滿足于同一產品或同個界面中單一的使用面性或線性圖標,而是搭配使用便于層級劃分,故而這里只考慮在同一層級下圖標的統一性。

          視覺平衡

          圖片

          如圖,三角形置于中間位置時,視覺重量會偏向左邊,在這個基礎上,我們就需要做出適當調整,以達到視覺重量平衡。

          一致的視角

          圖片

          當你想讓自己的圖標變得更加出彩而采用了區別于正視圖的結構,那也一定要確保至少在同等層級下,這些圖標視角是一致的。

          a

          第六步:做出差異化

          融入品牌DNA

          圖片

           韓國購物App 11 street,就很好的融合了品牌logo的箭頭符號

          功能圖標因簡潔通俗,比較容易出現市場同質化嚴重的現象,故而很多App選擇在圖標中融入品牌基因,不僅做出差異性,還能提升品牌調性。

          跟隨趨勢創新

          圖片

          圖片

          通過對圖標風格質感的創新表達,讓人眼前一亮。這種方式更多需要你了解當下的流行趨勢和技法,根據產品的風格調性,對圖標進行量身打造。

          圖標微動效

          圖片

          隨著5G時代來臨,微動效也早就出現在了大眾視野,基于圖標的微動效表達,能讓用戶更快注意到某個功能并去點擊它,如果你的動效還恰好有趣美觀,更能讓用戶感到愉悅。比較常見的loading和tab切換都讓我們有了很充足的發揮空間。

          d

          第七步:完善圖標庫

          通常一個產品的功能圖標會多達幾十甚至幾百個,如何保證這些圖標的統一性需要提前去規劃。繪制的最后一步,就是在完成一部分圖標后,及時排列比對,確保整體視覺效果的統一;有條件的可以生成圖標庫,便于后續的團隊協作。

          圖片

           Apple發布的SF Symbols中圖標,就劃分了9種寬度和3個比例尺寸

          有了圖標庫后,協作設計師做到共用功能時可以直接調用;極大提高自己和團隊的效率,并保持整體規范的一致。

          a

          04.最后 

          圖標繪制看似簡單,要做好卻并不容易;UI處處充滿細節,想要自己的界面更加精致,就不要忽略每一個可以提升的點。希望今天的這篇文章能夠幫到你。

          最后給大家分享一些大公司的設計規范,其中包括很多系統的圖標規范和定義,幫助大家更好地參考和學習,需要的話可以點個“在看”,添加叮當貓回復“圖標”領取,已有叮當貓的無需重復添加。

          圖片



          s

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

          作者:sky

          轉載請注明:學UI網》研究了上百套圖標,總監卻告訴我圖標要這樣畫!

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

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

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

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


          作品集這樣展示,秒出效果

          seo達人

          01. 3D素材 

          圖片

          圖片

          圖片

          @CANAAN,作品集封面3D素材

           s

          02. 樣機素材 

          圖片

          圖片

          圖片

          @嗡嗡嗡起,高質量的手持設備樣機

          f

          03. 平面素材 

          圖片

          圖片

          圖片

          @南風知我意,潮流高級全息海報模板31款

           g

          04. 樣機素材 

          圖片

          圖片

          圖片

          @是瑩瑩啊,蘋果13樣機+高端場景樣機合集+iPhone13樣機

          w

          05. 3D素材 

          圖片

          圖片

          圖片

          @落微,UI素材丨3d丨手勢丨psd

          w

          06. 3D素材 

          圖片

          圖片

          圖片

          @阿軒,11個3D圖標+png+3個拍攝角度


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

          作者:sky

          轉載請注明:學UI網》作品集這樣展示,秒出效果

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

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

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

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



          CRM系統:線索的獲取和分配

          資深UI設計者

          CRM代表了企業對客戶的管理理念和運營方法,而對客戶生命周期的管理也是大家非常關心的話題。本篇文章里,作者分別從客戶畫像、線索獲取以及線索分配三個方面分析了售前的最重要步驟,一起來看看吧。


          CRM代表了企業對客戶的管理理念和運營方法,所以談到CRM大家最關心的話題也就是對客戶整個生命周期的管理,而在售前部分最重要的就是:線索的獲取和分配。

          一、客戶畫像

          說到CRM客戶畫像是繞不過去的一個名詞,客戶畫像是指公司客戶的共性關鍵特征,如下圖所示:

          CRM系統:線索的獲取和分配

          vipkid為例,他的主要客戶畫像就是:一二線城市且孩子年齡為4—12歲區間的家長。

          客戶畫像使用方法:

          1)根據客戶畫像尋找渠道和方法獲取銷售線索

          比如一家做英語培訓的機構就可以聯合鋼琴培訓機構聯合做公開課,兩家公司的客戶畫像相近,就可以互通客戶達到共贏。

          2)根據客戶畫像快速篩選線索,快速定位高質量線索

          比如vipkid的電話銷售人員了解到家長雖然有意愿讓孩子學習英語,但是孩子年齡為2歲,沒有達到客戶畫像的標準,則可以盡早放棄溝通下一個客戶。

          二、線索的獲取

          線索的獲取不外乎兩個部門:銷售和市場。

          1. 地推團隊

          一般TO B的公司的獲客主要渠道為地推團隊例如:

          • 2C流量+2B廣告變現模式 如58同城房產業務、安居客
          • 多邊平臺+傭金抽成模式 如美團團購外賣業務、大眾點評團購業務

          這種公司會在每個城市設立分公司,培養大量的地推銷售人員,并劃分區域給到每個銷售人員負責,銷售人員就是通過掃街的方式獲取及維護自己的客戶。

          2. 客戶轉介紹

          一般TO C的公司的高質量獲客渠道為客戶轉介紹例如:

          • 2C產供銷模式 如VIPKID、火花思維、美術寶等在線教育公司
          • 2C免費+增值模式 如游戲軟件王者榮耀、交友軟件網易花田

          這些公司會動用電銷人員成單激勵、用戶轉介紹活動激勵等方式來促使客戶完成轉介紹行為如轉發朋友圈、拉新注冊、拉新購買等來獲得轉介紹線索。

          3. 廣告流量

          通過投放廣告(實體廣告牌廣告、電視廣告、搜索網站關鍵詞投放、大V軟文)吸引用戶進入到營銷活動頁或官網進行注冊,從而收集到的線索。

          4. 自媒體

          通過內容產出如:

          客戶成功案例、系列錄播課程、直播課程、行業解決方案、電子書、行業白皮書,發布到抖音、快手、公眾號、頭條、知乎、微博等平臺上,獲得客戶認可并吸引客戶持續關注。

          5. 渠道商資源采買

          從渠道商獲取購買,但數據準確度往往很低,需要搭建數據清洗團隊,清洗數據(確認客戶信息正確并補全信息、確認客戶需求存在)之后才能算線索并提供給到銷售。

          6. 商業合作&資源互換

          通過企業與企業間的客戶資源的互換,實現雙方的共贏;建議找目標客戶群重疊但又沒有競爭的企業,以最小成本甚至0成本的方式合作,互補資源,實現雙贏。

          7. 市場活動

          如行業會議、論壇峰會、交流活動、線下公開課、展會、促銷活動等。

          三、線索分配

          線索分配是和銷售模式息息相關的,主要的銷售模式有三種:電話銷售、地面銷售、社群銷售。

          1. 電話銷售

          電話銷售依賴于CRM系統分配leads,所以電銷CRM可以從新leads轉化到老客戶續費等環節,做到對于銷售的標準化精細化管理。

          1)新分leads

          首次分配:

          業務增長時期分配策略模型:

          這種分配模型是粗放式分配,優質和低值的leads混合隨機分配給不同能力的銷售,可能會有一些高質量的leads分配給低能力銷售導致轉化失敗,但是也是因為低轉化的銷售有能接觸到高質量leads的機會帶來了工作的動力。

          策略模型方案:

          • 轉介紹leads分原CC
          • 優質leads按標分配CC
          • 一般質量leads均分CC
          • 支持管理者手動搬動leads

          業務增速降緩&收縮時期分配模型:

          業務增速降緩&收縮時期首要考慮的是降本提效,所以首要的會思考如果用更少的人干更多的事情、或是同樣多的線索如何能轉化更多,所以使用的策略會更激進一些,可能會導致轉化低的銷售長時間無法接觸到高質量例子,工作積極性降低,從而流失速度增加。

          策略模型方案:

          • 建立leads打分模型:按照司齡、轉化分層
          • 建立銷售能力打分模型:按照轉化對各個渠道分層
          • 嘗試將好的leads分配給好的銷售
          • 全部改為系統自動分配

          二次分配 :

          • 二次分配是一種對于銷售的懲罰手段,主要出現在以下兩種場景:
          • 超過規定時間線索沒轉化:掉落公海&二次分配
          • 超過規定時間銷售沒跟進 :二次分配

          2)庫存leads

          激活線索:

          庫存leads即無法轉化的銷售線索經過公司多年的積累數量龐大,如果人工再次致電確認用戶需求則很低效成功率也很低,方法一是有效識別,庫中成交可能性更高的leads,由人工觸達轉化。

          而這種方式就是通過推送(短信、郵件、公眾號等渠道)運營活動激活客戶,讓客戶主動再次咨詢,系統ke’yi再次分配銷售跟進或公海打標簽方便銷售主動撈取。

          周期掃庫:

          庫存leads即無法轉化的銷售線索經過公司多年的積累數量龐大,如果人工再次致電確認用戶需求則很低效成功率也很低,方法二是通過系統功能提高觸達效率降低人工售賣成本,周期性的把公海中的leads全部觸達一遍,避免遺漏漏網之魚。但缺點是需要嚴格制定外呼策略避免騷擾到客戶。

          1、預測式外呼:

          系統代替人工外呼,呼通線路轉接給人工溝通,節省人工外呼等待電話接通的時間浪費。

          2、智能AI電話:

          全部由機器人外呼及溝通,無人工介入,但往往只溝通確認客戶購買意愿是否存在。

          2. 地面銷售

          前面提到了一般TO B的公司的獲客主要渠道為地推團隊。這種公司會在每個城市設立分公司,培養大量的地推銷售人員,并劃分區域給到每個銷售人員負責,這個銷售人員就是通過掃街的方式獲取及維護自己的客戶。

          所以會有個弊端,CRM無法成為銷售獲取線索的主要來源,所以CRM對于地面銷售的管控程度比較低尤其在于新客戶轉化環節,一般銷售都是在確定客戶購買后才將客戶信息錄入到CRM中,所以地面銷售CRM系統的銷售管控環節主要在于客戶的維護任務及續費任務的流程及任務管控中。

          而監控方式從電銷人員的電話溝通情況改到地面銷售人員的地點定位打卡簽到的方式。

          地面銷售的線索二次分配,不會像電話銷售的那么靈活,一般是整個片區的商戶,以片區為維度的重新分配銷售。

          3. 社群銷售

          社群銷售是在線教育大班課常用的一種銷售手段,也是線下奧數教育學而思培優使用過的一種比較成功的獲客手段,社群主要是將一群有相似目的或需求的人聚集到一起,在群中沉浸式的接收你的觀點,從而形成思維的共振而達到思想的高度統一對公司想傳遞的價值觀的的認可及信任。

          上文說到,社群銷售主要是教育機構使用的銷售手段,所以往往和體驗課的班期有關,上同一期的體驗課程的學生或者家長會被拉入同一個群中,這個群會有一個專門的銷售負責。

          所以社群的線索分配是和銷售負責的班期排班直接關聯的,除非整個班期重新銷售排班一般不會更換銷售。所以主要依賴于銷售對于社群的維護,一般不進行二次分配。


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

          文章來源:人人都是產品經理  作者:東悅思考筆記

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

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

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


          如何把握好平面設計中的節奏感?

          資深UI設計者

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!


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

          文章來源:優設  作者:美工美邦
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          JavaScript——異步操作以及Promise 的使用

          前端達人

          什么是異步?

          異步與同步是相反的

          簡單來理解就是:同步按你的代碼順序執行,異步不按照代碼順序執行,異步的執行效率更高。

          什么時候用異步編程

          在前端編程中(甚至后端有時也是這樣),我們在處理一些簡短、快速的操作時,例如計算 1 + 1 的結果,往往在主線程中就可以完成。主線程作為一個線程,不能夠同時接受多方面的請求。所以,當一個事件沒有結束時,界面將無法處理其他請求。

          現在有一個按鈕,如果我們設置它的 onclick 事件為一個死循環,那么當這個按鈕按下,整個網頁將失去響應。

          為了解決類似這種問題,JavaScript 中的異步操作函數往往通過回調函數來實現異步任務的結果處理。

          回調函數

          回調函數就是一個函數,它是在我們啟動一個異步任務的時候就告訴它:等你完成了這個任務之后要干什么。這樣一來主線程幾乎不用關心異步任務的狀態了,他自己會善始善終。

          例如:

          
          
          1. <!DOCTYPE html>
          2. <html lang="en">
          3. <head>
          4. <meta charset="UTF-8">
          5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
          6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
          7. <title>回調</title>
          8. </head>
          9. <body>
          10. <button>點擊</button>
          11. <p></p>
          12. <script>
          13. var btn = document.querySelector('button');
          14. function fn1(){
          15. btn.onclick = function(){
          16. document.querySelector('p').innerHTML = '我出現了!'
          17. }
          18. }
          19. setTimeout(fn1,1000)
          20. </script>
          21. </body>
          22. </html>

           

           它的第一個參數是個回調函數,第二個參數是毫秒數,這個函數執行之后會產生一個子線程,子線程會等待 1 秒,然后執行回調函數 "fn1",在命令行輸出 "我出現了!"。

          Promise 的使用

          語法格式:

          
          
          1. new Promise(function (resolve, reject) {
          2. console.log("Run");
          3. });

          resolve和reject是參數 

          再看這個例子:

          
          
          1. new Promise(function (resolve, reject) {
          2. var a = 0;
          3. var b = 1;
          4. if (b == 0) reject("Divide zero");
          5. else resolve(a / b);
          6. }).then(function (value) {
          7. console.log("a / b = " + value);
          8. }).catch(function (err) {
          9. console.log(err);
          10. }).finally(function () {
          11. console.log("End");
          12. });

          這段打印結果為:

          .then() .catch() 和 .finally() 三個方法

          這三個方法的參數都是一個函數,

          .then() 可以將參數中的函數添加到當前 Promise 的正常執行序列,

          .catch() 則是設定 Promise 的異常處理序列,

          .finally() 是在 Promise 執行的最后一定會執行的序列。 .then() 傳入的函數會按順序依次執行,有任何異常都會直接跳到 catch 序列:

          
          
          1. new Promise(function (resolve, reject) {
          2. console.log(1111);
          3. resolve(2222);
          4. }).then(function (value) {
          5. console.log(value);
          6. return 3333;
          7. }).then(function (value) {
          8. console.log(value);
          9. throw "An error";
          10. }).catch(function (err) {
          11. console.log(err);
          12. });

          打印結果為:

          1111
          2222
          3333
          An error

          resolve() 中可以放置一個參數用于向下一個 then 傳遞一個值,then 中的函數也可以返回一個值傳遞給 then。但是,如果 then 中返回的是一個 Promise 對象,那么下一個 then 將相當于對這個返回的 Promise 進行操作,這一點從剛才的計時器的例子中可以看出來。

          reject() 參數中一般會傳遞一個異常給之后的 catch 函數用于處理異常。

          但是請注意以下兩點:

          • resolve 和 reject 的作用域只有起始函數,不包括 then 以及其他序列;
          • resolve 和 reject 并不能夠使起始函數停止運行,別忘了 return。




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

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

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

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

          【舉栗說明】JavaScript作用域,一次性給你總結!

          前端達人

          圖片

          本文重點

          • 函數案例

          • 函數作為參數使用

          • arguments

          • 作用域:寫代碼要注意變量的在哪聲明和使用的問題

          • 預解析:什么叫預解析, 什么東西發生了什么事

          01 作用域:使用范圍

          全局變量:

          • 聲明的變量是使用var聲明的,那么這個變量就是全局變量,

          • 全局變量可以在頁面的任何位置使用

          • 除了函數以外,其他的任何位置定義的變量都是全局變量

          • 如果頁面不關閉,那么就不會釋放,就會占空間,消耗內存

          • 全局作用域:全局變量的使用范圍

          局部變量:

          • 在函數內部定義的變量,是局部變量,外面不能使用

          • 局部作用域:局部變量的使用范圍

          注意:

          塊級作用域:一對大括號就可以看成是一塊,在這塊區域中定義的變量,只能在這個區域中使用,但是在js中在這個塊級作用域中定義的變量,外面也能使用;

          說明:js沒有塊級作用域,只有函數除外

          隱式全局變量:聲明的變量沒有var,就叫隱式全局變量

          全局變量是不能被刪除的,隱式全局變量是可以被刪除的

          定義變量使用var是不會被刪除的,沒有var是可以刪除的

          function f1() {  number=1000;//是隱式全局變量 }f1();console.log(number);   var num1=10;  num2=20;  delete num1;//把num1刪除了  delete num2;//把num2刪除了  console.log(typeof num1);  console.log(num1+10);  console.log(typeof num2);  num=100; console.log(num);  function f1() {  var num=100;  num+=10; }f1();//這個函數結束之后 { var num=10;  console.log(num);//10 }console.log(num);  if(true){  var num=10; }console.log(num); for(var i=0;i<5;i++){  var number=20; }console.log(number);   var i=0;  while (i<5){  var num=100;  i++;  } console.log(num);  function f1() {  var num=10; }f1(); console.log(num);  var num=10; console.log(num);//10  

          作用域鏈

           var num=10;  function f1() {  var num=20;  function f2() {  var num=30;  function f3() {  var num=50;  console.log(num);  } f3();  } f2();  } f1(); 

          03 函數案例

          求2個數中的最大值

           function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } console.log(getMax(10,20));  //console.log(getMax);//函數的代碼 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } var num1=10;  var num2=20;  //函數外面的num1和函數的形參num1不是同一個變量 var result=getMax(num1,num2);  console.log(result);  console.log(getMax);//函數的代碼 

          求3個數中的最大值

           function getThreeMax(x, y, z) {  return x > y ? (x > z ? x : z) : (y > z ? y : z);  } console.log(getThreeMax(10,2,24)); 

          判斷一個數是否是素數(質數),只能被1和自身整除,質數是從2開始

          用這個數字和這個數字前面的所有的數字整除一次(沒有1的,沒有自身的)

           function isPrimeNumber(num) {  for (var i = 2; i < num; i++) {  if (num % i == 0) {  //說明有一個數字整除了,就沒有必要向后繼續整除了, //此時就已經驗證出不是質數 return false;  } } return true;  }//  console.log(isPrimeNumber(7) ? "yyyyyes" : "nnnnnno") var aa = isPrimeNumber(17);  if (aa) {  console.log("yes");  } else {  console.log("no");  }  function isPrimeNumber(num) {  for(var i=2;i<num;i++){  if(num%i==0){  //說明有一個數字整除了,就沒有必要向后繼續整除了,此時就已經驗證出不是質數 return false;  } } return true;  } console.log(isPrimeNumber(8)?"是質數":"不是質數");   var result=isPrimeNumber(2);  if(result){  console.log("這個數字是質數");  }else{  console.log("這個數字不是質數");  }  function aaa(x,y){  return x-y;  } console.log(aaa(99,88)) 

          通過函數實現數組反轉

           function reverseArray(arr) {  for (var i = 0; i < arr.length / 2; i++) {  var temp = arr[i];  arr[i] = arr[arr.length - 1 - i];  arr[arr.length - 1 - i] = temp;  } return arr;  } console.log(reverseArray([1, 2, 3, 4, 5])); 

          通過函數實現冒泡排序

           function sortArray(arr) {  //控制比較的輪數 for (var i = 0; i < arr.length - 1; i++) {  //控制每一輪的比較次數 for (var j = 0; j < arr.length - 1 - i; j++) {  if (arr[j] > arr[j + 1]) {  var temp = arr[j];  arr[j] = arr[j + 1];  arr[j + 1] = temp;  }//end if }//end for }//end for return arr; } console.log(sortArray([0, 19, 34, 10, 100, 2])); 

          求一個數字的階乘

          function getJieCheng(num) {  var result = 1;  for (var i = 1; i <= num; i++) {  result *= i;  } return result; }console.log(getJieCheng(5));//1*2*3*4*5 

          求斐波那契數列

           function getFib(num){  var num1=1;  var num2=1;  var num3=0;  for(var i=3;i<=nnum;i++){  sum=num1+num2;  num1=num2;  num2=sum;  } return sum;  } console.log(getFib(12))  

          02 函數作為參數使用

          函數是有數據類型,數據類型:是function類型的

          函數可以作為參數使用,如果一個函數作為參數,那么我們說這個參數(函數)可以叫回調函數 只要是看到一個函數作為參數使用了,那就是回調函數

          function sayHi(fn) {   console.log("GOOD");  fn();//fn此時應該是一個函數}function suSay() {  console.log("HELLO"); }sayHi(suSay); function f1(x,y) {  console.log(x+y); }f1(10,20); function f2(x,y) {  console.log(x+y); }f2("HLS","MISS"); function f3(x) {  console.log(x); }f3(true);

          04 arguments

          計算n個數字的和

          定義一個函數,如果不確定用戶是否傳入了參數,或者說不知道用戶傳了幾個參數,沒辦法計算,但是如果在函數中知道了參數的個數,等于也知道了每個參數的值.

          //定義function f1() {  //獲取的是函數在調用的時候,傳入了幾個參數 //console.log(arguments.length);  //使用arguments對象可以獲取傳入的每個參數的值 console.log(arguments); } f1(10,20,30,40,100,200);//調用 
           function f1({  //arguments----->數組使用------偽數組--- var sum=0;  for(var i=0;i<arguments.length;i++){  sum+=arguments[i];  } return sum;  } console.log(f1(10,20,30)); 

          05 預解析:提前解析代碼

          預解析:就是在解析代碼之前,預解析做什么事?

          把變量的聲明提前了----提前到當前所在的作用域的最上面

          函數的聲明也會被提前—提前到當前所在的作用域的最上面

          函數調用的時候, 把會函數的聲明提升到作用域的上面

          函數的聲明提升到作用域

           f1();//調用  var num=20;//這個變量的聲明會提升到變量使用之前  function f1() {  console.log(num);  //var num=10;  } function f1() {  console.log("小蘇好猥瑣");  } f1();  function f1() {  console.log("小蘇沒有助教猥瑣");  } f1(); 

          把變量的聲明提前

           var num;  console.log(num);  num=10;  function f1() {  console.log("哈哈,助教好猥瑣哦");  }   //f1();//報錯 

          注意:預解析中,變量的提升,只會在當前的作用域中提升,提前到當前的作用域的最上面

            function f1({  console.log(num);//undefined  var num = 10;  } f1();   console.log(num);//報錯  

          函數中的變量只會提前到函數的作用域中的最前面,不會出去

          預解析會分段(多對的script標簽中函數重名,預解析的時候不會沖突)

           function f1({  console.log(num);//undefined  var num=10; } f1(); console.log(num);// function f1() { console.log("哈哈"); }

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

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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