<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設計分享達人

          交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力(無論是精神上還是物理上)。

          理想情況下,我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本,并且是檢驗可用性的里程碑。

          不幸的是,由于大多數站點和應用程序都提供了用戶可能想要做的許多事情,因此很少能達到零交互成本。大多數時候,用戶必須四處瀏覽,閱讀,可能滾動,找到有希望的鏈接,單擊它,等待頁面加載,然后重新進行整個過程。有時,一個新窗口可能會在現有窗口的頂部彈出,在這種情況下,用戶必須將注意力轉移到新窗口上,也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下,用戶可能需要記住一頁上的信息,然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。

          可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說,它們最小化:

          • 閱讀

          • 滾動

          • 環顧四周以查找相關信息

          • 理解提供的信息

          • 單擊或觸摸(不會出錯)

          • 打字

          • 頁面加載和等待時間

          • 注意開關

          • 內存負載-用戶必須記住的信息才能完成其任務


          這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如,閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難,而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道,但是如果蜂窩網絡覆蓋較慢,則移動設備上的頁面加載可能會花費很長時間。

          許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如,網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。

          交互成本示例

          讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本,并且在啟動Dictionary應用程序后立即開始分析。

          啟動應用程序后出現的第一件事是啟動屏幕。


          在這一點上,交互成本包括等待幾秒鐘,以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間:


          在此頁面上,互動成本來自定位搜索框。幸運的是,搜索框非常顯眼地位于頁面頂部,因此我們可以放心地認為,用戶只需很少的精力就可以找到它。找到后,用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標,因此交互成本也可能會降至最低。


          接下來,用戶必須編輯搜索查詢。

          當輸入焦點在搜索字段中移動時,自動建議的詞將自動顯示。

          用戶必須查看自動建議并確定它們不相關,然后清除當前查詢。他們可以通過按右側的灰色x按鈕(如果他們熟悉iOS規則)來執行此操作,也可以通過按觸摸屏上的Delete鍵來逐個清除字符。

          刪除后,用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時,關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。


          選擇(或鍵入)單詞“ ceremony”后,用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面:


          用戶必須推斷Origin可能包含有關單詞來源的信息。(對于大多數用戶而言,這是一個簡單的推論,因此認知成本很低;但是,如果改用“詞源”一詞,則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩;因此,“來源”是更好的選擇,因為它降低了交互成本。)



          讓我們總結一下交互成本的各個組成部分,以找到“儀式”一詞的由來:

          1. 等待啟動頁面

          2. 搜索

            1. 輸入幾個字符

            2. 掃描自動提示列表,以查看所需單詞是否在其中

            3. 如果否,請輸入更多字符并在上一步中重復

            4. 如果是,請通過點擊選擇所需的單詞

            5. 找到搜索框,然后點擊將輸入焦點移至該搜索框

            6. 閱讀搜索框中顯示的查詢和自動建議

            7. 決定查詢不相關

            8. 刪除搜索框中顯示的查詢

            9. 鍵入或選擇自動建議

            10. 點擊搜索

          3. 等待結果頁面

          4. 在結果頁面上找到相關的詞源信息

            1. 向下滾動頁面并掃描內容以查找詞源信息

            2. 找到標簽并閱讀

            3. 請注意,右側還有更多隱藏的標簽

            4. 推斷詞源可能是隱藏的標簽之一

            5. 注意到滑動會向右暴露內容

            6. 向右滑動

            7. 閱讀Origin并將該單詞與目標聯系起來,以找到單詞的來源

            8. 點擊詞源

          5. 了解“儀式”一詞的來源

          如您所見,一個相當簡單而輕松的過程需要很多步驟和子步驟;他們每個人都會產生互動費用。對于某些人而言,交互成本微不足道-例如,記住人們向右滑動即可顯示更多內容,因此交互成本非常低,因為人們在移動設備或Web上已經多次遇到水平滾動??梢詢灮渌襟E以最小化交互成本;因此,在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣,將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。(當然,選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。)


          預期效用

          請注意,對于前面各節中的某些步驟,用戶可以有多種選擇。例如,他們可以按灰色的x按鈕刪除當前字符串,也可以多次使用Delete鍵?;蛘?,他們可以從自動建議列表中選擇建議,也可以在最后輸入字符串。

          人們如何決定采取哪種行動?答案在于預期效用的概念:

          預期效用=預期收益–預期交互成本

          用戶嘗試最大化一項操作的預期效用:換句話說,他們權衡了每個操作的收益和成本,然后選擇收益與成本之間最佳平衡的方案。

          當有幾種方法可以實現具有相似利益的相同目標時,用戶通常傾向于選擇使估計的交互成本最小的操作。



          例如,許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞,而是可能會再鍵入一個(或幾個)字符,直到可見“儀式”一詞為止,因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。


          這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標,則除非與初始站點進行交互的收益確實很高,否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子,如果用戶真的想購買Apple電腦,他們可能會堅持使用Apple的網站,因為他們不太可能在其他地方購買。在這種情況下,用戶的動機確實很高,因此他們可能愿意忍受很高的交互成本。但是,如果用戶要購買燒烤架,則可能不在乎是否從Home Depot或Lowe's或其他站點購買,并且會離開互動成本高的站點。

          營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益;可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。

          為什么您應該關心交互成本

          交互成本是可用性直接度量。實際上,該概念早在人機交互時就被引入,以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。

          從長遠來看,快速評估設計的交互成本可以節省大量資金,因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間比較工具:通常,將交互成本最小化的方案具有更大的成功機會。

          文章來源:站酷 作者:ZZiUP

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


          一文帶你了解如何排查內存泄漏導致的頁面卡頓現象

          前端達人

          不知道在座的各位有沒有被問到過這樣一個問題:如果頁面卡頓,你覺得可能是什么原因造成的?有什么辦法鎖定原因并解決嗎?

          這是一個非常寬泛而又有深度的問題,他涉及到很多的頁面性能優化問題,我依稀還記得當初面試被問到這個問題時我是這么回答的:

          1. 先會檢查是否是網絡請求太多,導致數據返回較慢,可以適當做一些緩存
          2. 也有可能是某塊資源的bundle太大,可以考慮拆分一下
          3. 然后排查一下js代碼,是不是某處有過多循環導致占用主線程時間過長
          4. 瀏覽器某幀渲染的東西太多,導致的卡頓
          5. 在頁面渲染過程中,可能有很多重復的重排重繪
          6. emmmmmm…不知道了

          后來了解到了,感官上的長時間運行頁面卡頓也有可能是因為內存泄漏引起的

          內存泄漏的定義

          那什么是內存泄漏呢?借助別的大佬給出的定義,內存泄漏就是指由于疏忽或者程序的某些錯誤造成未能釋放已經不再使用的內存的情況。簡單來講就是假設某個變量占用100M的內存,而你又用不到這個變量,但是這個變量沒有被手動的回收或自動回收,即仍然占用100M的內存空間,這就是一種內存的浪費,即內存泄漏

          JS的數據存儲

          JavaScript的內存空間分為棧內存堆內存,前者用來存放一些簡單變量,后者用來存放復雜對象

          • 簡單變量指的是JS的基本數據類型,例如:String、Number、Boolean、null、undefinedSymbol、BigInt
          • 復雜對象指的是JS的引用數據類型,例如:Object、Array、Function

          JS垃圾回收機制

          根據內存泄漏的定義,有些變量或數據不再被使用或不需要了,那么它就是垃圾變量或垃圾數據,如果其一直保存在內存中,最終可能會導致內存占用過多的情況。那么此時就需要對這些垃圾數據進行回收,這里引入了垃圾回收機制的概念

          垃圾回收的機制分為手動自動兩種

          例如C/C++采用的就是手動回收的機制,即先用代碼為某個變量分配一定的內存,然后在不需要了后,再用代碼手動釋放掉內存

          JavaScript采用的則是自動回收的機制,即我們不需要關心何時為變量分配多大的內存,也不需要關心何時去釋放內存,因為這一切都是自動的。但這不表示我們不需要關心內存的管理!?。?!否則也不會有本文討論的內存泄露了

          接下來就講一下JavaScript的垃圾回收機制

          通常全局狀態(window)下的變量是不會被自動回收的,所以我們來討論一下局部作用域下的內存回收情況

          function fn1 () { let a = { name: '零一' } let b = 3 function fn2() { let c = [1, 2, 3] } fn2() return a } let res = fn1() 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17

          以上代碼的調用棧如下圖所示:

          img

          圖中左側為棧空間,用于存放一些執行上下文和基本類型數據;右側為堆空間,用于存放一些復雜對象數據

          當代碼執行到fn2()時,??臻g內的執行上下文從上往下依次是 fn2函數執行上下文 => fn1函數執行上下文 => 全局執行上下文

          fn2函數內部執行完畢以后,就該退出fn2函數執行上下文了,即箭頭向下移動,此時fn2函數執行上下文會被清除并釋放棧內存空間,如圖所示:

          img

          fn1函數內部執行完畢以后,就該退出fn1函數執行上下文了,即箭頭再向下移動,此時fn1函數執行上下文會被清除并釋放相應的棧內存空間,如圖所示:

          img

          此時處于全局的執行上下文中。JavaScript的垃圾回收器會每隔一段時間遍歷調用棧,假設此時觸發了垃圾回收機制,當遍歷調用棧時發現變量b和變量c沒有被任何變量所引用,所以認定它們是垃圾數據并給它們打上標記。因為fn1函數執行完后將變量a返回了出去,并存儲在全局變量res中,所以認定其為活動數據并打上相應標記。待空閑時刻就會將標記上垃圾數據的變量給全部清除掉,釋放相應的內存,如圖所示:

          img

          從這我們得出幾點結論:

          1. JavaScript的垃圾回收機制是自動執行的,并且會通過標記來識別并清除垃圾數據
          2. 在離開局部作用域后,若該作用域內的變量沒有被外部作用域所引用,則在后續會被清除

          補充: JavaScript的垃圾回收機制有著很多的步驟,上述只講到了標記-清除,其實還有其它的過程,這里簡單介紹一下就不展開討論了。例如:標記-整理,在清空部分垃圾數據后釋放了一定的內存空間后會可能會留下大面積的不連續內存片段,導致后續可能無法為某些對象分配連續內存,此時需要整理一下內存空間;交替執行,因為JavaScript是運行在主線程上的,所以執行垃圾回收機制時會暫停js的運行,若垃圾回收執行時間過長,則會給用戶帶來明顯的卡頓現象,所以垃圾回收機制會被分成一個個的小任務,穿插在js任務之中,即交替執行,盡可能得保證不會帶來明顯的卡頓感

          Chrome devTools查看內存情況

          在了解一些常見的內存泄漏的場景之前,先簡單介紹一下如何使用Chrome的開發者工具來查看js內存情況

          首先打開Chrome的無痕模式,這樣做的目的是為了屏蔽掉Chrome插件對我們之后測試內存占用情況的影響

          img

          然后打開開發者工具,找到Performance這一欄,可以看到其內部帶著一些功能按鈕,例如:開始錄制按鈕;刷新頁面按鈕;清空記錄按鈕;記錄并可視化js內存、節點、事件監聽器按鈕;觸發垃圾回收機制按鈕等等

          img

          簡單錄制一下百度頁面,看看我們能獲得什么,如下動圖所示:

          img

          從上圖中我們可以看到,在頁面從零到加載完成這個過程中JS Heap(js堆內存)、documents(文檔)、Nodes(DOM節點)、Listeners(監聽器)、GPU memory(GPU內存)的最低值、最高值以及隨時間的走勢曲線,這也是我們主要關注的點

          再來看看開發者工具中的Memory一欄,其主要是用于記錄頁面堆內存的具體情況以及js堆內存隨加載時間線動態的分配情況

          img

          堆快照就像照相機一樣,能記錄你當前頁面的堆內存情況,每快照一次就會產生一條快照記錄,如圖所示:

          img

          如上圖所示,剛開始執行了一次快照,記錄了當時堆內存空間占用為13.9MB,然后我們點擊了頁面中某些按鈕,又執行一次快照,記錄了當時堆內存空間占用為13.4MB。并且點擊對應的快照記錄,能看到當時所有內存中的變量情況(結構、占總占用內存的百分比…)

          然后我們還可以看一下頁面動態的內存變化情況,如圖所示:

          img

          在開始記錄后,我們可以看到圖中右上角有起伏的藍色與灰色的柱形圖,其中藍色表示當前時間線下占用著的內存;灰色表示之前占用的內存空間已被清除釋放。

          從上圖過程來看,我們可以看到剛開始處于的tab所對應顯示的頁面中占用了一定的堆內存空間,成藍色柱形,在點擊別的tab后,原tab對應的內容消失,并且原來藍色的柱形變成灰色(表示原占用的內存空間得到了釋放),同時新tab所對應顯示的頁面也占用了一定的堆內存空間。因此后續我們就可以針對這個圖來查看內存的占用與清除情況

          內存泄漏的場景

          那么到底有哪些情況會出現內存泄漏的情況呢?這里列舉了常見的幾種:

          1. 閉包使用不當引起內存泄漏
          2. 全局變量
          3. 分離的DOM節點
          4. 控制臺的打印
          5. 遺忘的定時器

          接下來介紹一下各種情況,并嘗試用剛才講到的兩種方法來捕捉問題所在

          1.閉包使用不當

          文章開頭的例子中,在退出fn1函數執行上下文后,該上下文中的變量a本應被當作垃圾數據給回收掉,但因fn1函數最終將變量a返回并賦值給全局變量res,其產生了對變量a的引用,所以變量a被標記為活動變量并一直占用著相應的內存,假設變量res后續用不到,這就算是一種閉包使用不當的例子

          接下來嘗試使用PerformanceMemory來查看一下閉包導致的內存泄漏問題,為了使內存泄漏的結果更加明顯,我們稍微改動一下文章開頭的例子,代碼如下:

          <button onclick="myClick()">執行fn1函數</button> <script> function fn1 () { let a = new Array(10000) // 這里設置了一個很大的數組對象 let b = 3 function fn2() { let c = [1, 2, 3] } fn2() return a } let res = [] function myClick() { res.push(fn1()) } </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22

          設置了一個按鈕,每次執行就會將fn1函數的返回值添加到全局數組變量res中,是為了能在performacne的曲線圖中看出效果,如圖所示:

          img

          在每次錄制開始時手動觸發一次垃圾回收機制,這是為了確認一個初始的堆內存基準線,便于后面的對比,然后我們點擊了幾次按鈕,即往全局數組變量res中添加了幾個比較大的數組對象,最后再觸發一次垃圾回收,發現錄制結果的JS Heap曲線剛開始成階梯式上升的,最后的曲線的高度比基準線要高,說明可能是存在內存泄漏的問題

          在得知有內存泄漏的情況存在時,我們可以改用Memory來更明確得確認問題和定位問題

          首先可以用Allocation instrumentation on timeline來確認問題,如下圖所示:

          img

          在我們每次點擊按鈕后,動態內存分配情況圖上都會出現一個藍色的柱形,并且在我們觸發垃圾回收后,藍色柱形都沒變成灰色柱形,即之前分配的內存并未被清除

          所以此時我們就可以更明確得確認內存泄漏的問題是存在的了,接下來就精準定位問題,可以利用Heap snapshot來定位問題,如圖所示:

          img

          第一次先點擊快照記錄初始的內存情況,然后我們多次點擊按鈕后再次點擊快照,記錄此時的內存情況,發現從原來的1.1M內存空間變成了1.4M內存空間,然后我們選中第二條快照記錄,可以看到右上角有個All objects的字段,其表示展示的是當前選中的快照記錄所有對象的分配情況,而我們想要知道的是第二條快照與第一條快照的區別在哪,所以選擇Object allocated between Snapshot1 and Snapshot2,即展示第一條快照和第二條快照存在差異的內存對象分配情況,此時可以看到Array的百分比很高,初步可以判斷是該變量存在問題,點擊查看詳情后就能查看到該變量對應的具體數據了

          以上就是一個判斷閉包帶來內存泄漏問題并簡單定位的方法了

          2.全局變量

          全局的變量一般是不會被垃圾回收掉的,在文章開頭也提到過了。當然這并不是說變量都不能存在全局,只是有時候會因為疏忽而導致某些變量流失到全局,例如未聲明變量,卻直接對某變量進行賦值,就會導致該變量在全局創建,如下所示:

          function fn1() { // 此處變量name未被聲明 name = new Array(99999999) } fn1() 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          此時這種情況就會在全局自動創建一個變量name,并將一個很大的數組賦值給name,又因為是全局變量,所以該內存空間就一直不會被釋放

          解決辦法的話,自己平時要多加注意,不要在變量未聲明前賦值,或者也可以開啟嚴格模式,這樣就會在不知情犯錯時,收到報錯警告,例如:

          function fn1() { 'use strict'; name = new Array(99999999) } fn1() 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          3.分離的DOM節點

          什么叫DOM節點?假設你手動移除了某個dom節點,本應釋放該dom節點所占用的內存,但卻因為疏忽導致某處代碼仍對該被移除節點有引用,最終導致該節點所占內存無法被釋放,例如這種情況:

          
          

          改動很簡單,就是將對.child節點的引用移動到了click事件的回調函數中,那么當移除節點并退出回調函數的執行上文后就會自動清除對該節點的引用,那么自然就不會存在內存泄漏的情況了,我們來驗證一下,如下圖所示:

          img

          結果很明顯,這樣處理過后就不存在內存泄漏的情況了

          4.控制臺的打印

          控制臺的打印也會造成內存泄漏嗎????是的呀,如果瀏覽器不一直保存著我們打印對象的信息,我們為何能在每次打開控制的Console時看到具體的數據呢?先來看一段測試代碼:

          <button>按鈕</button> <script> document.querySelector('button').addEventListener('click', function() { let obj = new Array(1000000) console.log(obj); }) </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8

          我們在按鈕的點擊回調事件中創建了一個很大的數組對象并打印,用performance來驗證一下:

          img

          開始錄制,先觸發一次垃圾回收清除初始的內存,然后點擊三次按鈕,即執行了三次點擊事件,最后再觸發一次垃圾回收。查看錄制結果發現JS Heap曲線成階梯上升,并且最終保持的高度比初始基準線高很多,這說明每次執行點擊事件創建的很大的數組對象obj都因為console.log被瀏覽器保存了下來并且無法被回收

          接下來注釋掉console.log,再來看一下結果:

          <button>按鈕</button> <script> document.querySelector('button').addEventListener('click', function() { let obj = new Array(1000000) // console.log(obj); }) </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8

          performance如圖所示:

          img

          可以看到沒有打印以后,每次創建的obj都立馬被銷毀了,并且最終觸發垃圾回收機制后跟初始的基準線同樣高,說明已經不存在內存泄漏的現象了

          其實同理,console.log也可以用Memory來進一步驗證

          • 未注釋console.log

          img

          • 注釋掉了console.log

          img

          最后簡單總結一下:在開發環境下,可以使用控制臺打印便于調試,但是在生產環境下,盡可能得不要在控制臺打印數據。所以我們經常會在代碼中看到類似如下的操作:

          // 如果在開發環境下,打印變量obj if(isDev) { console.log(obj) } 
          
          • 1
          • 2
          • 3
          • 4

          這樣就避免了生產環境下無用的變量打印占用一定的內存空間,同樣的除了console.log之外,console.error、console.info、console.dir等等都不要在生產環境下使用

          5.遺忘的定時器

          其實定時器也是平時很多人會忽略的一個問題,比如定義了定時器后就再也不去考慮清除定時器了,這樣其實也會造成一定的內存泄漏。來看一個代碼示例:

          <button>開啟定時器</button> <script> function fn1() { let largeObj = new Array(100000) setInterval(() => { let myObj = largeObj }, 1000) } document.querySelector('button').addEventListener('click', function() { fn1() }) </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15

          這段代碼是在點擊按鈕后執行fn1函數,fn1函數內創建了一個很大的數組對象largeObj,同時創建了一個setInterval定時器,定時器的回調函數只是簡單的引用了一下變量largeObj,我們來看看其整體的內存分配情況吧:

          img

          按道理來說點擊按鈕執行fn1函數后會退出該函數的執行上下文,緊跟著函數體內的局部變量應該被清除,但圖中performance的錄制結果顯示似乎是存在內存泄漏問題的,即最終曲線高度比基準線高度要高,那么再用Memory來確認一次:

          img

          在我們點擊按鈕后,從動態內存分配的圖上看到出現一個藍色柱形,說明瀏覽器為變量largeObj分配了一段內存,但是之后這段內存并沒有被釋放掉,說明的確存在內存泄漏的問題,原因其實就是因為setInterval的回調函數內對變量largeObj有一個引用關系,而定時器一直未被清除,所以變量largeObj的內存也自然不會被釋放

          那么我們如何來解決這個問題呢,假設我們只需要讓定時器執行三次就可以了,那么我們可以改動一下代碼:

          <button>開啟定時器</button> <script> function fn1() { let largeObj = new Array(100000) let index = 0 let timer = setInterval(() => { if(index === 3) clearInterval(timer); let myObj = largeObj
                      index ++ }, 1000) } document.querySelector('button').addEventListener('click', function() { fn1() }) </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17

          現在我們再通過performancememory來看看還不會存在內存泄漏的問題

          • performance

          img

          這次的錄制結果就能看出,最后的曲線高度和初始基準線的高度一樣,說明并沒有內存泄漏的情況

          • memory

          img

          這里做一個解釋,圖中剛開始出現的藍色柱形是因為我在錄制后刷新了頁面,可以忽略;然后我們點擊了按鈕,看到又出現了一個藍色柱形,此時就是為fn1函數中的變量largeObj分配了內存,3s后該內存又被釋放了,即變成了灰色柱形。所以我們可以得出結論,這段代碼不存在內存泄漏的問題

          簡單總結一下: 大家在平時用到了定時器,如果在用不到定時器后一定要清除掉,否則就會出現本例中的情況。除了setTimeoutsetInterval,其實瀏覽器還提供了一個API也可能就存在這樣的問題,那就是requestAnimationFrame

          總結

          在項目過程中,如果遇到了某些性能問題可能跟內存泄漏有關時,就可以參照本文列舉的5種情況去排查,一定能找到問題所在并給到解決辦法的。

          雖然JavaScript的垃圾回收是自動的,但我們有時也是需要考慮要不要手動清除某些變量的內存占用的,例如你明確某個變量在一定條件下再也不需要,但是還會被外部變量引用導致內存無法得到釋放時,你可以用null對該變量重新賦值就可以在后續垃圾回收階段釋放該變量的內存了。

          轉自:csdn博客 作者:「零一」

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

          app界面賞析 ——— 北京藍藍設計 移動端UI設計資源分享(十六)

          前端達人

          移動互聯網的迅速崛起,讓移動網頁,移動客戶端越來越重要,客戶端的頁面設計也是一門很大的學問??萍佳杆侔l展的今手機屏幕的尺寸越來越放大化,但卻始終 很有限,因此,在APP的界面設計中,精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量,而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯,用戶看著順眼了,才會真正的喜歡。


          接下來為大家分享六款精美的app UI設計案例:

          WechatIMG1639.jpegWechatIMG1640.jpegWechatIMG1641.jpegWechatIMG1642.jpeg

          --手機appUI設計--

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



            更多精彩文章:

                 手機appUI界面設計賞析(一)

                 手機appUI界面設計賞析(二)

                 手機appUI界面設計賞析(三)

                 手機appUI界面設計賞析(四)

                 手機appUI界面設計賞析(五)

                 手機appUI界面設計賞析(六)

                 手機appUI界面設計賞析(七)

                 手機appUI界面設計賞析(八)

                 手機appUI界面設計賞析(九)

                  手機appUI界面設計賞析(十)

                 手機appUI界面設計賞析(十一)

                 手機appUI界面設計賞析(十二)

                  手機appUI界面設計賞析(十三)

                 手機appUI界面設計賞析(十四)

                 手機appUI界面設計賞析(十五)

          SEO為什么見效慢?

          seo達人

           

          SEO為什么見效慢?很多剛剛接觸seo優化的人,都會希望趕快見到效果,在對網站進行優化的過程中感到著急和焦慮,這可以說是很多新手都會遇到的問題,今天小編就來聊聊這個問題。希望可以幫助各位新手正確的去了解SEO,并及時調整seo策略。也可以幫助SEO人員在一種正確的環境中擴展SEO的工作。

          SEO脫離不了的規則

          很多新手會覺得SEO是一種”高大上“的技術,其實SEO并不是一種神技。想要做好SEO,要么就得勤勞運營網站和靠時間熬,要么就是得花錢砸進去。并沒有太多其他的途徑了。

          搜索引擎算法發展趨勢之一,就是用戶體驗,你做得好了,那么搜索引擎就會自然而然的給你推薦到首頁了。如果一個網站突然采集500萬數據導入網站,馬上獲得300萬日IP;一個網站突然增加20萬條外鏈接,搜索一個關鍵詞,馬上獲得第一,那么你覺得顯示嗎?如果真是這樣,那這個游戲,我們還玩的下去嗎?

          SEO人員所做的工作調整,都需要等待搜索引擎算法的時間檢驗,之后才能見到反應變化。早期搜索引擎算法不完善的時候,確實存在很多機會,但這些不足隨著搜索引擎算法的完善,大都被秋后算賬了。老話說:出來混,總是得還的。

          SEO是最有價值的營銷方式

          SEO是互聯網最有價值的營銷方式,但SEO跟那種創意營銷不一樣。創意營銷可以瞬間引爆,一個創意好不好,不需要什么時間檢驗。市場在2天時間可以給這個創意一個反饋。

          SEO可以讓網站在搜索引擎上獲得排名和流量。從營銷推廣的渠道上來說,SEO是值得選擇的一種市場營銷推廣方式。一個方面是網站培養起來了的話,營銷比較可持續,有基礎;第二個搜索引擎的效果精準性也高;第三個,搜索引擎上的潛在客戶群體最多;第四個,信息一體化,找服務,找口碑等,都是通過搜索。

          小編也見到過很多網站就是通過SEO的方式把項目做起來的。但這背后的投入,少說從幾十萬到幾百萬的投入不等,甚至也有虧本的情況。

          搜索引擎的流量早不是免費的流量。互聯網流量的成本已經很貴了,各種隱性成本的投入,就算是SEO,也需要其他資源的投入才能把SEO做好。已經不是那種單純靠SEO人員做一些站內調整,內容就能夠獲得流量的階段了。

          能否做到搜索引擎第一位?

          很多老板,在招聘SEO人員的時候,都會問:”能不能做到百度第一位?“甚至很多人會覺得,SEO人員不能做第一位就不會做SEO了,這個問題這里也說下。

          產品和服務型的業務網站很難跟資訊網站競爭。除了因為是資訊型網站的內容和規模更大更豐富外。也還需要考慮用戶的需求,用戶搜索一個行業詞,更大可能性是想了解行業動態,而不是找行業里面的服務商家。除非你整個行業就是一個服務行業,沒有資訊的。

          排除掉百度官方的排名,理論上說要爭第一,是有可能性的。所以問SEO人員能不能做到第一。應該是問投入,不是問技術。那你就加大投入。但考慮搜索引擎畢竟不是自己家的,所以,能第一頁就很好了。能精確做到第幾位,沒人敢保證的,因為搜索引擎不是SEO人員開,能做到首頁已經很不錯了,百度自然排名是會有波動的。

          最后給老板們一句建議:理解SEO不需要從技術角度去理解,跟SEO人員溝通就直接從資源投入角度溝通,就好。說到底,還是投入的問題。

          給SEO人員的建議:SEO人員也不需要自視甚高,回歸本源,SEO就是一個工種之一。SEO要不起高價,除非你能碰到好項目,好老板,敢孤注一擲在SEO。而正好,你有這個能力。

           

          SEO為什么見效慢?很多剛剛接觸seo優化的人,都會希望趕快見到效果,在對網站進行優化的過程中感到著急和焦慮,這可以說是很多新手都會遇到的問題,今天小編就來聊聊這個問題。希望可以幫助各位新手正確的去了解SEO,并及時調整seo策略。也可以幫助SEO人員在一種正確的環境中擴展SEO的工作。

          SEO脫離不了的規則

          很多新手會覺得SEO是一種”高大上“的技術,其實SEO并不是一種神技。想要做好SEO,要么就得勤勞運營網站和靠時間熬,要么就是得花錢砸進去。并沒有太多其他的途徑了。

          搜索引擎算法發展趨勢之一,就是用戶體驗,你做得好了,那么搜索引擎就會自然而然的給你推薦到首頁了。如果一個網站突然采集500萬數據導入網站,馬上獲得300萬日IP;一個網站突然增加20萬條外鏈接,搜索一個關鍵詞,馬上獲得第一,那么你覺得顯示嗎?如果真是這樣,那這個游戲,我們還玩的下去嗎?

          SEO人員所做的工作調整,都需要等待搜索引擎算法的時間檢驗,之后才能見到反應變化。早期搜索引擎算法不完善的時候,確實存在很多機會,但這些不足隨著搜索引擎算法的完善,大都被秋后算賬了。老話說:出來混,總是得還的。

          SEO是最有價值的營銷方式

          SEO是互聯網最有價值的營銷方式,但SEO跟那種創意營銷不一樣。創意營銷可以瞬間引爆,一個創意好不好,不需要什么時間檢驗。市場在2天時間可以給這個創意一個反饋。

          SEO可以讓網站在搜索引擎上獲得排名和流量。從營銷推廣的渠道上來說,SEO是值得選擇的一種市場營銷推廣方式。一個方面是網站培養起來了的話,營銷比較可持續,有基礎;第二個搜索引擎的效果精準性也高;第三個,搜索引擎上的潛在客戶群體最多;第四個,信息一體化,找服務,找口碑等,都是通過搜索。

          小編也見到過很多網站就是通過SEO的方式把項目做起來的。但這背后的投入,少說從幾十萬到幾百萬的投入不等,甚至也有虧本的情況。

          搜索引擎的流量早不是免費的流量。互聯網流量的成本已經很貴了,各種隱性成本的投入,就算是SEO,也需要其他資源的投入才能把SEO做好。已經不是那種單純靠SEO人員做一些站內調整,內容就能夠獲得流量的階段了。

          能否做到搜索引擎第一位?

          很多老板,在招聘SEO人員的時候,都會問:”能不能做到百度第一位?“甚至很多人會覺得,SEO人員不能做第一位就不會做SEO了,這個問題這里也說下。

          產品和服務型的業務網站很難跟資訊網站競爭。除了因為是資訊型網站的內容和規模更大更豐富外。也還需要考慮用戶的需求,用戶搜索一個行業詞,更大可能性是想了解行業動態,而不是找行業里面的服務商家。除非你整個行業就是一個服務行業,沒有資訊的。

          排除掉百度官方的排名,理論上說要爭第一,是有可能性的。所以問SEO人員能不能做到第一。應該是問投入,不是問技術。那你就加大投入。但考慮搜索引擎畢竟不是自己家的,所以,能第一頁就很好了。能精確做到第幾位,沒人敢保證的,因為搜索引擎不是SEO人員開,能做到首頁已經很不錯了,百度自然排名是會有波動的。

          最后給老板們一句建議:理解SEO不需要從技術角度去理解,跟SEO人員溝通就直接從資源投入角度溝通,就好。說到底,還是投入的問題。

          給SEO人員的建議:SEO人員也不需要自視甚高,回歸本源,SEO就是一個工種之一。SEO要不起高價,除非你能碰到好項目,好老板,敢孤注一擲在SEO。而正好,你有這個能力。

           

          文章來源:SEO

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

           

          搜索引擎排名優化的五種技巧

          seo達人

           

          搜索引擎排名優化又稱為SEO,是一種利用搜索引擎規則來達到自然排名的一種方法。隨著互聯網的普及,現在有很多人開始學習SEO排名了,雖然現在有很多搜索引擎,如百度、360搜索、搜狗等搜索引擎,但是在國內做網站優化的時候,主要還是針對百度優化來做,畢竟百度是國內的搜索引擎龍頭,也深受用戶喜愛。今日小編將與您分享五種技巧,幫助新手站長理清整個SEO流程,讓新手輕松完成網站SEO優化。

          一、搜索引擎優化SEO的步驟。

          搜索引擎優化是一項腦力勞動,需要足夠的耐心和細心,按照以下6個步驟進行:

          1、關鍵詞分析。搜索引擎優化的關鍵環節就是關鍵詞分析,重點分析關鍵詞搜索量、競爭者分析、關鍵詞布局、關鍵詞與網站關聯等內容。

          2、網站結構分析。一個合理的網站結構更容易得到搜索引擎的青睞,而亞馬遜分類目錄更容易得到良好的SEO效果。對網站構架的分析主要是排除網站構架不良設計等問題,一般會采取樹型目錄結構,優化網站導航和鏈接的方式來實現。

          3、網站目錄和網頁優化。seo搜索引擎在提升網站主頁在搜索引擎排名的基礎上,還能提升網站頁面訪問量和訪問量。

          4、發布內容,做好內鏈。由于搜索引擎偏愛定期更新的網站內容,因此如何調整和合理安排網站內容的發布日程也是優秀SEO技術人員必須掌握的重要技能。另外,還要通過合理的鏈接布局將整個網站有機的串聯起來,在這個過程中一般還會展開友情鏈接工作。

          5、與搜索引擎對話。通過搜索引擎看SEO的效果,一般要求SEO技術人員能夠熟練掌握集中搜索引擎網站管理工具。

          6、網站流量分析。對網站流量進行分析,可以將本次SEO結果作為下一次開展SEO的指導策略支持,這對用戶體驗的提升也有指導意義。

          二、搜索引擎排名seo實用技巧。

          第一,優化URL。良好的URL對網站是有好處的。URL深度2最好,權重最高的通常是“首頁/欄目/內容”,但“首頁/欄目/內容……/欄目/內容”太深了,反而不利于搜索引擎優化。因為隨著等級的加深,權重也會隨之降低。在一些知名門戶網站中,金逸網址導航雖然能為用戶提供大量的新聞和數據,但其層次基本上都在3層以內。

          第二,標題優化。為了優化網頁,首先要實現標題優化。一般會專門用來取網頁的第一行字,也就是本網頁的標題,一般打開網頁后在地址上就能看到行業的標題,可以說SEO優化中的標題是它的工作核心。為了達到標題優化的目的,需要注意以下幾個問題:標題要盡量把關鍵詞排在前面,并且要高度概括,但不要隨意排列,而是要符合語法結構。

          第三,正確使用關鍵詞。關鍵詞是展開SEO實現搜索引擎優化的核心,因此,SEO需要對關鍵詞相關內容進行關注。利用關鍵詞進行SEO工作,首先需要關注客戶的需求,根據客戶的需要設置關鍵詞;關鍵詞要盡量體現網站的特點和優勢,聚合站可以在網站關鍵詞中添加企業品牌、地址等內容,著重突出品牌優勢和區位優勢。關鍵詞的數量并非越多越好,在使用時,還應注意數量與分布位置、密度等問題。盡量把一個頁面的關鍵詞控制在3個以內,把頁面的內容圍繞關鍵詞展開。

          第四,合理使用說明。在頁面上,通過簡短的描述,搜索引擎可以更好地向訪客提供指導。在使用推優網站目錄描述時,要注意其中所包含的關鍵詞與內容有很強的相關性,要盡可能簡短,要求盡量控制在200個字符內,對標題和未說明的關鍵詞要做補充。

          第五,頁面元素以文本為主。許多網站的網頁上使用了大量的圖片和FLASH動畫,但MacBook搜索引擎無法識別圖片文件所表達的意思,自然無法將這些圖片納入到搜索引擎。所以,在編輯網頁內容時,如果可以使用文字說明,盡量不要使用圖片的形式。文字內容才是網頁內容的主要構成,而其它各種形式的說明則起輔助作用。

          第六,優化重復內容。由于搜索引擎對某些重復內容的偏愛程度較低,在網站的分頁中容易出現重復。而且還會出現在各欄文章列表中的標題重復問題。對于頁面重復問題,可以選擇內容頁的分頁方式,從第二頁開始,在其原始標題中插入“第二頁”,形成“第二頁:文章標題”的格式,以便盡可能避免出現重復問題。

          第七,合理搭配網頁語言?,F在最好的就是采用DIV+CSS,這樣不僅更加符合引擎抓取,微頁面網站目錄也能使網頁變得更小。

          第八,構建優質外鏈。站點優化外鏈建設是必不可少的,也是網站獲得高質量投票的重要渠道,一般的外鏈建設分為友情鏈接和目錄站外鏈等。

          第九,關注SEO的時效性。由于SEO總是處于動態變化之中,用戶的關注點也在不斷地變化,各種搜索引擎算法每天都在進行調整,搜索排名也自然會發生一些變化。

          在seo搜索引擎的排名中優化排名需要一個態度。做到不一定有效果,但不一定沒有效果,做SEO優化排名需要堅持不懈的堅持,俗話說,堅持到底就是勝利。

           

          文章來源:SEO教程

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

           

          我設計的圖標明明很精致,可總監還是說不專業?

          周周

          今天和大家聊一聊設計細節,每個提到的細節你們都能直接拿走,并且在項目中使用。

          圖標比例保持體量統一

          我設計的圖標明明很精致,可總監還是說不專業?

          這個頁面相信大家平時工作中都會做到,有很多圖標放在一起,里面可能是一些常用菜單,這個設計有什么問題呢?相信看在這里的小伙伴,腦海里有無數答案?不統一,還是什么?我們來分析下。

          我設計的圖標明明很精致,可總監還是說不專業?

          首先從大家關心的統一性來說,沒有任何問題,圖形都是在規范的圖標柵格里面,也非常的統一,那么問題出在哪里?

          我設計的圖標明明很精致,可總監還是說不專業?

          仔細觀察,我們會發現「聯系人」和「歷史消息」的圖標過于飽滿,雖然他們尺寸一樣,但是比「最近使用」這個圖標要大很多,原因是什么呢?因為后面這兩個圖標從視覺來說他們的重量太重了,所以看起來會比較大。

          我設計的圖標明明很精致,可總監還是說不專業?

          所以今天我們在做設計時候,如遇圖標瘦長或者圓形等不夠飽滿的情況,請酌情將圖標撐滿像素,來保證整體一致的視覺體量感。

          我設計的圖標明明很精致,可總監還是說不專業?

          如果圖標較飽滿的情況下,可使用微縮,來保證整體一致的視覺體量感。我們文中案例之所以出現這種情況,是因為沒有定義出圖形體量大小具體的繪制規則,所以導致圖形過于飽滿,看起來會顯得視覺重量不一致。

          我設計的圖標明明很精致,可總監還是說不專業?

          所以我們第一步,對圖形繪制規則進行優化,保證圖形在頁面中體感一致,我提供了 4 個基礎圖形繪制技巧和對應的輔助線參考圖。

          我設計的圖標明明很精致,可總監還是說不專業?

          所以在實際應用時,可略微在可變范圍內微調,對于過于飽滿的圖形,高度變低時,需要增加寬度來保證視覺重量相等。

          我設計的圖標明明很精致,可總監還是說不專業?

          這樣調整后,整體的圖標視覺重量就會更加均衡,也會更加規則。所以,今天如果你發現你們產品頁面中圖標大小體量不一樣,或許是因為你忘記對圖標體量進行規范。

          圖標尺寸比例怎么定?

          圖標我們在界面中使用場景很多,很多時候用大圖標,有時候用小圖標,我們該如何去定義小圖標大小,大圖標大小,這是很多同學非常糾結的。有時候就亂定,導致頁面沒有秩序感。

          我設計的圖標明明很精致,可總監還是說不專業?

          第一步,我們要先去梳理頁面場景,看看哪些地方會用到圖標,把全部場景列出來。

          我設計的圖標明明很精致,可總監還是說不專業?

          列出來后,我們根據你 APP 設計的最小單元的倍數來定義圖標風格,比如支付寶最小單元是 4,所有間距都是 4 的倍數,那么在圖標這里,也是同樣的原則,全部的圖標尺寸,我們根據 4 的倍數去定義幾種大小,比如 24X24,32X32,44X44,56X56,72X72 等等,如果頁面中不夠用,同樣的在 4 的倍數基礎上進行新增。

          圖標放大后,線條粗細該如何定義?

          我相信大家都有這種情況,一組圖標在使用時候,會出現在各個場景,這個時候需要放大,甚至縮小,但是不知道放大后圖標粗細該如何確定,直接放大,直接縮小會出現圖標的細節粗細有問題,那么這種時候該如何處理?

          我設計的圖標明明很精致,可總監還是說不專業?

          直接放大縮小,圖標粗細沒有任何說法,而且會顯得比例非常奇怪,如何去解決這個問題?

          我設計的圖標明明很精致,可總監還是說不專業?

          第一步:我們需要確定圖標大小和線條比例,以支付寶為例,首先要確定圖標大小和線條粗細比例為 14:1。當然每個比例是不一樣的,你可以根據你們產品的調性去決定,如果你圖標比較細,你可以設定為 10:1,這些都沒有固定標準。

          我設計的圖標明明很精致,可總監還是說不專業?

          這樣的話,假如你圖標需要設計一個 140X140 的大小,那么你的圖標粗細就應該是 10px。

          我設計的圖標明明很精致,可總監還是說不專業?

          如果你圖標是 112 尺寸大小,那么按照 14:1 的比例,那么你圖標線條粗細就應該是 8px,以此推動,通過這樣的方式來保證圖形的一致性和穩定性。

          最后

          以上三個小點,是絕大多設計師忽略掉的,也是設計中不太注意的細節,但是設計的專業程度往往就是由這些細節組成,今天這 3 個技巧,看會了之后,你就可以直接在項目中去運用。





          文章來源:優設網       作者:我們的設計日記



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

          5G與AI的加持,智能家居能否“去偽存真”?

          資深UI設計者

          編輯導讀:看過《鋼鐵俠》電影的朋友一定對“賈維斯”不陌生,這個智能管家是很多人的夢想,也是現在智能家居發展的方向。在5G和AI的加持下,智能家居的發展狀況如何?本文作者對此進行了分析,希望對你有幫助。

          “賈維斯,你在么?-我隨時待命” ——只聞其聲,不見其物的賈維斯,相信看過電影《鋼鐵俠》的朋友對它并不陌生。像“鋼鐵俠機甲的大腦,獨立思考、處理各項事務,超級軟件、智能管家”等等,是它留給觀眾的印象。

          但其實,賈維斯在影片中塑造的形象最貼近鋼鐵俠機甲的大腦,這也是我們對它最深刻的印象。不過,賈維斯以智能家居的形態率先亮相,相信很多觀眾會被那種智能的體驗所吸引。

          賈維斯的出場方式給未來智能家居留下了很大的遐想,可如今的智能家居是否像熒幕上那般智能、令人向往?

          要想回答這個問題,我們得知道,當下談論智能家居的我們究竟在談什么,是談智能家居帶給我們生活方式的變革,還是談智能家居根本不是生活的必需品?智能家居的“真與偽”,這個話題似乎進行得如火如茶。

          那一起聊聊這個話題吧,本文將圍繞,[5G與AI的加持,智能家居能否“去偽存真”?]這個主題,做出一些思考和解析。

          對于該主題,將從以下四個方面展開,并一一解析。

          1. 一偽,偽真實:“賈維斯”(智能管家)走出熒幕,并不真實。
          2. 二偽,偽智能:家居產品聯網,并不智能。
          3. 三偽:偽需求:達不到預期的家居產品,并不需要。
          4. 真,有價值:真正的智能家居是可以給家庭創造價值的。

          一、“賈維斯”走出熒幕,并不真實

          本文開頭提到《鋼鐵俠》中的賈維斯,是一個科幻角色,更是一種科技。不過,也正因影片留給我們一些難以觸及的畫面,所以對于科幻影視所塑造的科技,我們大都抱以不真實的態度看待,何以想象這些角色(科技)就如劇中所現(非簡單的外觀IP化)地走出熒幕,融入到真實生活。

          時勢造英雄,Facebook的創始人扎克伯格,或是出于個人興趣,亦或是對商業的探索,于2016年打造出了人工智能管家——Jarvis(賈維斯),這也似乎預示著,科幻角色走不出熒幕的說法即將破滅。

          但,扎克伯格給我們呈現的Jarvis,談不上是鋼鐵俠中的賈維斯原型,兩者并沒有一些很吻合的地方,似乎更像智能音箱是一款家庭語音助手。然而,這也印證了“鋼鐵俠中的賈維斯走出熒幕并不真實”的說法是正確的。

          或許僅憑一個“失敗”的案例不足以證實以上的說法,那我們可以試著從這幾方面來佐證。

          第一,我們熟知賈維斯是具備“自然交流”的能力,這種自然交流的能力并不是現在NLP能實現的對話,它的交流是自然的、不需喚醒、不需設計槽位,它不像機器的語音對話只能交互、回答一些淺層的問題,只能基于訓練過的語料做出回復。

          它更像人一樣可以理解基礎、復雜的每一句話,做到精準的話語意圖識別,思考反饋。

          如,鋼鐵俠:信不過別人,就先放我自己服務器上——賈維斯:這次算秘密計劃吧?

          可惜,讓機器像人一樣思考和理解是目前的技術瓶頸,是弱人工智能所不能企及的。

          第二,讓我們覺得有意思的是,賈維斯提供了全息影像的人機交互方式,雖然這種交互方式不如語言交流來得便捷,高效。但,也正由于一些信息是沒法通過語音表現,而又不得不處理這些信息時,全息影像的隔空控制是擺脫物理控制、屏幕控制乃至新型的觸控投影的最佳方式。

          全息影像,也就是增強現實(AR)的結果,以現階段的技術實現來看,AR所能達到的更多是呈現一種沉浸式的畫面體驗。

          最后,也就是賈維斯最為智能的地方,漫威的影迷肯定知道,從鋼鐵俠的系列更新,到復仇者聯盟的系列更新,鋼鐵俠一次比一次厲害,也許這是劇情所要。但,不能忽略的是,鋼鐵俠的強化,其實是賈維斯自我進化的結果。

          “自我進化”說起來或許比較空曠。換種說法,我們看到的賈維斯在接收鋼鐵俠的命名后,不用鋼鐵俠的操作,就能自行的處理鋼鐵俠的各項命令。

          例如:它能創造出另一個程序來自動的組裝鋼鐵俠鎧甲,它能自行設計鎧甲及鎧甲模型,它能自行處理“結冰”的問題等

          而這種智能就像人在做事一樣,不需要外在的干預就能獨立完成。或許,你會覺得當前利用神經網絡的深度學習也具備自行處理信息并給出反饋的能力。

          但其實,深度學習是基于特定場景才能實現的自行處理,更何況深度學習是需要事先采集無數的數據,反復的訓練后,從而形成一系列規則。然而,對某件事進行處理前還得有觸發條件(規則內的數據),才能做出反饋(非技術者的理解,可能存在錯誤)。

          例如:現在著稱具有創造性的AI海報設計,就是利用深度學習的結果。它首先需要學習無數張海報,才得以知道海報美與丑的規則,還需要學習無數組海報的標簽,才能理解海報內容與含義規則。

          所謂的應用,我們也知道,當我們讓它設計一張符合“父親節”主題的海報時,系統就會根據規則輸出設計。難一點的就是需要先理解輸入的主題是何含義,才能輸出符合的設計。

          所以,以目前的深度學習實現結果來看,擁有創造力,自我進化,自主意識的賈維斯并不容易。

          基于此,我們可以清楚,原型的賈維斯在弱人工智能時代較難走出熒幕。讀到此,或許你會疑惑,走不出熒幕的角色跟智能家居有何關系?智能家居不應該像《鋼鐵俠》賈維斯開場秀那般能自動報時、自動開啟窗簾就可以了嗎?智能家居擁有像賈維斯那般能耐有何用途?

          我想,這就是智能家居的“智能”給我們造成的潛意識誤判,我們總覺得每一樣產品要是具備聯網、自動、傳感器監測、交互控制就算智能了,由此眾多家居產品就自然被冠以智能的名號。

          所以,我們就覺得智能家居并不需要像賈維斯一樣以人工智能管家身份存在。但想想,缺失人工智能技術賦能的家居產品,是真的智能嗎?真的會變革家庭生活方式?

          奈何于只要人工智能(AI)對某個行業或某個場景成功賦能應用,就“稱得上”變革、顛覆。似乎顛覆是AI的一種標配。

          不過從金融、交通、醫療、安防、教育等領域都有AI成功應用的典例來看,“顛覆”更是AI的驅動力,如今,處處是AI的影子。

          AI在這些領域的應用好像都有一個共同點,那就是更好服務于人。于是我不禁就想,人生活于家庭,那如果所有服務于人的場景都可以融合到家中,那豈不是要顛覆社會呀。雖然,只是想想,但或許這才是人工智能的一個終極目標、是人工智能最大的應用場景。

          文章來源:人人都是產品經理  作者:林胖

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

          如何為老年人設計?

          資深UI設計者


          隨著移動互聯網的發展與普及,人們的生活方式發生了巨大的變化。當我們足不出戶便可以享受到香噴噴的美食、相隔千里也能有面對面的交流體驗時,大多數老年人卻被關在了數字世界的大門之外:不會線上掛號、打不到網約車、因不會操作健康碼而被公交車拒載……這樣的事件屢見不鮮,本應同樣享受互聯網便利的群體,近幾年來卻處處受阻。

          數據顯示,2020 年我國老年人口達到約 2.43 億,占比 18%,50 歲以上的網民群體占比 22.8%,數量不可小覷。如何打破互聯網產品的使用壁壘,讓老年人也能自如地參與到互聯網生活中,是我們設計師應當肩負的社會責任。

          老年人的心智特征

          貝殼經紀人作為社區的貼心服務者,經常為社區內的老年人提供幫助,解決手機使用問題。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 1 經紀人志愿者在社區幫助老人學習使用手機

          我們通過觀察老年人使用手機的過程,并與具有豐富幫助經驗的經紀人深入溝通,發現老年人使用互聯網產品存在的主要障礙如下:

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 2 老年人使用互聯網產品的主要障礙

          1. 手勢操作困難

          由于骨骼肌老化,老年人動作幅度減小、操作的精細程度降低,他們在使用手機等小巧的設備時難以精準完成手勢操作,很容易出現誤觸現象。

          皮膚老化同樣影響了老年人對手機的使用,細胞水分減少,皮膚褶皺加深,表皮干燥以及指紋的磨損,使得在使用觸屏時靈敏度下降,即便手勢正確,也難以順利完成操作目標。

          2. 信息接收受阻

          老年人的感官能力明顯下降。40 歲以后人的眼部開始老化,對光的敏感度以及對色彩的分辨能力下降,更容易炫光,難以識別藍紫色為代表的冷色調顏色;聽覺的靈敏度可能會減少 50%之多,難以分辨不同的聲音。我們認為毫無閱讀壓力的界面,在老年人眼中可能是模糊一片;我們聽起來特色鮮明的提示音,甚至都沒有傳入到老年人的耳朵里;讓我們感到新奇的震動觸感,老年人可能毫無感覺。

          3. 界面理解障礙

          老年人很難理解互聯網產品中的層級關系,以及元素間的關聯關系,這導致他們經常不知道自己在操作哪一步驟,更難以預期到下一步會發生什么。另一方面,老年人很難通過歸納概括信息的特點來區分不同元素的功能和屬性,比如,對調整鈴聲、連接網絡等“設置”屬性的功能沒有統一的概念,想要調整時不知道去哪里操作。

          4. 容易情緒挫敗

          由于神經系統退化,老年人對情緒的控制能力減弱,容易情緒低落。在使用手機受挫時,他們常會感到無助和沮喪,持續的負向反饋易降低老年人使用手機的意愿。加之屢次出現的互聯網詐騙案件,老年人對手機安全問題更加顧慮,難以分辨真假信息,便不愿嘗試不熟悉的功能。

          洞察到以上問題及原因,我們分別從設計、功能、公益 3 個角度出發進行探索和實踐,為幫助老年人更順暢地使用互聯網產品添一把力。

          設計適老:更自如的互動

          設計應當順應老年人的生理和心理特點,并給予更多的人文關懷與鼓勵。為此,我們提出了以下設計策略:

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 3 適老化設計策略

          1. 簡化手勢,提高操作成功率

          研究表明,老年人更習慣單指操作,點擊、上下滑動、放大縮小是老年人可以清晰理解并熟練操作的手勢,交互中應盡量以這些手勢為主,需避免四指滑動、長按等復雜手勢。對于老年人來說,動作的簡單易學性、高效性是最重要的因素,遠高于隱喻性、趣味性等。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 4 老年人常用手勢

          2. 優化視覺表現,提升界面閱讀體驗

          顏色:

          參考《Web 內容無障礙指南》中提供的指導意見,應使用 AA 級或 AAA 級的對比度標準:對比度(AA 級),文本的視覺呈現以及文案圖像對比度至少要有 4.5:1,大文本至少有 3:1 的對比度;對比度(AAA 級),文本的視覺呈現以及文案圖像對比度至少要有 7:1,大文本至少有 4.5:1 的對比度。有很多在線工具可以幫助檢測顏色對比度以及是否達標,如 Contrast Ratio 在線檢測工具:https://contrast-ratio.com/

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 5 Contrast Ratio 在線檢測工具頁面

          界面中,組件與文本對比度的標準是不同的,文本比組件需要更高的對比度。

          避免使用藍色、紫色等冷色調。隨著年齡增長,人類的晶狀體會變黃變渾濁,導致選擇性的吸收藍光。所以藍色色調在老年人眼中可能會出現模糊褪色的視覺效果,從而降低元素在界面中的對比度。

          顏色不應該用作傳達信息、指示操作或區分元素的唯一視覺手段,需要用額外的文字提示,如:

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 6 顏色傳達示例說明

          字體:

          使用字體時,最小采用16像素,需要對主要信息進行加粗處理,并支持用戶可自由調節字體大小的能力,我們建議使用屏幕可讀性好的無襯線字體。

          圖形:

          首先需注意增加圖標和按鈕的尺寸大小。其次,應盡量采用擬物化、通用化的設計,圖標語義盡可能具有老年人的生活時代特征,符合他們的知識經驗。最后,建議搭配文字描述,方便老年人更清晰、快速理解。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 7 圖形示例說明

          3. 采用多通道感知,強化信息傳遞

          引入更多維度的信息通道,能夠幫助老年人高效地接收信息。聽覺通道是僅次于視覺的最常使用的感覺通道,在設計時可考慮:

          • 適當增大音量,同時處理掉環境聲音,使聲音更加清晰;
          • 增加聲音反饋,例如操作正確時給出正向的提示音;
          • 適當加入語音交互的形式,幫助老年人更簡便地進行信息輸入;

          還可以通過點擊時產生的按壓觸覺來增強感知,更多的觸覺設計能夠幫助老年人獲得更加明顯的反饋。

          4. 層級扁平化,降低理解成本

          界面的扁平化可分為 2 個方向:一是視覺層級的扁平化,弱化視覺效果,突出功能主義,以要表達的內容或引導的操作為核心,盡可能減少干擾信息;二是信息層次的扁平化,建議頁面層級最多不要超過 2 級,縮短用戶與目標信息之間的觸達路徑。

          在流程設計時,可將復雜任務拆分為目標清晰的子步驟,每一步驟中只讓用戶完成 1 項核心操作,并提供清晰的反饋,來提醒用戶要實現的最終目標。如滴滴的關懷版中對打車流程的精簡設計,很值得參考。

          如何為老年人設計?來看貝殼的實戰經驗總結

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 8 滴滴適老化設計

          5. 信息透明,減輕心理負擔

          我們在做產品設計時,還要盡可能的堅持正念,尤其是面向老年群體時,需透明化個人信息的使用方式、強化危險告知,杜絕引誘式的廣告、提示等,減少干擾,避免利用老年人的弱點謀取利益,幫助他們在紛繁復雜的互聯網世界中不輕易受傷害。另一方面,建議使用鼓勵式的反饋設計,操作過程中給老年人更正向的情感激勵,提升使用信心。

          設計探索:更包容的體驗

          基于以上設計策略,我們試著在貝殼找房首頁、房源詳情頁這 2 個核心頁面進行了適老化設計改造,其中老年版首頁已上線,歡迎大家在個人中心的設置里切換體驗。

          1. 精簡功能,強化視覺元素:

          老年關懷版的首頁中,我們只保留了買賣租賃最常使用的功能,同時放大入口的點擊區域,確保老年人也可以很快的發現目標功能并且順暢的點擊。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 9 首頁球區設計

          2. 多通道信息傳達與交互:

          房源詳情頁承載了非常多的重要信息,尤其是頭部。我們著重突出視頻講房功能,讓老年人可以更加直觀地接收房源信息,避免閱讀大量文字,降低理解負荷。同時,大面積的分段視頻按鈕,可點擊快速切換到感興趣的內容模塊,增強老年人的操作掌控感。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 10 房源詳情頁頭部設計

          房源詳情頁底部增加語音提問按鈕,吸底展示,方便老年人使用語音直接表達自己的訴求,信息以對話的形式直接地傳遞給用戶,更符合老年人的交流習慣。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 11 房源詳情頁底部設計

          3. 信息適老化:

          結合老年人在房產交易中的特點,我們精簡了詳情頁中的信息,突出房源的養老宜居特點、與子女住所距離等老年人重點關注的內容。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 12 房源詳情頁信息設計

          適老化設計后的房源詳情頁整體效果如下(此版僅由設計探索產出,若上線使用還需深入打磨):

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 13 老年版房源詳情頁設計

          功能適老:更貼心的使用

          在調研過程中我們發現,老年群體正在給火熱的二手房市場添柴加火,上海鏈家中,單 60 歲以上的購房者成交占比就達到 6.7%,53-62 歲成為置換客群的第二大年齡高峰。

          如何為老年人設計?來看貝殼的實戰經驗總結

          △ 圖 14 2020 年上海市老年人購房情況

          老年人的改善需求強烈,在選房時主要考慮與子女居所的距離、房屋本身的優質程度,重點關注:低樓層住宅、電梯房、小區環境、周圍醫院、小區的適老設施以及是否配備老年活動中心等信息。老年群體通常委托子女處理相關事務,但又有參與選房、表達意見的訴求,有部分的老年人會通過貝殼、鏈家 App 來了解房源信息。

          因此,我們思考:如何通過更好的功能設計來滿足老年人這類特征明顯、訴求明確的客戶群體?比如,通過增加老年選房專題或調優房源展示策略,優選出近醫院、有電梯、便老設施齊全的房源和小區,方便老年人快速找到心儀的房源;再比如,增加設置子女小區功能,以此為基準向老年用戶推送相關房源;又比如,優化家庭選房功能,針對性設計分享房源給父母的環節……在功能設計方面,我們還會繼續深入探索,給老年客戶一個更加貼心滿意的購房旅程。

          結語

          當我們在享受互聯網帶來的便捷生活時,有一個數量不斷增長的群體成為了“邊緣人”。

          設計應當是民主的,是包容的,是具有人文關懷精神的。我們在日常產品設計中,需要有意識的考慮到老年人對于信息的接受、理解、記憶和行為的能力差異,在設計表現和產品功能上更加包容這個群體的特征,讓老年人同樣可以感受科技為生活帶來的美好變化。

          雖然我們在盡力踐行著適老化研究,但依然還不夠。老去,是所有人都要面對的問題,我們終將會成為這個群體。適老化設計,應該是適合所有人的設計,也應當引起所有設計師的關注。

          心存善念,盡力而為。


          文章來源:優設  作者:貝殼KEDC

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


          優秀設計如何做到商業變現

          資深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”進行過創意。“5G”時代的到來預計會對人們的生活帶來顛覆性的改變,但由于現今尚未普及,我們想要接地氣的宣傳“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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          日歷

          鏈接

          個人資料

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

          存檔

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