目前我主要深耕于B端設計中,深知B端表格設計與C端有很大的不同,無論是表格的展示形式以及承載內容上都有非常大的差異。而現在網上有不少關于表格如何設計的文章,但要真正落到實處的少之又少,因此今天我們就來聊聊表格,探討一下B端表格究竟應該如何設計。
由于表格組件類型復雜,因此分為上下兩篇,上篇主要講基礎知識點,下篇主要針對交流群中的20個問題進行解答,歡迎持續關注~
在我們B端表格頁中,由導航、篩選、表格幾大模塊構成,因為表格面積占比最大,頁面呈現最為重要,會直接影響用戶的使用體驗。
在我們對表格的設計思考過程中,需要注意兩項原則:易讀與易用
前者是提升使用者在表格瀏覽時的體驗,主要是從信息密度、色彩分隔、以及視覺節奏三個方面去理解;后者是使用表格時的操作感受,比如快捷操作、多數據編輯等方面去理解。無論是B端的任何頁面,表格都是必不可少的部分。
想要把這三種形式講透,需要將數據的形式結合起來說,我會從展示形式、數據結構、前端標簽 三個方面去解釋三者的區別。
表單擁有一對一的數據結構,能夠讓用戶明白數據間的對應關系。同時使用表單的門檻,擁有更合理的錄入形式,比如在常見的問卷調查、登陸注冊都是采取表單的形式。
在前端展示方面,表單采用的標簽一般會包含:text、password、radio、checkbox、button、submit、reset、image、file等屬性,我們也要針對不同的屬性進行相應的設計區分。
列表能夠將數據在一列中井然有序的展示,保持數據的有序與整潔。列表擁有一對多的數據結構,能夠讓用戶理清一條數據下的多個對應關系,并且多個對應關系是相互并列。比如在常見地待辦事項、走查清單中里,就是使用單維度數據進行排列。
在前端展示上,列表中的標簽分為有序與無序。
? 有序列表:即有順序的列表,其各個列表項按照一定的規則排列定義,前端標簽上采取<ol><li>的結構。
通常有序列表一般為數字序號(1、2、3、4...)或者字母序號(a、b、c、d)
? 無序列表:無序列表的各個列表項之間沒有順序級別之分,為并列關系。前端標簽上采取<ul><li>的結構。
在多維度的數據分析中,你是永遠的逃離不了表格,使用多維度數據進行統一的結構化展示,讓用戶清晰的看到在同一主題下的多條數據的對比,使數據能夠進行多維度的展示,保證數據的完整性。
在前端的方面,表格中都是采取 <table> 標簽進行展示,同時表格中的行與列分別用 <tr> 與 <td> 標簽,我們通常說的表頭,則為 <th> 標簽。但要注意,在前端眼中表格永遠沒有列的概念,列都是每行拼接而成。
正式開始之前,我們先定義一下表格~
表格是一種常見的信息展現形式,它是所有B端組件中信息展示密度最高,同時涵蓋了B端的所有場景,因此是B端設計中的一個重要的組件。
在我們常見的B端產品改版中,除了對頁面流程調整以外,更多就是圍繞表格而展開的一系列優化。因此表格的設計,做為B端設計師的基礎能力之一,也是檢驗一個B端設計師是否合格的關鍵因素。
表格屬于形式十分單一的組件,對于沒有經驗的設計師來說,會認為能夠調整的地方實在太少,往往在思考層面就會有所不足。對于一個B端表格來說,它需要具備數據瀏覽、數據新增、數據操作、數據統計,因此功能多而全,很難思考解決問題思路。
通常設計師設計單個組件,都會有較好的全量意識。而到了多組件的聯動時,就會出現問題。
比如在表格中,除了表格本身,還會有搜索、篩選、視圖、分頁等操作,如果不對多組件的交叉使用進行思考,也會缺少對于這些場景的設計。
在表格中,會承載多種多樣的字段類型,而每一個字段類型都會有相應的差異。形式的不同落到表格上就會有不同的呈現形式,在關鍵數值的處理上,也會差強人意。因此看上去簡單的一個表格,其實會有很多需要設計的點。
而深入到表格的內部中,你會發現能做的遠遠不止于此,如果剛開始沒有對表格進行梳理,那么你在設計的過程中,對于反復出現的表格將束手無策,為了讓大家能夠對表格有更深的理解,我將表格進行系統的拆解,結合實際案例,能夠讓表格更淺顯易懂。
首先問大家一個問題,你覺得表格一共有幾個部分組成,分別是什么?給大家五秒鐘時間思考~
5
4
3
2
1
~
在我看來,表格一共分為五部分:
概括整個表格的內容信息,讓用戶一眼就知道該表格的用途是否符合自己心中的預期。
在實際場景中,除了通過標題文字去的形式之外,你還可以為每一個表格去設計不同類型的圖標,這樣能夠讓用戶看到圖標就能聯想到內容,這也是現在無代碼開發平臺常見的處理方式。
但在工具欄的排列方式會有非常多的講究,在市面上的操作區域一般可分為單行與雙行的狀態,可根據自身產品要求的特點進行隨意的變化,會在文章后半部分具體講到工具欄的設計思路,這里就不再過多贅述。
概括每列的主要信息,在用戶使用表格中,起到數據解釋作用,讓數據能與之進行匹配,使用戶能夠看懂數據。同時在表頭處會擁有一些操作,比如凍結、篩選、排序都會放置于此,因此需要進行留意。
承載用戶的每一條數據,也是整個表格的核心。單元格的大小行高都會直接影響用戶使用表格的體驗,單元格的設計上也會有很多設計思路,在后半部分也給他家提供了我自己的看法,與大家進行探討,在這個就先按下不表。
嚴格意義上講,分頁是不屬于表格當中,但當數據超過用戶所設定的閾值時,就需要使用分頁拆解數據,所以分頁和表格是經常聯系在一起的。分頁一共有:基礎型、迷你型、完整型三種類型。
而如何進行跨頁的操作,一直都是分頁在B端中的難點,需要有好的思路與邏輯,在分頁模塊中與大家聊聊。
你知道表格類型的多少決定你了設計表格的下限。
雖然在大多數業務場景中都是使用基礎表格,但在B端產品中業務的多樣性使得很多特殊的表格有它獨特發揮的空間。
我發現在我的B端交流群都有著類似的問題,他們不知道表格還存在這么多的類型,這時候你與別人之間的認知的差距就是你設計優勢所在。
基礎表格是根基,是由行與列的單元格組成。在使用層面上能滿足用戶多維度查看數據的需求。因為大家都很熟知,在這一章節并不是主角,我們就不做過多贅述。
當表格中的數據為包含與被包含的結構時,可采取樹形表格。
通過逐級大綱的形式來展現數據間的層級關系,讓整個信息結構變得一目了然。這一表格形式常出現于項目管理工具中,比如 Teambition、Tapd、飛蛾都有這樣的設計。
作為騰訊最重要的項目管理工具,在產品設計之初,就考慮到類似情況,你能夠在Tpad單列數據編輯點擊入口,創建子數據,這樣在項目管理的場景下,有著較為友好的交互體驗。
前段時間,Teambition正式成為阿里旗下的辦公套件,而釘釘的云釘一體化,或許證明這樣龐大的市場仍然還要等待時間的挖掘。期待資本對于B端行業的更多動作
我們回到設計上,Teambition在9月份經歷的改版,變化很多,有機會可以總結一個改版分析分享給大家,作為一個項目管理軟件,Teambition也擁有樹形表格的這樣一共功能,它的添加入口出現在每個數據詳情頁的最下方,同時在視圖層面,也可以篩選展示為:所有任務、僅父任務、僅子任務四種場景,更能滿足用戶的需求~
當一條主數據下有多條數據結構不同的關聯數據進行嵌套時,這時候就可以用子表格進行創建。它能夠對主數據進行更加細致的解釋,詳細的了解主數據中數據的含義。從表象上看,就是在一個表格中還能嵌套另一個表格。
比如在對某集團對旗下子公司的銷售表格中,它能夠通過嵌套子表格的形式,將每一個子公司下的銷售人員的銷售記錄進行記錄,從而能夠更加細的了解到每一個公司、每一個人員的具體情況。
在國外報表中,這類表格很少出現,而在中國的報表中,嵌套子表格算是一種不折不扣的中國式報表。
當然這里我們依舊可以深入理解,比如在兩個表格之間,用戶是通過什么樣的方式建立一個父子的關系?表格中當父數據刪除時,子數據如何處理?設計上對父子之間的關聯有著何種限制,這都是我們需要思考的,因為這里牽涉到業務實在太多,我也無法抽象出一個規律供大家學習,因此只有具體問題具體分析。
當一個表格里面有多條數據在同一個小范圍的維度進行展示時,它就是交叉表格。從表象上看,就是表頭有很多分組進行區分,因此它也叫做表頭分組。
它能夠通過硬拆分將數據進行切割,但是這樣數據的易讀性就是有很大的差距,比如在2010-2020公司年度收支表格中,需要同時展示每一年份的收入、支出與利潤,使用交叉報表能夠讓用戶一眼就是看清數據,而基礎表格卻不行。交叉表格也算是中國式表格中的一種,能夠滿足具體業務上的需求。
當一個表格里面有多種圖表數據進行展示時,他就是圖表表格。
在對一些項目做定制化開發時,這是十分常見的場景。用戶點擊某一數據后,直接跳出數據的統計圖,方便用戶進行對比。同時這一功能也可以通過儀表盤這樣的功能去解決,也就說到國內最愛做的數據可視化。
這是很多人都會忽略的一個點,主要是大家對于表格的理解各不相同,也沒有具體的文章對于表格尺寸有個非常明確的限制,在這里分享一個我常用的數據點,用于判斷表格設計的優劣:表占比。
表占比:表占比是指在1920x1080的屏幕大小下,表格占整個頁面的比例 即:表格面積 / 頁面面積 = 表占比
這里需要指出,這里的表格面積是指,表頭+單元格+分頁(不包含工具欄)
在我對十幾款主流B端軟件的總結分析中,驚奇的發現大多數產品「表占比」都是在65-70%之間,而一些不注重交互設計上的產品則會有所偏差。
那為何65-70%是一個更為合理的數據?
因為只要在頁面中出現表格,就代表這個頁面一定是以表格作為核心。而表占比低于65%,代表頁面中的表格不處于內容的核心,你需要重新審視這個頁面所需要傳達的功能。
如果表占比高于80 %,則代表表格出現面積過大,要考慮用戶是否能夠接受如此大的占比。
因此,設計的合理性來說,占比在65-70%之間能夠保證數據展示的合理性,同時這主要是針對CRM產品,大家可以使用這個占比去衡量自己設計的B端產品~
當然這樣的情況并不是一塵不變的,B端最大的魅力便是業務邏輯,我們來看一個看起來像是反面的例子:在銷幫幫中,表占比為:61.2% ,看似是一個并不合格的成績,而且數據十分異常,讓我想要深挖,為何會如此的低。
通過進一步的分析,發現銷幫幫是一款與釘釘生態深度綁定的產品,其產品只能通過釘釘軟件進行使用,而釘釘本身默認并不是1080px的寬度,用戶打開并且全屏的尺寸偏小。默認尺寸大小的不同,最終讓銷幫幫選擇去滿足業務而犧牲表占比去換取更多的功能。
因為在B端的工具欄的設計中,市面上缺少思路與方法的指導,會出現非常多的問題,因此我展開講講工具欄的設計,就不出單獨系列進行講解~
首先,對于工具欄,不同的產品,會對它有著不同的定義。比如在Apple MacOS 系統當中經常提到的Toolbars和Toolbar Items;又或者是Microsoft 產品中采取的Ribbon設計模式。在設計底層思路上截然不同,平臺級產品思路與定制化產品思路存在很多截然不同的做法,我們今天簡單聊聊大家遇到過多的表格工具欄設計,不做深挖~
在表格工具欄的設計中,信息分區與頁面透氣是非常重要的兩個設計核心。
信息分區:
因為工具欄是由標題、篩選、搜索、視圖、新建等操作組成,而功能間的區分是工具欄設計的一個關鍵。
當一個工具欄中,需要將如此多的元素進行組合排列時,必然會有其排序的規則,這時我們就可以通過親密性原則,對工具欄中的信息進行相應區分
在設計的親密性原則中,我們可以將功能相近的工具放在一起,比如:搜索與篩選都是數據過濾的操作,應該放在同一分區;
同樣,工具欄也會存在一些功能點不太相近操作,我們就應該通過分區將其間隔開,比如在下圖中,每個功能都將其用線條區分。
當然,在信息的去區分上,也有強弱兩種不同的方式,一種是通過線條直接分割;另一種是將工具欄進行空間上的區分。因此可以通過信息區分去檢查你的工具欄設計是否合理。
內容呼吸:
在一個定制化項目中,設計師一定要讓自己的頁面具有呼吸感。在B端業務中,信息量本身就已經足夠龐大,而頁面的中的疏密關系就顯得尤為重要。
通常列表都承載著繁雜、冗余的數據,是一個信息集中的密;工具欄作為與表格關聯的上部分,呼吸感便成為表格的重要因素。通常在表頭處要將空間盡量分散開,這樣才能滿足整體的疏密關系。
經??吹揭恍┦秩唠s的表頭,甚至它喪失了表頭的真正含義。在實際情況下,盡可能明確、簡單的講出表頭的內容,以免造成表格的宣兵奪主。當然也會存在一些專業術語,這時候,給一個Tooltips再合適不過。
在表格中,單元格的行高是一直都是一個難以控制的變量,因為行高會直接控制表格中的信息密度,而信息密度永遠是一個無法量化的元素。而在我們設計過程中,需要采取盒子模型的方式,讓你的設計更加落地。
知識點補充:盒子模型
從前端開發而言,單元格是一個最為基礎的盒子模型。而HTML中的所有元素都可以看作是一個盒子。而我們所設計的頁面也正是由這個樣的原理去還原出來。
Margin(外邊距):清除邊框外的區域,外邊距是透明的。
Border(邊框):圍繞在內邊距和內容外的邊框。
Padding(內邊距):清除內容周圍的區域,內邊距是透明的。
Content(內容):盒子的內容,顯示文本和圖像。
a.單元格內容
內容一般為文字、圖標、頭像等等,而對于數據中你想要格外突出的內容,這里稱為關鍵數據標識別。從盒子模型的角度來看,它就是當中的Connect,但單元格內容中,一般會有一些處理技巧:
關鍵數據標識:
用戶在使用表格時,會經常去留意一些關鍵的數據。比如數據的狀態、變化的多少…
如果在系統中,你能夠很明確知道用戶想要了解的數據時,便可在關鍵數據上進行標識。這樣能夠幫助用戶快速定位到自己想要的信息,減少數據尋找所化的時間。但如果你對關鍵數據標識出現誤判,這條數據便是一條十分干擾的數據,因此在這里的設計,需要慎重考慮。
比如在飛書的成員與部門中,對于賬號狀態就是一個關鍵數據的標識,一方面用戶可以快速了解到已經激活的成員,另一方面對于未激活狀態的進行突出展示,同時給予用戶未激活后的再次發送提醒的操作,是對用戶使用的優化提升。但,如果將不重要的數據進行標識,例如手機號,那么這將會是一個令人痛苦的設計。
人員角色展示
人員角色展示在表格中十分常見,通常會是以用戶名稱+頭像的形式展示。
但在真實場景的表格中,頭像需要給予默認的形式,比如釘釘、飛書就是以用戶“姓”作為頭像的默認值,而在多個人員角色展示時,就需要考慮特殊情況,無論是極值省略展示與獲取全量數據中,都需要我們進行設計上的處理。
進度條
進度條是屬于關鍵數據的一種,它所涉及到的功能與圖表表格類似,能夠更直觀展示數據的占比,方便用戶對于多條數據間的值進行判斷。進度條常見于“容量、使用量”的數據中。
表格空白處理
表格中經常出現空數據的情況,而表格的留白對于用戶而言會造成一些困擾,特別存在與頁面中的大面積留白,感覺像是數據沒有加載出。因此在表格空白數據處理上,可以使用“-”來進行默認展示。
b.單元格行高
單元格行高一般由:文字大小、文字行高、左右上下邊距共同組成。
從盒子模型的角度來看,它就是其中的Padding。因此行高的確定,是由上方四個條件共同組成。
文字大小:一般出現在表格中的文字大小都在12-16px之間,通常13、14px最為常見,建議大家設計也在此范疇內。
文字行高: 行高是一行文本垂直方向的高度,這個高度和字高無關,文字內容水平居中。可設置為字號的1.2-1.8倍,文字與分割線間距離可以設定為字號的1-1.5倍。
邊距(Padding):表格中的邊距分為左上右下四個方向,而左上右下恰好就是對應前端去編寫Padding代碼的順序,在對頁面驗收時,便可采取這樣的形式。
單元格行高可配置:單元格行高直接影響著信息排列的密度,而在實際業務中,真正落地也有著不同的做法。
在對定制化項目的開發中,通常會設計一套設計師認為更加合理的單元格高度,一般為32px-56px區間內,而在很多通用化產品中,存在多個設備屏幕分辨率的差異,為了讓每一個分辨率下的產品都能夠有較好的展示效果,于是乎將選擇權交給用戶,在表格左下角會設置舒適、標準、緊湊三種高度來滿足需求,使得表格更加落地合理。
總結:整個單元格的行高,就是由這三部分組成,它們的嵌套與組合,所形成了單元格的行高
c.表格分割
在表格設計當中,每一條線都有著它存在的意義。
當表格中展示橫線;隱藏縱線。
用戶的橫向閱讀體驗更佳,強調一條數據的完整性,能夠讓用戶進行快速的對應。
當表格中展示縱線;隱藏橫線。
用戶的縱向閱讀體驗更佳,強調數據上下間的對比,能夠讓用戶找到同一緯度數據下的對比。
比如在一個組織架構的成員列表中,我相信大家都設計過類似頁面,同樣的設計方式,我一個采取展示橫線、一個展示縱線,結果明顯,我成員需要閱讀完整條數據,因此橫線會更加合理。
當然,在我們日常的設計中,展示橫線的場景顯然會更多,但我們日常使用時,數據對應的場景還會更多這是需要有更強的設計形式:
d.行、列凍結
當表格的行與列的數量過多時,會導致一屏展示不下,而表格中的關鍵信息與操作是需要在任何時候都展示,這是采取行、列凍結,能讓用戶快速觸達。
表頭凍結:通常出現在垂直滾動時,通過固定表頭的信息,能夠讓用戶閱讀時對應不同的數據,使用戶更好理解數據。
首尾凍結:通常出現在水平滾動,通過固定首列的主屬性字段以及尾列的數據操作,來滿足用戶對于一列數據的認知,從而使用戶進行快速操作。
在對分頁設計的分析中,我們需要對分頁中的元素進行拆解,才能明白分頁的類型所帶來的不同。
表格信息:會展示表格信息當中的數據總量、更新時間、默認排序方式等...
數據總量主要展示用戶需要瀏覽的內容的總量;常見于管理后臺搜索、篩選符合條件的數據記錄時,搜索結果頁通常會展示這個信息,這讓銷售人員在操作時有心理預期。
更新時間主要是展示用戶當前表格所操作時的日期時間;常見于金融類產品中,他們對于表格中數據的時效性尤為關注,這樣可以方便用戶對表格數據中的有效性進行判斷
默認排序方式主要是展示表格中是按照哪一個字段進行的排序;通常這種做法多出現于表頭直接展示icon,但對于可配置化的產品而言,隨著列數的增多,你越來越找不到你想要的默認排序方式,因此在表格的固定位置展示,就再好不過(記住,只針對特定場景)
頁面展示數量:結構為「X條/頁」
它能控制每個頁面展示多少條數據;當在系統中有很多數據時,你可以直接通過「頁面展示數據 * 分頁總數」 直接算出整個表格的數據總和。
上一頁和下一頁翻頁:分頁中基本組成元素通過用戶點擊上一頁、下一頁的按鈕,實現表格的翻頁功能。翻頁通常會根據場景不同,去省略翻頁中的不同元素,比如在下面馬上那個講到的三種翻頁類型,但是上一頁和下一頁是絕對不可省略的。翻頁也如同你翻書一樣,可以進行對數據的逐頁閱讀,遵從用戶之前的使用習慣。
當前頁碼:當前頁碼說明了頁面中數據當前所處的位置,方便用戶進行翻頁的操作。
相鄰頁碼展示:相鄰頁碼通常展示前后兩頁,比如你在第6頁時,頁面需要展示:4、5、6、7、8;但頁碼在第1頁時,就需要展示:1、2、3、4、5;頁尾同理。
更多分頁:當表格數據過多時,就需要使用分頁,同樣,當分頁過多時,我們需要進行處理,就是省略,采用更多分頁,去展示多余的分頁情況,當用戶需要查看更多的分頁,點擊更多圖標即可。
總頁數:代表大概會有多少頁此類數據,通過使用總頁數才能讓用戶知道
總頁數說明了內容一共有多少頁,就像一本紙質書有總頁數,一本有聲書有總時長;通過這個元素,用戶才能了解內容的多少,對整理內容有個把握。
頁碼跳轉:頁碼跳轉幫助用戶從當前頁面跳轉到其他某個頁面;比如用戶在搜索了某件商品,按銷量排序,這時瀏覽到了第15頁,滿意度越來越低;于是打算從前5頁選一個,這時就能通過頁碼跳轉快速跳轉到第1-5頁了。
簡潔型:
當分頁數量較少時,通常在7頁以內,就只有最基礎的展示:上一頁、分頁數量、下一頁。
迷你型:
當頁面空間不足或者降低分頁的視覺影響時,可以采用迷你型,主要為當前頁/總頁數,可以直接跳轉到某頁面。
完整型:
當表格數據較多,為了滿足更多的用戶需求,可以根據需求選擇分頁類型。比較完整的分頁還包括如下功能:顯示總數、調整每頁顯示條數、直接跳轉到某頁。完整型的雖然滿足各種功能需求,但是所占空間較大,所以我們要根據自己的需求合理拆分使用。
分頁固定:
在表格中使用分頁,除了選擇合理的分頁類型外,我們還需要注意當數據過多的時候,是否要固定分頁。這個需要根據需求來決定,如果用戶翻頁很頻繁,表格數據又特別長,就可以考慮分頁固定在底部,免得每次用戶翻頁都要跑到表格的最底部才能分頁,還可以在表頭也放迷你型分頁。但通常在設計表格的時候就沒有固定,也很少使用表頭分頁,所以根據需求來定。同樣按鈕的設計也會存在類似的情況。
另外就是當數量過少時,只有一頁或者無數據的時候,我們是不需要分頁的,這個時候最好去掉分頁,展示在這里沒有什么意義了。但很多時候我們設計沒有做區分,開發也就不管了。
老讀者都知道,我會反復去強調“場景”這一概念(比如在導航菜單、篩選、彈窗、圖標中經常提到這一詞),因為你只有明白用戶真正的業務場景,才能夠真正的明白用戶的痛點。我們回到表格中,在表格的場景主要分為五類不同場景:數據瀏覽、數據新增、數據操作、數據統計與通用場景。我會通過不同場景的梳理分析我們在不同場景中存在那些優化點,可以進行深入探討。
在數據瀏覽的場景中,本質上是對大量數據進行尋找與確認。用戶需要在此場景下進行準確的數據查找。而伴隨著用戶的尋找,就需要使用表格當中的工具進行輔助查找,比如篩選、搜索,這些工具的出現,都能夠幫助用戶進行數據的清洗,使得用戶想要的數據能夠快速的被找到。
比如:我們公司的銷售人員在每天早上,都需要去 check in 今天自己所要跟進、回訪的客戶,銷售人員就會通過表格中的各種工具,去幫助銷售人員找到自己想要的那部分數據。
常見行為及設計點:
數據篩選瀏覽:通過自己對數據的一定了解,結合各種篩選條件,配合得到用戶想要的篩選結果。
數據多選:用戶可以通過多選,為他尋找的數據進行標記,方便之后的操作。
數據新增本質上是將復雜的數據結構,通過系統字段類型的相應規則,錄入保存到系統中。這也就我們常說的增刪改查的“增”
比如:銷售人員在對新增的客戶進行登記時,需要登記公司名稱,聯系人,聯系方式,跟進記錄等等。且需要不斷更新跟進記錄,因此銷售人員在表格上的新增是一個非常高頻操作~
數據操作分為對單個數據的操作、單行數據的操作、多行數據的操作三種情況
單個數據的操作,就是我們常見的快捷編輯,可以點擊快捷編輯按鈕,對單個數據進行錄入,
為何需要快捷編輯,在銷售使用場景中,使用表格去編輯一條信息是一個循序漸進的過程,比如在對客戶進行溝通時,數據的不斷更改,跟進內容也在不停修改,導致用戶需要每次進入用戶詳情點擊編輯之后才能進行操作,而在表格內進行快捷編輯直接滿足實時編輯的需求,在交互層面上這是一個非常OK的需求
但落到開發層面上,就意味著要在用戶進入表格中去判斷權限,才能讓用戶知道是否能夠點,點擊過后需要判斷字段屬性,明確該字段是與哪些字段進行聯動
單條數據主要通常會采取兩種路徑進行操作:進入用戶詳情頁界面,對一整列數據進行編輯,這種情況通常都需要多個數據進行處理,因此進入編輯頁面更容易尋找,同時也是最為正常的一種做法
多行數據操作主要采取多選過后的操作方式:當用戶想要對多條數據進行操作時,就需要對多個數據進行checkbox 的勾選,從而滿足多行操作的需求
數據統計主要針對用戶需要審查分析。目的是在通過大量的數據分析去得出自己的某一些結論,由于關注的數據會有主次之分,數據與數據之間也會有內在聯系,用戶會更加跳躍地掃視頁面,而且會更加反復地審查數據。例如,銷售人員需要查閱本月的銷售情況,進入到商品銷售明細表中,分析本月的經營狀況,若其中某些商品
了解了表格的使用場景過后,針對不同的場景,在設計上它的思路就會有所不同
使用上就會有不同的設計思路。由于篇幅原因,我們主要了解了表格的基本形態,如果對于表格的場景還不太清楚,我會在下篇中與大家通過20個問題,了解B端表格中究竟應該如何設計~
文章來源:站酷 作者:CE青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近看過我文章的都知道:我最近在負責一個微信小程序的項目,在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是某天早上我看著wxml文件中一堆wx:if/else
和hidden
突然很煩躁,先不說wx:if導致的性能問題,就是標簽上也是冗雜的。
接著上一篇文章【微信小程序自定義組件庫yPicker組件分析及省市區三級聯動實現】,在其中我分析了這么一個例子 —— 省市區三級聯動的自定義實現,在其中有詳細代碼這里就不多說,說說如何調用:
我當時是這么想的:一方面出于“不在JavaScript里寫太多東西”的考慮,另一方面,由于省、市、區我是分別用三個變量來實現的,所以JavaScript里就關注這三個變量,比如之間的空格或其它東西都拿到wxml文件里。就像這樣:
<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view wx:if="{{provinces&&citys&&areas}}" class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="placeholder depart_content befselect" wx:else>請選擇當前位置</view> <view class="desc">如有變動請修改后再次提交</view> </view>
(因為調用涉及到后來改動的只有在點擊彈窗里的“確認”按鈕時在事件中將那三個變量分別賦給這段代碼中出現的三個變量 —— 否則會只要改動不管是點取消還是確認已經發生改變了,這樣不妥?。?
其布局是這樣的:
.departments{ width: 100%; height: 96rpx; display: flex; align-items: center; font-size: 36rpx; font-weight: 347; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .location{ position: relative; border-bottom: 1rpx solid rgba(0,0,0,.009); display: flex; align-items: flex-start; padding-top: 20rpx; } .desc{ position: absolute; right: 19rpx; bottom: 4rpx; color: rgb(63,142,255); font-size: 23rpx; } .departments .depart_title{ width: 20%; } .departments .depart_content{ margin-left: 10%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .departments .placeholder{ width: 69%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
在決定了要替換這里的wx:if以后,你首先要想:用什么替換?
wx:if
作用是判斷“是否存在”,如果不存在(條件不滿足)就切換到wx:else
或是wx:elif
的邏輯里!
OK,想到這里,你應該能想到一個css偽類::empty
!它的作用和我們想要的效果一樣:判斷如果元素(內容)為空的話…
我迅速對代碼做了改動:
<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="desc">如有變動請修改后再次提交</view> </view>
然后在class - depart_content上加了這個偽類:
.placeholder:empty::before{ content: "請選擇當前位置"; color: rgba(0,0,0,.6); }
一片空白!
經過查閱資料::empty
偽類表示如果標簽內容為空,那么內容區域如果帶有空格,也是不會被匹配到的!
在寫標簽時一定要注意這一點:標簽內是否有空格或換行!(換行常常被解析為一個空格)
遇到非單標簽一定注意閉合標簽!
最后解決辦法是:在js中將三個變量用空格相連接,再渲染到頁面上即可!
(其實這里是一個自定義的選擇器,而自動定位就是往高德地圖發送了請求獲取到省市區字段而已,代碼就不寫了。。。)
到這里我們會發現一個事:上面我們不僅用了empty偽類,還用了before偽元素!
其實這一點很平常 —— 畢竟只有empty是添加不了內容的(似乎縱觀css,只有before和after這樣偽元素可以向頁面中添加內容,不管是文字還是圖片之類的)
我認為更應該關注到的是兩個地方:
:before
和 :after
偽元素向標簽內插入內容、圖形,并不會影響empty偽類的匹配!
這個特性實用的一批。
由上,可見此偽類最大的用處就是“字段缺失提示”!這是非常實用的。而且把這項任務交給CSS也可以減輕許多“(布局)負擔”、體驗更好、維護起來也更方便!
比如:我在項目優化時就將所有有請求的字段都加上了統一類名:
.ym-empty:empty::before{ content: "暫無數據,請重試", display: block; text-align: center; color: rgba(0,0,0,.6); /** 其它定位、字體更改操作 */ }
作者:行舟客,轉載
隨著大數據產業的發展,越來越多的公司開始實現數據資源的管理和應用,尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時,用戶界面設計者需要呈現相應的視覺效果。
接下來為大家介紹大屏可視化的UI設計。
--大屏UI設計--
--大數據可視化ui設計賞析--
(圖片均來源于網絡)
點擊查看更多UI/UE設計案例??????
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
通過閱讀“地圖基礎知識及通用設計原則”,相信大家已經對地圖及其設計有了一定認知,本篇我們來了解下如何實踐。
Part 1. 上篇要點回顧
- 核心設計原則
符合制圖學和公眾認知
保證識別度
清晰有層次
細分地圖模式
具有品牌特性
- 元素分類
點元素:地名、POI等
線元素:道路、地鐵線、水系線、鐵路線、航線、邊界線等
面元素:陸地、草地、湖泊海洋、AOI等
*名詞解釋:POI, Point of Information的縮寫,即“信息點”。一個POI可以是一棟房子、一個商鋪
*名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區域狀的地理實體,如醫院、小區等
Part 2. 設計背景
為了實現“讓出行更美好”的使命,今年乘客端新增了自駕導航。地圖貫穿了該產品的全流程,且首頁、路線規劃頁、導航中等場景用戶需求都不相同。然而已有的模式,從配色到信息展現,都不符合首頁地圖的場景需求,于是需要重新設計。
以下詳解設計過程。
Part 3. 設計落地
- 設計關鍵詞推導
根據自駕導航的目標,拆解出了首頁地圖的設計目標:
構建適合自駕場景的瀏覽地圖
提升地圖體驗與設計品質,提高用戶滿意度和好感度
打造具有滴滴品牌調性的地圖
用戶需求及習慣表明:在首頁主要是明確自身定位、查看其他位置信息,且視距基本是手持距離。那么“構建適合自駕場景的瀏覽地圖”關鍵點就在于識別度,更好的展示重點信息,保證用戶讀圖效率。
“提升地圖體驗與設計品質,打造具有滴滴品牌調性的地圖”的目標,可以通過視覺手段實現。在瀏覽場景,用戶使用地圖的時間不固定,為避免長時間瀏覽產生疲憊感,地圖配色需要更舒適,對比度也要適中。這點也與自駕導航整體的設計關鍵詞“輕量”不謀而合,于是推導出了關鍵詞輕量化、品牌感。
- 設計地圖方案
明確設計關鍵詞后,開始著手設計。關鍵詞中的輕量化、品牌感基本上決定了這款地圖的調性,識別度則重點影響信息展現。上篇提到,設計時可以把地圖元素拆分成點、線、面三類,按照由大到小的順序設計,即先確定配色,再設計文字圖標等信息,以免元素過多互相干擾。
1、設計整體配色
輕量化:傳達輕量化的感受需要控制取色范圍,于是我們制定了顏色使用規則(下圖)。
色相:以冷色為主,醫院(紅色系)等具有公眾認知的顏色可除外;顏色從品牌色系中選取
明度:限定顏色的明度范圍,選取中間-略高的部分,平衡顏色對比度
飽和度:避免使用高飽和度的顏色,保證配色的舒適感
通過分析顏色,我們對傳達輕量化的感受有了大致的把握。那么品牌感如何體現呢?
品牌感:具有品牌調性的地圖能更好的融入產品設計風格,也能夠區別于競品,這在滴滴全流程的設計中都十分重要。在地圖上我們主要用顏色及圖標繪制表達品牌調性。
顏色:結合輕量化的用色規則,從品牌色系中選取,使地圖配色與其他組件更加融合
圖標繪制:沿用滴滴設計規范中的圖標繪制語言,如圓角、簡單形狀等,拉齊視覺感受
最終根據“輕量化”和“品牌感”這兩個關鍵詞,設計出了地圖配色的效果圖。
2、設計地圖信息
配色確定后,即可開啟POI圖標+文字、AOI文字、道路文字、以及各類行政區劃文字的設計。
識別度:設計地圖信息時,保證基本識別度的方式,可通過文字顏色、字號大小、圖標繪制等實現。但是要做到清晰有重點,就要關注信息間的層次感。
以POI信息為例?;仡櫹麓藭r的用戶需求:了解自身定位、查看其他位置信息。從這點可以鎖定第一展示優先級應為POI——地圖上定位最精準的信息種類。而已有的圖標識別度較弱,無法滿足需求,于是我們進行了重繪。通過用色表達圖標類型、首選有公眾認知的載體作為表意、增強顏色飽和度及對比度,搭配文字顏色,從視覺上把POI信息提升至第一順位。
用同樣的方法,根據重要程度,通過設計拉開了信息的視覺層級:POI>道路名稱>AOI名稱>行政區劃信息。
3、整體調整
在完成了配色和信息設計后,我們需要整合所有元素統一調整。此時,通常會出現元素互相干擾的問題,我們可以回歸到場景需求中解決此類問題,按照信息的重要程度調整,最終形成完整方案。
Part 4. 設計驗證
地圖方案落地后,我們會關注設計品質的驗證。由于地圖的工具屬性,驗證其設計品質及用戶滿意度一直是行業內較困難的事情。地圖既是一種圖形語言,又承載了大量的信息,且需符合場景需求,要驗證的內容非常多。因此我們建立了地圖評測模型,從美觀度、識別度、讀圖效率等多維度進行評測,量化地圖設計品質。
通過對自駕導航首頁地圖的兩輪調研,我們回收了大量有效結論,如用戶對道路等級的關注程度、如何使用AOI信息等等。新版地圖在美觀度、識別度等方面均得到了用戶的認可。
了解用戶的聲音,能更好的幫助我們深耕地圖設計領域、全力推動地圖體驗優化。
Part 5. 未來形態暢想
當前科技發展迅速,近些年出現的HUD、AR等導航,用現實世界的畫面代替了地圖,不需要轉換思維、記憶地圖語言,讓人與世界的連接更輕松便捷。我們不妨順著這個趨勢大膽的暢想一番,在未來的某天,世界的數據會植入我們腦中,不再有陌生的地方,現有的地圖形態也許會消失,因為它就在我們腳下。
文章來源:站酷 作者:CDX創意設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目前基于用戶畫像的標簽體系在各行各業開始得到應用,對于涉及范圍廣,專業知識深的互聯網招聘領域來說,建立標簽體系的難點是什么呢?應該如何建立標簽體系?怎么驗證標簽體系的準確性?文章對這三個問題展開了分析探討,與大家分享。
電商行業客觀來說屬于比較簡單的toC領域,知識網絡是比較容易理解的通用知識,可通過用戶的購買習慣、偏好、商品品類等建立標簽體系。醫療行業屬于專業性強的領域,建立標簽體系必須要懂醫療技術的專家團隊才可以,但是易于操作的是,只需要醫療一個領域專家就可以完成專業的標簽體系建設。
但對于招聘行業來說,行業、職位涉及范圍廣,且專業性強,因為各行各業的公司和求職者都會通過招聘平臺建立聯系,而且有很多高精專的職位和候選人,怎么評估B/C端之間專業技能、工種、行業之間的匹配度,確是一大難點,而且理論上來說需要集齊各個行業、各種職位的專家人員才能建立起招聘行業的標簽體系,但這在現實中要怎么操作呢?
那么機器是否可以自動完成招聘領域的標簽體系建設呢?用NLP抽取職位JD中的描述并將其聚類,比如抽取Java、spring、Unix、Visio、Excel等工具技能,原型設計、交互設計、需求分析等工作內容技能,用戶運營、產品運營、數據運營等工作方向技能,這是互聯網從業者最熟悉的開發、產品、運營的工作內容和技能,如果機器可以識別這些類別標簽就很完美了。
但現實卻是看似的完美與和諧,萬一Java是出現在了招聘專員的職位描述中呢?用戶寫的是“負責招聘Java工程師”,假如Visio出現在Java工程師的描述中呢?假如Excel出現在運營專員的職位描述中呢?這些技能還是不是這個崗位的核心能力?
首先,Java出現在招聘專員出其實是可以用硬規則過濾掉的,比如限制職位和技能的關系,也就是說不是所有技能都滿足所有職位,有的技能只適用于某些職位,在其他職位內就是無效信息。
其次,需求分析是不是產品經理的技能標簽呢?有的人說肯定是了,這個回答可以說對也可以說不對,對是因為需求分析確實是產品的必備能力和工作內容,不對是因為所有的產品經理都需要需求分析,那這個能力還是該產品經理區別于其他產品經理的能力嗎?
最后Excel會出現在運營專員內、也會出現在招聘專員內,也會出現在統計專員內,那么它還是個核心的技能標簽嗎?
通過以上分析可得到以下歸納性的總結:
所以通過以上分析可知,純NLP機器識別的方式不能完成招聘領域的標簽體系建設,因為機器沒辦法在一個崗位的眾多技能中篩選出哪些是重要的知識技能,哪些是不重要的知識技能。
招聘領域的標簽大家首先可以想到的就是學歷、工作年限、薪資范圍等比較通用的職位/簡歷端匹配維度,當然這些顯性通用的標簽早已被各招聘平臺做成了結構化的篩選項。
其次還有一些比較小眾的維度要求,比如有的職位要求海外經歷、黨員、國企工作經歷、籍貫、年齡等,有些平臺也把其中的某些維度做成了平臺上的結構化標簽。
不過這些不是我們研究的重點,我們主要研究的是每個職位專業的知識方向的技能。
建立專業知識標簽體系的重點就是建立專業的崗位研究專家團隊,想要做某個崗位的專業知識標簽研究,肯定需要熟悉該崗位的人員,是選擇從事該崗位工作的人員呢,還是對這類崗位有所了解的HR人員呢?
因此就這兩類人員進行了調研與分析,最終發現從事該崗位的人雖然對所從事的崗位了解比較深入,但對其他相關的崗位未必了解,也不太了解招聘過程中用戶的感知與思維;
HR人員雖然在專業深度上對崗位的了解不是很深入,但所了解的崗位范圍廣,只要從事過某個行業的HR工作,基本都熟悉該行業所有的崗位與關注的重點技能,且HR經常使用招聘平臺,有用戶感知,對用戶行為與邏輯都非常了解,所以HR更適合做崗位專業知識研究,而且該專家團隊最好是來自各個不同行業的HR人員。
團隊建好了,大概的研究思路也有了,接下來就可以好好研究標簽體系具體的生產流程與規則了,對此進行了如下圖的總結:
體系建立的目的肯定是運用在算法的推薦與搜索中,初期可以通過離線的漏斗數據轉化對比(命中標簽與未命中標簽的轉化對比)來驗證該標簽體系的離線匹配效果,再者可通過灰度實驗,小流量上線實驗來驗證實際線上的匹配效果。
專業知識標簽關注的只是匹配度的準,最終線上使用肯定還要考慮用戶是否活躍,B端HR是否著急要人,C端求職者是否在找工作,如何平衡專業知識的準與用戶行為的活之間的權重也一大難點,要找到那個準與活平衡的比例區間,在這個區間內線上能實現最大的用戶達成,這方面在此不多做分析,需要算法同學多次調整模型才能達成。
基于用戶行為的用戶畫像標簽體系在電商領域中運用廣泛,在招聘領域此類標簽體系同樣適用,只不過電商領域中的“查看-聯系賣家-購買”行為在招聘領域變成了“查看-開聊-達成約面”行為。
電商平臺中的協同過濾理論在招聘平臺也同樣適用,只是變成了基于相似職位的過濾和基于相似候選人的過濾。有的企業以往達成的多數是名校候選人,那么我們就知道該企業偏好有名校教育經歷的;有的企業招聘銷售崗更傾向于在專業知識體系中的有軟件銷售經驗的候選人,那么我們就知道該企業偏好軟件行業的銷售候選人。
通過用戶畫像體系我們可以評估用戶的偏好,以期在該用戶以后的推薦中使用其偏好,達到更好的效果。
靜態通用標簽是所有職類共用的標簽特征,屬于大批量標準化的生產與運營,通用標簽生產完善了,可以實現粗礦式大步快跑節奏的匹配達成;
而專業知識標簽是每類職位專業的標簽特征,是小批量精細化的生產與運營,在前面大步快跑達到一定匹配度之后,再結合精細化的小步快跑方式,逐步將每個職類的顆粒度劃分為更精細化的顆粒度,達到更高匹配程度;
在前面標準化、精細化兩輪分類之后數據已經被分成了一個個小類,但卻沒有衡量單個用戶偏好的特征標簽,而動態的用戶行為標簽就是單個用戶個性化的偏好特征標簽,用戶的偏好有可能是通用的學歷、年限特征,也可能是專業知識中某個技術框架、某種產品品類特征。
最終,靜態標準化通用標簽、專業知識精細化標簽、動態行為個性化偏好標簽,三者相互作用、相輔相成,提升招聘領域線上效果的匹配準確度。
文章來源:人人都是產品經理 作者:艷杰
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
包括單行注釋和塊級注釋。
// alert(“HelloWorld!”)
/*
這是一個
多行的
塊級注釋
*/
“use strict”;
。
ECMA-262描述了一組具有特定用途的關鍵字和一組不能用做標識符的保留字。
var message
,當然了,也可以直接在定義的時候對變量做一個初始化,例如var message = ‘hi’ ;
var message = ‘hi’ ;
message = 100 ; //有效,但不推薦
//這個例子代表變量message一開始保存了一個字符串“hi”,然后該值又被一個數字值100取代了。
function test(){
var message = ‘hi’ ; //局部變量
} ;
test();
alert(message); //錯誤
//為什么是錯誤?
//這里,變量message是在函數里用var定義的,當函數被調用時,就會創建該變量并為其賦值。而在此之后,這個變量會立即被銷毀。所以在執行alerat()那行代碼的時候message已經被銷毀了,因此報錯。
那么,該怎么解決呢?
function test(){
message = ‘hi’ ; //局部變量
} ;
test();
alert(message); // hi
//在函數內部不用var會創建全局變量。
//但我們并不提倡這種做法,因為局部作用域中定義的全局變量很難去維護。
//所以我們應該選擇在開始就定義好所有的變量。
隨著大數據產業的發展,越來越多的公司開始實現數據資源的管理和應用,尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時,用戶界面設計者需要呈現相應的視覺效果。
接下來為大家介紹大屏可視化的UI設計。
--大屏UI設計--
--大數據可視化ui設計賞析--
(圖片均來源于網絡)
點擊查看更多UI/UE設計案例??????
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
在如今大數據的時代,一些軟件會根據我們的地理位置、性別、喜好等等進行算法推薦;能夠對一定規范的輸入,在有限時間內獲得所要求的輸出;比如TikTok,以用戶為中心進行推薦,度很高;本文作者分析了TikTok 的真正優勢,我們一起來看一下。
字節跳動往往被說成是一家算法公司,很多人認為, TikTok是靠算法的黑科技才取得成功的。
事實真的是這樣嗎?
eugenewei認為不是:TikTok的算法跟其他公司使用的并沒有太大的不同;TikTok最大的優勢是它采取了對算法友好的設計模式,在自己內部建立了一個飛輪,幫助其機器學習算法看到了優化自己所需要看到的東西。
原文發表在其個人博客上,標題是:Seeing Like an Algorithm;篇幅關系,我們分兩部分刊出,此為上半部分。
劃重點:
在我上一篇關于TikTok的文章中,我討論了為什么它的For You Page算法是讓TikTok發揮作用的結締組織;它就是主板的總線,用來連接和關閉所有的反饋回路。
但是,在急于了解為什么各家公司都想收購TikTok的情況下,如果字節跳動把這款熱門的短視頻app拆分出來的話,圍繞著它的算法的炒作已經有點被異化成那種往往被歸納為最近西方對中國科技分析的套路了。
在這篇文章中,我想討論一下TikTok的設計究竟是如何幫助它的算法表現得跟它一樣好的。
上次我討論了為什么FYP(For You Page)算法是TikTok飛輪的核心,但是如果這一算法不夠有效的話,那整個反饋回路就會崩潰;哪怕你對TikTok或短視頻領域不感興趣,了解一下這個算法是如何實現性也很重要,因為各行各業的公司都日益面臨著核心優勢是機器學習算法的競爭對手的競爭。
我想討論的是TikTok的設計是如何幫助它的算法“看”東西的。
James C. Scott的《國家的視角》(Seeing Like a State)是那種很獨特的書,看過之后你會意識到硅谷就有那種使用(濫用)清晰性這個術語的類型。
我是在看到Venkatesh Rao的書摘之后第一次聽說這本書的,如果你不打算看原著的話,那篇書摘仍然是很好的tldr入門讀物(Scott Alexander的書評也不錯,只不過他的書評也已經長到可以做自己的tldr );不過,我建議你還是要好好看看原著。
Scott那本書的副標題是“那些試圖改善人類狀況的項目是如何失敗的”。
這本書可以提高你對日常生活當中的各種意外后果的意識,當我們也有著偉人一般的傲慢時,不妨保持更謙卑的態度;這個世界比我們想象的要更豐富、更復雜。
比方說,Scott的討論有很多都跟我們的現代社交網絡巨頭的某種傲慢感有關;這些占主導地位的應用的目的就是要提高自身用戶群的清晰性,其中包括促進互動、防止用戶流失并最終提供定向廣告;反過來,這又導致他們的母公司陷入到錯綜復雜的問題之中,至今都未能擺脫困境。
不過這是需要另行討論的話題了;Scott關注的是民族國家如何用簡化的抽象在概要的層面 “看清”自己的公民,而我想討論的是TikTok的app設計是如何讓它的算法“看到”有效地執行匹配工作所需的所有細節的——這篇文章討論的則是是應用和服務在設計時最大限度利用機器學習新模式。(我知道,這種討論有點諷刺意味,因為這種“看法”有可能被塑造為另一種決定用戶看法的看法,一種美國的科技公司只能作壁上觀的看法。)
近年來,至少在像我這樣的門外漢看來,我們意識到,只需要通過把訓練的數據量增加幾個數量級,機器學習就可以取得很大程度的進步;也就是說,就算算法本身跟幾年前沒有太大的不同,僅通過在更大的數據集上對其進行訓練,人工智能研究人員就能取得像GPT-3這樣的突破(GPT-3暫時給科技Twitter們帶來了高潮) 。
當大家說TikTok的算法是取得成功的關鍵時,很多人會把某些神奇的代碼段看作是公該司的秘密武器。
俄羅斯當代后現代主義作家Viktor Pelevin說,所有的現代電影都是同一個主角:一個裝滿錢的公文包;從《死吻》的放射性物質公文包,到《低俗小說》里面的那個類似的里面金光閃閃的、不知道裝著什么的公文包;從《魔頭對捕頭》(The Formula)的創世紀方程,到大衛·馬梅特(David Mamet)的《西班牙囚犯》(The Spanish Prisoner)里面的秘密的金融處理,我們長期以來一直對有魔力的麥格芬(McGuffin,推動情節發展的對象或事件)感到癡迷。
最近幾周,對TikTok算法的討論已經把它提升成了類似的東西,這個算法就好像是《奪寶奇兵》系列電影(如《法柜奇兵》、《圣戰奇兵》…)里面那些神秘的考古文物一樣。
但是這個領域大多數的專家的態度不會是這樣,他們不相信TikTok在機器學習推薦算法方面取得了迄今為止我們所不知道的進步;實際上,大多數人會說,TikTok的做法大概跟別人的解決問題方法無異。
但是要記住的是,機器學習算法的有效性不僅僅取決于算法,還要取決于利用某些數據集訓練過后的算法;GPT-3也許并沒有什么新鮮,但是通過接受大規模的數據訓練,以及設置大量的參數,其輸出往往令人驚訝。
同樣地,基于自身數據集訓練過的TikTok FYP算法,在將視頻與認為該視頻有趣的人進行匹配方面非常準確有效(而且,同樣重要的是,在不向那些不認為視頻有趣的人推送方面也很有效) 。
有些領域,比方說文本,可以輕松獲得大量訓練得很好的數據;比方說,要想訓練出像GPT-3這樣的AI模型,你可以到互聯網、書籍等上面找到大量可用的文本集;如果你想訓練視覺AI,可以在網上和各種數據庫里面找到大量照片;訓練仍然很費錢,但是至少你手頭有足夠的訓練數據。
但對于TikTok (或者抖音)來說,它那擅長推薦短視頻給受眾的算法可就沒有公開可用的這么大規模的訓練數據集了。
去哪里可以找到模因、小孩跳舞、對口型、可愛的寵物、推銷品牌的網紅、士兵越障訓練、小孩模仿品牌等內容的短視頻呢?就算你有這樣的視頻,又該去哪里找到關于大眾對此類視頻感受的可比數據呢?除了Musical.ly的數據集以外(主要是美國喜歡玩對口型的青少年),這樣的數據并不存在。
這是一個獨特的雞生蛋還是蛋生雞的問題,如果沒有這款app的的攝像頭工具和濾鏡,以及拿到版權的音樂剪輯的話,TikTok的算法需要訓練的那種視頻就很難創建。
那么,這就是TikTok設計的魔力所在:app會激發和促進視頻的創作與瀏覽,算法然后用這些視頻進行訓練,再反過來激發和促進視頻的創作與瀏覽,形成反饋回環。
為了讓自己的算法發揮最大的效用,TikTok成為了自己的訓練數據源。
要了解TikTok是如何做出這么強大的學習飛輪,我們需要對它的設計進行深入研究。
關于科技的UI設計,主導的思想流派(至少是我成長的過去二十年里)關注的重點是消除用戶所做事情的摩擦,并讓他們在此過程中感到愉悅;其設計目標是優雅,什么是優雅:優雅就是直觀、巧妙,甚至時尚。
也許沒有一家公司比蘋果把這種設計風格體現得更加淋漓盡致,巔峰狀態下的蘋果總能把自己的軟硬件做出優雅的感覺——“就是這么好用(it just works)”,但同時又很迷人,讓用戶覺得很雅致。
(蘋果控制風格的名聲就沒那么光彩了——手機、筆記本電腦不可替換的電池,目前有關應用商店規則的爭論)在發布新品的主旨演講時,展示一塊硬邦邦的鋁塊是如何變成嶄新的MacBook Pro機身的視頻的理由是什么?
因為聽到工業激光把那塊鋁雕刻成一體化機身時發生的聲音很性感?然后,當你在咖啡店用那臺筆記本電腦敲擊一封電子郵件時,在你的潛意識里,有關那段視頻的一點殘留的記憶里面會不會讓你的多巴胺受到一點點的觸動?
這種以用戶為中心的設計模式在這么長時間以來一直占據著主導地位是有原因的,尤其是在消費類技術里面。
首先,這的確有用——蘋果的市值最終超過了2萬億美元(還記得假冒的Sean Parker說過十億美元很酷嗎?那還是十年前,現在十億美元不再是金牛了,財富的量級在飛速發展。)
此外,我們生活在大規模網絡效應時代,應用了Ben Thompson的聚合理論并獲得大量用戶群的科技巨頭,可以在他們所參與的市場當中發揮出不可思議的杠桿作用——要先做到這一點,最佳的辦法之一就是設計出能比競爭對手更好地滿足用戶需求的產品和服務。
長期以來,這種設計流派一直占據著主導地位,以至于我幾乎忘記了過去時代慣常采用過的一些蠻不講理的軟件設計了。(不要把它跟野獸派設計混為一談,后者其實就像它在建筑方面的表親一樣,在設計上是相當美的。)
但是,如果要想最大限度地服務好用戶的關鍵要取決于對機器學習算法的訓練呢?如果這個ML算法需要龐大的訓練數據集該怎么辦?在機器學習方興未艾的時代,這日益成為關鍵的設計目標。
在考慮如何設計app時,你日益必須考慮怎么才能最好地幫助算法去“看”——為了最大限度地服務好用戶,請先服務好你的算法。
TikTok讓我著迷,因為不管是意外還是有意而為之,這都是一個為了盡可能多地給自己的算法提供有用信號的現代app的典范——這就是我所謂的算法友好型設計的范本。(我曾經想過把它叫做以算法為中心的設計,但覺得這種說法有點過頭了;一個幫助算法看見東西的設計到頭來仍然是為了給用戶提供盡可能好的體驗。)
我們仍然可以認為這只是以用戶為中心的設計的一種變體,但是對于那些大量采用機器學習算法組件進行產品開發的團隊來說,明確地承認這一點也許有用;畢竟,當產品經理,設計師和工程師開會討論app設計時,算法是不會出席的;但是,對算法的訓練需求必須得到體現。
James Scott在談到《國家的視角》,談到了城市設計等領域的巨大變化,比如讓土地面積和業主數量對征稅者“清晰可見”;TikTok的設計使得它的視頻、用戶和用戶首選項對For You Page算法清晰可見;這種app設計履行了它的主要職責之一:“像算法一樣看東西”。
我們不妨仔細看看,TikTok打開后就是“For You Page”頁面,然后直接進入視頻。這就是它的樣子。
這個是到目前為止有史以來最熱門的TikTok視頻,截止到我發布這篇文章時,它的34.1M個點贊可能已經不止了;你可以看看有關這條TikTok是如何誕生的故事,看過之后你仍然會覺得這是一個充滿悖論的文化難題,但是你看過后會喜歡的。
我把這個給我侄女看了,然后我們一起循環播放了好幾十次,然后我們一起開始大喊“從M到B,從M到B”,然后一起笑了起來,這是我在這場疫情當中真正的感受不是絕望的少數幾次之一。
整個屏幕被一個視頻填滿。只有一個視頻,視頻用豎屏全屏顯示;注意,這是不能滾動的,而是分頁。視頻幾乎是立即自動播放(接下來的幾個視頻被加載到后臺,所以輪到的時候可以很快播放出來)。
這種設計讓用戶要面對一個緊迫的問題:你對這個短視頻的感覺如何?就這個短視頻。
從視頻開始播放到現在,你所做的一切都是你對該視頻的感受的信號;你是不是在它還沒播放完就滑向了下一個視頻?是的話就隱含(盡管邊界是顯性的)表示你對它不感興趣。
你是不是看了不止一次,讓它循環播放了好幾次?似乎不知怎的它就吸引了你。你有沒有通過內置的分享面板分享了這段視頻?這是正面情緒的另一個有力指標。
如果你點擊右下角旋轉的LP圖標,看了更多有著同樣背景音樂的視頻的話,就是該視頻對你胃口的進一步信號;音樂線索往往是模因的代名詞,現在TikTok又有了一條為你推薦視頻的軸線了。
還有,你是不是跑去看了看視頻創作者的個人資料頁面?你是不是看過她其他的視頻,然后還關注了對方?是的話說明你除了欣賞視頻以外,也許你還特別欣賞對方這個人。
但是,我們不妨再退后一步,看看這你還沒有看到這個視頻之前,TikTok的算法自己是怎么“看見”這個視頻的;在這個視頻通過FYP算法發送到你的手機之前,TikTok的運營團隊有人已經看了這個視頻,并添加了大量相關標簽或標記。
這個視頻是跟跳舞有關的嗎?是對口型?還是視頻游戲?有小貓嗎?還是花栗鼠?是搞笑的嗎?主體是男的還是女的?大概幾歲?是群視頻嗎?背景在哪里?用的是什么濾鏡或視覺效果?如果里面包括有食物,是什么食物?等等,所有這些標簽都成為了算法現在可以看到的功能。
視頻還要在視覺AI這里處理一下,并為自己能看到的東西做出貢獻;TikTok有些攝像頭濾鏡能夠跟蹤人臉、手或者手勢,所以視覺AI往往在視頻被創建出來之前就被調用過了。
這個算法還可以看到TikTok所了解到的有關你的信息,你過去喜歡什么類型的視頻?有關你的人口統計學信息或心理學信息有哪些?你是在哪里看這個視頻的?你用的是什么類型的設備?等等,除此之外,還有哪些其他用戶跟你相似?
一、《國家的視角》 Vs 算法的視角
二、TikTok把自己變成算法的訓練源
三、以用戶中心 Vs 對算法友好
文章來源:人人都是產品經理 作者:紙盒小卡車
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
新的十年,新技術也悄然到來。人工智能潤物無聲,5G 應用也漸漸嶄露頭角。新時代帶來了新的技術,新的場景,新的用戶。用戶體驗從未像今天如此豐富多彩又復雜細致,給設計師帶來了全新的機遇與挑戰。
而在疫情的大背景下,對演出行業而言,需要加速傳統演出產業的線上化變革適應疫情背景的同時,也要利用新技術嘗試增強線下的演出觀演體驗。這對演出形式的發展提出了更高的要求。
貓眼演出設計團隊搜集近年來優秀的用戶體驗案例,并嘗試預測未來一段時間用戶體驗發展的趨勢與方向。希望對大家有所啟發。
相較于演唱會、音樂節等演出,展覽內容向線上遷移的成本較低。2020 年的畢業展覽,各大高校采用了不同形式的線上展覽,為青春畫上圓滿句號。
央美的線上畢業展中,幾乎 1:1 還原了學校展廳原貌,觀眾可以在展廳內走動來觀察展品。讓觀眾身臨其境感受藝術氛圍。
清華美院的展覽中采用視差風格,用戶可以將手機橫向滑動,感受內容在指尖流動。是更適合移動端瀏覽內容的形式。
說起類似「傳統直播」的線上演唱會嘗試,缺少演出者與觀眾的互動成為較大的遺憾。在釘釘 Live 與 Beyond 中,觀演者可以通過攝像頭參與到演出的背景中,并與演出者同屏互動,帶來打破空間阻隔的互動試聽體驗。
熒光棒當然是演唱會不可缺少的一環。而能夠與演出互動的熒光棒則能夠大大提升參與感。
Beyond Live 推出的互動應援棒,可以跟隨演出實時互動,大大增強了演出的臨場感。
對演出行業而言,疫情的到來是不小的打擊。但也激勵著從業者往新的方向去探索,尋找為觀眾呈現演出的新形式。
人工智能的發展到今天,逐步開始為產品體驗添磚加瓦。我們越來越能感受到產品更懂用戶了,在合適的時機做正確的事情。而其中讓產品更懂我們的,正是 AI 為產品添加的感官。
無論是視覺還是聽覺,AI 賦予產品更細致的觀察,從而創造更加人性化的體驗。
語音類產品可以進行連續對話,并根據上下文進行整體語境的理解。不僅讓日常生活更加便利,同時也照顧到聽障人士,在打電話這件事情上實現了「文字 - 語音跨感官」的交流。
Google Assistant 可以根據用戶的要求,打電話與商戶老板預約訂餐。
在小愛同學的幫助下,現在可以用打字聊天的方式接聽電話。不僅讓不方便接電話的場景得到解脫,也解決了聽障人士打電話的難題。
借助 AI 對周圍環境的分析,可以感知到更細致的用戶場景。華為 Mate 30 Pro 借助 AI 判斷人臉與設備之間的角度,來決定屏幕內容是否需要旋轉。相比較陀螺儀對重力的感知,這樣的方式可以更準確判斷使用場景。
在呈現復雜內容時,AI 智能判斷畫面主體,從而優化給用戶呈現的畫面。
在 Bilibili 實現的防擋彈幕利用 AI 去分析視頻中的人物、動物等「畫面主體」,給彈幕添加遮罩層。從而實現畫面主體與彈幕的和諧共存。
當機器可以看懂人的手勢,我們就可以隔空來發號施令了。
在 DJay Pro AI 中,一臺 iPad 放在桌面上,DJ 就可以隔空打碟。在難以觸控屏幕的場景中,手勢也有著其不可忽略的痛點。
在 Mate 30 系列中,用戶也可以通過手勢來進行截圖、上下翻動等常用操作。
AI 賦予了產品感官,對現實有了更深入的理解。同時也使得 AR 的內容不僅局限于「好看」的展示,而能更好地與周圍環境結合起來。
Google Lens 可以根據定位和識別內容判斷用戶所在餐館,并在菜單中標注推薦的菜肴。
Rekugaki AR 可以識別畫面中的卡通形象,并創建一個紙片人與用戶互動。
更新 iOS 14 之后,AirPods Pro 擁有了「空間音頻」。結合播放設備與耳機的位置,通過陀螺儀等設備共同模擬一個虛擬聲場,讓用戶有身臨其境的空間音頻感受。增強了 AR 在音頻領域的體現。
在 2020 年,內容為王的時代,UI 所扮演的角色也漸漸變化。從過去,想盡辦法吸引用戶的點擊和關注,到如今,會更多思考如何包裝和凸顯內容。
或許潤物無形,讓用戶覺得理所當然的沉浸感,才是 UI 最好的歸宿。
相比較 UI 設計早期對于彈窗的頻繁使用,近些年在產品設計中越來越克制對于用戶的打擾。從而讓用戶盡可能沉浸在當前的體驗流程中。
在 iOS 14 中,如果用戶正在使用手機,來電則以通知的形式呈現,在玩游戲的場景可能尤為有用。Siri 也不再占據全屏幕的內容,而是以底部的小圓球出現。這樣假如我們把手機呈現的內容視為沉浸的世界,Siri 更像是一個身邊的小助手,而不是專門要跑一趟的柜臺了。
在很多專注內容的產品中,會更注重沉浸式的設計。減少線框和切割,弱化 UI 和導航元素,在全局視野里都填充內容。
Apple Music 的歌詞界面中,隨著歌聲響起,歌詞也隨之滾動。與此同時,背景也呈現極光的流動感。使人沉浸在優美的歌曲中。
在很多專注于呈現內容的網站中,則更多采用了扁平化、去分割化的設計。讓用戶更專注于內容本身。Dribbble 的改版中,將導航欄改為白色,背景也變為純白。讓用戶不去思考功能模塊,而專注于內容本身。
近幾年隨著屏幕技術的不斷更新,逐步在硬件上呈現出穩定的產品形態。相較于傳統的屏幕,手機屏幕的更新出現以下的關鍵詞:
而這些新的硬件形態也對 UI 設計提出了新的要求。我們可以看到針對于這些硬件特性,UI 設計也有了新的變化:
相較于傳統的直角屏幕,全面屏為了貼合手機的硬件形態。呈現一個圓角矩形的視野。在 UI 設計中,呈現大圓角風格的卡片設計,能更好貼合這樣的屏幕,實現軟硬件合一的觀感。
如今主流的手機屏幕已經到了 6 寸,于是這對單手操作帶來了很大的挑戰。各大廠商在不斷優化交互細節的同時,也有廠商帶來了新的思路。
在三星推出的 One UI 中,將上半屏主要用于內容展示,而下半屏幕放置操作內容。在高德地圖上我們也看到了類似的思路。
OLED 屏幕可以顯示非常純凈的黑色,而深色模式可以很好利用這一點。深色模式可以突出內容,也可以因為大部分區域不發光更省電。而用戶過去很多年都看慣了白色的背景,突然“眼前一黑”也許眼前一亮。
有了更大的屏幕,就要做更多的事情。越來越多的廠商支持系統級浮窗。甚至在 Galaxy Fold 2 中,可以同時顯示 4 個分屏,還能再添加浮窗。
新出現的折疊屏形態,則要求產品在布局上更加靈活,在大屏幕上呈現更多內容。在華為 Mate Xs 的「平行視界」功能中,用戶可以在左右分屏中展現前后兩級頁面,購物比價更方便。利用折疊屏的特性,實現了 1 + 1 > 2 的效果。
信息時代,數碼世界已經承載了我們太多的回憶與財富。頻繁的身份驗證保證了我們的財產與隱私安全,但也帶來了諸多的不便。忘掉的密碼,濕掉的指紋,忍不住讓人大喊「我就是我啊,你怎么不明白」。如何讓身份驗證變得快速且無感,讓生活變得方便且簡單。
在演出行業中,特別是需要快速準確驗證身份的檢票場景中,使用 AI + 人臉識別技術也大大提升了檢票效率。
人臉總是最好的密碼。不論是 Face ID 還是刷臉支付,快速、低錯誤率的特性,總是讓人印象深刻。
Amazon 推出的無感支付超市 Amazon GO,用戶不需要進行任何形式的身份驗證,拿了商品,走出超市,購物就完成了。
iOS 14 中,你可以用手機來解鎖車輛,甚至可以通過信息,將車鑰匙分享給他人并設置可用時間。
如今每個人都擁有更多的智能設備,如果設備只能獨立使用,顯然不能發揮最大的價值。好在如今設備之間的連接更快更強大,最終組成快速無縫的優質體驗。
超寬帶(Ultra Wide Band,UWB)技術是一種無線載波通信技術,能賦予設備空間感知的能力。當設備之間了解了彼此的方位,能在很多場景尤其是家居場景中提供便利。
iPhone 11 搭載的 U1 芯片賦予設備之間的空間感知能力。用戶可以將手機對準想要分享的設備,在界面中就會優先展示。
小米發布的「一指連」技術,用戶可以將手機對準想要控制的智能設備,在手機中就會自動彈出對應的控制面板。
iOS 14 更新后,用戶無需對 AirPods 進行斷開或重新連接的操作。耳機會在用戶在新設備播放聲音時,自動連接到新設備。對于設備感知的弱化,就是對體驗感知的提升。
在 macOS 10.15 后,用戶可以將 iPad 作為拓展屏幕使用。并且無線、低延遲、高畫質。甚至可以利用 Apple Pencil 在 Mac 的 Photoshop 中進行繪畫,作為 Mac 生產力內容的補充。
使用華為手機與 MateBook 時,用手機輕觸觸摸板即可實現無線投屏。并且在電腦端可以打開手機文件進行編輯、保存,同時支持手機、電腦文件之間的拖拽操作。實現了手機與電腦的快速無縫協同。
數字世界如今已經承載著很多人的第二生活,而隱私的權利也在信息時代有了更廣的延伸。在產品利用我們的個人信息創造便利的同時,也帶來了很多隱私泄露的隱患。越來越多的人開始期待,能夠享受大數據帶來的便利,而不必擔心自己的信息被用在不正當的途徑。
iOS 14 之后的 App Store 中,用戶可以看到應用所請求的數據權限。在應用訪問剪貼板時,也會在頂部彈出提示。
安卓生態中的反復喚醒是困擾用戶的一大問題。MIUI 12 中可以查看應用之間的喚醒、定位、使用媒體的記錄,誰是流氓軟件一目了然。
MIUI 12 中可以開啟虛擬身份或使用空白通行證進行應用授權,這樣既可以使用對身份有要求的 APP,也可以避免隱私的泄露。
iOS 相冊權限細分為「全部照片」「部分照片」「不允許訪問照片」,這樣當用戶僅希望分享幾張照片時,不需要讓應用可以訪問所有照片了。
iOS 14 之后,用戶可以關閉「允許 App 請求跟蹤」開關,以此減少 App 對個人信息的獲取。
2020 年,90 后三十而立,將要面對更多的挑戰,承擔著更多的精神與情感壓力。
00 后也跨入了 20 歲的年紀,這些 Z 時代的年輕人成為了網絡主流。他們追求個性,情緒上更加敏感,表達情感的欲望也更加強烈。
面對著 996、內卷與房價,似乎大多數人都在感受著不同程度的壓力。
在網易云這樣一個主打聽歌評論的社區中,出現了大量帶有「抑郁情緒」的評論。網易云也被大家戲稱為「網抑云」。在發現相關情況后,網易云推出了「關懷計劃」,在 App 中接入專業心理咨詢的同時,也設計了一些治愈的小功能,幫助大家紓解情緒。在評論中用雙指捏合,可以給評論者一個抱抱。在疫情背景的今天,或許是難得的安慰。
年輕人的個性化需求和表達欲望總是更強烈,在產品中滿足年輕人的想法,就能抓住年輕人的心。
在騰訊漫畫 App 中,切換性別會讓首頁呈現完全不同的內容推薦。
在 QQ 里,連續 7 天和同一個人聊天可以有一個小火苗,30 天則可以變成大火苗。而針對新朋友和聊得最多的朋友還有四葉草和小船等標識。這些個性化、游戲化的展示,滿足了年輕人的展示欲望,和對趣味的追求。
2020 年,疫情讓很多人分隔兩地,很多親密關系很難在線上維系。于是很多產品推出了「一起」功能,在線上可以一起聽歌看電影,滿足疫情時代,人們的社交需求。
在網易云中,可以分享歌曲給朋友一起聽歌。雙方都可以控制歌曲的切換與暫停,還能通過麥克風與對方聊天說話。
在 QQ 中可以選擇「一起看」,分享給好友之后可以同進度觀看視頻,還能在下方聊天互動發送表情等。
在本文寫完的 2020 年 10 月,我們能看見對疫情的控制程度在全社會的努力下漸漸往好的方向發展,線下的演出在漸漸復蘇,行業對線上演出展覽的探索也初見成效。
黃明昊 Just 18 Teen 新歌首唱會剛剛結束,貓眼演出 · 超級現場所實現的線上演出直播 + 線下影院觀演,與偶像同屏的互動方式得到了粉絲的一致好評。
我們也即將迎來英雄聯盟世界賽這樣首個大型線下演出項目。相信 AI 人臉識別的技術在閘機入場的應用,能為召喚師們帶來更好的觀賽體驗。
用戶體驗在 2020 年的發展,已經不局限于新技術的應用,也更考驗用戶體驗設計師對于場景的細致洞察,對于用戶情感的細微把控。
文章來源:站酷 作者:貓眼演出設計Team
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。
APP UI設計一直在變化,就像網頁設計一樣,不停的創作新鮮、友好的產品,設計師要跟上這個趨勢,最好的方式就是多看優秀案例,下面大家一起來看看今天的精選,建議訪問官網查看更詳細的展示哦!
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了12款優秀并富有創意的交互作品,為你的產品設計注入靈感。
精美的天氣app賞析
--手機appUI設計--
--精美的天氣app設計--
(以上圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
藍藍設計的小編 http://www.syprn.cn