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

          首頁

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          博博

          移動端搜索功能設計:3個階段解析搜索流程設計要點


          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          人人都是產品經理 2017-01-04 18:08:02


          這篇文章筆者想和大家聊一聊有關搜索功能的設計,搜索功能是每個內容型APP的核心,它的易用性決定了用戶是否能從APP里快速找到自己想找的內容,那么決定搜索體驗好壞的關鍵點又是什么呢?這里我總結了兩點,“操作的易用性”和“結果的準確性”??此坪唵蔚膬牲c卻有很多的學問,筆者把搜索的交互流程劃分成三個關鍵階段,“搜索前、搜索中及搜索后”,接下來將從這三個階段逐一分析整個搜索流程中的相關設計。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          搜索入口——依據功能權重來判斷入口的表現形式

          在不同的APP或者不同的場景下搜索入口有著不同的表現形式,具體的表現形式取決于產品對搜索功能權重的定義,如果說在某一場景下搜索功能是用戶常用的核心功能那么他在界面上所表現出來的權重就要高些,反之則低些。下圖是常見的搜索功能的入口形式,他們的權重從左到右依次降低,筆者將對他們一一進行分析

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          方式一:如下圖APP Store的搜索入口

          如下圖APP Store的搜索形式,搜索放在標簽欄上作為一個獨立的功能模塊,它的功能層級是最高的。不管用戶操作到哪里都可以隨時進入搜索頁面,這樣的搜索入口通常用在搜索場景非常多的內容型APP上,方便用戶在任何時候快速進入搜索頁面。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          方式二:搜索框外漏在nav bar

          如下圖是京東app的搜索入口,它將搜索框外漏在nav bar上,這樣的形式有著兩個設計的關鍵點:

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          關鍵點一:搜索框外漏在頂部導航條上

          搜索框直接外漏在導航條上是為了突顯該功能,這一功能往往是用戶在該頁面非常核心的操作任務,類似天貓京東這類電商型app,通常情況下用戶都是帶著明確目的來購買東西的,那么他們采取的最快最直接的方式就是搜索。

          關鍵點二:在向上滾動界面時,搜索框一直懸停在頂部

          這樣做的場景是這樣的,在用戶滾動頁面尋找內容時,可能并不能找到自己想要的內容,搜索框一直懸停一是為了暗示用戶可以進行搜索,二是為了讓用戶在想搜索時快速觸發搜索

          方式三:出現在NAV BAR下面,默認隱藏或顯示

          如下圖是微信在聊天頁面和通訊錄頁面的搜索入口,初始化狀態時聊天頁面的搜索框是不出現在用戶的可視范圍內的,當頁面下滑時搜索框才出現,而在通訊錄頁面里搜索框是默認出現在用戶的可視范圍內的。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          分析:微信在最近聯系人和通訊錄上搜索框的默認狀態不同,這很好地詮釋了這兩種場景下的搜索功能的權重。最近聯系人頁面上的搜索入口顯得更加隱蔽,因為在這個頁面下用戶產生搜索的場景很少,把其隱藏簡化了界面的元素,提升了界面的美觀性。

          方式四:通過點擊icon觸發搜索

          如下圖是淘票票的搜索的入口,通過點擊右上角的搜索icon進入搜索頁面:

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          分析:在界面權重上,這樣的方式相對于以上三種方式來說顯得較弱一點,因為在這樣的場景下用戶使用搜索的概率并不是很高,如果把搜索外漏就會占據更多的屏幕空間,破壞界面的權重等級和美觀性。

          總結:依據用戶的需求場景,搜索入口放在不同的位置,如果說在該頁面搜索是一個主要的功能,我們就應該去突顯它,提升它在界面上的權重,反之則減輕它的權重。

          搜索中間頁——運營的重災區,用戶搜索行為的關鍵點

          搜索中間頁本來應該是一個輕量化的頁面,用戶在這里輸入內容進行搜索即可。但隨著運營需求的擴張,這個頁面逐漸成為了一個運營重災區,多了很多推薦的內容。筆者將從“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個頁面的設計。

          1. 輸入框提示信息

          搜索框內的提示信息通常是提示用戶當下可以搜索什么樣的內容,如下圖bilibi的搜索提示,告訴用戶可以進行“視頻、番劇、UP主或者AV號”的搜索,這樣的提示信息對用戶也是一種良性的引導,給用戶提供了一個心理預期,同時也對用戶隨意輸入關鍵詞造成無結果的傷害體驗的可能進行了限制。例如一個房產APP,搜索框內提示輸入樓盤或小區名,如果沒有這樣的提示有的用戶可能就會去輸入價格去篩選房源,這句提示語很好地降低了這樣的風險。

          但隨著人們對APP使用的熟悉,用戶在這里的認知負擔基本消除,運營人員逐漸搶占了這塊地方,這句話變成了內容的推薦或者產品的Slogan,這些推薦的內容可以是運營人員手動維護的也可以是依據用戶的購買和行為習慣進行推薦的。如下圖右邊是淘寶的搜索提示,搜索框的文案變成了“紅人最愛潮牌名服”,這就是運營人員在為特定內容進行導流。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          2. 搜索分類

          在內容型APP中搜索時通常會對內容進行分類搜索,這是為了幫助用戶更地找到相關內容,分類的操作可以發生在搜索前也可以發生在搜索后,如下圖是“淘寶、微信、網易云音樂”搜索分類的方式,筆者將分別對他們進行分析。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          淘寶是將搜索分類前置,默認搜索寶貝,點擊后彈出浮層進行切換。這樣的方式存在一個明顯的缺點就是由于該入口所占空間位置不顯著,會導致用戶感知太弱。 這樣的方式通常用在用戶大多數情況下只搜索某一分類的內容,如淘寶這樣,用戶大部分的搜索場景都是在尋找寶貝。

          微信默認搜索所有內容,將分類通過通過三個很顯著的入口放在搜索框下方,當點擊某一分類時跳轉到該分類的搜索界面,同時搜索框的文案以及搜索界面的內容發生相應變化,提示用戶搜索范圍被改變。這種方式通常用在這些分類搜索的場景都很常見時,它的缺點在于,從界面表現形式來看,這三個分類更像是三個功能的入口,他們與搜索框聯系得不是很緊密,很多用戶最開始使用時并不知道點擊這些分類是進行搜索范圍的限制。經測試3個從未使用過該功能的用戶,他們都認為點擊朋友圈后就是進入朋友圈,點擊文章后就是顯示所有文章。

          網易云音樂是將搜索分類進行后置了,在下文關于搜索結果的展示我會分析它的優劣勢。

          3.搜索歷史

          搜索歷史記住用戶的足跡,方便用戶快速向以前搜索過的內容進行轉換。設計上我們需要注意的一點就是需要把搜索歷史和搜索推薦區分開來,在位置上,盡量讓搜索歷史靠近搜索框(如下圖),因為從認知心理學上來講,越靠近搜索框的內容越能表示它是搜索歷史。在表現形式上,搜索歷史和搜索推薦盡量采用不同的表現形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          4. 搜索推薦

          這里的搜索推薦通常有三種來源:

          1. 按照用戶的搜索熱度進行推薦;
          2. 運營手動配置;
          3. 按照搜索行為進行計算和推薦;

          它存在的目的主要有兩個:

          • 一是挖掘用戶的潛在需求,讓用戶更快地找到想找的內容;
          • 二是作為運營位為特定的內容導流。

          建議:

          • 不要漏出太多的推薦內容,畢竟它帶有一些運營和廣告性質,用戶的接受度并不會很高
          • 在界面上讓推薦內容和搜索歷史有明顯的區分,方便用戶在形式上一眼就能區分出搜索歷史和推薦內容
          • 盡量推薦一些對用戶有真正價值的內容

          5. 搜索輸入

          受移動端操控方式的限制,在輸入內容時存在兩個明顯的痛點:“修改內容”和“輸入速度”。

          關于修改內容:當用戶想更改語句中一部分文字時,將光標移動到想要更改的地方是一件很難的事,點擊操作真的很令人發狂,通常情況下我寧愿重新輸入。但是針對這一點搜狗輸入法做了一個很人性的交互,當用戶按住鍵盤左右滑動時就能移動光標(如下圖)。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          關于輸入速度:很早之前偶然間發現了UC瀏覽器在輸入文字時的一個交互功能,如下圖所示,當輸入文字后,用戶可以將搜索建議的詞語直接加入到搜索框中然后繼續輸入文字。這樣的需求場景在很常見,比如我想搜索“交互設計師的前景”,當我輸入交互二字后就會有“交互設計”的搜索建議,點擊搜索建議后面的箭頭將這個詞直接加入搜索框,然后就出現了“交互設計師的前景”的搜索建議,點擊搜索建議后進入搜索結果的頁面,這個過程中我少打了很多字,對我的搜索速度有很大的提升。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          6.搜索建議

          當用戶輸入內容后,搜索框下面出現了眾多的搜索建議,這些搜索建議是為了幫助用戶快速向目標進行轉化,如下圖是京東的搜索建議,當我輸入畫框后,一系列畫框的搜索建議就出來了,它還有一個亮點就是在此提供了細化篩選條件,畫框后面緊跟了“長方形、實木、正方形”等關鍵的篩選條件,為用戶省去了到結果頁進行篩選的步驟。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          搜索結果——背后的邏輯決定了用戶是否能找到準確的內容

          搜索結果是搜索過程中最關鍵的點,結果的準確性確定了用戶體驗的好壞,筆者將從“搜索結果的形式、搜索結果的操作、搜索結果的分類、搜索結果的排序”等方面來對搜索結果進行分析。

          1. 搜索結果的形式

          搜索結果一般分為兩種,一種是所見即所得,用戶輸入內容后出現在搜索框下面的搜索建議就是搜索結果,這種搜索通常出現在一些輕量化的APP中,因為搜索建議對應的就是唯一的搜索結果,如下圖微信的搜索一樣。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          第二種形式就是一個關鍵詞對應了多個搜索建議,每個搜索建議又對應了多個搜索結果,當用戶點擊搜索后進入了一個專門的搜索結果頁,如下圖京東的搜索一樣。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          2. 搜索結果的操作

          依據用戶的需求目的,在搜索結果的列表上我們可以外漏用戶大部分情況下會采取的操作,比如說視頻類網站,用戶搜索到某一內容后,最常采取的操作就是播放,我們就可以把播放按鈕外漏,縮短用戶的操作路徑(如下圖愛奇藝的搜索結果頁)

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          3. 搜索結果的分類

          通常的分類方式是TAB切和卡片,以下是微信和網易云音樂的分類。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          這兩種方式有各自的應用場景,TAB切主要應用在搜索結果有固定的幾種分類,并且通常的情況下搜索結果都有很多的內容,如上圖的網易云音樂,每一個分類都有很多的搜索結果,如果它采用卡片式的瀑布流布局,用戶需要不停往下翻才能看到第二種分類的內容??ㄆ街饕\用在搜索結果的內容不多,如微信這樣的情況,每一類結果并不是很多,卡片式的瀑布流布局能讓用戶快速定位到自己想要的內容,如果這里用TAB切就很尷尬了,因為每一類的內容都很少或者很多類里根本沒有內容,這樣的用戶感受就不好了。

          4. 搜索結果的排序

          搜索結果的排序是一個比較復雜的工作,里面涉及了很多的算法邏輯,筆者對這塊也不是很清楚,但是一般的垂直內容型APP并沒有這么復雜的算法在里面,就是按照搜索的關鍵字去一一匹配。

          如下圖是說我在QQ閱讀輸入一個“男”字,然后就給我建議第一個字是“男”的所有可能的結果,當第一個字匹配完后就匹配第二個字,這樣以此類推。他們的整體順序就是按照匹配關鍵字的先后進行排列的,其實在排序中還牽涉了很多的算法,比如說它可能會摻雜一些“熱度、人氣、人為意圖、語義”等因素的權重,這里不展開贅述了。

          移動端搜索功能設計:3個階段解析搜索流程設計要點

          以上就是筆者對搜索功能的介紹和思考,希望能對大家有所幫助。

          本文由 @不知名設計師 原創發布于人人都是產品經理。未經許可,禁止轉載。



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


          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          博博

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          我是你們的學霸姐 2017-12-13 11:01:13

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          對于圖標如何斷線,如果是經驗豐富的設計師,估計靠感覺做就可以了,但不是大神的我們怎么辦呢?總得有點規律讓我們參考參考吧,雖然有些規律不能全盤通用,但這次總結一定能給你帶來幫助。

          來,看下大綱:

          1.先考慮在拼接處斷線

          2.平衡視覺復雜度

          3.避免正中間處斷線

          4.盡量讓圖標一筆畫完

          1.先考慮在拼接處斷線

          如果你覺得此篇文章對你有作用,請收藏轉發分享給你的朋友,把自己的收獲寫在評論區,小編會解答。

          如果一個物體是由兩個部分組成,當我們選擇在拼接處斷開:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          我會覺得兩個部分還沒組裝好,是一種很自然的分開。

          但如果是下面這樣的:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          我會覺得它壞了,很不舒服。

          我們做斷線圖標的時候也一樣,可以先考慮在物體的拼接處斷線,讓斷口看起來自然和諧!

          舉個例子:

          下圖是一個“我的”圖標:UI設計學習群:583915450,領取100G學習資料,備注:資料領取

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          如果現在讓我給它來做斷線,我就先找到拼接處,分析如下:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          雖然例子有點血腥,但事實確實如此,拼接處就在頭和身子連接的地方,所以嘗試在這里斷開:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          哎呦,我覺得還ok。

          行,那再來個例子!

          下圖是個消息的圖標:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          再來分析,它的外形是由一個矩形和一個三角形組成的:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          我們還是在拼接處斷開,得到如下圖:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          嗯,也還行!

          所以一般來做斷線圖標,我就會先利用這一個規律看可不可行。

          如果可行,就繼續優化細節,如果不可行再嘗試其他方法。

          2.視覺復雜度要平衡

          有時候,我們的圖標不好將其拆解,這時候我們就可以嘗試去考慮圖標的視覺復雜度。

          來個例子,下圖是一個皇冠的圖標:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          經過分析,我們可以得出,圖標紅色區域的復雜程度要比藍色區域高:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          所以我選擇在藍色區域斷口,來增加藍色區域的復雜程度,達到平衡的效果:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          那如果在紅色區域斷開是什么樣的呢,我們來分析對比一下:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          所以,通過對視覺上復雜程度的解析后發現,方案一會平衡協調很多!

          再來個例子,下面是個通訊錄圖標:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          圖標的左側要比右側復雜:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          如果我們選擇在左側斷線,那左側就會更復雜,這樣兩邊的復雜度就會失調,所以我選擇在右邊斷線:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          這樣圖標左右都有細節,視覺平衡多了!

          3.避免正中間處斷線

          有朋友會說了,那有些圖標沒有拼接處,復雜程度也都一樣,比如下面這種:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          怎么辦呢?

          很簡單,這種圖標只要盡量避免在正中間斷線就ok,因為正中間斷線顯得過于呆板:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          其它地方都可以嘗試,例如左上角、左上角、右上角、右下角等等。

          4.盡量讓圖標一筆畫完

          這也是一個很重要的知識點:如果可以的話盡量讓圖標外輪廓一筆畫完,如下圖:

          UI設計新手有福了:手把手教你斷線圖標規律,還不快快收藏?!

          其實很多時候,只要我們能從拼接處斷線,基本都是可以一筆畫完的,所以大家注意一下就好了。

          當然,如果實在不能一筆畫下來,也不必勉強,因為強扭的瓜不好看!

          總結

          這四個知識點就是目前為止菜心所整理的關于斷線圖標的規律,個人經驗,供大家參考。

          不過提醒大家,這些方法難免會有少數不適用的時候,遇到不適用的情況,千萬不要因為規則而被困住,多多嘗試,敢于不同,也許可以找到更合適的解決方案。

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


          超實用!UI設計圖標欣賞,絕對激發你的靈感

          博博

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          我是你們的學霸姐 2017-08-17 20:13:23

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          身為一名Ui設計師的你是否會有靈感枯竭的時候呢,下面本學霸會向大家分享一組簡約卻不簡單的圖標設計作品,希望大家在看完后能夠激發自己無窮的靈感哦~

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          有需要的小伙伴可以加群661690541一起學習,還有免費資料等你領取喲~

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

          超實用!UI設計圖標欣賞,絕對激發你的靈感

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

          UI設計中的布爾運算由淺及深,深入解析,圖標瞬間高大上!

          博博

          UI設計中的布爾運算由淺及深,深入解析,圖標瞬間高大上!

          UI設計棧 2018-03-26 19:24:14

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          平時我們提到的布爾運算其實就是AI路徑查找器(pathfinder),通過路徑【加】【減】運算繪制出各種各樣的形狀,是成為一名優秀的UI設計師必備的技能之一。

          對于初學者來說,剛開始可能模糊不清,確實不容易理解,下面棧長奉上最全的布爾運算深入解析教程,希望對迷途中的UI設計小白有所幫助。

          UI設計中的布爾運算由淺及深,深入解析,圖標瞬間高大上!

          圖片來源于網絡

          UI設計中的布爾運算由淺及深,深入解析,圖標瞬間高大上!

          圖片來源于網絡

          UI設計中的布爾運算由淺及深,深入解析,圖標瞬間高大上!

          圖片來源于網絡

          UI設計中的布爾運算由淺及深,深入解析,圖標瞬間高大上!


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


          UI設計規范

          博博


          惹不起的設計師 2017-02-20 15:03:14

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          UI設計拋開視覺設計不談,更多的是尺寸、適配等一些問題。這些問題往往是初學者比較難以理解的問題。更多的應用于簡化開發過程、使多個產品擁有一致的體驗,是落到實處的東西。由于負責各個產品線的產品經理并非同一人,如果此時設計師們又是滲透到各個產品組中,那么產品之間的體驗就根本讓用戶感覺不出是一個部門設計開發出來的。規范是大型項目必須的,可以簡化開發成本、減少各個部門之間的溝通成本。

          這是你苦苦追尋的UI設計規范,趕快收藏!

          這是你苦苦追尋的UI設計規范,趕快收藏!

          這是你苦苦追尋的UI設計規范,趕快收藏!

          這是你苦苦追尋的UI設計規范,趕快收藏!

          這是你苦苦追尋的UI設計規范,趕快收藏!

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


          2018年UI設計趨勢概覽

          博博

          2018年UI設計趨勢概覽

          嗨兔科技 2018-06-11 10:41:59

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          互聯網產品的用戶界面設計趨勢是根據用戶的不同需求而不斷變化的。在仔細分析了過去幾年用戶界面設計的趨勢和創新之后,我們可以發現其背后的一些規律,2018年UI界面設計的趨勢如下。

          2018年UI設計趨勢概覽

          漸變色

          在過去的幾年里,越來越多的設計師在設計作品時采用了色彩漸變的方法,今年的流體漸變更是風靡全球。即使你只選擇了一種顏色,也可以在色彩漸變和不同圖片的幫助下,營造出出豐富的層次結構感,繪制出一幅令人賞心悅目的畫面。因此,色彩漸變的流行之風不僅在席卷了2017年整年,還將會在2018年繼續流行下去。

          2018年UI設計趨勢概覽

          icon由線轉面、刻畫細節

          現在的ios12中,采用了面性圖標,未選中和選中狀態只有顏色上的區分,并且圖標更加圓潤。目前很多用戶界面已經給頁面底部標簽欄的icon加上微動效底部標簽欄icon不僅有微動效,十分有意思,符合當下95后00后的用戶心態。同時細節的設計帶給用戶的感受也會上一個檔次。

          2018年UI設計趨勢概覽

          透明度+重疊

          字體、圖形以及顏色的重疊,不僅可以使界面看上去更加醒目鮮明,還可以營造出一種空間感。 相同元素的重疊,再輔以陰影,也會使整個APP界面的設計產生更多的奇妙感,牢牢抓住用戶眼球,給他們留下深刻印象。因此,用戶體驗設計中,不同元素的重疊將會成為2018年的趨勢。

          2018年UI設計趨勢概覽

          卡片+投影相結合

          ios12中采用了大圓角卡片設計,它不再像過去MD中的小圓角那樣呆板,大圓角讓設計更加輕快大氣。相信大家已經看到了很多卡片都使用了投影這一手法,輕微的、似有似無的投影,不會被用戶立即察覺,但是會給設計增加深度,形成層疊的關系,更加醒目,可以更好的抓住用戶的注意力。

          2018年UI設計趨勢概覽

          插畫風格

          插畫風格運用的越來越廣泛,適用于app當中的啟動頁、缺省頁、banner圖、專題頭圖、彈窗插畫、icon等等,UI界面有各式各樣的插畫風格——如手繪風格、簡約風格、MBE風格、剪紙風格和孟菲斯風格等。這些插畫風格的使用不僅使APP更加有趣和與眾不同,同時也賦予了用戶界面個性,這就在界面設計層出不窮的當下能夠給用戶留下更為深刻的印象。

          2018年UI設計趨勢概覽

          較強的顏色或字體大小對比

          強烈的顏色或字體對比也可以幫助設計師設計出優秀的用戶界面來吸引用戶的注意。例如,添加不同樣式、類型、大小的字體,也可以傳遞層次和空間的感覺。而不同類型和風格的配色也會形成鮮明的對比,使整個設計更加豐富多彩和引人注目。

          2018年UI設計趨勢概覽

          3D效果正流行

          今年C4D大熱,相信大家已經感受到了,今年雙十一很多商家都使用了3D效果,有的還加上了動效,可以讓你全方位、多角度、更加真實的觀察商品。目前還不會C4D的設計師們,為了提升你的競爭力,有必要學起來了,畢竟技多不壓身。

          2018年UI設計趨勢概覽

          交互動效

          給APP的圖標、字體、照片和按鈕添加動畫或交互總是對用戶有著積極的影響,因為它能帶用戶更多愉快的體驗。它的幾點特性:快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果。所以這一趨勢在2018年還將繼續流行下去。

          2018年UI設計趨勢概覽

          動態視頻

          一般小視頻使用在啟動頁多用于第一次打開app的場景,對用戶的代入感較強再如由動態圖片轉變成動態視頻,圖片中有少量的動態元素,仿佛賦予圖片生命,比較唯美和貼近現實。手機banner設計上也會采用動態視頻進行展現,方便360度的查看商品,刺激你剁手的欲望。

          2018年UI設計趨勢概覽

          VR/AR/VUI是未來的大趨勢

          眾所周知,現在VR(虛擬現實)和AR(增強現實)VUI(語音交互設計)大火,它們的核心都是計算機視覺和聽覺。VR目前在娛樂領域被使用,而AR將會真正影響我們的工作和生活,多用于多媒體、市場營銷、教育等方面。VUI在醫療和戶外活動方面會發揮出前所未有的用戶超級體驗。

          2018年UI設計趨勢概覽

          我們為創造者和變革者而生,我們幫助企業制定用戶體驗策略,為用戶創造精彩的數字體驗,并通過品牌設計與用戶建立情感的連接,用設計驅動商業策略的成功。

          2018年UI設計趨勢概覽


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




          UI設計如何選擇界面布局樣式?

          博博

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          一起學設計 2018-03-15 17:32:59

          什么是界面布局樣式?

          界面布局樣式是指用于區分信息內容,層次的板式設計的具體方式。

          總結和了解目前常用的界面布局樣式,可以讓設計師快速決策,選擇合適的設計方式。

          界面布局樣式有哪些?

          UI設計如何選擇界面布局樣式?

          一.卡

          利用「卡」設計界面,對應的是現在流行的「卡片式設計」,比如:APP Store 的 Today 頁面。

          大海將從以下 3 點描述卡片設計的優勢:

          • 靈活性

          • 信息區分

          • 操作性和趣味性

          靈活性

          示例如下,分別是 Instagram,知乎,微博的首頁。

          UI設計如何選擇界面布局樣式?

          Instagram 的「推薦用戶」模塊,知乎的「知乎書店」模塊,微博的「問答」模塊,都利用了可以橫向滑動的卡片設計,打破了訂閱流信息垂直展示的限制,從而展示更多的信息。

          信息區分—信息類型

          示例如下,分別是天貓,嚴選,微信讀書的個人中心截圖。

          UI設計如何選擇界面布局樣式?

          這三個「個人中心」的設計,都利用卡片設計,對不同類型的信息進行了區分和歸整。

          • 天貓:第一張卡片式用戶個人信息,以及用戶自己收藏的內容和足跡數據;第二張卡片都是訂單數據;第三張卡片是運營卡片,用于專門的大型活動的內容展示;

          • 考拉:第一張卡片是用戶個人信息,以及用戶自己收藏的內容和足跡數據;第二張卡片都是訂單數據;第三張卡片是用戶相關的其他信息;第四張卡片是卡拉提供的服務。

          • 微信讀書:第一張卡片是用戶個人信息;第二張卡片是用戶賬戶的基本數據;第三張卡片是用戶自己生成的相關內容;

          信息區分—時間

          示例如下,分別是 APP Store,微信公眾號,微博的截圖。

          UI設計如何選擇界面布局樣式?

          這三個設計,都把復雜的內容信息,用卡片設計的形式,按照時間維度進行了整理和排序。

          操作性和趣味性

          示例如下,分別是支付寶,ZUO,探探的截圖。

          UI設計如何選擇界面布局樣式?

          • 卡片是一種模擬物理世界的設計形式,擁有可操作隱喻,可以被覆蓋、堆疊、移動、劃去。

          • 支付寶卡包:模仿物理世界真實的銀行卡設計,利用用戶已有的銀行卡查看習慣,讓用戶快速理解和查看已綁定的銀行卡

          • ZUO:「ZUO」是一款小眾的,有趣新鮮創意的內容分享產品。主打追尋更美好的可能,產品設計別具特色。左滑卡片可以切換內容的設計,讓產品體驗更加靈動有趣。

          • 探探:一款陌生人社交軟件,廣告主打:左滑不喜歡,右滑喜歡的體驗,凸顯自己在同類型軟件中的體驗差異化,用戶的感受更加新鮮有趣。

          卡片設計的反例

          自從 iOS 11 之后,卡片設計的趨勢就被推向了高潮。設計網站上有很多卡片式設計作品出現。

          卡片設計經常會呈現出比較好的視覺效果,但是卡片設計用的不好,會導致浪費空間,降低效率。

          示例如下:是大海從 dribbble 上找來的設計,通訊錄的設計利用了卡片設計。

          當用戶需要尋找聯系人時,呈「Z字型」閱讀曲線,遠沒有微信通訊錄的「直線型」閱讀效率高。

          UI設計如何選擇界面布局樣式?

          二.線

          「線」指的是 APP 設計中最常見的「分割線」,在分割線當中可以分為兩類:

          UI設計如何選擇界面布局樣式?

          貫穿式

          「貫穿式」是指,線長度貫穿屏幕,左右邊距為零。貫穿式分割線可以讓被分割的信息的獨立性變強。

          示例如下:分別是豆瓣的首頁,網易云音樂的動態截圖。

          UI設計如何選擇界面布局樣式?

          兩者的共同點是,每一塊信息的內容較多,關聯性弱。需要用貫穿式分割性,讓每一個信息內容,更加獨立。

          內嵌式

          「內嵌式」是指,線的左右邊距留有空隙。內嵌式分割線,可以有助于信息閱讀的流暢性。

          示例如下:分別是 APP Store 今日主題的列表頁,36Kr 的個人中心頁面。

          UI設計如何選擇界面布局樣式?

          貫穿式和內嵌式經常是同時使用的,如下圖:網易嚴選的填寫訂單頁面

          UI設計如何選擇界面布局樣式?

          圖中列表「商品合計」「運費」是相對關聯性較強的,因此這兩者之間用了內嵌式分割線?!肝乙_發票」和它們之間是相對獨立的,因此使用貫穿式分割線。

          分割線設計的反例

          分割線設計是界面當中最常用的元素,大??戳诉@么多APP,截了這么多圖,都沒有發現界面中一根線都沒有使用的產品。

          分割線設計要注意是否應該使用,以及使用時線的顏色,粗細。

          下圖中:知乎的「個人中心」,來源于網絡的日歷設計。

          UI設計如何選擇界面布局樣式?

          知乎:線的顏色用的過重,導致當看到這個頁面時,會感受到滿眼都是線。改進方法有兩種:把線改細,改淡;把列表文字改重??偨Y下來就是拉開文字和線的對比。

          日歷:日期本身的排版已經把信息區分的比較明顯,此時不需要使用分割線。假設 「親密」 「對比」 「重復」 足以讓信息得到區分,不使用分割線,可以讓你的設計,更加透氣簡潔。

          三.間距

          利用「間距」設計界面,對應的是現在流行的「無框設計」,不用分割線,純粹用間距實現信息的排版。

          大海將從以下 2 點描述其適用性:

          • 圖片為主

          • 內容少且有規律

          圖片為主

          示例如下:分別是 Instagram,愛彼迎,紅板報的界面截圖。這些頁面中,均以圖片為主。圖片本身的邊緣具備分隔作用。

          UI設計如何選擇界面布局樣式?

          內容少且有規律

          示例 1:愛彼迎的「故事頁面」和「搜索結果頁」,兩者都只有 2 中信息板式。內容少且有規律。

          UI設計如何選擇界面布局樣式?

          示例 2:輕芒的「分類頁」和「類別首頁」,分類頁只有一種板式,并橫向排版展示。類別首頁只有一屏信息。

          UI設計如何選擇界面布局樣式?

          總結:卡,線,間距都是頁面當中基礎元素,希望本篇文章可以幫助設計師掌握和了解這 3 個基礎元素的適用性。在設計執行中,更加風馳電掣,如沐春風。


          UI設計師如何有效的跨團隊、多角色溝通?

          博博

          UI設計師如何有效的跨團隊、多角色溝通?

          一起學設計 2018-03-19 17:55:35

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          作為設計方接口人,我近期參與了某產品新版本的交互設計及開發跟進工作。該項目的產品規劃、設計、開發、運營由京深兩地四方多個團隊合作進行。結合自身項目經歷,現將我對跨團隊多角色溝通的感悟與經驗加以總結,希望對大家有所幫助。有效溝通是提升工作效率的基礎,尤其是鵝廠這種業務涉及多地、對外多有合作的大型公司,進行跨團隊的、多角色轉換的溝通是工作常態??鐖F隊合作項目通常需要我們在團隊內部、異地leader、內外部合作伙伴、第三方外包等多種角色間靈活調整溝通方式,運用有效的溝通手段,以確保溝通效果。

          背景

          有效溝通是提升工作效率的基礎,尤其是鵝廠這種業務涉及多地、對外多有合作的大型公司,進行跨團隊的、多角色轉換的溝通是工作常態??鐖F隊合作項目通常需要我們在團隊內部、異地leader、內外部合作伙伴、第三方外包等多種角色間靈活調整溝通方式,運用有效的溝通手段,以確保溝通效果。

          索引

          UI設計師如何有效的跨團隊、多角色溝通?

          本文將從有效溝通的心理建設、角色分析、流程搭建+工具沉淀三個層次展開。

          心理建設

          有效溝通的兩點認識

          為“傳”而“達”

          溝通是信息的有效傳達?!皞鳌笔鞘侄?,要求溝通時需闡明觀點;“達”是目的,指明溝通旨在使人通達理解。溝通中出現的自說自話、固執己見,通常是偏執于“傳”,而忽視了“達”。需要明確的是,所有的溝通,都應該以接收方更好的理解接受為目的,而不是自顧自的滔滔不絕。

          減少損耗

          信息傳達的過程伴隨著信息的損耗。因此,在溝通的各個環節都需注意減少損耗,提升觸達率。一方面,要理清自己的表達重點和思路,減少信息的輸出損耗;另一方面,要從接受方關注點出發,提升對接受者的信息觸達;此外,還要靈活切換溝通方式、正確處理意見分歧等,盡量減少信息在傳遞途中的折損。

          UI設計師如何有效的跨團隊、多角色溝通?

          跨團隊多角色溝通的基本態度

          跨團隊——秉持中立合作的態度

          • 中立——團隊不同,訴求不同,秉持中立的溝通態度,不要因個人偏向導致無意義消耗。

          • 合作——以同理心贏得各方的信任,避免抵觸情緒的產生,營造良好的溝通氛圍。

          • 產品目標導向——對有爭議的問題點,應綜合權衡用戶體驗、產品目標和開發成本,以產品目標為第一要義。

          多角色——認清各方關注點的差異

          • 理解各方差異化的核心訴求——對不同團隊角色的溝通中應有不同的側重點,靈活的轉換角色,做有針對性的輸出表達。

          • 對內交流——以產品目標為導向,保證內部一致;對上匯報——重點明確,避免流水帳;對外溝通——目標明確,內部一致,有針對性的溝通,避免互相拆臺或雞同鴨講。

          角色分析

          項目組成員角色模型

          項目伊始,在融入團隊的過程中,應注意理清項目組內的不同角色,明確匯報對象,做好任務分工,理清利益關系,協調各方訴求。

          (具體項目組角色模型可能涉密,略)

          各角色核心訴求及溝通側重點模型

          不同角色的核心訴求不同,也因此在對不同角色溝通時也應該有所側重,以本項目為例:京深兩地四方的所有成員,可大致劃分為如下七種角色。

          UI設計師如何有效的跨團隊、多角色溝通?

          UI設計師如何有效的跨團隊、多角色溝通?

          各角色核心訴求及溝通側重點小結

          團隊角色 核心訴求 溝通側重點
          leader 把控項目進度、確保項目實現 進度同步、資源申請、問題確認
          設計負責人 推進項目進行,落實產品功能 進度同步、問題評審、資源協調
          視覺 確保視覺呈現 視覺反饋、問題評審
          技術支持 提供技術支持和監督 尋求技術支持、評估開發成本
          產品經理 推動項目進行、維護運營側利益 功能確認、開發協調、運營活動落實
          前端 降低前端成本、減少反復 跟進前端進度、幫助協調資源
          后端 規避后端風險、降低開發成本 前端實現確認、開發問題跟進與協調

          流程搭建

          有效溝通流程模型

          在有效溝通流程模型中,我按籌備、執行、跟進三個階段,繪制出體驗地圖,將溝通中的關鍵節點按行為、心理、情緒、方法、工具五個緯度拆分,梳理各節點需注意的問題,以及相應的有效溝通方法和工具。(詳情請點擊查看大圖)

          UI設計師如何有效的跨團隊、多角色溝通?

          UI設計師如何有效的跨團隊、多角色溝通?

          籌備階段——明確目的,同步信息

          • 明確溝通目的。無論是同步郵件、電話會議還是IM群聊,都需要在發起前明確目的,列好問題清單,帶著目的溝通。如:多方電話會議前,應事先知會各方會議主旨,準備會議提綱并在會議開始時向各方闡明,為會議提供清晰的行進框架。

          • 提前同步信息。信息同步是溝通的前提。依據溝通目的準備溝通所需的文檔,根據需要提前同步,盡量減少因信息不對稱帶來的時間浪費。明確易讀的設計輸出、正式溝通前與各方單獨的預溝通、提前郵件同步告知等,都是有效信息同步的手段。

          執行階段——抓大放小、促成共識

          • 對待爭議,抓大放小,避免僵局。評估爭議點時,先不要基于反駁避免情緒化表達,適當發問:為什么做?為什么不做?不做之后有什么后果?理智全面的做出評判。給問題點評定優先級,抓大放小,集中精力推進主功能,高成本、低優先級的細節問題放到最后統一處理,避免陷入“就是要改”vs“就是不改”的無謂消耗。根據需要及時協調第三方資源進場,尋求技術支持或資深leader的建議,避免溝通僵局的出現。

          • 促成共識。無結果的溝通是無效的溝通,有效溝通應促使各方達成共識。無論是待協調、暫擱置還是需改進,都需要有一個結論明確、責任人明確、截止時間明確的溝通結論,并依此執行跟進。

          跟進階段——同步落實,自我反思

          • 進度同步,問題落實。溝通過后及時同步溝通結論,設計交付、前端交付等階段性時間節點,需以正式的項目郵件,及時周知項目相關人員。對于已解決的問題,及時跟進驗收;暫時擱置的問題,做好記錄,明確時間節點和責任人;需更多資源介入的問題,及時對上反饋,申請資源解決。

          • 自我反思與補齊。每次溝通都是一次查漏補缺的過程,每次溝通后花時間反思一下本次溝通中自己在設計說明中有哪些疏忽、表述上有何不足、相關知識上有那些欠缺,以此為鑒及時調整、補齊疏漏。

          工具沉淀

          開發故事卡

          說明:明確易讀的設計說明文檔

          功能:產品設計說明、開發指導手冊、階段性交付走查依據

          使用場景:跨團隊溝通中,便于開發人員準確的理解設計意圖;適合外部合作時模塊化開發與階段性交付,便于交付及走查。

          使用要點:

          • 根據信息構架拆分產品模塊,分別設立索引,提供產品概覽,串聯各功能詳情頁。

          • 在索引和詳情頁之間由超鏈接跳轉,方便快速定位。

          • 按照功能點拆分詳情頁,提出功能需求,明確驗收標準,說明頁面細節。

          • 各頁面統一編號與視覺源文件一一對應,方便快速查找。

          UI設計師如何有效的跨團隊、多角色溝通?

          需求管理文檔

          說明:需求及反饋問題的規范化管理模板

          功能:需求變動及問題反饋的管理模板、開發發跟進的溝通文檔

          使用場景:開發跟進階段,實時記錄變動的需求及反饋的問題點;設計側定期反饋給開發人員的規范化輸出文檔。

          使用要點:

          • 明確問題及目標效果,排定優先級依此解決。

          • 明確負責人和時間節點,保證落實。

          • 做好文檔更新維護及信息同步。

          • 按階段統一反饋調整,節約開發時間。

          UI設計師如何有效的跨團隊、多角色溝通?

          關注點推進模型

          說明:不同項目階段明確核心關注點的虛擬模型

          功能:輔助聚焦當下關注點,避免陷入不合時宜的細節或宏觀問題

          使用場景:從宏觀到微觀的產品設計過程中,幫助梳理各個階段需溝通的核心問題,溝通時陷入細節或反復爭論時的自查工具。

          使用要點:

          • 做好關注點的的逐步推進:探討信息構架時就不要在交互樣式上反復拉鋸;討論交互方式時就不要過度關注視覺細節。

          • 不過早陷入細節。優秀產品的細節固然需打磨,但從0到1實現一款產品的過程中,將有限的資源和排期消耗在不合時宜的細節權衡上,得不償失。

          • 同樣,若因執行時的設計挑戰需調整產品上層,也需主題限定問題范圍,不要因宏觀問題上的反復而影響執行效率。

          UI設計師如何有效的跨團隊、多角色溝通?

          優先級評估模型

          說明:不同項目階段評估需求優先級的KANO衍生模型

          功能:借助KANO模型分析思路,對需求優先級提供排定依據

          使用場景:設計階段樣式取舍、開發跟進階段需求調整的先后順序、應對分歧如何抓大放小,都可以借助優先級評估模型輔助評估。

          使用要點:

          • 不同項目階段,不同溝通對象對同一需求優先級的評定標準不同,因此應注意根據項目階段和溝通對象靈活調整。

          • 不同產品在用戶體驗與產品目標取舍上有所區別。一般而言,2C產品更注重用戶體驗,而2B產品則可能更注重實現產品目標,因此應注意具體產品具體分析。

          UI設計師如何有效的跨團隊、多角色溝通?

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


          產品經理分析產品積分體系

          博博

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          積分的作用在整個產品的過程中主要是希望是圍繞著拉新、留存、促活去做的,配合著主打新功能等等根據產品的差異而差異化。從用戶為出發點,將積分可以分為兩大塊:一塊是獲取、一塊是消耗。

          從用戶角度出發,了解關于產品積分體系的事

          首先,就積分而言,是用戶通過完成某些任務或手段來進行對應積分點的獲取,再通過相關的手段進行消耗的一個過程。

          從用戶角度出發,了解關于產品積分體系的事

          所以從用戶為出發點,將積分可以分為兩大塊:一塊是獲??;一塊是消耗。

          下面針對兩點分開來說:

          一、獲取(主要是獲取的方式和對應的規則)

          獲取方式,大類可根據用戶完成對應任務類型分為:

          1. 新手任務類(這是一個幫助用戶熟悉產品同時激勵用戶使用產品的過程)

          • 綁定手機;
          • 綁定郵箱;
          • 上傳頭像;
          • 首次消費/發文/分享等等對應產品核心功能的首次使用;
          • 完善個人信息。

          根據產品核心功能和側重點的不同而不同,一定要區別哪些信息內容是我們想從用戶處獲取的核心,哪一些并不是很重要。不要人云亦云,不要有“別的產品有了所以我也要有”的思想,思考一下為什么你要需要這個任務??梢远鄥⒄掌渌e分體系完善的對它們進行整理歸類,之后結合自身產品特性再去做自己的。

          2. 日常任務類

          • 簽到(這幾乎是最基礎最常見的);
          • 對應產品核心功能的使用相關的任務。

          3. 運營活動類

          • 節日相關類;
          • 產品特定日期相關類(周年等等)。

          這個具體需要配合運營相關人員的推廣活動等等進行部署調整,但是一定要做好部門間的對接工作。因為活動對應分配的積分比例等等影響很深遠,一定要思考好本次活動預計需要分發出去多少積分,達到怎樣的活動效果?對積分整體有什么影響?存在那些可能出現的問題和漏洞?怎么去防止薅羊毛黨?等等。

          4. 特定激勵用戶類

          這類主要是,例如:生日,或者和用戶建立聯系的特定日期(例如:幾周年等等)。

          5. 均衡刺激積分的流通

          這類主要放在消耗中講,主要是抽獎類把積分當作一類獎品進行兌換。

          以上算是大致講了積分的獲取,要領就是結合產品結合情景去進行設置。對于初次設計的人來說,就是先要找到經典體系完整的有相關性參考價值的產品的積分體系,進行總結整理思考,然后再進行自己的設計,而且盡量多看多整理幾家。

          二、消耗

          消耗的話根據產品的自身屬性的不同,表現形式差異性比較大所以我的列舉不一定人人都適用,僅供參考。但是本質都是一樣的,都是進行積分的消耗。

          1. 兌換商品

          • 虛擬商品;
          • 現實商品。

          兌換的手段可以是純積分兌換,可以是積分+現實貨幣。對于兌換商品的選擇也是很重要,如果兌換給出的商品都讓用戶提不起來興趣,那么無疑是失敗的。好比二次元類搞活動積分兌洗潔精就跑的很偏了,所以選品也很重要。

          虛擬產品的兌換最好是圍繞著核心功能or下一步主打的功能來比較好,再或者說積分體系和會員體系是相輔相成的,可以在兌換商品,這里加入兌換會員增強之間的聯系。會員體系是另外一大塊了在這里就不說了。

          2. 抽獎

          抽獎是最好的進行積分流動的手段,如果用戶只是一味的累積積分,無論是產品所提供的虛擬商品,還是現實商品都不和他心意提供另一個出口給用戶?;蛘咔皟烧唛T檻過高或需要現實貨幣,用戶不愿花費,抽獎都是一種低花費積分小概率抽中商品,利于積分生態的流動的措施。

          具體的抽獎形式就很多了什么刮刮獎啊大轉盤啊,記得要控制好概率分配噢。

          三、注意點

          (1)對于整個積分體系上面都是細節,在實際操作中第一步,要確定的是在公司的戰略上,愿意每年投入多少錢在里面,或者對于已經盈利的公司,是拿出盈利里的多少百分比來進行用戶的一個回饋。

          同時,在投入時,希望得到的反饋效果是怎樣的,都要制定好。這個可以根據數據后期的變化再進行調整,但是一定要有這樣一個概念。去估計整體的量,在這個預算下進行后期的設計,同時在后期設計完成后,在進行計算在極端情況下(兩個極端)和預期情況下,和公司整體戰略偏差是否在可接受范圍,如果不在那么再進行調整。

          (2)積分體系可以看作是產品內部的貨幣體系,所以要注意積分膨脹和積分緊縮的問題,要是積分的價值盡量保持在一個波動不大可控的范圍內。無論是膨脹還是緊縮,都會影響產品和用戶給產品帶來不好的影響。請重點關注膨脹,因為多數會出現的情況時設計不當積分超發。

          (3)做好相關數據的管理實時反饋,用戶的領取積分數據,消耗積分數據等等,細節數據需要自己去扣清楚都是有價值的數據。后臺相關頁面設計到位,及時將數據反饋給相關人員進行溝通。

          (4)做好風控體系,別讓羊毛黨毀了整個體系。

          (5)不要讓你的積分體系一成不變,在固定的體系下,要用不同的活動內容和兌換商品的推成出新,讓用戶感覺到新鮮感。如果什么都不變化不抓著節奏走,那么用戶會失去興趣。具體要和運營等等相關人員進行討論。

          (6)積分的規則一定要完善沒有漏洞,不論是給出的任務還是消耗的過程一定不要有歧義,一定要仔細?。。。。。∵@點很重要?。。。?

          (7)積分體系的任務應該是對用戶的留存,活躍和新增起到幫助作用的。所以不可能兼顧到所有的注冊用戶,一定要分清楚主次,誰是主要服務對象,服務的目的是什么等等。

          好久沒有寫過文章了,邏輯有不順暢,內容有錯誤的地方歡迎大家指出,互相學習,謝謝閱讀。

          本文由 @judyyyy 原創發布于人人都是產品經理。未經許可,禁止轉載

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


          為何如今的產品總給人千人一面的感覺?

          博博

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          編者按:這篇來自產品設計師 Eugen E?anu 的文章解開了我長久以來的一個疑惑,其中的思考和經驗值得我們共勉。結尾的 One more thing 是我額外補充的內容和一點想法,和當下產品設計的困境相關,也是試圖補完這篇文章,希望能給你一點幫助。

          為何如今的產品總給人千人一面的感覺?

          當你在尋找一個能夠滿足你需求的應用的時候,會不會因為太多相似的產品而無從選擇?當你想要在兩個甚至更多相似的產品中進行選擇,一切都顯得那么困難。而唯一能夠進行快速區分的因素似乎是設計,但是緊接著會發現連設計都是那么相似。

          為什么市場上所有的應用看起來都長的同一副面孔呢?

          在回答這個問題之前,我想簡單澄清一些事情。為了創造出能夠解決需求的產品,通常需要采用以人為本的方法來進行設計,但是事實上,那種狀態太過于理想,幾乎沒人能夠真正做到。

          以人為本的設計方法,確實能夠極富創造性地解決問題。當采用這種方法來為目標用戶進行設計,最終能夠得到了一個為這些用戶量身定制的解決方案。但是,這種設計方法需要設計者具備無與倫比的同理心來真正站在目標用戶的角度來思考問題,由此獲得大量的想法和靈感,建立一大堆可能有效的原型,同目標用戶分享你正在做的事情,驗證你的感受和想法,最終將你的創新的解決方案推向世界。但是這是理想的狀況。

          那么為什么世界上那么多偉大的公司,依然無法真正采用這樣的方法成就真正優秀的產品呢?因為幾乎所有的產品身上都有一種病毒,它的名字叫做特征蔓延。

          為何如今的產品總給人千人一面的感覺?

          產品開發流行?。禾卣髀?

          特征蔓延的英文名叫做 Feature creep,它的主要癥狀就是不斷向產品中添加功能。

          現如今,絕大多數的產品,無論是物理實體還是存在于手機中的各色 APP,幾乎全都面對著激烈的競爭。

          激烈的競爭使得每個人都面臨著壓力,產品所屬的企業中,從領導到產品經理再到最底層的開發者和設計師,所有人都面對著來自對手和潛在對手的壓力。

          這種競爭壓力基本上是源自于三個方面:價格,功能和質量。非常不幸的是,絕大多數時候,這三者的壓力從前到后是依次遞減的。價格競爭的壓力通常是最大也是最直接的,然后才是功能和產品質量,至于這個順序意味著什么,就不贅述了。

          同時,產品上線的速度和順序也很重要。誰是進入市場第一人,這個是必須爭一下的。

          這樣一來,想要盡快殺入市場的產品,在很大程度上是伴隨著「偷工減料」的。沒有足夠的時間來對產品進行足夠多的迭代,沒有辦法把系統調整到最優,沒有辦法把硬件缺陷都找出來,沒有辦法把軟件中每一個 Bug 都盡量找出來,甚至絕大多數企業的領導都抱有「沒事,我們隨后再把問題找出來解決掉?!箯碾娔X到汽車,從 Windows 到 iOS,從來都是如此。

          沒有什么 Bug 是一個補丁解決不了的,如果不行,多打幾個?!猈indows開發團隊

          為何如今的產品總給人千人一面的感覺?

          當然,能夠通過后期補丁解決的問題終究是少數。實際市場上絕大多數的產品確實隨著補丁和修改逐步提升了,但是絕大多數仍然沒有解決用戶的問題。

          對于特征蔓延這種病癥,早在1976年就已經被發現,并且在產品設計圈當中有著非常廣泛的認知。對于這種產品病有一個非常學術的描述:

          特征蔓延是指一產品(如APP)的軟件機能持續膨脹或增加的情形。產品基本機能以外的擴充機能,會使產品比原始設計要更復雜。長時間來看,額外或不需要的機能慢慢的進入系統中,使系統超出原來設定的目標。

          假設我們擁有一個非常強大的產品團隊,設計師擁有足夠的同理心,開發和測試也非??孔V,他們使用以人為中心的設計方法,探索了所有用戶使用場景,并且遵循產品流程認真設計仔細測試,最終輸出了一個用戶想要購買的優質產品。假設這個問世的產品在各個層面上都是完美的:擁有直觀的界面,良好的感覺和優秀的視覺,貼合用戶的體驗等等。它只有一個使命,那就是以有意義的方式滿足人們的需求,讓人們能夠更好地生活,產品因此而走向成功。誰都想來一個。(就像解決了信號問題的 iPhone 4)

          非常不幸的是,產品上市之后,各種各樣的影響因素開始出現,情況開始向著并不理想的方向發展。

          • 現有的用戶非常喜歡這款產品,但是他們想要更多的功能,各種各樣的功能,包括帶孩子。
          • 競爭對手開始推出新款,并且具備一些全新的、我們的產品所不具備的功能。從公司領導到用戶都開始催我們的團隊增加新功能。
          • 客戶對于產品總體上是滿意,但是買的人多了之后,市場趨于飽和,銷售額不可避免的下降了。是時候添加新的或者創新的功能來促使用戶更新或購買新版本了。

          特征蔓延就是這樣出現的,產品在現有的功能上不斷增加更多的功能。各種各樣的理由會促使產品不得不增加功能,各種各樣。然后產品開始膨脹,臃腫,直到用戶實在不太想用或者徹底沒法用。

          而在如今的市場和商業競爭中,特征蔓延并不是唯一的絕癥。

          為何如今的產品總給人千人一面的感覺?

          競爭驅動式設計的泥潭

          哈佛大學教授 Youngme Moon 認為,產品和競品之間的攀比對抗是讓產品陷入千篇一律的境地的主要原因。通常,企業為了提升產品的市場份額,會讓自家產品擁有對手一樣的功能,來確保競爭力。對手的團隊協同軟件的售價是20美元?沒事,我們開發個功能一樣強大的,定價15美元好了。他們的移動端的 APP 只需要加1美元就能獲得?那我們的移動端版本直接免費和桌面端綁定好了。

          當產品陷入和對手刺刀見紅的局面之時,兩敗俱傷的結果就不遠了。試圖逐個功能和對手競爭,必然會陷入同質化的競爭,很難讓用戶真正愛上其中的某個產品。

          這種就是競爭驅動型設計。令人遺憾的是,即使產品的第一版是以用戶為中心設計出來的優質產品,在競爭驅動下誕生的后續產品,就很難贏得用戶的真心了。

          很多時候如果你想創造真正卓越的產品,你不得不花費更多的時間。而即使你創造出來這樣的產品,在市場上也不一定能在銷售排行榜上殺入前三,屈居第四是很正常的事情。那么你還愿意這么做么?

          我們都聽說過先發優勢,但是你真的知道獲得先發優勢,將會付出什么樣的代價么?

          為何如今的產品總給人千人一面的感覺?

          用1年寫一冊暢銷書,還是花5年成就一本經典?

          以寫書來舉例也許更加直觀。當你決定寫一本關于設計的書,然后登上暢銷榜,名利雙收,好像挺不錯的。如果它的內容是之前沒人寫過的,并且確實比較有市場,在內容上稍加打磨,幾個月后引爆設計圈似乎不是太大的問題。事實上,它上架之后,和自己的預期相差不遠,挺好。不過,不知道為什么,1年之后,熱點消退,這本書也沒什么人買了。

          換一個做法,寫書的過程中可能需要勒緊褲腰帶過日子,花上5年時間仔細揣摩,寫一本擁有持續價值的書,然后在之后的100年時間當中,成為設計圈中每個設計師的必讀書。寫書的過程中,你需要專門地進行研究,仔細地調整內容,對于每個細節都精雕細琢,花費更多的時間,讓這本書有對抗時間的價值。

          從長遠來看,只看眼前、偷工減料的公司會自然而然過時,然后被人們所忘記。浪潮過后,誰在裸泳一目了然。

          為什么總忍不住添加新的功能?

          和對手的對比,總能看到自家產品的缺陷,然后補完缺陷,這有什么不對么?似乎沒問題,但是這種思維方式并不會打造更好的產品。更好的策略是:

          專注于自家真正擅長的領域,并繼續深挖自己的長處。在自己的優勢領域,集中自己的研發能力,并作為營銷重點。這樣才能讓自己的產品從平庸走向卓越,真正能在慘烈的紅海中脫穎而出。用更少更精銳的功能來成就自己,而不是在成堆的功能中與對手同歸于盡。

          還記得一代的 Google Pixel Phone 么?他們的營銷口號是「有耳機插孔的手機」,對標的正是取消耳機插孔的 iPhone ,而這個文案正是嘲諷 iPhone 的設計太過愚蠢。令人驚訝的是,隨后的 Google Pixel 2 也跟著取消了耳機插孔。現在還有誰記得 Google Pixel 系列呢?

          為何如今的產品總給人千人一面的感覺?

          是聚焦長處,還是忙于跟隨?

          偉大的設計需要脫離茍且的競爭和來自客戶的壓力。開始專注于你認為重要的事情,以及你目光所及的遠方。在你最優秀的地方,集中精力。你必須確保你的產品是一致且連貫的。這意味著領導層需要足夠睿智,也足夠堅定,這樣才能抵擋來自用戶和市場部門不斷增加產品功能的各種需求。

          成就最好的產品,設計者要屏蔽來自競爭對手的聲音,專注于用戶真實的深層需求。

          不要覺得我的話是憑空而來的。Amazon 的 CEO 兼創始人 Jeff Bezos 也提到過類似的方法,被稱為「客戶迷戀」。在他看來,將所有精力集中在客戶的需求上,而不是競爭。重點在于三個簡單的問題上:「客戶需要的是什么?」「他們的需求如何才能滿足」「我們可以做什么來提高客戶服務和價值?」Bezos 還認為,專注于客戶才是首要目標,其他的問題會迎刃而解的。如果你一開始就被市場競爭吸引了注意力,很難作出真正對的決策。產品質量通常只關乎客戶和解決真實的需求。

          One more thing

          想要從激烈的競爭中抽身出來, 創造真正獨特的產品,是許多產品設計師的愿望。但是這真的不是一句話說得清楚的事情,真實的情況比我們想象中還要復雜。

          競爭驅動型的設計確實是一個很難繞過的問題,驅動產品的不僅僅是領導和客戶的聲音,深陷市場競爭,許多時候確實身不由己。

          采用以用戶為中心的設計的設計流程,還繞不開一個常見的因素:最佳實踐。經過前人驗證、時間打磨、用戶習慣之后所獲得的最佳實踐,是設計師和產品在很多時候必須依托的東西。比如我們如今所看到的許多表單的設計策略和漢堡菜單的使用。用戶和市場已經「塑造」出了許多最優的設計策略,設計師通常會直接拿來使用,而我們感到「千人一面」的 UI設計當中,確實有各種最佳實踐所「作出的貢獻」。

          為何如今的產品總給人千人一面的感覺?

          包括我們現在正在不斷探索的動效設計,雖然力圖在視覺和體驗上有所創新,但是早在近百年前,迪士尼的動畫設計師們已經總結出一套人性化動畫設計的策略,實際上我們今天許多優秀的動效設計,依然是圍繞著這一套「最佳實踐」來進行設計和重設計的。

          為何如今的產品總給人千人一面的感覺?

          違反「最佳實踐」的特立獨行的設計并非不可,只不過它通常需要遵循「每次僅只能打破一個規則」的原則。在用戶已經被市場培養出大量習慣的前提之下,大量采用反直覺、反習慣的設計,只會讓產品死的更快。

          那么是不是就沒有辦法了呢?當然不是。新鮮有趣的、獨樹一幟的設計并非沒有辦法設計,設計師需要在最佳實踐以外的部分尋求改變,探索可能性,甚至等待契機。不同的設計趨勢、元素、技法、排版布局、配色、動效進行多樣化的組合,依然可以創造出讓人眼前一亮的設計。但是這還不夠。

          為何如今的產品總給人千人一面的感覺?

          早在上世紀30年代的時候,包豪斯設計學院的先哲們就已經提出過「形式追隨功能」的設計箴言。這句話強調的是設計的科學性,便捷性和經濟效益,而不再是圍繞著裝飾性和簡單的形式感來進行設計。在今天這個用戶體驗至上、以用戶為中心的設計趨勢之下,UI 和視覺所代表的「形式」所追隨的「功能」應該是用戶的真實需求。而在這個語境下試圖創新,或者恰如其分地融入一些貼合場景和目標的藝術元素,也許是個不錯的突破口。

          正如同在上一篇文章《熟知用戶行為的這7個層面,你的設計才會走進人心》中所說的,客戶買鉆頭的時候,需要的并非鉆頭而是洞,同樣的,用戶下載一款閱讀APP 的時候,他的真實需要并非是閱讀器,他需要的是內容,是信息,是滿足他求知欲的文章,或者填補碎片時間的有趣的故事。

          為何如今的產品總給人千人一面的感覺?

          內容為王這句話早就已經不是口號了。圍繞著內容做設計已經成為了諸如 Medium 和 Twtter 這樣的企業的新策略,而國內的許多一線企業也開始擁有自己的「首席內容官」。讓設計追隨內容,讓真正吸引用戶的東西來撬動產品,拉升體量,才是正途。

          設計和內容的結合方式多種多樣,根據內容所需要的語境來搭配相應的設計是目前已知的最常見的做法。根據內容本身所具備的故事性和環境特征,視覺化地表達,讓 UI 和視覺服務于內容,是許多成功的設計所驗證過的技巧。

          比如下面的 voyage-electrique這個網站,借助 C4D 構建的 3D 可交互式的場景來呈現電力系統的運作,清新可愛的畫風和令人愉悅的音樂讓原本沉悶的主題顯得頗為有趣,讓人心生好感的設計,使得相關的信息更容易被用戶接受。流程化的信息呈現方式隱約具備了故事性的表達,即使你并不懂法語也會流連忘返,在點擊和探索中多停留一會兒。語言蒼白,不如點進去看看。

          為何如今的產品總給人千人一面的感覺?

          最后需要注意一個問題:人類先天就是喜新厭舊的生物,再新鮮有趣的東西,在獲得之后都會快速地適應(適應性認知偏差),并不再感到新鮮。在內容和設計策略上,適時地注入新鮮的內容(不違反基本設計規則和產品方向的前提下),是維持活躍度而必須做的事情。

          原文作者 : Eugen E?anu

          譯者/編輯 : 陳子木

          譯文地址:https://www.uisdc.com/design-product-like-everyone-else

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

          日歷

          鏈接

          個人資料

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

          存檔

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