<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設計者

          寫在前面的話

          從互聯網行業崛起至今,廣告視覺設計風格經歷了多次“更新換代”,技法愈發講究,視覺愈發酷炫。但無論視覺表現如何進化,終究沒有脫離互聯網行業廣告設計的常規套路。

          “讓用戶能最快識別廣告內容”是互聯網廣告設計的核心原則,因此我們縱觀市面上的各大平臺廣告設計,清一色是變著花樣堆砌商品與利益點的內容形式,唯獨不見傳統廣告所青睞的——創意。

          的確,傳統的4A廣告創意內涵較為隱晦,往往需要觀者沉浸體驗、深入思考才能理解當中的精髓,這并不符合互聯網廣告的設計原則,但這不代表【創意】無法融入互聯網廣告之中。

          樂信設計團隊利用將近1年的時間不斷探索、輸出與驗證,證實了創意也可以融入互聯網廣告,創意能為互聯網廣告產生更大的價值。

          在分期樂平臺,創意廣告比普通廣告的點擊率平均提升了3倍以上!


          互聯網創意廣告設計方法論

          我們團隊是怎么樣做互聯網廣告創意的?
          我們團隊基于互聯網廣告設計的核心原則上,開發出一套適用于在互聯網廣告領域融入創意的設計方法論,我們稱之為 【3S原則】。


          何為【3S原則】?

          【3S原則】分為三個部分,即 “Simple簡單”“Story故事”,以及“Surprise出人意料”


          SIMPLE:簡單直接,易于理解。
          由于互聯網廣告的性質決定了用戶只會匆匆掃視而過,所以內容上必須盡可能的直接明了,降低用戶的識別成本,畢竟我們不是真的在做4A廣告,用戶不會靜下心來細品某一張圖。

          STORY:具有故事性,能引起情感共鳴。
          能快速有效地引起用戶共鳴的方式之一是,通過情景還原來擊中用戶的痛點,情景其實就是一個故事,因此一個好的創意需要一個好的故事作為載體。

          SURPRISE:情理之中,意料之外。
          一個出人意料的戲劇化結果可以有效地激起用戶的興趣,從而吸引用戶的關注。比如在突出相機遠攝變焦功能時,“在高樓中抓拍到蜘蛛俠”是否要比單純的焦距倍數對比圖要有趣得多?



          創意方案
          我們來看看具體案例。

          ① 美妝類創意方向

          · 保濕補水
          首先是一套關于護膚品的案例,主打保濕補水的功能。在業內常見的做法可能是在產品上澆點水,甚至直接放到水里面去,用的是非常簡單粗暴的手法,那我們要怎么樣圍繞它來做創意呢?

          根據【3S原則】,首先我們需要一個故事背景,其實就是講清楚我們產品的賣點的是什么。

          在這套廣告里我們的“故事”其實就是表達產品補水效果的強大,且故事的結果必然是出人意料的,就是要讓用戶看到之后會驚呼:“誒,居然還能這樣”。

          于是我們想到了一個詞——起死回生,用了這款產品能讓你的肌膚起死回生;最后則是用最簡單易懂的手法把我們的故事展現出來。


          · 創意解讀
          把一個果干還原成它原本鮮嫩多汁的樣子,并且利用1+1=2這種最簡單的數學公式把果干(也就是使用前的狀態)、產品、以及水果(使用后的樣子)串聯起來,讓人一目了然。



          ② 手機類創意方向
          做手機類的創意跟其他產品不太一樣,因為手機是屬于具有多種功能的產品類型,所以我們得考慮哪些功能會是用戶更關注的。

          在過程中我們挖掘了很多方向,比如有屏幕色彩、續航能力、攝影攝像、游戲性能等等,而我們選擇的是各大手機廠商旗艦機型最著重的功能——攝影

          但攝影里面也有很多細分,有廣角、遠攝、微距、人像等等,因此我們會根據廠商機型本身的賣點來進行創意發散。

          但攝影里面也有很多細分,有廣角、遠攝、微距、人像等等,因此我們會根據廠商機型本身的賣點來進行創意發散。


          當中我們挑選了兩款遠攝變焦功能特別強大的機型,分別是OPPO Reno 10倍變焦版以及VIVO X30pro。另外還有一款具備超級微距功能的OPPO Find X2。



          A. 長焦距遠攝創意
          我們先來看一下遠攝的案例。

          一般來說官方的做法是直接把焦距放大的倍數效果圖放出來,比如原圖是怎樣、放大10倍是怎樣、20倍又是怎樣。這樣做雖然是非常直接有效的,但同時也會略顯無趣,而我們要如何做這個創意?

          這里我們采用了兩種方案,第一種是“捕捉不可能”,意思是通過長焦我能抓拍到正常情況根本拍不到的東西,還記得【3S原則】里提到的意外結果的比喻嗎?在高樓里抓拍到蜘蛛俠就是這種。


          · 創意解讀
          而我們的方案是,我們的手機變焦的強大甚至能夠抓拍到河對岸森林里的野人。那這是其中一種。
          另外還有第二種方向,當然因為賣點同樣是主打“超長變焦”,其實原理是一樣的,但這種方向除了捕捉不可能以外,還結合環境聯動的效果,看起來會更加有趣味性。我們一起來看看。


          從方案里我們能看到正常拍出來是一個普通城市風景,當變焦到40倍時會發現“誒,大樓窗邊好像有什么東西”。當變焦到最大60倍時會愕然發現,居然有個人拿著張紙叫你“買它”,而且紙上還有個箭頭指著下面的手機。這種把畫面內容超出邊界,與環境互動的手法本身就比較特別,并且還蹭了個李佳琦的小熱點,最終形成了化學反應,使得我們的廣告更有趣味性。

          其實在手法上用的是業內常用的倍數對比效果圖,但當我們有一個戲劇化的結果時候,一切都會變得不一樣起來。



          B. 微距創意
          我們再來看一下Find X2微距的案例。
          同樣官方直接展示微距攝影圖,那根據 【3S原則】的“意外結果”,我們能不能通過拍攝微距,拍到一些不可能的奇妙事物呢?

          · 創意解讀
          由于疫情的爆發,我們不管去哪里都得帶上口罩,基于此我們把“疫情”、“口罩”這種熱點考慮到我們的創意里,于是得到了這個方案:我們通過微距攝影拍到了帶口罩的螞蟻!

          利用這種超現實的夸張結果可以讓用戶眼前一亮,同時結合了廣告投放時正處于疫情這種特殊時期,可提醒用戶外出記得帶口罩。



          C.5G及游戲性能創意
          接下來還有關于5G及手機游戲性能的創意。

          最近“5G”功能可謂手機界最大的熱點,而我們也圍繞了“5G”進行過創意?!?G”時代的到來預計會對人們的生活帶來顛覆性的改變,但由于現今尚未普及,我們想要接地氣的宣傳“5G“功能的話還需要結合一些現有的用戶痛點才行。

          恰逢騰訊黑鯊游戲手機的上市,給了我們機會點,我們決定以5G+游戲性能為目標開展創意。

          但現今手機對游戲性能的體現主要是硬件維度上的展示,但如果我們需要結合用戶痛點來體現我們的創意,則需要更清楚游戲玩家有哪些痛點才行,那么用戶在玩游戲時都會有哪些痛點呢?



          我們根據簡單的用戶調研發現,玩家們最關注的痛點是“網速”、“性能”,由這兩個因素引發卡網、卡頓甚至掉線或死機是最難以忍受的,尤其是在競技、對抗類游戲中,稍微“卡”一小會都能影響比賽的勝負。

          因此我們利用“卡網”這個痛點來開展創意,并根據 【3S原則】,給出了因卡網導致的意外結果。


          · 創意解讀
          創意主要結合了當下流行的游戲“吃雞”,畫面上以“對面快把你打死了,你連武器都還沒加載出來”來體現網絡卡、手機卡導致的悲劇,配以文案“絕不輸在加載中”來反向提醒用戶,你需要一臺性能強大、網絡連接極好的手機。



          D.一加手機創意系列
          這套創意主要圍繞著新品“一加8系列”手機來展開,我們對一加8手機提取了主要的兩個核心賣點。一個是一加8的“輕量”(整機重量只有180g,為當時全網最輕的手機),以及一加8pro所具有的超強還原的“瞳孔屏”。

          針對這兩個賣點,我們根據【3S原則】延展出兩套創意,分別是以輕量為主的“輕如無物”,以及以屏幕還原為主的“以假亂真”。


          方案一:輕如無物

          · 創意解讀
          既然主打輕量,那我們便把“輕”這個概念做到極致,讓“輕”變得“更輕”,變得就像空氣一樣,完全感知不到它的重量,因此畫面上展示的是拍照、玩游戲等日常的手機使用情景,但人物的手是空的,只保留使用手機時的姿勢。



          方案二:以假亂真

          · 創意解讀
          對于“以假亂真”這塊,我們也延伸出了兩種不同的方向。其一是屏幕逼真顯示的事物騙過了寵物,營造出一系列出其不意的有趣結果,如小狗無視了遠處的飛盤,把手機叼回來給主人,以及貓貓被屏幕顯示的魚騙到,不停地舔屏;


          至于其二,除了主打屏幕逼真顯示的賣點以外,創意上還融合了一加8全網最輕手機(僅180g)的理念,把手機置換成撲克牌,或者用小尾指撐起手機,仿佛如蝴蝶般輕盈。




          數據反饋
          以上創意方案我們均通過ABtest得知點擊率有很大提升。



          補水專場:
          創意廣告點擊率提升約2.87倍



          OPPO Reno:
          創意廣告點擊率提升約3.39倍


          vivo X30 Pro:
          創意廣告點擊率提升約3.87倍


          OPPO Find X2:
          創意廣告點擊率提升約3.13倍


          騰訊黑鯊游戲手機:
          創意廣告點擊率提升約4.49倍



          一加8手機:
          創意廣告點擊率提升約4.71倍


          以上創意廣告不僅點擊率有大幅提升,對分期樂平臺首頁廣告區域產出的GMV也帶來了積極的提升作用,創意對GMV的拉升率約3.91%



          One more thing?
          然而,我們除了在平臺首頁banner應用創意以外,是否能有其他渠道,利用創意創造更大的收益呢?

          答案當然是——有的!


          · 品牌合作
          有了創意,將使我們能與品牌方達成更深層次的合作。

          我們可以利用創意來跟品牌方置換資源,比如在一加8系列廣告中,我們通過創意為公司爭取到品牌方的微博、微信、社區廣告的投放及眾多周邊產品,通過投放我們的創意廣告提升雙方的品牌曝光,促進手機銷售,實現雙贏。

          創意,能讓我們的設計不再局限在自身平臺,能以更多的維度創造更大的價值。



          結語
          項目啟動至今,整個過程都由我們樂信設計團隊的設計師主導并推動業務方,我們持續挖掘創意在互聯網廣告領域應用的可能性,持續跟進數據反饋,最終不僅在專業維度上產出了優秀的創意作品,更在商業上取得了優異的成果,我們證明了好的設計、好的創意是具備促進業務增長的商業價值。


          文章來源:站酷  作者:樂信用戶體驗設計

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

          B端設計師怎樣發揮設計價值?

          資深UI設計者

          在工作中,由于需要帶一些新人了解 B 端知識, 而他們了解到的關于 B 端資料又非常少且都是碎片化的呈現。并且相對于 C 端的創新和趣味,會覺得 B 端設計顯得更理性,視覺發揮空間相對有限,也會對 B 端設計的價值產生迷茫。因此,我嘗試將自己 B 端經驗提煉總結出來,一方面用于給團隊成員做培訓,另一方面也整理成文章,分享給其他同仁,希望互相學習。

          做好角色定位

          作為剛接觸 B 端的人,可能并沒有很快的認識到自身的角色和其所具備的責任、技能和能創造的價值。也不清楚如何體現自身價值以及增加自身價值的方向。

          我們先來看一下基本產品的設計流程

          B端設計師怎樣發揮設計價值?來看京東高手的總結!

          △ 基本產品設計流程

          對思維的培養

          你常常聽見的設計流程就是產品出原型,在原型和需求文檔的基礎上進行設計,這在與產品的配合中屬于被執行者,被動的接收產品的需求,按照原型輸出設計稿,這會使 B 端的設計變得無趣,也體現不出你的價值。

          B端設計師怎樣發揮設計價值?來看京東高手的總結!

          △ 你當前的流程

          實際當中你可以是與產品互相成就、互相補位。與產品共同參與到對需求的挖掘、用戶分析以及調研摸底當中,這會使你對項目的了解和后期的需求分析具有很大的幫助,能與產品一起組合考慮需要解決的根本問題是什么,我將采用何種設計方案去解決問題,這樣才不會變成被動接收信息的工具人。

          你要對所屬項目的深入了解,看看是業務支撐類產品還是辦公協同類產品或是商家端的產品等等,先了解是干什么的,在了解使用人的操作習慣和哪些方式對他們效率的提升有幫助。平常也要注意對通過用戶發聲的渠道收集他們對產品的討論、建議和意見。便于我們對問題的積累和歸類,使我們更容易站在全局的角度上思考問題,當啟動相關問題的設計時我們能更快捷更深入的設計出用戶需要的東西。另外幫助我們在與產品討論一些迭代的體驗優化提供數據支持。

          B端設計師怎樣發揮設計價值?來看京東高手的總結!

          自身的修煉

          B 端設計師的核心競爭力就是解決問題的能力,快速理解業務和處理業務的能力,只有擁有這些能力后,才可以去創造更多的價值。

          B 端設計師可以在這幾個地方鍛煉自身的價值:

          1. 從拆解入手:

          我們通常在設計工作中會遇見小需求和大需求(包含多個產品模塊小需求),小需求基本上是點對點需求,不需要細化拆解,這里就不多說了。

          而大需求通常包含多個小需求,我們要采用化繁為簡的方法——先規劃后開工,拆解設計任務,從整體出發系統化的思考產品任務,在明確產品目標和設計目的后對需求進行拆分為多個階段,再對每個階段進行設計。在你拆分任務的時候你已經對未來的工作在心里有了建設,比如哪些地方是核心展示區域,我們需要花費的精力是多少,哪些數據圖的展示形式會造成下游工作量的增加,是否對整體進度產生影響,哪些明細的展示是次要的花費精力最少,這里面也有可能會有團隊協作的情況,這就要求大家有一致的目標、一致的規范。

          B端設計師怎樣發揮設計價值?來看京東高手的總結!

          △ 基于目標拆解需求

          2. 從解決問題入手:

          后臺的搭建離不開一套強大的、統一的 UI 規范。規范是設計視覺統一的基礎也是配合技術團隊高效產出一致體驗所必不可少的工具。

          說到規范就得提一下組件了,組件的產生是為了避免我們重復的造輪子,并且對控件細節進行了把控。市面上雖然有已經成熟的組件,但是和自身的業務特點并不一定貼合,就需要我們基于 B 端產品特性和自身業務特點,以靈活性、復用性、全面性的設計原則來進行設計,例如我們就對頭部篩選項的自定義設置,在縱向間距關系和橫向間距關系上指出信息之間的距離和關聯性之間的關系,更能靈活的選取我們想要的狀態進行搭配,復用全局的使用。提升了研發團隊的效率也解決了視覺一致性的細節問題,節約時間去做更有意義的事情。

          B端設計師怎樣發揮設計價值?來看京東高手的總結!

          △ 根據類型選擇需要的頭部篩選組件

          設計賦能

          對業務需求的 100%支持是設計的本職工作,那么我們的附加值就在“賦能“上,說起賦能我們就要說一下文章開頭對思維的培養了,對思維的培養就是對需求的深挖,對問題的收集和思考,那么再進一步就要行動起來,主動進行用戶調研,挖掘需求的突破點,找到更好的解決方案和更有價值的驅動點。那么我們在對不同項目賦能時也可采取此種方法進行思考,拆解任務跟進落地,提供規范與組件支撐,采集此流程中帶來的價值,在項目結束后進行復盤總結,逐漸沉淀累積自身能力,逐步搭建自身的方法論在驗證中成長。

          結尾

          這是一些我對自身價值尋找的一部分提煉,在工作當中我們也有很多其他方面的價值,這需要你自己去尋找,在尋找中增加自身價值,在設計中體現價值。變得越來越好。



          文章來源:優設  作者:
          JellyDesign

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


          Widget-網絡革命新思維

          ui設計分享達人

          從6月分的全球開發者大會至今,大部分蘋果用戶都更新至iOS 14正式版系統。Widget成為新版本系統中討論度最高的部分,知乎、小紅書、公眾號各個平臺都能會看到關于桌面小組件的討論以及各種關于小組件排版設計攻略。本文帶你了解Widget的「前世今生」,除了很Android外,Widget這次為什么會成為這次iOS 14更新的重中之重,各大應用搶先適配iOS 14,搶占流量的新入口。

          小部件最初來源于蘋果電腦工程師Rose的一個插件工具—Konfabulator,用來更換桌面運行工具的皮膚和外觀。2003年的Konfabulator是運行在蘋果操作系統之上的,而其中的主運行文件叫做Widget。就像現在很多的新型產品一樣,當年的Konfabulator一經發布,在美國引起眾多人的關注,兩位開發者也最終決定將這款工具命名為Widget。

          一直到2004年11月Widget1.8版本正式對外發布,此時的Widget不再局限于某一平臺,而是一款跨平臺的產品。Windows和Mac用戶可以根據自己的喜好開發或使用Widget工具,這只是這款工具的開始。

          時間來到2008,當時的蘋果已經推出了iOS 2。而Google聯合多家廠商開發了安卓系統,當時Android的最大特色就是開放,開發者可以根據自己的喜好隨意的修改底層文件,我們當時印象中多變的Android桌面使用的就是Widget程序。我們熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的隨意設計導致后來的Android設計語言碎片化嚴重、交互感受相互割裂。一直持續到Google將物理設計體驗帶入屏幕的設計語言Material Design,利用具象化的設計語言規范各家的開發,遵守統一的設計語言和交互感受,由于篇幅限制就不詳細展開去說。

          Widget的定位其實相當于應用程序的擴展程序,使用的關鍵點在于用戶可以在不打開應用、無需加載等待的情況下,在屏幕上快速獲取信息甚至進行簡單的操作。

          Widget按應用可分為三種:Desktop Widget、WEB Widget以及Mobile Widget,目前討論最多的iOS14更新的Widget其實是運行在移動設備上的Desktop Widget,又稱為Mobile Widget

          注:Widget在剛進入中國的時候,沒有通用的譯名,由當時的中搜命名為“微件”。直到這次iOS 14才使用“小組件“的命名。

          蘋果多次強調Widget不是進入應用的另一種快捷方式,Widget是一種的信息展現方式,用來快速提供展示某些用戶關心的應用程序數據。

          Widget按照用戶使用場景的不同,可以分為:信息小組件、集合小組件、控件小組件及混合小組件。而iOS 一直將主屏幕的控制放置于控制中心中進行交互,因此小組件類型的主要是信息小組件及集合小組件。

          信息小組件

          在人們的日常生活中有一類應用,無需進行操作,但應用需要經常性的更新信息。比如:天氣、時鐘等等。信息小部件將應用的關鍵性信息展示在小部件上,同時跟蹤相關信息的變化。根據小部件的大小選擇性的展示信息的密度。

          集合小組件

          同一類型的眾多元素展示在小部件內,常見的比如:新聞報道、系列圖片或電子郵件等等。這類小部件有兩個特點:1.信息集合;2.點擊集合元素中的某一個元素可快速進入詳情頁進行瀏覽。集合小部件可進行垂直滾動,但在iPhone端由于交互限制,并不能進行此項操作。例如:微博、知乎。

          控件小組件

          控件小組件子除了顯示常用的功能狀態外,用戶可直接在主屏幕進行簡單的觸發操作,不需要打開相關應用,類似相關應用的外部遙控器。例如:音樂類小部件,用戶可以在當前小部件上進行簡單的暫停、切換曲目等操作。而iOS系統傳統的“控制中心”包括大部分的手機操作部分,因此iOS 14的小組件還是以展示信息為主。

          混合小組件

          實際上更多的小部件是同時具備以上兩個到三個特性的混合小部件。比如:音樂類小部件,不僅可以進行簡單的交互,同時也展示了當前播放音樂的基本數據。

          蘋果作為全球化的頂級手機制作商,一直追求通用的設計語言。設計規范包括:完整性、一致性、直接操作、反饋、隱喻,用戶控制等幾個設計原則。蘋果有別于其他手機系統的封閉式系統,作為一個習慣于為用戶做決定的父系公司,雖然這次Widget的跟新被看做是蘋果對于之前控制的減少,但在iOS 14關于Widget的官方設計指南中,也有明確的關于Widget尺寸的限制、卡片式的圓角半徑的限制、展示內容形式限制、設計交互的限制。

          iOS桌面小組件的內容雖然可以通過開發定制,但在手機桌面仍然保留規范的視覺規則。

          三種尺寸

          Android小部件之前雖然也有限制minHeight和minWidth的大小屬性,但卻可以通過左右上下拉伸大小,調整小部件信息展示內容的多少,因此大小其實是不受控制的。

          在iOS 14這次更新的小部件,同一應用限制只提供3種尺寸2x2、2x4、4x4

          小組件的核心功能是讓用戶無需進入app便可獲得信息,即少量但即時、有用且高度相關的信息。因此針對不同作用的應用需要先進行展示信息的梳理整合,明確小部件的核心目標。


          • 2x2小尺寸的小部件類似動態圖標,僅顯示當前當地的天氣,并可以打開應用。

          • 2x4中等尺寸以及4x4大尺寸的小部件,則可以在2x2的基礎上額外展示更豐富的信息,并且可以與用戶進行交互。


          同時為了確保所有小部件的圓角看起來都是一樣的,要求所有小部件采用SwiftUI容器應用正確的角半徑。相關開發文檔ContainerRelativeShape

          位置吸附

          Android手機桌面的widget可以隨意的放置在任何位置。而iOS的小部件和之前的所有圖標一樣,仍然要緊貼其他應用吸附在屏幕的頂端,不能居住只能靠邊放置。

          智能堆棧

          當在同一區域希望有多個小組件進行展示時,可以使用智能堆棧功能。根據不同的使用場景,通過上下滑動進行切換。Siri會根據時間的變化,顯示不同的小組件內容。

          蘋果從iOS7開始借鑒了微軟以及谷歌的設計語言,減少視覺裝飾、拋棄了擬物化的設計風格,盡量以內容為核心,在這次的iOS小部件也對內容展示進行了限制。

          • 聚焦內容目標點。小部件的關鍵點在讓用戶易于瀏覽,所以需要前期進行設計目標的梳理,僅展示少量的信息,專注于程序的某一部分內容。

          • 顯示內容與大小的關聯性。創建不同尺寸的小部件時,不應該只是簡單的擴大小部件的大小,而應該是在大尺寸時考慮展示更多內容,更詳細的可視化效果,圍繞基本信息的基礎上修改表現形式,進行優化和調整。

          • 提供真正有用的信息。小部件的意義在可以在主屏幕立即為用戶提供有意思的內容,而不是像桌面圖標一樣成為另一種快捷打開方式。

          • 保持展示內容的更新。小組件的展示數據需要不斷的更新,否則無法吸引用戶的注意。

          • 尋找應用的特殊性。例如日歷小組件,可以針對特定的時間和事件進行獨特的視覺處理。

          • 合理的設置選項。長按小組件會出現“編輯小組件”的選項,可以對組件的展示內容做分層或重要程度展示。例如:天氣、時間切換城市的定位。網易云音樂“定制我的云音樂小組件”切換“每日音樂推薦、我喜歡的音樂、私人FM、歌單推薦、私人雷達”的順序。

          • 避免在小組件中加入過多的交互元素。避免過多的目標,以至于用戶無法點擊所需的目標。根據內容小尺寸,設置一個點擊元素便可,中大尺寸的小組件,可設置多個點擊元素。如中等尺寸的微博,可以通過點擊任意一條熱點,查看熱點內容。

          • 僅支持點擊,不具備垂直滑動。在Android的集合類小部件除了基礎的點擊交互外,支持部件內信息的垂直滑動,但在iOS系統中的小部件不具備垂直滑動的操作方式,應該是蘋果考慮到小部件在左劃的homescreen,可以無限堆疊小部件,容易引起交互操作的沖突。唯一的交互方式就是點擊打開應用。

          可以看到iOS 14的widget沒有其他交互方式,只能通過點擊喚醒應用或某條資訊的詳情頁。蘋果在保證一貫簡單明了的用戶體驗外,不建議應用商設計過于復雜的樣式來呈現內容,盡可能的減少用戶電池、網絡方面的消耗。

          weight設計系統內容常見布局形式,可以作為設計小組件時的參考。

          由于蘋果本身自帶的話題屬性,在2020年6月22日第一次線上開發者大會—WWDC20發布的widget,到iOS14正式版上線期間,國內外熱度一直高居不下,首先各家應用廠商、個人設計開發師都推出自己對widget適配的產品;小紅書、知乎、微博等公眾流量平臺的個大私欲流量博主基于產品的適配推出各種風格主屏幕的應用攻略,widget迅速成為巨大的流量入口。

          從6月分的開發者大會到正式版上線,蘋果在自家的應用App store的Today專題、iOS 14精選App對widget進行了針對性的推薦,當搜索“小組件”等關鍵詞時還會出現“超實用的小組件”專題推薦。

          基于蘋果用戶的巨大市場,App能夠獲得蘋果的推薦意味著大量有效曝光以及話題熱度,此時很大一部分應用,根據產品特點,搶先適配小組件功能,獲得蘋果推薦,搶占一波流量。

          從9月份開始,color Widgets、倒數日、Widgetsmith、我的天氣等多款以時鐘、計時、日歷、天氣功能的小組件應用多次輪番登上App Store應用免費榜第一。(數據來自七麥數據)

          并且直到現在依然維持相對穩定排名的高度,及高下載量。

          這些數據一方面不僅因為用戶在知乎、小紅書、抖音對于如于如何使用小組件的功能、如何更定制化的設計布局自己桌面的討論,還在于各大社交平臺應勢對于小組件話題的推送,使蘋果的小組件獲的了更多的關注度,與用戶關注度。

          而有些設計師看到這其中的巨大流量賺的盆滿缽滿。9月20日設計師@Traf在自己的社交媒體賬號發布了自己設計的iOS 14主屏幕,立刻獲得大量用戶的喜歡。Traf轉手將自己的這套圖標以28美元的價格出售,開始就獲得了3626人的支持(有興趣的小伙伴可以點擊https://icons.tr.af/ 購買),六天就賺了10 萬美元,有人要去畫圖標了嗎?

          蘋果對widget的特性定義為:簡單明了(Glanceable)、恰當展示(Relevant)、個性化定制(Personalized)。阿里和京東于9月中旬基于對iOS新特性widget的理解與限制,分別對自家產品手淘和京東進行了適配設計。

          京東根據iOS 14 widget提煉出的關鍵詞:簡潔、高效、內容化。整合自己出自己品牌的設計三大原則:個性、信息、情景。在設計原則的基礎上,結合京東的業務指標和用戶場景,制定出了京東widget的四個方向:物流(工具)、直播(互動)、店鋪(私域)、秒殺(營銷)。

          • 物流——提升獲取信息的效率。及時查看物流通知,跟蹤物流進度,提升用戶獲取信息的效率

          • 店鋪——建立用戶與產品間的連接。利用widget的展示功能,在桌面推出店鋪的新品,方便用戶隨時隨地關注不同店鋪的新品。

          • 秒殺——聚焦首頁獲取核心信息。為用戶實時提供秒殺商品,紅包,配合京東的簽到形式,承載京東營銷矩陣的業務背景。

          • 直播——用戶互動。推薦熱門、感興趣的直播,預告明星直播,增加用戶與用戶、用戶與主播間的互動。

          手淘根據數據得出:用戶雖然平均每天進入屏幕的次數超過90次,但停留的總時長不過幾分鐘。結合一閃而過的快速切換應用的主屏幕里,設計交互復雜的應用界面并不能契合用戶的需求。得出設計要素:一目了然、高相關性、個性化

          • 所見即所得的物流——將查看物流信息之前需要“打開手淘、點擊我的、進入訂單、查看物流”4步操作,簡化至前臺widget透出,用戶輕松掌握包裹的一舉一動。

          • 強大的訂單管理——基于手淘人群60%的目標在訂單模式,快速啟動功能。以及對一些必要widget做了深色模式的顏色適配。

          • 便捷的互動權益提醒——針對淘寶人生、淘金幣、芭芭農場等互動專區,可在widget組件上時效了解自己互動權益的完成狀態。

          • 千人千面內容定制——基于商品、社區、直播、店鋪等手淘的廣泛產品,通過多元的方法將前臺的展示權利交給用戶。例如:關注的店鋪,關注的直播內容,愛豆的時裝秀。

          京東立足于自身的業務指標和用戶場景制定京東widget的四個方向,手淘根據數據導向一目了然的用戶需求。但由于京東與手淘都是購物應用,結合widget信息展示的特點,最終的聚焦點都是在于信息的獲取效率及提醒。使用戶在不打開應用的前提下,滿足不同的場景需求。但淘寶常年的游戲營銷,淘寶人生、淘金幣、芭芭農場的互動場景使他的業務場景化比京東更游戲化,在視覺方面也更豐富。

          推薦閱讀:

          京東APP iOS14適配解鎖

          來了來了,iOS14 和淘寶新功能一起來了??!

          下面推薦幾款我自己覺得非常不錯的小組件。

          開發者David Smith發布的一款用戶可以自己創建定制天氣、日期、天文等widget的應用。該應用采用了直觀的圖形界面話,精確調整每個widget包括字體、顏色、背景色等的顯示信息和樣式。支持大、中、小三個尺寸,與iOS 14的Widget 大小是完整匹配。

          與其他小組件不同的是,Widgetsmith可以根據時間自動變換小組件,在編輯小組件時選擇“Add a Timed Widget”,然后在表盤上劃分時間,并添加對應的小組件。放置在桌面的小組件就會隨著時間變化成相對的畫面。

          這款應用與其他天氣類應用不同的地方在于,它提供了9種的widget樣式,17個主題,滿足用戶各種風格的需求。除了常規的天氣預報外,還有實時天氣,空氣質量、世界天氣、生活指數可供選擇這款應用與其他天氣類應用不同的地方在于,它提供了9種的widget樣式,17個主題,滿足用戶各種風格的需求。除了常規的天氣預報外,還有實時天氣,空氣質量、世界天氣、生活指數可供選擇。


          我的天氣同一家開發團隊的另一款小組件倒數日,是一款可以直接在屏幕上看到不同主題倒數天數的小組件,能根據自己心情更換背景。此外還可以設置日歷小組件和時鐘小組件。

          西窗炷采用白底黑字簡約的界面風格,每天推送一首詩詞,點擊便可閱讀全文。也可以通過編輯小組件選擇自己想看朝代、體裁和顯示字體。


          沒有買過豆瓣日歷的舉手,買完心心念念覺得自己會每天看一部電影,em……然而并沒有。豆瓣的小部件除了兩種電影日歷的樣式外,實時熱門書影音排行的界面也能讓用戶不用打開應用,便可獲得及時的影音信息,點擊進入詳情頁面。

          當然也有網友做出了史上最強小組件,以及其他有趣的組件

          目前每個手機用戶主屏幕上都會有越來越多的app,我們的衣食住行娛樂都需要各種app的協助完成,但隨著app的增長,用戶會將各種app按照種類、類型進行劃分,靠線索記憶或肌肉記憶,熟悉app的位置,但隨著時間的推移,我們可能又會有各種新的應用需要下載使用。重復分類、查找、點擊進入的行為,其實是很浪費時間的步驟。

          首先我將之前的主屏幕全部隱藏,只留一個主屏幕頁面。數據顯示日常對手機的操作交互中,有50%左右的通過左手/右手單手握持操作,而我本人習慣左手單手握持操作。操作熱區如下圖中所示的從左到右從下到上。

          其中頂部區域及右邊區域放置,豆瓣、西窗燭、我的天氣等展示類小組件;Todoist、Thing3、倒數日等任務管理類小組件;知乎、微博、頭條等咨詢類小組件則可以放置于畫面中間,不妨礙點擊某條信息。也可以使用智能堆放功能,將多種小組件放置同一區域,通過上下滑動進行切換。最后放置自己平時使用頻繁的應用圖標即可,使用頻率也是按從左向右的順序。大小方面

          蘋果的app資源庫會默認經常使用應用可以直接點擊進入,在使用其他app不常用的app時,可以通過上方的查找區域進行搜索。

          目前已經使用1個月左右,之前也試過各種好看的小部件,最后還是以效率為出發點,將大部分的app放置在app資源庫中。

          在我們的認知中,手機桌面更像是一個應用程序的目錄。我們不會過多的在主屏幕停留,需要借助啟動圖標點擊進入應用進行操作,用戶打開某個桌面應用,在應用內進行操作;另一方面在當前app應用越來越多的現在,高頻應用與低頻應用混合,常常在使用時,陷入查找應用中,降低了信息獲取的效率。小部件的使用,使得用戶雖然還是不能在主屏幕界面進行數據處理,但小部件作為應用程序的擴展程序,用戶卻可以在不打開應用、無需加載等待的情況下,在主屏幕上快速獲取信息甚至進行簡單的操作,不得不說是在改變用戶長久以來的使用習慣。

          無論是Google從碎片的Android系統轉向物理設計體驗的Material Design設計語言來規范各家的開發。還是最早提出“One productfamily,One platform,One store”希望將手指與手機觸摸交互與鼠標指針交互的打通,保證多設備的一致性,但最后卻被自己各種花樣作死的微軟磁鐵設計。各家都在嘗試統一設計語言,以及交互感受。而這次iOS 14的,我們已經看到了蘋果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的聯動與融合,而小部件就是最重要的一步。

          文章來源:站酷  作者:9號自習室

          藍藍設計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主的情況。

          排行榜資源的建立

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

          1. 同系同門資源導流

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

          2.自建用戶體系

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

          3.偽造

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


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

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

          1.頁面tab

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

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

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

          2.圖標入口

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

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

          3.商品詳情頁榜單入口

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

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

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

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

          1.編輯推薦/小編推薦

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

          2.猜你喜歡/相關推薦

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

          3.年度總結排行榜

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

          4.TOP排行榜

          不知道大家小時候看沒看過《第10放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫。現在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的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名,另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系,增加了第一名的高度。(目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到)

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

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


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

          文章來源:站酷  作者:9號自習室

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


          JS入門數組處理實用方法總結

          前端達人

          join()方法:將數組中所有元素通過指定分隔符連接成一個字符串

          舉例:

          myArr.join('-') // 用'-'符號拼接  
          
          • 1

          concat()方法:將兩個數組或多個數組合并成一個數組

          舉例:

          myArr.concat(arr1, arr2, ..., arrN)  
          
          • 1

          注意:該方法不會改變現有的數組,所以可以和空數組合并實現復制舊數組,在操作新數組數據時不污染舊數組數據

          sort() 方法:用于對數組的元素進行排序

          如果調用該方法時沒有使用參數,將按字母順序對數組中的元素進行排序,說得更精確點,是按照字符編碼的順序進行排序。要實現這一點,首先應把數組的元素都轉換成字符串(如有必要),以便進行比較

          舉例:

          myArr.sort() // 按字母排序
          myArr.sort(function(a, b) {
              return a - b
          }) // 按數字升序,降序為b - a
          // 箭頭函數寫法
          myArr.sort((a, b) => a - b)  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          reverse() 方法:用于顛倒數組中元素的順序

          舉例:

          myArr.reverse()  
          
          • 1

          push() / unshift()方法:向數組的末尾 / 開頭添加一個或多個元素,并返回新的長度

          舉例:

          myArr.push(item1, item2, ..., itemN)
          myArr.unshift(item1, item2, ..., itemN)  
          
          • 1
          • 2

          shift()方法:刪除數組的第一個元素,并返回第一個元素的值

          舉例:

          myArr.shift()  
          
          • 1

          pop()方法:刪除數組的一個元素(默認最后一個元素),并且返回該元素的值

          舉例:

          myArr.pop() // 刪除數組最后一個元素
          myArr.pop(1) // 刪除數組中索引為1的元素  
          
          • 1
          • 2

          splice()方法:向/從數組中添加/刪除項目,然后返回被刪除的項目

          myArr.splice(index, count, item1, item2, ..., itemN)
          // index 必需。整數,規定添加/刪除項目的位置,使用負數可從數組結尾處規定位置
          // count 必需。要刪除的項目數量。如果設置為 0,則不會刪除項目
          // item1, item2, ..., itemN 可選。向數組添加的新項目  
          
          • 1
          • 2
          • 3
          • 4

          forEach()方法:方法用于調用數組的每個元素,并將元素傳遞給回調函數(相當于for循環)

          舉例:

          myArr.forEach(function (item, index, arr) {
              if (index === 3) {
                  item = 123
              } 
          }) // 循環數組,將索引為3的元素值更改為123
          // 箭頭函數寫法
          myArr.forEach((v, i, arr) => if (i === 3) { v = 123 })  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          注意:以下方法均不會對空數組進行檢測,不會改變原始數組

          indexOf()方法:查找數組是否存在某個元素,返回下標,沒有則返回-1

          舉例:

          myArr.indexOf(item)  
          
          • 1

          注意:indexOf() 方法對大小寫敏感!

          slice()方法:可提取字符串的某個部分,并以新的字符串返回被提取的部分(淺拷貝數組的元素)

          舉例:

          const newArr = myArr.slice(0, 1)
          // 截取數組myArr索引從0到1的部分元素
          // 參數:
          // begin(可選): 索引數值,接受負值,從該索引處開始提取原數組中的元素,默認值為0。
          // end(可選):索引數值(不包括),接受負值,在該索引處前結束提取原數組元素,默認值為數組末尾(包括最后一個元素)  
          
          • 1
          • 2
          • 3
          • 4
          • 5

          every()方法:用于檢測數組中的元素是否滿足指定條件(函數提供)(如某個值是否都為true)

          如果有一個元素不滿足,則整個表達式返回 false,且停止檢測;如果所有元素都滿足條件,則返回 true

          舉例:

          const state = myArr.every(function (item, index, arr) {
              return item > 10
          }) // 檢測數組myArr的所有元素是否都大于10,返回一個布爾值state
          // 箭頭函數寫法
          const state = myArr.every((v, i, arr) => v > 10)  
          
          • 1
          • 2
          • 3
          • 4
          • 5

          some()方法:用于檢測數組中的元素是否滿足指定條件(函數提供)(如某個值是否都為true)

          如果有一個元素滿足,則整個表達式返回 true ,且停止檢測;如果沒有滿足條件的元素,則返回false

          舉例:

          const state = myArr.some(function (item, index, arr) {
              return item > 10
          }) // 檢測數組myArr中是否存在元素大于10,返回一個布爾值state
          // 箭頭函數寫法
          const state = myArr.some((v, i, arr) => v > 10)  
          
          • 1
          • 2
          • 3
          • 4
          • 5

          includes()方法:用于判斷數組是否包含指定的值,如果找到匹配的值則返回 true,否則返回 false

          注意:includes() 方法區分大小寫
          參數:
          searchvalue:必需,要查找的值
          start:可選,設置從那個位置開始查找,默認為 0

          舉例:

          const state = myArr.includes(3) // 檢測數組myArr中是否存在元素3,返回一個布爾值state
          const state = myArr.includes(3, 3) // 從索引3開始檢測數組myArr中是否存在元素3,返回一個布爾值state  
          
          • 1
          • 2

          filter()方法:創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素

          舉例:

          const newArr = myArr.filter(function (item, index, arr) {
              return item > 10
          }) // 檢測數組myArr中所有元素都大于10的元素,返回一個新數組newArr
          // 箭頭函數寫法
          const newArr = myArr.filter((v, i, arr) => v > 10)  
          
          • 1
          • 2
          • 3
          • 4
          • 5

          map()方法:返回一個新數組,數組中的元素為原始數組元素調用函數處理后的值

          map()方法按照原始數組元素順序依次處理元素

          舉例:

          const newArr = myArr.map(function (item, index, arr) {
              return item * 10
          }) // 數組myArr中所有元素都乘于10,返回一個新數組newArr
          // 箭頭函數寫法
          const newArr = myArr.map((v, i, arr) => v * 10)  
          
          • 1
          • 2
          • 3
          • 4
          • 5

          舉例(用于數組嵌套對象的類型):

          const newArr = myArr.map(function (item, index, arr) {
              return {
                  id: item.id,
                  newItem: '123'
              }
          }) // 處理數組myArr中指定的對象元素里面的元素或新元素,返回一個新數組newArr
          // 箭頭函數寫法
          const newArr = myArr.map((v, i, arr) => {
              return {
                  id: v.id,
                  newItem: '123'
              }
          })  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          find() / findIndex()方法:返回通過測試(函數內判斷)的數組的第一個元素的 值 / 索引。如果沒有符合條件的元素返回 undefined / -1

          舉例:

          const val = myArr.find(function (item, index, arr) {
              return item > 10
          }) // 返回數組myArr中第一個大于10的元素的值val,沒有則返回undefined
          
          const val = myArr.findIndex(function (item, index, arr) {
              return item > 10
          }) // 返回數組myArr中第一個大于10的元素索引,沒有則返回-1  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          reduce()方法:返回一個新數組,數組中的元素為原始數組元素調用函數處理后的值

          這個方法接收兩個參數:要執行的函數,傳遞給函數的初始值
          要執行的函數(total, currentValue, currentValue, arr):
          total:必選,初始值, 或者計算結束后的返回值
          currentValue:必選,當前元素;
          currentValue:可選,當前元素索引;
          arr:可選,當前元素所屬的數組對象

          舉例1:

          const myArr = [1, 2, 3]
          const sum = myArr.reduce(function(pre, cur, index, arr) {
              console.log(pre, cur)
              return pre + cur
          })
          console.log(sum)
          // 輸出值分別為
          // 1, 2
          // 3, 3
          // 6  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10

          舉例2(設置初始迭代值):

          const myArr = [1, 2, 3]
          const sum = myArr.reduce(function(pre, cur, index, arr) {
              console.log(pre, cur)
              return prev + cur
          }, 2)
          console.log(sum)
          // 輸出值分別為
          // 2, 1
          // 3, 2
          // 5, 3
          // 8  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11

          應用:

          1.求和、求乘積
          const myArr = [1, 2, 3, 4]
          const result1 = myArr.reduce(function(pre, cur) {
            return pre + cur
          })
          const result2 = myArr.reduce(function(pre, cur) {
            return pre * cur
          })
          console.log(result1) // 6
          console.log(result2) // 24
          
          2.計算數組中每個元素出現的次數
          const myArr = ['liang','qi','qi','liang','ge','liang'] 
          const arrResult = myArr.reduce((pre,cur) =>{
              if(cur in pre){
                  pre[cur]++
              }else{
                  pre[cur] = 1
              }
              return pre
          },{})
          console.log(arrResult) // 結果:{liang: 3, qi: 2, ge: 1}
          
          3.對對象的屬性求和
          const myArr = [
              {
                  name: 'liangqi',
                  weigth: 55
              },{
                  name: 'mingming',
                  weigth: 66
              },{
                  name: 'lele',
                  weigth: 77
              }
          ]
          const result = myArr.reduce((a,b) =>{
              a = a + b.weigth
              return a
          },0)
          console.log(result) // 結果:198  
          
          • 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

          Array.of()方法:用于將一組值轉化為新數組

          舉例:

          Array.of() // []
          Array.of(undefined) // [undefined]
          Array.of(1) // [1]
          Array.of(1, 2) // [1, 2]  
          
          • 1
          • 2
          • 3
          • 4

          flat()方法:數組拍平方法也叫數組扁平化、數組拉平、數組降維,用于將嵌套的數組變成一維數組,返回一個新數組


          轉自:csdn論壇, 作者:Assam180


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


          前端復習總結HTML+CSS-超詳細,超全面

          前端達人

          一.HTML基礎

          1.網頁開發工具

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>


          (1)<!DOCTYPE >標簽

          • 它是文檔類型聲明,作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。
          • 聲明位于文檔中的最前面的位置,處于< html> 標簽之前。
          • 它不是一個HTML 標簽,是文檔類型聲明標簽。

          (2)lang語言

          • 用來定義當前文檔顯示的語言。
          • en定義語言為英語 , zh-CN定義語言為中文
          • 對于文檔顯示來說,定義成en的文檔也可以顯示中文,定義成zh-CN的文檔也可以顯示英文

          (3)charset 字符集

          • 字符集(Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。
          • 上面語法是必須要寫的代碼,否則可能引起亂碼的情況。一般情況下,統一使用“UTF-8”編碼。

          2.常用基本標簽

          (1)文本標簽

          • 標題
          <h1>標題一共六級選,</h1> <h2>文字加粗一行顯。</h2> <h3>由大到小依次減,</h3> <h4>從重到輕隨之變。</h4> <h5>語法規范書寫后,</h5> <h6>具體效果刷新見。</h6>  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          在這里插入圖片描述

          <h1 align="對齊方式">文本內容</h1>  
          
          • 1

          三種對齊方式:left,center,right

          • 文本

          在這里插入圖片描述

          上標與下標:

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>個人信息注冊</title> </head> <body> <h4 align="center">個人介紹 </h4> <table align="center"> <tr> <td>姓名</td> <td> <input type="text" value="請輸入您的姓名"> </td> </tr> <tr> <td>性別:</td> <td> <input type="radio" name="sex" id="nan" checked="checked"><label for="nan"><img src="images/up.jpg" width="10" /><input type="radio" name="sex" id="nv"><label for="nv"><img src="images/down.jpg" width="10" /></td> </tr> <tr> <td>出生日期:</td> <td> <select> <option>--請選擇年份--</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> </select> <select> <option>--請選擇月份--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <select> <option>--請選擇日--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> </tr> <tr> <td>籍貫</td> <td> <select> <option>北京</option> <option>重慶</option> <option selected="selected">山西</option> <option>山東</option> </td> </select> </tr> <tr> <td>個人愛好:</td> <td> <input type="checkbox" name="love">唱歌 <input type="checkbox" name="love">畫畫 <input type="checkbox" name="love">跳舞 </td> </tr> <tr> <td>求職原因</td> <td> <textarea cols="30" rows="10">對公司的描述</textarea> </td> </tr> <tr> <td>手機號:</td> <td><input type="text"></td> </tr> <tr> <td></td> <td> <input type="submit"> <input type="reset" value="重新填寫"> </td> </tr> <tr> <td>了解更多</td> <td><a href="#">關注公司</a> </td> </tr> <tr> <td>附件</td> <td> <h5>選拔標準</h5> <ul> <li>態度認真</li> <li>陽光開朗</li> <li>專業技能突出</li> </ul> </td> </tr> </table> </body> </html>


          轉自:csdn論壇, 作者:董宇燕


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


          網站seo具體怎么做?

          seo達人

           

          網站seo具體怎么做

          很多朋友學習了大量的網站seo教程,卻依舊不知道seo具體怎么做,無從下手,這是普遍情況,且不是個例。

          網站seo優化沒有嚴格的固定的套路,但有大致的步驟,以我的經驗總結具體步驟,還在學習seo或者剛接觸seo的朋友,可以參考。

          另外,新網站與老網站的seo優化點有所區別,本文以新上線的網站為主體。

          一:網站代碼優化具體設置。

           網站怎么做seo

          新網站已經上線,代碼方面是有具體的操作點的,包括但不限于:

          Robot.txt文件設置,告訴搜索引擎哪些內容需要被收錄,哪些內容不需要被收錄。

          典型的如合并css,網站代碼精簡、div與css分離,盡量少用JavaScript等。

          權重標簽不可或缺,典型的有H1標簽,alt標簽,strong標簽,B標簽等。

          網站TKD標簽的完善,具體有TITLE,DESCRIPTION,KEYWORDS。具體可參考seo教程自學網https://www.xminseo.com/每個頁面的tkd設置。

          Canonical標簽的引入。

          nofollow標簽的使用。

          網站sitemap地圖的制作,并在合適的地方放置地圖鏈接。

          網站面包屑導航的添加。

          百度搜索資源平臺網站驗證,主動推送和自動推送代碼的添加。

          網站統計類代碼如百度統計,或CNZZ的添加。

          百度熊掌號引入以及相應的頁面制作規范。

          網站首頁鏈接使用絕對地址。

          其他諸如防止頁面被轉碼代碼引入。

          作為新手seoer,有可能對以上部分代碼陌生,一般要求即使自己不會,但要看得懂,知道怎么用。如果是有經驗的seoer,則建議以上影響seo結果的代碼能使用的全部使用上。

          另外,以上是部分代碼優化內容而不是全部,僅僅適用于小型企業站。大型網站對代碼有著更高的優化需求。

          二:網站關鍵詞seo做法。

          新網站上線怎么做seo

          做seo,很大程度上就是做關鍵詞排名,這個點顯得尤為重要,將合適的關鍵詞做到合適的位置,seo就成功了一大半,細化的關鍵詞類優化點有很多,具體如下:

          拓展關鍵詞,利用相關工具如下拉框,底部推薦,5118,站長工具,愛站工具,乃至百度關鍵詞規劃師等工具,盡量拓展與自己行業相關的,有人搜索的,有指數的關鍵詞,并做好關鍵詞庫表。

          關鍵詞布局,原則是有以下具體操作點,如重要的位置放置重要的關鍵詞,每一個頁面的關鍵詞設置應不盡相同,網站首頁用強相關的思想調用與目標關鍵詞相關的長尾詞。

          規律性更新,有規律的更新網站內容是必要且必須的。

          收錄工作,將未收錄的頁面通過推送,提交,ping等方式,促進收錄。

          網站內鏈建設,合適的調用方式將增加頁面的價值。

          三:網站外鏈建設。

          seo具體怎么做

          沒有其他網站的投票,做seo就顯得蒼白無力,坊間流傳的外鏈無用論不知誤導了多少人,外鏈的作用就是投票,外鏈建設是必要的。

          外鏈建設的具體做法有很多,包括但不限于:

          友情鏈接交換,相關性強的友鏈是高質量的外鏈。

          自己發外鏈,通過相應的工具,挖掘能發外鏈的高質量平臺,并按計劃發外鏈。

          購買外鏈,不用擔心所謂的綠蘿算法,合適的價格購買合適的外鏈仍然是外鏈建設的必要途徑。

          利用高質量內容引導用戶對你的外鏈進行自然傳播。

          四:怎么做數據化的seo?

          新網站怎么做seo

          沒有數據支撐的seo工作是茫然不知所措的,數據化的seo才是科學seo。

          在第一點網站代碼具體設置中,為網站安裝了相應的統計工具,通過工具查看網站的各項數據如流量,新老訪客,關鍵詞排名等,通過數據分析網站的不足與優勢是重點工作。

          seo教程自學網點評:

          筆者操作過不同類型的站點,相對來講企業站做目標關鍵詞是更為簡單的。很多人都說做seo就是做內容,做外鏈,筆者反問一個問題,怎么具體做內容?怎么具體做外鏈?科學的合理的操作手法,就能讓你的seo工作產生成效。以上具體的seo操作點,能解決大部分朋友的問題,當然,前提是你真正看懂了其中的一些知識點。

             來源:網站seo具體怎么做 

           

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

          關鍵詞是什么意思?

          seo達人

           

          用戶只有通過關鍵詞搜索,才能找到滿足自己需求的結果。關鍵詞優化的好與壞,關系到seoer最關注的排名的好與壞,關系到需求覆蓋范圍的大與小。因此,從seo角度來講,關鍵詞是一個特別重要的概念。另外一方面,關鍵詞是一個比較基礎的概念。筆者認為,較基礎的seo知識越發重要。本文從多個角度闡述關鍵詞是什么意思。

          網站關鍵詞是什么意思?


          一:什么是關鍵詞?

          從百科的定義來看,關鍵詞是英文“keywords”的翻譯結果,其是圖書館學中的詞匯,指的是用戶在搜索引擎中鍵入的,表達用戶個體需求的詞匯。從wikipedia的定義來看,它的意思是用戶獲取信息的一種精簡的詞匯。實際上,這兩個定義所表達的意思是一樣的,只是在表述上不同罷了。假設你在使用百度,你想通過某個關鍵詞獲取信息,那么你鍵入的詞匯都可以叫做關鍵詞。

          這里需要注意的是:關鍵詞是用戶需求的一個載體,是用戶當前需求的一個精簡詞匯。這也較好理解,因為用戶一般情況下不會通過輸入大段文字尋找結果,只會通過能體現核心思想的詞匯尋找結果或者答案。

          二:關鍵詞和搜索引擎的關系。

          我們做seo,一方面要將關鍵詞,圖片,多媒體等內容組成的網頁給用戶看,另外一方面,也要給搜索引擎看。只有搜索引擎看到了,并對當前網頁建立索引,才有可能呈現給用戶。因此,必然要清楚關鍵詞與搜索引擎的關系。

          先看看搜索引擎的工作原理,具體可概括為爬行和抓取—》建立索引—》搜索詞處理—》排序。搜索引擎蜘蛛無時無刻不在爬行和抓取新鮮網頁內容,在此之后,會對有價值的網頁內容建立索引,當用戶在搜索引擎中輸入關鍵詞后,會通過分詞等技術了解用戶的真實搜索意圖,并在結果中以排序的方式為用戶提供列表型的結果。

          如果我們了解搜索引擎工作原理,我們就會知曉關鍵詞的重要性?,F目前的技術條件下,搜索引擎只能識別文字內容,而文字內容又是由單個的關鍵詞匯組成的。關鍵詞是搜索引擎能工作的前提,多個關鍵詞組成的內容是滿足用戶需求的必要條件。

          三:關鍵詞分類。

          不同的維度下,關鍵詞有不同的種類。嚴格意義來區分,我們把關鍵詞分為詞根,詞干,以及詞葉。

          根據樹形法則對關鍵詞分類,把關鍵詞想象成大樹:

          假設詞根是seo,那么詞干就是seo是什么,seo教程,seo培訓等,詞葉就是seo是什么意思,哪家seo培訓好等長尾詞。

          有必要指出的是,表面來看,詞根,詞干,詞葉的搜索量應該是從大到小的,但從實際來看,長尾詞帶來的流量會遠大于詞根的流量,也就是我們俗稱的二八理論。詞根的搜索量是大,但詞根的數量有限;長尾詞的搜索量很小,但不用的細分長尾關鍵詞代表了海量的用戶需求,這些需求匯集一起,其搜索量總和就會大于詞根的流量。

          四:網站如何布局關鍵詞。

          關于怎么把關鍵詞布局到網頁中,百度搜索引擎優化指南已經有明確說明,在此贅述:

          首頁:網站名稱 – 產品A_產品B。

          欄目頁:欄目名稱 – 網站名稱。

          內容頁:內容標題_欄目名稱_網站名稱。

          這是百度關于關鍵詞布局的官方說法,實際來看,各類型網站關鍵詞布局不盡相同,在此,我們提供一個確切有效的布局原則:相關性。

          你在布局網站關鍵詞的時候,要注意當前主題的相關性,圍繞當前主題進行關鍵詞建設,切不可偏離主題。將合適的關鍵詞,布局到合適網頁的合適位置,就可以達到這個目標。

          點評:

          以上,系統講解了什么是關鍵詞。關鍵詞是seo的基礎知識之一,也是最重要的概念。深入理解這一概念,將對于你深化seo技術產生重大影響。關鍵詞排名是seo的重要工作內容。無論你的seo理論如何豐富,但不經過實踐,網站關鍵詞不能達到預期排名,那么你所學到的seo技術,理論都是蒼白的。

           

          文章來源:SEO 教程


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


           

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          周周


          不知道大家有沒有被說過,設計做的不精致?拿圖標舉例,其實不精致的原因就是統一性沒做好。我們總說做圖標要統一,但是到底要統一哪些要素?有沒有一個完整的自檢表呢?以前我總結了 5 到 6 個要統一的要素,最近觀察大家的練習之后,直接擴增到 9 個了,今天就以線形圖標為例,看看我們需要統一哪 9 個要素。

          大綱如下:

          1. 大小統一
          2. 圓角統一
          3. 語言統一
          4. 粗細統一
          5. 疏密統一
          6. 間距統一
          7. 比例統一
          8. 正負形統一
          9. 角度統一

          大小統一

          這個很容易理解,就是一組圖標看起來大小是一致的。但是最近發現了一個比較重要的點,就是很多同學做一組練習,相鄰的圖標都差不太多,但是隔的比較遠的圖標放在一起就差很多了,比如下面這幾個圖標,就是逐漸變大的:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          所以對于大小統一,我們必須要做到,一組圖標里,任意兩個圖標拿出來都是大小統一的,否則就是不及格。

          保持大小統一的方法見這篇 – 圖標設計規范。

          圓角統一

          圓角統一也是比較好理解的點,無非就是圓角大小,像下面這兩個圖標:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          如果圓角差很多,你很容易發現,因為都是差不多大小的矩形,但是我們很容易忽略一些細節,比如下面第一個圖標的三角形,和旁邊的日歷相比,就過于尖銳:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          這是圖標里面很細的細節,所以容易被忽視,大家一定要重視。

          語言統一

          語言統一你可以理解為設計風格統一,如果一組圖標里面出現了多種風格,那會顯得非常不專業。

          比如下面這組練習:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          大體看好像是一種語言,但仔細觀察其實還是有很多細節不統一的,比如外輪廓上面有的有白色,有的沒有,白色還分帶描邊和不帶描邊:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          這就是在語言上不統一的案例,大家在做練習的時候,一定要想清楚你的語言是什么。

          粗細統一

          粗細統一就不用說了吧,基本就是用在線性圖標線條粗的,比如像這種比較明顯的粗細不一致,就不應該出現了:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          這都是最最基礎的問題。

          疏密統一

          疏密統一其實是很多新人朋友容易犯的錯,比如下面這一組圖標:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          大部分地方是比較透氣疏松的,但是只有第二個比較密集,這樣就會讓人感覺比較突兀,整體不夠和諧。這就是疏密程度的統一性,一定要把握住節奏感,否則就會不舒服。

          間距統一

          這個點一般用在斷線圖標上,也就是你開口大小的統一性,比如一個開很大,一個開很?。?

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          那就證明細節沒有做到位。

          比例統一

          比例可以分很多種,比如顏色比例,像下面這個原作的顏色比例就沒有太統一:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          在小 y 優化臨摹之后,達到了顏色比例的平衡:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          再比如之前說的一個案例,粗細線條的比例:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          • 第一個圖標,粗線與細線的比例:95:5
          • 第二個圖標,粗線與細線的比例:70:30
          • 第三個圖標,粗線與細線的比例:100:0

          在這樣不統一的情況下,圖標是一定不會精致的。這些都是比例統一問題出現的實際場景。

          正負形統一

          正負形也是沒那么容易看出來的,舉個例子,下面這組周楠做的圖標,乍一看沒什么問題,但是仔細一觀察,其實我們會發現,白色面積的重量其實是不統一的,那個消息上面的“#”會偏重一點:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          當優化之后,我們再看:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          整體就會比之前統一精致很多。

          角度統一

          角度,也是增加圖標統一感的因素之一,最常見的角度統一方式就是按照一定的倍數來制定規范,比如 30 度的倍數:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          再舉一個角度其他方面的例子,在做下面這組圖標的時候,最初沒有考慮斷線的規律:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          所以看久了會覺得有些凌亂,于是我將斷線處定為右下角 45 度,如遇到圓角拐角處,可挪動靠近拐角處進行斷線:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          這樣我們就會看到所有的圖標斷線位置都大致出現在右下角的地方,最終效果如下:

          圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

          很大程度上提高了圖標的統一性,并且在延展執行的時候節省了大量的思考時間(思考在哪里斷)。

          但是對于斷線的位置是否一定要規定其出現的角度,我覺得不一定,也可以從其他角度考慮,但最終的目的還是讓整體統一和諧,且延展性高。

          總結

          以上就是目前總結的 9 個需要統一的點,只要能把所有的統一性做好,精致一定是沒問題的。






          文章來源:優設網     作者:菜心設計鋪



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



          9招,提升設計中的空間感!

          ui設計分享達人

          空間感是指藝術形象通過一定手法引起的類似現實空間的審美感受。包括作品直接表現的空間和作品具體形象之外的使人想象到的空間。這種空間感,一定程度上決定著版面的視覺效果與美感。巧妙的利用空間,可以集中觀眾的注意力,豐富的層次感使作品更具觀賞性,同時又可以讓作品主次分明,更有效的傳達信息。

          通過對設計作品的參考分析,設計師深??偨Y了營造空間感的方法,大致分為以下九個類別,希望這篇文章能對大家有所幫助。



          一、遮前掩后

          “遮前掩后”的意思是:通過畫面設計元素之間的遮擋,交代空間關系,從而產生一定的空間感。這種形式可能空間感較弱,但易于表達,可以使文字和圖片更好的結合。


          設計時為了保證信息的傳達,普遍會選擇將文字信息完整的展示出來。其實像上面兩個案例一樣,適當使用遮擋關系,反而能讓文字與圖像結合的更好。

          人的大腦有“慣性閱讀”的能力,這使得即使文字被遮擋,也不會影響太多識別性。


          利用蒙版,然后局部破出,這也是營造空間感常用的手法。本質上,這也屬于使用遮擋關系的一種方式,這種效果空間感更強,讓觀眾有一種打破次元壁的感覺。

          使用這種樣式時需要注意:用作蒙版的圖形或文字,必須簡潔,并且識別性足夠高,否則會影響信息的傳達。



          二、以小見大

          “以小見大”指的是:利用近大遠小、近疏遠密的基本透視原理,來營造空間感的一種方式。

          在平面設計中,面積大的元素使我們感覺更近,面積小的感覺更遠,即使是單一的設計元素,只要遵循基本的透視原理,也能塑造出空間感。


          從這兩個案例可以看出,元素的面積大小變化越大,空間的縱深感就越強;通過控制元素之間的位置關系,可以使空間看起來平整或者曲折,表現力非常豐富。



          三、山重水復

          “山重水復”是“以小見大”的進階版,同樣是利用近大遠小的物理規律,塑造空間感。不同的是,通過元素的無限重復,會讓空間感更強,對排版的把控能力也要求更高一些。


          重復的元素會讓畫面有很強的沖擊力,強烈的空間感讓觀眾仿佛在無限的跌落。使用這種版式一定要注意近疏遠密的空間關系,否則會降低畫面的可信度。



          四、橫峰側嶺

          “橫峰側嶺”是指:通過變形,改變元素的透視,在整個版面中塑造多個平面,以此來增強作品的空間感。


          將同一平面的元素對齊,創造出虛擬的邊界線,借助這些參考線來塑造不同方向的平面。如果覺得空間感不夠強烈,可以借助輔助線加強透視。使用這種形式的重點在于,要注意閱讀順序和空間平面之間的關系,不要為了畫面,一味地堆砌空間,信息的傳達永遠都是最重要的。


          最近非常流行的立體效果,因為空間感強,很容易出效果,深受設計師們喜愛。其實這種類型也是通過透視和多個平面來塑造空間感,制作時大多需要3D軟件進行輔助,才能實現如此真實的透視效果。



          五、冰厚三尺

          “冰厚三尺”指的是通過給元素添加厚度,增強元素的立體感,從而提升空間感。這是一種非常簡單粗暴的方式,立體化后的元素,可以展現更多的角度,使排版方式更加多變,畫面也更加靈動。


          最常見的2.5D風格,去除了透視感,依靠立體元素來營造空間感,可以使整個版面更加穩定和諧。有些設計師還會引入矛盾空間,讓設計作品看起來更有趣味性,吸引用戶目光。



          六、潛蹤隱跡

          “潛蹤隱跡”的意思是:通過改變透明度,模擬霧中的物體,距離越遠的元素可見度越低,從而營造出空間感。


          在中國傳統國畫中,就會通過控制水墨的濃淡,來展現畫面的空間感。因此這種方法很適合中國風的設計,讓整個作品富有神秘、幽寂的氣質。



          七、霧里看花

          “霧里看花”和“潛蹤隱跡”很相似,通過虛實的變化,模擬現實世界中的景深效果,從而塑造空間感。這種方法是最常見的,也是最出效果的,在塑造空間感的同時,還可以強調主體信息。


          在對版面元素進行模糊處理的時候,要考慮元素與焦點的位置關系:距離焦點越遠,模糊程度越高,普遍情況下,會將最主要的視覺元素作為焦點,保證信息的準確傳達。



          八、浮光掠影

          有光的地方就存在影子,投影本就是空間感的一種直接反應,“浮光掠影”就是利用光影的變化,在平面中營造視覺上的空間感。


          光影的變化非常豐富,因此,光影的表現方式也是五花八門。殊途同歸的是,所有的光影都是為空間感服務的,所以大多數情況下,都要遵循現實世界中的規律,確定一個光源,保證整個畫面的光影統一。



          九、鏡花水月

          隨著軟件功能越來越強大,重現現實世界越來越容易?!扮R花水月”指的就是:參考現實世界的折射、反射等自然現象,在平面空間塑造空間感。這種方式看起來質感很強,效果也非常酷炫。


          需要注意的是:在設計之前一定要考慮好效果與內容的關系,一味的堆加效果,除了炫技毫無價值。

          文章來源:站酷  作者:設計師深海

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


          日歷

          鏈接

          個人資料

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

          存檔

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