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

          首頁

          設計驅動|QQ運動體驗升級

          資深UI設計者

          It is ultra experience

          It is ultra experience



          ——————————

          在這個全民健身的時代,越來越多的用戶開始頻繁使用運動APP,記錄自己的運動數據,分享個人的訓練動態。QQ運動是QQ旗下的老牌運動產品,在上一版本中,由于過分依賴紅包福利體系,近一年逐漸呈現不健康的發展趨勢,需要尋找新的產品形態使產品重回正軌。因此,伴隨著市場、產品和用戶的持續更新,如何突破增長瓶頸,讓它在眾多同類產品中脫穎而出,鞏固自身競爭優勢,是本次官網改版的主要課題。 


          用戶分析

          QQ運動植根于月活用戶高達數億的QQ。因此在改版之初,我們對大盤內的用戶進行了盤點,發現用戶群體呈現明顯的兩極化分布,以16-24歲和40-60歲這兩個年齡段為主。進一步對數據分析后發現,兩類用戶的行為也是截然不同的。首先,16-24歲這部分用戶表現出的行為是:(1)認真運動,在跑步、健走這類運動基礎功能中占比很大;(2)自我表現欲望強,關注排行榜,重度原創偏好比例高;(3)社交活躍度高,體現在好友數量多,在空間和群中的行為十分活躍;其次,40-60歲這部分用戶大盤穩定,專注于與利益點有關的功能 ,如獎金賽、打卡領紅包等。




          差異化定位


          鎖定有價值的目標群體后,再通過競品分析、用戶訪談和數據分析等方式探索產品的優勢。


          從用戶行為看,16-24歲的群體更有益于產品的良性發展?;诖耍覀兝闷鋹圻\動、個性化、強社交的特點,引入運動秀,打造“運動秀”的產品定位;同時考慮到40-60歲群體專注利益的特點,輔以紅包和獎金賽等功能。



          體驗洞察


          明確產品定位后,我們要確定對應產品定位的可量化指標,即增長指標。以增長指標為抓手,更容易幫助我們得出與產品定位等價的設計方向。


          QQ運動的改版項目以提高用戶活躍和留存為兩大增長指標,圍繞這兩大指標,我們制定了長線改版規劃。第一期改版,我們聚焦運動工具的優化,內容包括:優化官網首頁、跑步健走和計步詳情模塊。第二期改版將聚焦社交場景進行挖掘探索。



          設計執行

          1.設計方法


          QQ運動產品設計強調規范、一致、細節嚴謹的設計原則。首先,設計師既要考慮穩定的用戶群體,又要考慮不同模塊之間的統一性,還要保證不同設計師的輸出一致,以及數據帶來的波動;強調細節嚴謹,是因為用戶量龐大,而且已經養成固定的行為習慣,并且運動功能相對已完善。面對上述現狀,設計師就需要采用更規?;⒕毣脑O計策略。


          首先,QQ運動品牌形象在用戶心中位置已穩固,旗下的業務線也會不斷增加,為了避免業務和品牌關系混亂、體驗不一致的問題,設計師需要在現有品牌形象基礎上,進一步優化完善品牌系統;其次建立統一的UI組件。兩種內容貫徹至全業務線,形成設計規?;?


          其次,設計師合理使用設計技能,在圖形、顏色、字體、版式、動畫五種視覺語言中垂直打造體驗效果,保證設計的精細化程度。例如:在標準字體的基礎上建立運營字庫;在動畫方面,可以從反饋、功能、過渡、趣味、氛圍等多維度場景精細打造動畫效果等。



          2.品牌設計


          設計師重新梳理了QQ運動品牌系統,為全業務線打造視覺骨架。其中包括標準logo、標準色、輔助色,標準字體、標準運營字體和輔助圖形。




          3.UI設計


          3.1 優化首頁布局,聚焦核心功能

          重新梳理首頁的功能優先級。根據產品定位和改版目標,我們對運動工具這類高價值功能強化感知,對業務要求的banner營收模塊保證首屏容納,對利益點相關的輔助功能維持原狀,同時加強首頁賽事的運營能力,對低頻功能降優先級,對低價值功能收歸二級頁。


          我們采用模塊化卡片的形式,將功能按優先級規劃布局。以一套模塊化卡片結構,承載“計步、跑步和健走”三種運動工具內容,這樣使信息有規律地整合并展示,降低用戶的理解成本,同時保證設計側的規范統一。


          此外,卡片式結構在用戶行為引導上也有天然的優勢,用戶更容易下意識滑動卡片探索功能,增加置后的運動工具的曝光機會。


          視覺設計方面,設計師把品牌色和輔助圖形沿用到UI界面中。為了增加運動的速度力量感,數字上采用粗壯傾斜的DIN英文字體,進度條使用熱量彩虹漸變色,整體強化運動專業性。




          3.2 優化運動記錄,提升使用體驗


          跑步是QQ運動目標用戶主要使用的核心功能,也是本次調整的重點內容之一。我們從用戶行為及使用場景的角度出發,對UI及動畫進行了優化。


          跑步中的用戶很少立刻停下來操作APP,用戶在手機搖晃且可能比較累的狀態下誤觸概率可能增加。考慮到這一點,我們增強了觸碰后的反饋動效,以便讓運動中勞累的用戶更清晰的關注到自己有沒有誤觸界面。在一些關鍵功能設計上需要給用戶「反悔」的反應時間。例如結束跑步對于用戶是一個需要認真思考的決定,我們對不同功能的按鈕分別設計了“短按暫停跑步”和“長按結束跑步”兩種不同的操作方式。以防用戶因手出汗等等原因誤觸按鈕而導致提前結束記步。


          考慮到用戶跑步以室外場景居多,在此次界面設計中,通過對色彩的重新規劃突出界面元素的視覺對比,同時強化QQ運動的品牌色。




          3.3 優化計步詳情,增強用戶粘性


          人們堅持運動,記錄自己的運動數據,一是為了提升現實自我;二是為了向他人展示更好的社會自我。在上一版設計中,計步詳情頁主要用于沉淀運動數據,幫助用戶關注現實自我的成長。在新版設計中,我們將原運動數據、打卡玩法、進階體系合三為一,期望通過強化與社會自我有關的功能來增強用戶粘性。


          根據原運動數據、打卡玩法和進階體系三部分內容,首先確定需要在首頁呈現的關鍵信息。作為計步詳情的核心內容,對運動數據保留重要數據的展示,如今日步數、目標步數、距離和熱量等;打卡玩法主要用于驅動用戶長期堅持,因此需要展示歷史打卡情況和沉淀的高價值數據,包括打卡日歷和三個維度的打卡數據;進階體系主要為用戶明確目標感,并提供標榜社會自我的機會,該部分通過外顯打卡里程碑和步數段位達到目的。



          基于上述關鍵信息,明確優先級并梳理信息架構。我們將計步詳情頁的內容分為三大模塊 — 打卡日歷、打卡數據和運動數據,并將兩個維度的進階體系穿插于對應的模塊中。同時在信息架構上突出與打卡玩法相關的功能的信息層級,期望通過引導用戶持續打卡,保持用戶活躍。



          打卡日歷不僅用于展示歷史打卡情況,也作為運動數據的時間標尺,因此采用全局導航的形式承載日歷,既獨立存在,又用來切換展示不同日期的運動數據;之后,統一打卡數據模塊和運動數據模塊中內容的排布,并按改版目標確定兩個模塊的優先級排序。此外,將詳細的運動數據收歸二級頁,方便未來拓展設計維度更豐富的數據體系。新方案上線后,計步詳情頁留存率提升超過50%。



          最終QQ運動一期完整設計稿概覽如下:




          3.4 搭建UI組件,便于快捷管理


          QQ運動隸屬于QQ體系,所以組件化建立過程中設計師需要對齊手機QQ8.0版本的設計原則和設計規范,在具體應用場景中添加符合自主品牌的相關元素。組件化管理有助于日常多人輸出的稿件統一。后續設計師也會根據新增的項目需要不斷更新迭代組件規范。




          項目總結


          新版官網上線后,首頁打卡功能的點擊率提升超過60%;首頁留存率提升近20% ;廣告cpm提升超過700% ;收入提升280% ;賽事點擊率提升近400%;DAU提升超過110%。



          除此之外,設計師也進行了設計方法沉淀和總結,主要包括:


          1. 設計管理最重要的是項目底層邏輯,即產品設計思維。設計師要站在產品方向,針對不同時期的產品特點明確真實的設計目標,然后確定具體的設計指標,把設計量化。


          2. 大一統的品牌設計思維和“T”型設計執行法,適用于所有設計項目。設計師不但要掌握知識的廣度,也需要在知識的深度方面下功夫。因此,設計師需要不斷突破自身壁壘,不斷成長。


          3. UI組件化管理,有利于多人合作,提升工作效率。


          總之,現在的互聯網設計越來越要求專業度,設計師不能只是扮演執行角色,更需要思維跳出設計本身,通過產品的視角,讓設計助力產品實現用戶體驗和商業變現的雙重價值,從而提升產品總價值。



          文章來源:站酷   作者:騰訊ISUX 

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



          一起聊B端設計 - 如何設計表格?

          前端達人

          表格淺談,多多指教


           

           

          1) 數據查看

           

          讓我們先來回顧一下表格的基本構成,最上面的為表頭,橫為行,縱為列,內容區每一組展示數據區域為單元格。

           

          表格的設計,雖然看似簡單,但是作為用戶最常用的組件之一,我們需要對視覺和交互的精準把握,才能保證用戶在使用表格時更加。

           

          這里我推薦表格的"四維自檢法“,對我們設計的表格是否合理,做出一個標準的判斷。

          分別是:信息降噪、呼吸適中、易讀、詳情查看。

           

          信息降噪:分別對表格內容和視覺層面進行重要性梳理,剝離不重要的元素,使表格輕量化;

          呼吸適中:保持內容和元素之間合適的間距,使表格頁擁有一個好的呼吸感,將給用戶營造一個舒適的操作環境;

          易讀:通過對需求內容的解讀,對內容形式加以分類辨別,做出可讀性最強的樣式;

          詳情查看:b端系統往往伴隨著表格數據類目龐大的問題,通常會采用另一種形式去展示全部信息。

           

          1.1  信息降噪

           

          1.1.1 精簡表格內容

          當表格的字段非常重要時,一定要將字段全部展示出來讓用戶更清晰的了解數據。

          如果你的用戶只需要了解部分字段,那么全部展示是沒有必要的,只需在展示最重要的字段即可。

           

           

          1.1.2 自定義字段展示

          不同用戶想看的的信息側重不同,有時候我們無法準確判斷用戶看重哪些字段,還可以讓用戶自定義展示字段。

           

           

          1.1.3 精簡字段名稱

          當我們去設計表格的時候,通常會發現表格需要承載的信息量是非常大的,有時候為了表現出字段的準確含義,在定義字段名稱時往往會非常的長。但是當這些字段同時出現在一個表格里時,過長的字段名稱,又會顯得冗余,讓本就不大的頁面空間更加雜亂。

          所以當我們設計表格的時候,我們可以分析字段名稱,對字段名稱做精簡,看看是不是少一個字用戶就無法理解字段的含義。

           

           

          1.1.4 添加字段說明

          當字段名稱過長,又必須展示,才能有效的理解字段含義時。我們可以定義一個專有名詞代替,并且在字段名稱后使用添加字段說明的形式,來對字段加以說明。

          這樣一來用戶既可以清晰的理解字段含義,又可以在有限的頁面空間下獲取到更多的數據信息。

           

           

          1.1.5 簡化表格樣式

          早期表格的設計,出發點主要以擬物形式,以最接近現實表格的樣式去設計。

          但是隨著互聯網的普及度加深,極簡的表格設計,使界面更加輕盈,讓用戶更加專注于數據內容。

          去除縱向列的分割線,僅以淺色的橫向分割線區分行,但是要注意分割的顏色不能過于淺而缺乏辨識度,部分人群對顏色的辨識度會偏低,顯示器的硬件性能也會影響顏色的可辨識性。

           

           

          1.1.6 減少不必要的顏色區分

          表格設計中一定不要使用過多的顏色區做狀態或操作的區分,過多的顏色細分會使表格變得更加混亂,影響用戶體驗。

          對狀態的區分,僅用輕量的顏色區分即可,操作欄保持主色按鈕色。

           

           

          1.2  呼吸適中

           

          1.2.1 如何定義單元格的高度

          了解單元格的結構,以及實現單元格的基本邏輯,有助于我們更好的去把控我們的設計。

          單元格內的可控尺寸包含:單元格高度、文字字號、文字/段落行高、文字上下間距。

          我們基于視覺呼吸感,賦予各個元素合適的尺寸,我在這里給出一套參考方案:

          文字字號 = N  

          文字行高 = 1.5N

          上下間距 = 1.2N

          單元格高度 = 內容高度 + 上間距 +下間距

           

           

          1.2.2如何定義列的間距

           

          首先我們要了解列的兩種類型,第一種是定寬列,第二種是自適應列。

           

          a.定寬列

          顧名思義就是它的寬度是固定的,比如:第一列我們設置寬度為200px,第二列我們設置為300px,五六七列分別設為100px,那么我們這個列表就的寬度就等于200 + 300 + 100*3 = 1100px,在任何分辨率尺寸下你的這個列表都會保持這個寬度不變。

           

           

          b.自適應列

          就是列會隨著分辨率變化而產生寬度的變化,比如:列表有五列,我們定義列表的寬度為界面寬度的50%,假定界面寬度為1200px,那么列表寬度就為600px,而每一列的寬度則為120px。此時我們將界面的寬度縮小到600px時,那么列表的寬度就為300px,而每一列的寬度則為60px。

           

          在實際設計案例中,我們往往會面臨由于每一列的內容不同,所需要的寬度也就不同,我們希望在列不多時可以保持寬度自適應,但是如果每一列都做成自適應列的話,內容多的列無法展示全內容,內容少的列空間又會很大。

          所以,固定列 + 自適應列的綜合運用,可以讓我們更好的實現我們想要的設計方案。

           


          c.列的結構

          然后,我們一起來了解列的結構。每一列分為內容區和左右間距區,在固定列里面內容區和左右間距區都是保持不變的。但是在自適應列卻不同,它的內容區是隨界面分辨率變化而變化的,左右間距區的寬度是保持不變的(在代碼里間距區被叫做Padding)。

           

           

          d.固定列

          當表格字段數量不確定時,通常我們會為自定義列的內容區寫一個最小值(min-width),以確保字段很少時可以自適應寬度,字段較多時仍然能保證完整展示表格數據,不影響對內容的閱讀。

          當表格的列過多又必須全部展示時,固定必需固定的列(如姓名、任務名稱、操作項等),其他字段橫向滾動。

           

           

          1.3  呼吸適中

           

          1.3.1 列的對齊方式

          基于人的慣性瀏覽順序,設計每列合理的對齊方式,能夠輔助用戶更的完成工作。

          a.標題和內容:一般采用左對齊,更的瀏覽順序;

          b.有長短不一的數字時(序號除外):右對齊,方便比較 ;

          c.操作項一般放在尾列:右對齊;

           

           

          1.3.2 不留空白格

          從心理學的角度講,人對未知事物會產出恐懼情緒。我們在設計表格的時候,要考慮到表格的各種展示情況,非特殊情況不出現單元格空白。

          沒有數量用“0”表示,沒有該項內容用“-”表示。

           

           

          1.3.3 選擇合適的分頁器

          表格是一種可以承載大量數據的組件,當數據行數很多時我們通常會選擇分頁器,使用分頁器有哪些優點:

          a.快速查看:通過分頁數據加載緩解服務器壓力;

          b.清晰易讀:由于界面的空間是有限的,通過分頁展示數據,有助于緩解用戶的閱讀壓力;

          c.靈活便捷:如果客戶想在一頁展示很多數據,可以通過分頁器自行選擇,還可以了解到數據的總數目。

           

           

          1.3.4 收起低頻的操作項

          當界面空間有限、表格列數很多時,如果表格的操作項過多,會占用很多頁面空間,需要有選擇的展示,將低頻操作項收起,用點擊更多按鈕去觸發選擇。

          如果是1.0的產品,我們可以和產品經理溝通,分析每個功能按鈕的優先級。

          如果是上線的產品,我們還可以通過按鈕點擊PV(頁面成功訪問次數),來了解按鈕的使用頻率,做出按鈕優化。

           

           

          1.3.5 行的排序

          如果產品沒有特殊需求,那么默認最近創建的在最上面。

          可以用帶有排序的表頭,讓用戶自定義排序。

           

           

          1.4  查看詳情

           

          1.4.1 詳情入口

          如果表格的內容項很多,我們通常會在表格上只展示部分重要數據,而其余數據放在詳情頁面展示。

          作為詳情頁面的入口,通常會有兩種設計方式:

          a.將詳情按鈕放在操作項里

          b.將首行的名稱做成可點擊樣式,點擊跳轉至詳情

           

           

          1.4.2 詳情頁的展開形式

          如果詳情內容不多,沒有新開頁面的必要,我們可以采用展開行、彈窗、抽屜的形式,但是要注意盡量減少過多的樣式,給用戶增加疑惑感。

          如果詳情的內容很多,而且編輯的需求,建議采用新開頁的形式。

          建議根據詳情頁信息量的多少,以此采用展開行、彈窗、抽屜、新開頁的形式。

           

           

          2) 數據過濾

           

          數據過濾是表格頁很重要的組成部分,包含搜索、篩選、標簽頁。

          這一部分的主要作用是幫助用戶,梳理表格數據信息,精準定位所需的數據項。

           

           

          2.1  搜索

           

          2.1.1 模糊搜索

          模糊搜索是指在用戶搜索意圖不明確時,搜索引擎將用戶的查詢與待檢索的內容進行模糊匹配,找出與查詢相關的內容。模糊搜索無法理解用戶的查詢意圖,返回的結果中可能包括了一大批用戶不想要的信息,所以在使用模糊搜索時一定要結合自己的實際場景,慎重使用。

          優點:只要有相關的內容都會被檢索出來,減少了精準搜索帶了的記憶負擔

          缺點:容易把相關的信息也帶出來,例如檢索手機號,把相關編碼也匹配出來

           

           

          2.1.2 搜索

          搜索是指用戶在搜索時,針對某一數據字段搜索,來查找所需要的數據。根據業務場景不同,我們會查找某一字段,或者是用標簽切換不同字段來查找。

          優點:搜索匹配精準度高

          缺點:每次只能對單一條件進行搜索

           

           

          2.2  篩選

           

          篩選器主要是針對內容較少的字段進行查找的一種方式, 通過篩選器的選擇可以快速定位所需的數據,取消用戶輸入的過程,提升查找效率。一般篩選有兩種形式,第一種是下拉篩選,第二種是平鋪式篩選。

           

          2.2.1 下拉篩選

          下拉篩選就是將需要篩選的內容放置于選擇器當中,通過點擊選擇器下拉,來選擇需要篩選的內容。

          優點:空間利用率高,起到了很好的收納作用

          缺點:無法直觀看到所有的篩選項

           

           

          2.2.2 平鋪篩選

          平鋪篩選就是將篩選項的內容,直接展示于頁面之上,通過點擊選擇的方式直接進行篩選?;蛘呖梢酝ㄟ^自定義內容的篩選。

          優點:操作效率高,篩選項一目了然,支持輸入更多篩選條件

          缺點:空間利用率低,不適合選項太多的情況

           

           

          2.2.3 如何合理的使用篩選項

          當數據內容需要的篩選類目過多時,如何合理的擺放,才能提高用戶的使用效率。

          a.信息排序:基于用戶使用場景,以目標導向為依據,將高頻的篩選項排列到前面,低頻的篩選項置于后面

          b.默認折疊低頻篩選項:當篩選項過多時,會極大的占用界面空間,使用戶在閱讀數據時產生非常不好的用戶體驗,通過展示高頻篩選項、隱藏低頻篩選項,將更好的提升用戶體驗。

          c.所有篩選項都很低頻:以點擊高級篩選按鈕的形式觸發,將全部篩選項置于氣泡或者彈窗之中。

           

          如何判定篩選項的使用頻率呢?

          通常會有兩種方式:

          第一種是給篩選項增加數據埋點,這樣一來就可以通過對用戶點擊行為的分析了解到篩選項的使用頻率;

          第二種是用戶調研,通過問卷或者面談,了解到用戶的真實使用需求。

           


          2.3  標簽頁

           標簽頁又叫選項卡,在組件中我們通常叫Tabs,指的是分隔內容上有關聯但屬于不同類別的數據集合。

           

          2.3.1 默認展示常用項

          在使用標簽頁時,有一點我們要特別注意,通常在B端設計中,我們會把標簽頁的位置定位在最常用的一個選項。

           

          2.3.2 增加數據條目

          如果是訂單一類的分頁,我們還可以將數據條數,展示在標簽右側,用來幫助用戶快速了解到待辦數據量。

           

           

          3) 數據操作

           

          3.1 分類

          數據操作即對表格的數據進行操作,首先我們對數據操作進行分類。

           

          按控制范圍分:

          a.單行操作

          b.批量操作

          c.全局操作

           

          按操作屬性分:

          a.新增數據

          b.編輯數據

          c.刪除數據

          d.業務處理

           

          3.2 如何合理的設計數據操作

           

          第一步,先判斷控制范圍

           

           

          第二步,判斷擺放位置

           

          第三步,優化信息層級

           

           

          以上是操作項和篩選項較多的情況,那么不多時,我們還是要合理利用空間,靈活設計

           

           

          以上就是《如何設計表格?》的全部內容了,后續還會努力更新更多B端設計分享!

           

          與君共勉



           




          轉自:站酷

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

          團隊出品:復雜UI界面的8個核心設計法則

          前端達人

          復雜的應用多種多樣,支持的服務和功能也千差萬別,但是無論如何呈現,此類復雜應用的設計都是非常挑戰設計師的設計功底的,需要設計師了解業務,了解用戶,并且能夠通過設計更好地提供服務。

          復雜UI界面的8個核心設計法則

          資深UI設計者

          復雜應用大多情況下是偏專業和B端的一些UI界面,它們大多出現在桌面端使用環境,并且終端用戶類型多樣,涉及流程、鏈條、業務也大多呈現出多變復雜的特征。這篇文章,來自UX設計領域的存在NNGroup,作者為凱特·卡普蘭。

          到底什么是復雜應用?

          我們之前將「復雜應用」界定為特定專業領域當中,需要經過廣泛培訓之后使用的,有著非結構化目標、非線性工作流程的任何應用程序。這個概念可能聽起來有點抽象,不過這么說你可能會 更容易理解:從科學研究到專業人員,諸如金融分析師,它們常用的那些專業軟件應用。這類應用通常有著這些特點:

          • 為有專業知識和訓練有素的用戶提供支持
          • 幫助用戶瀏覽、管理大型數據庫,并提供高級的數據分析和處理的功能
          • 通過可變和多樣的基礎任務功能來解決問題或者達成目標
          • 需要在多個角色、工具、平臺之間進行協作或者切換
          • 可以用來減輕高影響力/高價值任務的風險,降低損失

          盡管不同的復雜應用之間差異很大,但是他們的共同點是,專業的從業人員對于這類工具有著極強的依賴性。

          考慮到設計師和開發者在面對這類工具的時候的挑戰,我梳理總結了 8 個復雜應用的設計原則和指南。

          1、采用邊做邊學的用戶流程

          很多研究表明,對于復雜的應用和工具,用戶更加青睞可以立刻上手開始使用而不受它復雜度影響的那類工具。

          與大量的教程、文檔、幫助和設置說明相比,能夠立刻開始的任務和項目,對于用戶有著莫大的吸引力。這種現象被稱為「活躍用戶悖論」。

          雖然在專業領域當中,倚靠摸索和試錯學習是不恰當也不安全的,但是一定程度的邊做邊學是必須的,因為不可能在培訓和手冊當中涵蓋所有的使用場景。

          所以,在設計的時候應該提供「跳過教程」的直接上手的偏好設置,同時進行相應的安全性設置,避免新手的莽撞操作導致損失。比如可以限制這個階段的用戶執行長流程多任務的操作,讓控制面板實時顯示操作結果或者預覽結果,這樣用戶無需執行全部操作就可以知道大概的結果。

          團隊出品:復雜UI界面的8個核心設計法則

          在 Salesforce 控制面板當中,就可以實時預覽面板編輯的效果。

          2、為用戶提供有效的方法和建議

          絕大多數用戶都不是進階的專家級用戶,他們在絕大多數時候會使用基礎但是效率沒那么高的操作和執行方案。很多用戶形成習慣之后,通常不會主動做出改變,而這在日積月累之后導致大量的時間浪費,效率低下。

          值得一提的是,這個時候依賴冗長的文檔和教程其實很難達成效果,更合理的方式是結合用戶所處的上下文環境,通過界面工具提示的方式,適時地告知用戶「有更方便的方法」。

          通常,可以使用懸停提示,或者是彈出式工具提示來實現這一功能。

          團隊出品:復雜UI界面的8個核心設計法則

          ArcMap 是一款地理信息系統類工具,它通常會通過上下文環境下的信息引導,來幫助用戶了解技巧。

          3、提供靈活而流暢的功能路徑

          復雜的應用程序,通常會有很多功能是分散的而非線性的,不同的功能組合起來可以實現特定的功能。在這類工具當中,用戶日??赡芤膊皇呛艽_切知道最終的目標是什么,而需要通過數據分析來逐步推進,同時,在知道確切目標的情況下,也應該可以遵循不同的路徑靈活地達成目標。

          設計師這些應用的時候,設計師應該避免使用固定、唯一、 僵化的實現路徑,迫使用戶必循嚴格按照某一固定路徑來做事情。一方面,允許用戶跳過某個步驟,或者回滾到更早的路徑,另一方面,允許用戶遵循不同的方式和路徑來達成目標。

          團隊出品:復雜UI界面的8個核心設計法則

          比如萬事達卡的自助服務就可以通過交互式的圖表來引導用戶完成不同的任務。

          4、 幫助用戶跟蹤行為和思考過程

          復雜的任務,通常意味著它需要很多步驟,不同的環節,而在實際的應用場景中,某個分析步驟耗費幾個小時甚至幾天,都是有可能的。在高度復雜的現實生活中,某個步驟可能會換人接手,可能會因為硬件、 網絡等問題而暫停甚至丟失,這也意味著「可追溯性」是很重要的。

          所以,在這樣的復雜應用當中,應該允許用戶在使用過程中,可以便捷清晰地記錄、保存、 導出內容和記錄,允許用戶中斷,中斷后可以恢復特定的任務。在任務進行過程中可以進行注釋、保存相關的說明。

          團隊出品:復雜UI界面的8個核心設計法則

          在決策建模軟件TreeAge 當中,用戶可以在分析和建模過程中進行開放式的注釋,可以后續在底部快速訪問這些筆記。

          5、可以協調多工具并且在工作空間之間轉換

          復雜的應用通常還會面臨一個狀況,就是工具本身的不足,用戶需要在多個工作空間上使用工具和內容的時候,它需要具備切換的功能。對于不具備的功能,應用程序應該允許使用第三方的應用來作為補充。

          比如當軟件不支持某個操作的時候,應該允許用戶從線上的其他數據庫中獲取并導出數據來使用,可以依托外部文檔作為支持,允許用戶在應用中做注釋和評論。

          減輕工作負擔的一個要點,是盡量使用通用的API、接口和標準,盡量兼容行業標準軟件,比如 Excel、Powerpoint ,盡量使用標準格式,等等。

          團隊出品:復雜UI界面的8個核心設計法則

          微軟的商業分析軟件 PowerBI 就提供了標準化的導出和復制功能,非常方便

          6、減少混亂而不影響功能

          復雜應用通常旨在保持泛用性。使用場景多樣,多種不同的功能,一家汽車生產廠家,可能會和蜜蜂養殖機構采用同樣的工具和軟件來監測機器故障。但是,這種泛用性的另外一面,就是混亂性。復雜的應用可能會同時兼顧到基礎型的小白用戶和進階型的專家用戶,而后者用到的功能很小概率會被基礎用戶用到。

          所以,設計者需要在不降低功能性的情況下,基于應用場景、 用戶需求來進行簡化和優化,在保持功能完整易用的前提之下,降低復雜度和混亂度。

          分階段和層級展現就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務、特定階段、特等級別之后,再呈現特定功能,是有效的設計方法。

          團隊出品:復雜UI界面的8個核心設計法則

          7、主次信息之間要能平穩過渡

          即使降低了混亂度,在復雜應用當中,信息量可能依然是過載的。通常,對于這種情況可以通過區分信息層級的主次來進行快速的區分,不過,從交互上來說,這可能依然不夠。

          對于諸如控制面板一樣的界面,用戶可能需要時刻查看面板上的信息,需要了解次級信息但是又不能離開界面,這就體現出主次信息之間的過渡呈現的重要性了。

          一般而言,使用類似與懸停顯示的方式,能夠比較柔和地將次級信息呈現出來,允許用戶查看詳細的定量數據。下面這個案例當中就是,懸停顯示更多次級信息。

          團隊出品:復雜UI界面的8個核心設計法則

          8、在視覺上突出關鍵信息

          復雜應用通常在界面上包含由大量的信息,而這個時候關鍵性的數據如果不在視覺上做突出顯示,會被用戶錯過。通過視覺區分、提示警報的方式,讓用戶及時注意到,才有可能規避可能存在的問題。

          值得注意的是,讓關鍵信息和元素凸顯的方式,并不一定非得是使用鮮艷的色彩和較粗的字體,簡單的放大呈現,使用圖形化的元素輔助提示,或者是提供足夠的留白都可以達到目的,就像下面的案例一樣:

          團隊出品:復雜UI界面的8個核心設計法則

          結論

          復雜的應用多種多樣,支持的服務和功能也千差萬別,但是無論如何呈現,此類復雜應用的設計都是非常挑戰設計師的設計功底的,需要設計師了解業務,了解用戶,并且能夠通過設計更好地提供服務。

          文章來源:優設   作者:Kate Kaplan

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

          用上這款分析工具,你看上去就像一個高級 UI 設計師了

          前端達人

          5W1H 這種分析方法,是比較宏觀的分析工具。它的應用是針對整個項目的開展來進行,幫助我們圍繞產品需求有計劃有邏輯性的制定解決方案。

          在這個框架下,就方便我們決定要引入哪些其它分析方法或者理論內容,例如 SWOT、KANO、AB TEST、RMF 等工具。

          也因為我們對整體的認識更清晰,決定了我們應用理論和其它分析模型的精細度、細節方法。讓設計師在項目處理過程中可以更靈活,更專業,更游刃有余。



          優秀網站設計賞析

          前端達人

          很多網站仍然在使用老舊的頁面設計,比如國內一些企業官網,萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設計不能說是不好的設計,很實用,用戶能夠預測展示的內容,也容易找到需要的內容。但是正因為可預測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規,也依然有良好用戶體驗的網頁設計。

          藍藍設計(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設計公司,公司對UI設計的追求一向很高,致力于為卓越的國內外企業提供卓越的手機app/安卓ui設計、軟件界面設計、網站設計,用戶研究、交互設計服務。

          接下來是精彩的UI設計賞析

          jhk-1605781847488.png

          jhk-1605858507124.png

          jhk-1605858621125.png

          jhk-1605858643110.png

          jhk-1605858651660.png

          北京藍藍設計團隊來自清華美院,工作多年,行業經驗豐富,專業性很強。我們是熱愛設計,設計不僅是我們的專業,我們的職業,還是我們的愛好。每一個藍藍設計的設計師都希望自己的設計越來越好,以高標準,敬業用心的態度、專業的技藝得到客戶的認可。為此,我們不惜代價,愿意額外的付出時間、精力,去學習、去嘗試、去研究、去探索。工作賣力,玩的開心。做好卓越的界面設計,成為這個領域的資深專家,幫助客戶取得成功,是我們的目標。

          jhk-1605858672127.png


          藍藍設計秉承設計優秀,不斷超越的理念,誠信敬業、專業耐心的工作作風,一直堅持注重用戶心理體驗及“設計與營銷”等領域的理論與實踐相結合。10余年專注努力,300+案例磨練。我們在ui創意設計,用戶體驗與交互設計,各種類型軟件界面設計,國際化標準和流行趨勢,進行過不斷的學習和實踐。藍藍設計提供的是可以信賴的ui設計服務,我們內部有一套管理要求,比如去客戶現場每周一次的檢視和溝通、內部提案會議、每天下班前的整理反饋成果發郵件、隨時溝通的qq、電話,階段性的匯報和進度記錄整理。多勞多得的獎勵機制,客戶滿意度評價獎勵機制,鼓勵大家用心、平和、耐心、勤奮、創新的做事.



          (以上圖片均來源于網絡)

          (精美流程圖設計)



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



            更多精彩文章:

                 ui界面設計之網站設計案例欣賞(一)

                 超贊的創意頁面排版設計,打造“視”不可擋的網頁設計

                超贊的網頁設計+精美流程圖賞析

                 超贊的網站設計賞析


          國際設計手法:液態設計

          ui設計分享達人

          2020又過大半了,去年這個時候我們研究了目前國際大廠在使用的一些趨勢-晶白,點線底紋,光感,那么到了今天又有哪些新的趨勢映入眼簾呢,你還在使用那套舊的設計風格來做設計,今天帶大家來看看今年哪些性格值得我們學習呢?


          什么是液態視覺

          參加過去年UCAN的同學應該對于這個水的主KV印象深刻,當時是以水,宇宙概念做的整個視覺。整個視覺最讓人深刻的莫過于這個畫龍點睛的水滴液態效果。

          整個水滴流動感,運用到整個KV各個地方,背景還有底紋等等,印象深刻。

          在2020年,液態視覺毫無疑問是當前最受關注的視覺風格之一。這種效果看起來像流動的各種液體,在設計中不僅可以很強的吸引人眼球,同時無論是作為背景元素,還是裝飾都讓人過目難忘。

          液態視覺除了視覺感官層面會讓你記憶深刻,它的整個視覺概念也可以講很多故事,比如你可以說整個設計概念,是圍繞”水“來設計,水是流動的,水也是生命之泉,能賦予很多產品很強的概念,所以也就是為什么今年會被很多大型KV所運用的原因。同時這種流動感也可以比如宇宙萬物,生命不息,也可以運用在很多大型的科技發布會上。


          所以作為設計,今年我們勢必要去關注這個趨勢和理念,嘗試如何去運用到我們產品中去。


          液態視覺的情感感受

          1、生命力


          使用過siri的朋友對這個效果應該不會陌生,液態視覺一個非常直觀的感受就是具有生命力,可以隨機的發生各種各樣的變化,正是如此,被很多語音產品在頁面中使用。

          在很多科技類產品,智能功能這塊都會看見這種風格的運用,所以假如你今天需要設計一款智能,很未來的產品,這種液態風格設計一定需要去關注。

          比如這款科技類產品,在啟動頁面時候,就直接跳出一個類似水滴的機器人,用智能語音和你對話,然后隨著人機交互,它會變成不同的形態。


          2.流動運動感


          液態視覺另外一個特點就是具有流動感運動感,在很多智能家居中被廣泛運用,比如圖中這個智能水壺頁面設計,隨著水溫度的變化,顏色和形狀都會發生變化。

          在很多發布會中,營造一些比較大氣的感覺,或者宇宙場景時候經常運營到這個風格,在空間上和視覺上都有方向和動態效果。

          這組海報設計,就非常有方向感和宇宙未來感,整個圖形都朝著一個方向走向,這也是其他圖形元素很難表達的風格特點。

          GlebKuznetsov的作品中這個動態效果,隨著液態效果的流動,整個畫面呈現出非常有程序的水流動效果。


          3.科幻未來感

          液態效果另外一個視覺感受就是未來感和科技感,因為它造型的變化,抽象圖形的表達,給人很神秘,抽象的視覺感受。

          如上圖,通過將流動的圖形,進行旋轉,形成蟲洞感覺,不由自主想起宇宙和未來感。


          液態視覺的技法特點

          1.質感柔軟呈現透明

          液態風格特點雖然視覺沖擊力強,但是視覺表現上,柔軟和透明是非常大的一個特點。整體的材質比較輕,加上透明效果運用,整體會非常的輕盈。通常人工智能頁面場景運用比較多。


          2.色彩豐富大膽漸變


          液態風格另外一個特點是什么。色彩豐富,大膽的漸變色,形成很強的視覺沖擊力。

          整個色彩類似彩虹,或者霓虹燈反射效果,這也是它在設計中能吸引人很重要的一個原因。

          Kikk的官網設計,和Ucan有些神似,也是采用的的一個液態的玻璃球,配色大膽的漸變在視覺表現和沖擊力讓都讓人印象深刻。


          3.塑料質感運用

          塑料質感:液態視覺視覺質感豐富,質感也很大膽,比較常用的有塑料質感,配合燈光,如上圖就是運用是塑料質感,配色彩色的漸變,非常夢幻。

          這種塑料質感不止是在設計中用到,在時尚攝影中也被經常使用。


          4.玻璃質感運用

          玻璃質感的運用,一般會運用玻璃這種效果,出現在畫面中,隨著玻璃的折射效果進行變換,玻璃的質感和平面這種強反差的設計,讓你過目不忘。

          玻璃質感的折射效果,結合后面文字的透出,很好的將這種液態融合效果運用到了。

          在越來越多的國外設計中,都經??匆娺@種玻璃液態圖形和平面設計的融合。


          5.水的質感運用

          水的質感,毋庸置疑,但是這個水的質感一般是運用氣泡的表現形式,再結合折射效果,整個視覺水泡就是核心視覺元素。

          Ucan的主視覺效果,就是采用類似的手法,這類設計很巧妙,同時簡約又不失大氣。


          6.點線面結合運用

          除了塑料,扁平質感以外,點線的運用在液態設計中非常多,比如上圖的OPPO和colo的海報設計,就是運用了流動變化的線條,讓整個設計呈現出簡約高科技之美。

          用線成為整個設計主體,通過流動的線勾勒出一幅場景,在科技類產品中運用較多。支付寶很多理財產品都曾經運用過類似風格。


          在界面中運用

          天貓雙11的很多場景中,其實都有用到液態設計元素,比如雙11的潮流盛典舞臺設計,就是運用的液態當元素,整個畫面非常潮。

          在AI人工智能的產品設計中,液態設計經常被廣泛使用,無論是智能語音設計,還是說智能家居是使用,都能看見它運用的影子。

          這組機器學習的網站設計,通過液態設計,講玻璃元素設計成動態的方式非常的逼真。整個設計給人空間和未來感展現。

          這個液態網站的設計,大膽的漸變,流動的液態效果,讓整個頁面充滿了時尚感。

          液態設計除了一些抽象元素,一些3D的元素也可以使用,整體呈現出來的效果,也非常的有吸引力。當然得結合設計整體來平衡。

          目前來說液態設計在界面中運用,一般在科技網站,AI或者機器人場景比較多,一般液態會呈現多種變化趨勢。


          在平面中運用

          在平面設計中案例比較多,目前很多商業設計中都運用到了一個液態的圖形配合一些幾何圖形,干凈利索的文字都能搭配出不錯的視覺效果。

          這組海報,看似簡約但是充滿了設計感,除了液態的核心元素,字體運用,板式空間的利用都體現出設計師極高的功底。 

          在韓國很多藝術展的設計中,抽象的幾何圖片配合液態的動態變化。整體非常強的視覺沖擊。

          如果你今天做設計,找不到感覺了,不如放棄下你之前的設計套路。嘗試一下新的設計思路,說不定可以打開不一樣的視角。


          在品牌中運用

          今天除了頁面是動態的,在很多時候品牌LOGO也是動態的液態的,會變化,如上圖這個logo他會隨著不同的方向去旋轉變化。LOGO一定要是靜態的么?不可以是動態的?甚至液態么,我覺得一定有可能會出現液態的圖形。

          電信OI公司的logo就是液態呈現的,他的變化有幾十種展示方式。

          整個圖形以明亮,形狀變化的“氣泡”為液態容器,可根據客戶的聲音改變LOGO的顏色和形狀。

          或許在未來,液態的LOGO會成為一種新的主流,只是作為新時代的設計師,我們必須要去了解和關注。


          最后

          趨勢是變化的,唯一比變的就是變化,作為處在互聯網中的設計師,我們身邊的一切都是變化的,身邊的人,身邊的事兒,甚至是商業模式都在變化,學會擁抱變化, 并且讓自己持續的成長和變的更好,是每個設計師都要學習的。


          文章來源:站酷  作者:我們的設計日記



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



          超贊的網站設計作品賞析

          前端達人

          扁平化網頁設計的表現大多體現在配色、字體以及布局排版方面,這三樣結合得當都能制作出漂亮的網站。在國內很多企業網站的布局架構幾乎是一樣的,最多就是LOGO和一點顏色變化,看不出什么特色和創新。

          作為設計師,應該多花點心思在創新上,比如網頁上的布局,其實它是可以變化多樣的,正如今天為大家分享yi xie布局排版好看的網頁設計作品,大家可以參考這些布局的設計,從中獲得一些靈感。

          jhk-1605176571790.jpg

          jhk-1605176590147.png

          jhk-1605578540070.jpg

          jhk-1605578739838.pngjhk-1605578739838.png

          jhk-1605578745208.jpg

          WechatIMG690.jpeg

          WechatIMG691.png

          WechatIMG692.png

          WechatIMG693.jpeg

          WechatIMG694.jpeg

          WechatIMG695.png




          (以上圖片均來源于網絡)

          (精美流程圖設計)



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



            更多精彩文章:

                 ui界面設計之網站設計案例欣賞(一)

                 超贊的創意頁面排版設計,打造“視”不可擋的網頁設計

                超贊的網頁設計+精美流程圖賞析

          超贊的頁面設計賞析(三)

          前端達人

          網頁中超過95%以上的信息都是通過文字的形式呈現。 然而,頁面文字并非毫無章法的隨意呈現。事實上,更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計,更能吸引用戶,提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。

          BS界面是基于瀏覽器的界面,隨著人們對于用戶體驗要求的不斷提高,BS界面的設計要求也越來越高,

          接下來為大家分享一下我收集到的案例:

          jhk-1599463771362.jpg

          jhk-1604364112925.png

          jhk-1604364117821.png

          jhk-1604364127546.png

          jhk-1604364176554.png

          WechatIMG544.jpeg

          WechatIMG543.png

          WechatIMG542.png

          WechatIMG541.jpeg

          WechatIMG539.png

          WechatIMG535.jpeg

          jhk-1604364225781.png

          WechatIMG545.jpeg

          WechatIMG593.jpeg

          WechatIMG597.jpeg

          WechatIMG598.jpeg

          WechatIMG599.png

          WechatIMG604.png

          WechatIMG605.png

          WechatIMG616.png

          WechatIMG614.png

          WechatIMG613.png

          WechatIMG610.jpeg

          WechatIMG609.pngWechatIMG609.png

          WechatIMG608.jpeg

          WechatIMG606.png

          WechatIMG617.png

          WechatIMG618.png

          WechatIMG619.png





          (圖片均來源于網絡)

          點擊查看更多UI/UE設計案例??????

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



              更多精彩文章:

                超贊的頁面設計賞析(一)

                超贊的頁面設計賞析(二)



          超贊的頁面設計賞析(二)

          前端達人

          網頁中超過95%以上的信息都是通過文字的形式呈現。 然而,頁面文字并非毫無章法的隨意呈現。事實上,更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計,更能吸引用戶,提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。

          BS界面是基于瀏覽器的界面,隨著人們對于用戶體驗要求的不斷提高,BS界面的設計要求也越來越高,

          接下來為大家分享一下我收集到的案例:

          jhk-1599463771362.jpg

          jhk-1604364112925.png

          jhk-1604364117821.png

          jhk-1604364127546.png

          jhk-1604364176554.png

          WechatIMG544.jpeg

          WechatIMG543.png

          WechatIMG542.png

          WechatIMG541.jpeg

          WechatIMG539.png

          WechatIMG535.jpeg

          jhk-1604364225781.png

          WechatIMG545.jpeg

          WechatIMG593.jpeg

          WechatIMG597.jpeg

          WechatIMG598.jpeg

          WechatIMG599.png

          WechatIMG604.png

          WechatIMG605.png

          WechatIMG616.png

          WechatIMG614.png

          WechatIMG613.png

          WechatIMG610.jpeg

          WechatIMG609.png

          WechatIMG608.jpeg

          WechatIMG606.png

          WechatIMG606.pngWechatIMG617.png

          WechatIMG618.png

          WechatIMG619.png




          (圖片均來源于網絡)

          點擊查看更多UI/UE設計案例??????

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



              更多精彩文章:

                超贊的頁面設計賞析(一)



          日歷

          鏈接

          個人資料

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

          存檔

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