<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個方法,打開全球視野

          ui設計分享達人

          設計如果要做好,除了提升審美還有一個非常重要的點就是多看、多使用好的產品,特別是一些全球頂級大公司的產品一定要去體驗,很多國內設計師受限于各種原因,無法下載國外App,沒關系,今天分享一個我經常使用的工具網站,讓你也能不出國門打開全球設計眼界。

          設計師要拓寬眼界

          我相信很多朋友在面試時候都會被問到,你常用的產品有哪些?一般問這個問題,其實面試官在考察3個方面: 

          第一:你對于互聯網好產品的關注度。

          第二:你是否有足夠好奇心去研究體驗產品

          第三:你的審美,美感如何?

          因此作為一個設計師,必須不斷去把玩使用各種APP才能讓眼界打開。如果說Pin是去構建設計靈感庫,那么每個人還需要有一個App圖書館,當你設計靈感枯竭時候;可以去嘗試體驗更多好的產品提升自己眼界,今天就分享幾個小方法幫你打開全球視野。


          第一個神器

          https://mobbin.design/ 這個網站是我私藏多年的一個寶藏網站,里面幾乎包括了目前國外最優秀的一些APP,而且不用你去商店下載就可以看見里面全部界面流程。有的APP你還得需要各種賬號才可以去看見完整頁面,這個網站很全,你點擊進去,它把全部頁面模塊都已經截圖好了,非常方便。 

          比如我今天想看twitter某個動態卡片如何設計的,按照一般做法,我可能需要科學上網,甚至有的還需要去注冊美區賬號。但是在這個網站里,直接搜索就可以看見twitter的全部設計,包括各個場景截圖。 

          APP的全部頁面狀態,以及里面各種場景,按照用戶的體驗流程一一的截圖展示。

          點擊后可以查看大圖模式,點擊旁邊的列表標簽,能夠搜索很多列表的效果圖。

          點擊標簽后全網所有關于列表相關的設計截圖,都給你找出來了,然后 你就可以找到你想要的圖片,順藤摸瓜,找到更多的APP。

          同時你如果要下載到手機,點擊頭像即可跳到對應的APP下載頁面,非常方便! 

          同時搜索功能也支持很多的APP查詢,比如我想看看google news的界面設計,直接搜索即可找到。 

          就能查詢到Google news的全部頁面設計和細節,非常方便。大家可以多去這個網站試試,你會發現很多驚喜。 

          第二個工具:Senstower

          除了上面那個網站,還有另外一個神器工具:https://sensortower-china.com/它可以看見全球的APP排行榜,最神奇地方是可以看見各個產品的用戶數,以及盈利情況。讓我們可以更好的了解商業。 

          詳情頁可以看見這個公司旗下全部產品,以及公下載用戶量,每月賺的錢。非常的厲害,這個工具適合很多初創公司,當你不知道做什么項目時,可以去上面看看其他國家一些產品,找找靈感,那設計上我們又可以學什么呢? 

          比如我很喜歡的一家韓國公司Nvaer,相當于中國的阿里騰訊,點擊搜索后,你能很完整的看到這個公司的全部app,非常全。 

          點擊進去可以看見下載數。以及公司的盈利情況,以及用戶對于這個產品的全部評價。 

          當然也有屏幕截圖,比如你是做直播的產品,那么就可以去看看這個產品的頁面,做為設計參考。同樣的支持APP商店下載,可以跳轉到對應的APP的鏈接。 

          經常做設計沒有靈感,但是我們找競品只能看到國內的,那么這個軟件你搜索后可以 查詢全球的所有APP,比如我做音樂軟件,那么我搜索music出來的關鍵詞就是全球的音樂軟件排行榜。非常強大! 

          同時你可以通過類別選擇產品類型,是娛樂的還是音樂,以及那個國家的?他能幫我們的眼界放眼到全球,如果說上面那個工具,幫我們收集優秀截圖,那么 這個網站幫我們了解很多商業思維,用戶評價,以及這個公司矩陣產品。

          第三個工具:producthunt

          這個網站是我的最愛,所以放到最后分享,它是一個優秀產品的分享網站,https://www.producthunt.com/ ,里面基本都是一些優秀創業公司的最新產品,免費開放給所有人體驗,包括產品,設計,工具,以及各種新奇好玩的趣味工具。 

          比如這個網站,是谷歌的一個最新產品「谷歌照片」,你可以像故事一樣發布你的照片,非常好玩。 

          比如這個產品,設計師提供了幾百個3D的圖標網站可以供大家下載體驗,全部免費。 

          一鍵扣除背景圖片和視頻的工具,非常的棒,這些產品都是全球一些頂級的開發者設計出來的,給大家免費使用和評測的。我經常能在里面發現很多寶藏,也一起分享給大家!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          設計沉淀錄:如何讓你的設計更有價值

          ui設計分享達人

          前言:如何讓你的設計更有價值,設計有價值代表你的方案有價值,你的方案有價值代表你的理論有價值、你的理論有價值代表你的專業能力體現,歸根到底,說明了什么人作出什么樣的作品的同時會帶來相應的價值。站在設計師的角度看,在公司里,屬于站在用戶體驗上的提出的設計建議或者設計方案,基于“以用戶為中心”理念和交互設計原則,通過自己的設計思維與專業能力,為公司創造更大的價值,不單只是一個美觀的輸出。

          目錄:

          一、設計行業的發展趨勢

          a)設計與產品的關系

          b)找到自身價值的重要性

          二、了解設計師的價值分層

          a)設計協同

          b)推動業務增長

          c)設計驅動產品

          三、設計師需要具備的哪些思維?

          a)雙鉆模型解決問題

          b)“五度”設計成果評估模型

          c)培養數據思維,利用數據提升設計的價值


          一、設計行業的發展趨勢

          a)設計與產品的關系

          以前,設計師在團隊里的位置會比較尷尬,因為沒法驗證自己對業務的推動是否產生了什么明確的價值。而大數據的來臨,設計的價值變得顯性化,作為與用戶關系密切的設計師,善用好數據,可以發揮的作用其實很大。我們可以通過自己的設計思維與專業能力,為公司創造更大的價值,不單只是一個美觀的輸出。這就使得設計與產品業務關系越來越密切,是整個行業發展的必然趨勢。


          舉一個設計以小成提高業務的實例。這是我之前做的分揀軟件迭代首頁的自定義配置組件。在改動前分揀首頁功能多,甚至有時候需要滑動尋找。尋找點擊率大概是不到16%,改動后提高到了40%,不消耗任何其他人力、物力成本,就可以用設計讓CTR翻倍。

          設計目標:減少首頁模塊尋找的時間,加大成功點擊率,考慮延展性發展

          現有問題:主次功能混淆、視覺點不夠集中、點擊按鈕不明顯

          優化方案:1、主次布局調整,主上次下;2、面積放大提高模塊命中率;3、色彩區分主次按鈕;4、添加“?”自定義配置首頁主功能,加入人性化設計理念。



          b)找到自身價值的重要性

          自身價值顧名思義就是你的工作成果會帶來什么價值,按照公司更看重我們的設計能給產品的發展帶來多大的價值。雖然職位的性質已經很明確你的價值的體現,但是這里注重成果的價值,設計師的成果更多是設計方案,方案成果的價值的接受度也是需要從易到難的漸進的。


          舉一個設計價值體現的實例。這是我之前做的新Station組件庫——GM Design。設置組件和設計規范不僅保持了產品的統一性,且減少用戶在使用過程中的行為認知負擔,快速同事達成合作,還可以減少不必要的操作和排查,提高易用性。

          設計目標:保持產品的統一性,減少認知負擔,降低時間和人力成本,提高易用性

          現有問題:同個功能存在組件多樣、組件學習成本高、反復修改,

          優化方案:1、建立組件庫;2、功能類型劃分,采用同一個組件的變形處理;3、組件集中化; 


          二、了解設計師的價值分層

          設計師的價值可以分為以下三層:設計協同、設計推動業務增長、設計驅動產品。

          a)設計協同

          一個完美的執行者,能夠在拿到需求后高效又完美地實現落地。簡單地說就是手上功夫好。

          做好這個階段需要有優秀的專業能力,良好的溝通能力,并參與到產品的探索與構思中來。


          舉一個設計協調的實例。Q2階段的B-Shop商城交互迭代。前期輸出設計基礎和設計規范,有助于開發高效實現,實時跟進UI進度和設計協助。在產品的探索中發現數字鍵盤組件的問題點,由于自己寫的數字組件具有局限性,導致體驗上無法滿足部分需求,如:輸入框的定位在數字鍵盤之上?;谶@個問題點,我們提出A/B方案,A方案是自己寫的數字組件,B方案是自己寫的數字組件延用原生的邏輯,從用戶測試得出,A方案是更符合用戶操作習慣。

          設計目標:組件高效快捷輸入,側重交互體驗提升,視覺優化,提高易用性

          現有問題:學習成本高、缺少設計基礎、信息分層不明顯、體驗差

          優化方案:1、劃分主次信息,閱讀更直觀;2、建立設計規范;3、組件優化,符合用戶操作習慣;4、圖文結合,按鈕優化,加強頁面指導性



          b)推動業務增長

          這個階段的設計師,會比上一個階段更能體現設計師的設計價值,并對產品產生一定的影響力。能在以用戶為中心的基礎上,推動業務的增長,所以這個階段的設計也被稱為UGD(User Growth Design)。


          需要設計師具備用戶洞見力,數據分析能力,從這兩個維度出發,去熟悉業務、分析業務,從而推動業務。

          舉一個推動業務增長的實例。Q2階段的采購APP的交互迭代。表頭的功能布局與標簽欄的“?”添加功能的調整,其實在用戶調研階段的熱力圖數據和觀察法分析得出,工具類移動端側重點在功能區,需要一目了然知道我的當前任務數是很重要的信息,且是高頻操作,所以放置頂部;標簽欄的添加功能是為了快速添加采購單據和詢價為目的,用戶群體特殊性,需要一鍵新建添加的需求。

          設計目標:側重交互體驗提升,提高工作效率,提高易用性

          現有問題:學習成本高、缺少設計基礎、操作路徑長、體驗差

          優化方案:1、操作路徑簡化,采用路徑集合彈框;2、建立設計規范;3、組件優化,符合用戶操作習慣;4、一鍵新建“?”的功能,達到快速新建

          體驗連接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(賬戶/密碼zhangsan0001/ liuge1)



          c)設計驅動產品

          這個階段的設計師,在團隊中的價值可以說是非常大了。從被動的需求接收方,轉化為從戰略層,能主動提出需求的一方。也是UXD發展的終極方向。


          三、設計師需要具備的哪些思維?

          a)雙鉆模型解決問題

          什么是雙鉆模型?

          雙鉆設計模型由英國設計協會提出,該設計模型的核心是:發現正確的問題、發現正確的解決方案。一般應用在產品開發過程中的需求定義和交互設計階段。


          雙鉆設計模型把設計過程分成4個階段:發現問題(挖掘)、定義問題(創意)、構思方案(制作)和交付方案(落地)。



          采購APP進行雙鉆模型思維構建的基礎,提供交互迭代的底層設計理論支持,在挖掘需求階段,屬于用戶調研階段;創意階段,關注點在于問題梳理、實現目的、設計層面;制作階段,尋找潛在的解決方案;落地階段,解決方案的分析和驗證,輸出最適合一個。


          b)“五度”設計成果評估模型

          用戶體驗周期(由阿里巴巴UED提出概念)


          用戶體驗周期指的是用戶與產品的關系隨著時間變化而形成的不同周期階段。用戶體驗周期可以分為「當前」和「長遠」兩個階段,每個階段中有不同的細分。

          • 「當前」階段,分為 3 個過程:

            • 觸達:用戶來訪問網站,包括第一次訪問網站的新用戶和再一次訪問網站的老用戶;

            • 行動:用戶在網站上進行相關操作;

            • 感知:用戶在操作完成后對產品形成的主觀感受。


          • 「長遠」階段:分為 2 種表現:

            • 回訪:用戶自己再次使用該產品;

            • 傳播:用戶推薦給其他人使用該產品。


          如何在具體項目中體現呢?下圖,運用一個具體項目舉例:

          c)培養數據思維,利用數據提升設計的價值

          項目與需求上線后,去驗證自己的設計是否有效地達成了目標。這個時候你就需要去看數據反饋。沒有數據就就沒有比較,沒有比較就不能進步。

          關于數據的用處有很多,舉個例子,當兩個人對各自的方案爭執不休,分別覺得對方不好,但站在各自的邏輯上似乎都能說得通,那怎么辦呢?分別做一個A/B測試,數據不會說謊,哪一個方案更有效,一目了然。

          那么如何將數據結合到我們的設計中呢?首先在設計前,我們需要先定一個目標,而每一個目標就應有一項對應的數據指標。比如,提高了某一塊的CTR(點擊通過率),提高CVR(轉化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去驗證自己的的action是否完成了自己的Goal。


          拿到了數據之后,還需要分析數據。不管是有沒有達到目標,都要去分析原因,進行復盤總結。復盤的好處是可以讓我們在這一次項目中吸取有價值的經驗—失敗了就找失敗的原因,方便以后避開同樣的錯誤;成功了就分析成功的原因,并將成功的策略復制運用到今后的工作中,增加以后的成功率。如此,不管有沒有成功,都能給我們帶來最大化的價值。我們也會更加的接近用戶、接近產品、接近業務。從而幫助我們進一步洞察用戶、挖掘新的需求。


          小結:

          以上就是今天所要分享的全部內容。再帶大家回顧一下,一共分為三部分:第一個是了解設計師的發展趨勢,第二個是趨勢下的設計師價值分層(設計協同、設計推動增長、設計驅動),第三個就是在價值分層的逐步遞升中所需要培養的雙鉆模型、GSA的策略、數據增長思維等。



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:麥海欣

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          標簽欄設計有哪些不易察覺的「小細節」?

          ui設計分享達人


          Tab Bar 


          Tab Bar「標簽欄」一直是UI設計師值得學習和研究的內容,因為當設計師在構建一個新的應用程序時,都可能需要搭建標簽欄,建議設計師們根據實際情況去判斷是否使用。

          流行常見的應用程序,如Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat,都在使用標簽欄,但這并不意味著你的應用程序、你的用戶是真的需要或真心喜歡。像計算器、日歷等應用,就沒有涉及此功能。


          為什么應用程序會有標簽欄?答案顯然是「易于使用」。加入標簽欄可以幫助用戶更輕松地導航到頁面,不用再特意點開菜單,選擇想要瀏覽的頁面。帶有標簽欄的應用程序,通常會與多個頁面聯動。而類似計算器這種工具性質的程序,用戶可能會重復打開使用,所以其展示重點在主屏幕上,點擊后直接進入功能頁面。


          為什么標簽欄不是菜單?有些應用會使用菜單羅列頁面,雖然占用的屏幕空間更少(菜單圖標),但缺點是用戶點擊菜單進行多次跳轉。為了更好地使用,設計師發明了靠近拇指的酷炫標簽欄, 方便用戶點擊,以獲得更好地導航和更輕松地沖浪體驗。接下來我將為大家介紹幾個應用標簽欄時的小技巧:


          01 展示最重要的目的地

          標簽欄應只包含最有用的目的地,應是被高度精簡過的,避免變得混亂。許多應用程序在其標簽欄上添加了搜索屏幕,這有助于更好地導航內容。結合自身程序,為用戶針對性地添加一些重要的功能,提升體驗。

          比如Spotify的標簽欄,使用了音樂播放器中常出現的幾種功能:Home,主頁標簽用于播放或可能收聽的內容;Search,搜索標簽用于檢索其他歌曲和播客;Library,庫標簽用于播放列表中用戶喜歡和保存的歌曲。Premium則是結合了公司業務,幫助用戶輕松完成費用支付。


          02 把相似的內容放在一起

          體量大的應用程序,它們更喜歡使用4-5個標簽,不僅讓標簽欄變得整潔,還能幫助用戶快速點擊。如果超過5個圖標,用戶受拇指大小的影響會無法準確地點擊。

          Pinterest的標簽欄雖然只有4個標簽,但它在通知標簽內設計了置于頂部的標簽——消息選項卡,最大程度的拓展了用戶在此標簽內的應用。


          03 如果需要,盡量使用標簽

          任何流行的應用程序都在使用標簽,因為它們清楚地說明了當用戶點擊特定標簽時會做什么。

          Youtube和宜家這兩款應用復雜程度各不相同,宜家的內容主要是家居家具,YouTube則是不同類型的視頻。YouTube使用的搜索標簽,與其他程序相比,也更具自己的特色。

          Pinterest的標簽欄相對設計的專業一些,會將標簽上的文字隱藏起來。當用戶習慣使用后,標簽上的內容會隨之隱藏,我個人非常喜歡這種設計。不過,我建議大家根據自己的選擇,再去確定是否要這么做。


          04 文本標簽應該簡短

          標簽欄內的標簽應簡短與清晰,就像設計按鈕標簽時一樣,請使用準確的標簽。TikTok的所有標簽都是短標簽,并且還加入了創建按鈕,如果你想吸引用戶的注意力,你也可以這樣做。


          05 避免隱藏標簽欄

          避免對用戶隱藏標簽欄,因為其包含了最重要的導航功能。大多數的應用程序都遵循了這條規則,除非有些是出于測試目的,會選擇隱藏。Pinterest的標簽欄在滾動瀏覽圖像時完全隱藏,我個人猜測,是希望用戶可以最大幅度的查看感興趣的圖像。


          06 按順序排列標簽

          按順序排列標簽非常有必要,每個應用程序都會參照清晰度和可用性這兩個維度去設計。用戶喜歡看到排列好的東西,而標簽欄就是其中之一,大型的應用程序也基本上遵循類似的設計規則。

          打開Pinterest會看到瀑布流形式的主頁面,重要的內容都被呈現在了主頁上。Spotify、Youtube、Pinterst、TikTok等應用程序都比較相似,將重要內容放在了主頁上。個人建議大家可以參考,但最重要的是將內容井井有條地呈現,并始終如一地遵循著設計規則。


          07 傳達位置

          標簽欄幫助用戶輕松導航,如果用戶不知道自己的位置所在,也就無法進行有效地瀏覽。比如Duolingo和Headspace的標簽欄,就向用戶傳達了其所在的準確位置。


          08 從數據中學習并持續優化

          如果你想改進應用內的標簽欄設計,數據是關鍵點。你可以測試用戶最喜歡的、不使用的以及需要增加的標簽分別是什么。

          一款成功的應用是需要持續迭代優化的,就像靈感平臺Pinterest,雖然它不急于測試新事物,但卻與用戶建立了深深的羈絆,慢慢沉淀積累,再去提升應用程序的用戶體驗。


          文章來源:站酷  作者:UX詞典

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          無障礙設計、通用設計、包容性設計的區分

          ui設計分享達人

          無障礙設計、通用設計、包容性設計的區分

          無障礙設計(accessible design)指設計時必須考慮殘疾人,無論用戶身體是否有殘疾,(產品,場所和服務)都具備讓其自由使用的能力。

          通用性設計(universal design)采用單一的解決方案滿足盡可能多的人群的需要。

          包容性設計(inclusive design)是最廣義的、讓產品可以被不同用戶(包括不同身體能力、語言、文化、性別、年齡、性取向等)使用的追求。





          無障礙設計、通用設計、包容性設計似乎意思相近,在網絡上很難找到完全統一的說法,因而經常被混淆。我試著找出它們之間的關系,從而對這3個設計理念進行更好的理解與區分。

          一、什么是無障礙設計(accessible design)

          1.簡介

          無障礙設計是3個術語中最容易理解的術語,它指的是設計時必須考慮殘疾人,無論用戶身體是否有殘疾,(產品,場所和服務)都具備讓其自由使用的能力。比如法律規定所有的建筑物都必須方便輪椅進出。

          2.特點

          (1)對象:殘疾人(也有一些觀點認為是針對更大的人群)

          (2)解決方法與目的:通過設計讓殘疾人能正常使用

          3.缺點

          然而有時這樣的設計是迫于無奈而為并缺乏人文關懷。在美國,很多時候,“無障礙設計”在設計界只不過代表《美國殘障人士法案》的最低要求,不少設計師把《ADA法案》視為約束,而非創造平等共融空間的機會。因此無障礙設計存在的問題可以分為以下幾點:

          (1)缺少人文關懷,經常將殘疾人專用的無障礙設施與健全人使用的設施分離設置,造成了使用時的隔離感;

          (2)無障礙設計與其他設計產生沖突,例如在狹窄的人行道上鋪設行進盲道可能造成輪椅使用的不便;

          (3)一些設施或產品的應用人群過窄。



          如圖專為盲人設計的魔方,普通人很難使用。



          二、什么是通用設計(universal design)

          1.簡介

          通用設計最初的想法來源于建筑和室內設計,是1997 年北卡羅來納州立大學通用設計中心對通用設計提出的一個定義,此定義一直沿用至今:“一種不需適應或特別設計,而使主流產品和服務能為盡可能多的用戶所使用的設計方法和過程?!蓖ㄓ迷O計在生活中的應用很多,比如視頻的字幕,就是為了聽力有障礙的人群設計的,而聽力正常的人也能夠在嘈雜的環境下通過字幕受益。

          2.特點

          (1)對象:通用設計是旨在為所有設計的,它超越了無障礙設計,除了考慮殘疾之外還考慮其他的因素,包括年齡、性別、種族、語言等。

          (2)解決方法與目的:使用單一方案,解決盡可能多的人的需求

          (3)重視設計的結果,而不是設計過程

          3.缺點

          因為人是復雜多樣的,人身處的環境也是不斷變化的,采用單一的解決方案,是難以滿足所有人的需求的。通用設計旨在使用單一的方法為所有人解決問題,就不可避免的會遺漏一些人群。

          如圖的設計用一種方式同時方便了乘坐輪椅和提行李的人,和一些腿腳不便的老人等。



          三、什么是包容性設計(inclusive design)

          1.簡介

          包容性設計有時被視為通用設計的同義詞,但是他們之間還是有明顯的區別的。包容性設計是指:“不限于界面和技術的設計過程。在這個過程中,產品、服務或環境會針對有特定需求的特定人群進行優化。”它來源于數字產品設計,是對通用設計的進一步發展。

          微軟定義:我們的使命,是讓地球上的每個人獲得更多。設計的包容性開啟了用戶體驗,反應了人們如何適應周圍的環境

          2.特點

          (1)具有以人為本的特點,包容性設計認為是環境“殘疾”,而非個體,并且切實的將所有人的需求擺在了最前面,而不是假定一個“平均值”或“規范”來限定其適用群體。

          (2)給予選擇,以多種方式解決不同人群的問題,以避免邊緣化任何人。

          (3)重視設計過程,而不是結果

          3.缺點

          (1)成本較高,在設計的所有階段考慮所有人需要花費較長的時間成本與資金

          (2)可能會出現一定程度的冗余設計



          如圖,比如支付寶的老年版設計,就是包容性設計的例子。用戶可以自由的選擇使用,方便了老年人的同時不影響普通人的使用。


          與通用設計中的解決方案對比,這個樓梯考慮到了不同的腿部殘疾者,并做出了多樣性的設計。打球摔斷一條腿的年輕人可以扶著扶手走下臺階,而不是走輪椅的道路。



          四、總結

          無障礙設計、通用設計、包容性設計,每一個設計理念都是對前一個的補充與發展,都值得理解與學習,而其中包容性設計相對較優,并更適合用于數字產品的設計。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷  作者:o0WO0

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          淘寶不“淘”了 | 淘寶的內容設計

          ui設計分享達人

          文章大綱:

          1. 淘寶為什么不淘了

          2. 淘寶的基礎內容設施

          3. 淘寶沒有種草經濟

          4. 讓人逛下去的產品設計

          5. 逛逛和小紅書的設計區別

          6. 寫在最后



          1. 淘寶為什么不淘了


          1.1  “淘” 歷史


          淘寶成立于2003年5月,當時最早的slogan是:“淘你喜歡”,這句話的主體是以平臺角度出發,對用戶說的,意思是讓用戶來平臺選購商品。


          隨后2005年,slogan變成了“淘我喜歡”,主體從平臺轉變成了用戶,意思是讓用戶自主選擇來平臺購物。


          在最近的2021年,淘寶的slogan變為了“太好逛了吧”。代表性的是淘寶app打開的啟動圖從玲瑯滿目的商品圖,換成了新的slogan:


          圖:淘寶啟動頁變化


          圖:淘寶的slogan變化




          1.2 需求的類型


          淘,又有“篩選”的意思,而篩選行為是要對某具體目標進行的,不可能憑空篩選,這個目標產生的過程,就是我們常說的“用戶需求”。


          “用戶需求”的產生一般分為兩種:有目的的需求和無目的的需求。


          有目的的需求:需求產生的過程有戶外廣告、朋友推薦等。以這種方式產生的需求,用戶會帶著明確目標,這時用戶直接打開軟件,通過搜索,直接縮小商品范圍,更快觸達目標商品,在這種場景下,用戶明顯沒有“逛”的心情。


          無目的的需求:當用戶在沒有明確目標的情況下打開軟件時,用戶購物意向都是比較模糊的,沒有明確選擇區間。此時,如何讓用戶產生購買欲望,是產品設計時必須要重點思考的。



          圖:需求產生的類型



          我們都知道,淘寶最開始的定位是“淘”,主打的是以導購型社區為目標,主要解決“用戶來平臺需要買什么”的問題,也就是有目的的消費需求。


          針對這類用戶,最簡單的思路就是“讓用戶買到想要的東西”,基于這一思路,淘寶推出了“千人千面”的算法機制。


          隨著淘寶算法越來越精準,用戶購買越來越效率,導致很多用戶對于淘寶的使用心智固定在了購物平臺,而不是內容消費平臺。


          但是算法是有一定的滯后性的,只有在用戶產生數據后才能夠進行精準推薦。(這個數據可以是在淘寶平臺產生的,也可以是在其他平臺產生的,比如說通過搜狗輸入法輸入了某個商品名)


          所以單純的靠精準的算法推薦,并不能解決用戶的潛在需求。



          圖:不同需求類型的解決方案




          1.3  商家的流量成本


          在淘寶店鋪的運營中,有一項重要的指標叫UV價值,指的是平均每個客戶在店鋪的銷售額,數字越高說明訪客的轉化率越高,轉化高就代表最終的GMV會高。


          而根據淘寶的數據統計,店鋪粉絲級別越高,對店鋪的粘性越強,UV價值也就越高。最終反映在淘寶數據上就是GMV高,既利于平臺,也利于商家。


          粉絲的積累需要流量,而淘寶店鋪的流量來源一般分為:淘寶站內、淘寶站外,其中有包括淘寶推廣、搜索競價、淘寶客、直通車等方式,但這些流量通常是不穩定的,免費流量自不用說,付費流量的投入成本也對店鋪的資金有一定要求。


          所以店鋪需要把這些吸引的流量,轉化成店鋪的粉絲。


          舉個例子,在很多電商平臺上,店鋪會有自己的引流款,這些商品不是為了毛利。只是起到為店鋪引流的作用。


          因為對于平臺的店鋪來說,持續不斷且穩定的流量增長,不僅可以推動銷售的穩定增長,也利于長期的發展方向。



          圖:淘寶流量來源




          2. 淘寶的基礎內容建設


          2.1  內容整合成社區和去中心化


          早在2015年,當時淘寶內部孵化淘寶頭條,分享優質的消費類資訊內容,當時淘頭條的MAU(月活躍用戶)過億。但隨著視頻內容的崛起,圖文形式逐漸走下坡路,淘寶看準了直播帶貨的賽道,開始逐漸布局淘寶直播的內容形式。期間也相繼加入了微淘、有好貨、買家秀、好物點評團等內容形式。


          但是這些內容一直分散在淘寶各個功能模塊中,沒有形成一個整體的社區化。



          圖:淘寶的內容矩陣


          其中最成功的應該就屬淘寶直播了,根據淘寶直播2021年度報告:2020年淘寶直播帶來的GMV超過人民幣4000億元。


          但是,直播的內容形式注定是以主播自上而下中心化的,用戶是跟著主播走的,一旦主播下播以后,這些觀眾也會失去購買目標。


          并且由于直播屬于一對多的形式,越大的主播,觀眾越多,這時候主播和觀眾的互動率是很低的,久而久之,用戶的互動積極性也會受打壓。



          圖:以主播為中心化的淘寶直播


          除了淘寶直播,近年來另一個改動比較大的應該就是微淘的出現了,在逛逛出現之前,一直占據底部欄的二號位,它的內容形式主要以店鋪上新、直播、福利為主。


          這也是淘寶在店鋪私域流量運營上做的一次嘗試,目的是為了讓用戶更容易和店鋪產生連接。但是實際上,由于微淘的內容形式之間關聯性不大,業務場景混亂,一些剛起步的商家也沒有資源拓展多業務場景,導致內容質量參差不齊,影響轉化。


          淘寶做微淘中做內容的目的是為了讓用戶有東西可以逛,但是逛內容就代表著用戶購買需求不明確,這又與營銷場景相沖突(營銷場景是為了讓用戶快速下單完成購買),所以微淘也一直被詬病轉化率低。



          圖:微淘主要的三個問題




          2.2  信息流時代


          后來在2020年年底的時候,淘寶迎來了另一個比較大的改版,猜你喜歡變成了縱向的信息流,點擊猜你喜歡進入的是一個流量的中轉站。比如說點擊一件衣服,下面全是衣服的推薦。


          新版猜你喜歡的特點很明顯,犧牲轉化率,增加用戶使用時長。在實際點擊進入信息流中,用戶總感覺下面有新的內容,這時候用戶的心態普遍是浮躁的,會使用很短,甚至一兩秒的時間決定是否深入了解產品。如果不喜歡,就會滑到下一個產品,無形中增加了用戶在平臺的停留時長。


          據淘寶官方數據表示,此次猜你喜歡的大改版,淘寶用戶的點擊率和用戶時長都提升了20%。



          圖:猜你喜歡改版,通過犧牲轉化來提高使用時長





          2.3  “逛逛”來了


          逛逛是以UGC內容形式為主的種草平臺,顧名思義,就是消費者在無聊的時候,可以到處逛逛。


          如果說信息流是縱向的內容推薦,那么逛逛就是通過大數據,橫向的推薦內容,最終向商品引流。豐富的內容為其他消費者帶來沉浸式購物體驗,類比線下商圈,就是逛著逛著就把東西買了。





          3. 淘寶沒有種草經濟


          3.1  從AISAS模式到SICAS模式


          AISAS模型是一種用戶決策分析模型,由電通公司(日本第一大廣告公司)提出,是消費者行為學領域很成熟的理論模型之一。


          AISAS模式將消費者從產生需求到最終完成購買的路徑分成了五個階段,既Attention(注意) - Interest(興趣) - Search(搜索) - Action(行動) - Share(分享)。其中消費者在注意商品并產生興趣之后的信息搜集(Search),以及產生購買行動之后的信息分享(Share),是當下互聯網消費時代尤其重要的兩個階段。


          搜索就是當用戶對某商品產生興趣之后,消費者會通過線上或者線下渠道來收集相關產品的信息,比如說評價、打分等。分享是在購買路徑完成后,用戶自發向身邊人推薦商品的階段,也就是口碑裂變,當然也有可能變成商品吐槽大會。


          但是,在前文也提到了,搜索是在有明確對某個商品產生興趣之后才會產生的動作,整個消費路徑是單向進程的,缺少信息的互動與交換,用戶很難有效辨別信息真偽,用戶與商家依然存在信任問題,最終的購買壁壘依然存在。



          圖:AISAS消費模型的流程


          隨后,DCCI(互聯網數據中心)在AISAS的基礎上,提出了新的SICAS行為消費模型:


          既 Sense(品牌與用戶相互感知) - Interest&Interactive(產生興趣并形成互動) -  Connect&Communicate(建立聯系并交互溝通) -  Action(行動) - Share(分享)。


          Sense,感知:品牌(商家) - 用戶相互感知,通過多觸點,在商家個用戶之間建立感知,對用戶來說,關注、分享、訂閱、推送等,都是有效的感知行為,而商家要做的,就是想辦法,通過什么樣的方式或內容,讓用戶有效使用他們的感知行為(分享、點贊、訂閱等行為)。


          Interest&Interactive,產生興趣和互動。在產生興趣上,隨著用戶對傳統的廣告曝光和廣告產生的印象的敏感度在降低,理解并響應用戶的需求正在成為關鍵。站在用戶的角度,觀察用戶真正想要的內容,衡量內容的指標不再是廣告的傳播率、曝光率,而是變成了點擊率、點贊數、好評度等。


          Connect&Communication,建立連接和產生溝通。在用戶產生興趣之后,通過平臺提供的服務:客服,問大家,好評團等形式,完成用戶信任的積累,幫助用戶完成購買決策。


          剩下的Action(購買行動)和Share(體驗分享)與AISAS模式一樣,就不展開說了。



          圖:SICAS消費模型的流程,以及和AISAS消費模型的區別


          綜上,SICAS模式前三點的核心觀點是建立聯系,也就是互動,這也與時下流行的種草經濟不謀而合。





          3.2  基于社交的種草經濟


          種草行為本質上是人與人之間的一種互動關系,互動天然的容易產生強關系鏈,而強關系也意味著情感聯結和信任,最終會形成社群關系。隨著越來越多擁有相同消費偏好的用戶聚攏,用戶消費習慣逐漸圈層化,在各垂直的消費圈層中得到身份認同感。


          在這種社群氛圍的烘托下,用戶更容易表現出高表達欲和參與度,既用戶不僅是內容的消費者,同時也會發展為內容的生產者。



          圖:逛逛想打造的種草生態



          綜上結合淘寶的問題以及消費模式的轉變,我們可以得出淘寶近期瘋狂改版的思路:


          圖:淘寶改版思路



          4. 讓人逛下去的產品設


          在了解上述淘寶自身的問題和新消費類型帶來的沖擊后,可以總結淘寶最近經常改版的戰略可以分為兩個方向:轉化的歸轉化,內容的歸內容。



          4.1 微淘升級為訂閱


          淘寶第一個改版是將原來的微淘升級為了訂閱,并且放在首頁上的tab,與推薦并列。此次改版,最大的改變就是拆分了店鋪運營的內容,讓不擅長做內容的商家可以專注自家的店鋪運營。



          圖:首頁專注商品轉化,逛逛專注內容消費


          新版訂閱的精選一欄中:包括上新、買家、評測等,這些內容一起構成商家和粉絲的互動模式,吸引新客快速轉粉,同時也增加了老客戶的黏性。


          在之前微淘的版本,用戶需要點擊微淘-點擊店鋪-點擊訂閱,升級后的訂閱路徑變成了左滑進入訂閱頁面-直接訂閱店鋪。點擊直播可以直接進入直播間

          更短的觸達路徑加上私域流量的運營,優化之前微淘轉化率低的問題。



          圖:路徑圖,直接進入直播間,直接訂閱店鋪



          圖:提高直播入口權重




          4.2 “買家秀”社區升級成為“逛逛”


          另一個重要改版是“買家秀”社區升級成為“逛逛”,為了弱化逛逛的購物屬性,強化社區氛圍,逛逛在產品的商業化設計上十分克制,主要圍繞引導用戶進行內容消費和互動為目的進行設計。


          在內容分發形式上,分為了以平臺推薦為主的“發現流”和以社交關系鏈主導的“關注流”,更加注重內容垂直和精細化。



          圖:逛逛的內容分類


          逛逛的發現模塊與小紅書類似,都屬于種草型內容社區。內容主要以穿搭、彩妝等淘寶擅長的領域為主。


          頁面的布局形式和首頁的商品流一樣,以雙列信息流呈現,和單列相比,一方面,給用戶提供多樣化的選擇,承載不同的內容形式(短視頻、圖文),延長用戶在平臺的停留時長,同時也為其他內容引流,模擬更真實的線下“逛街”體驗。


          另一方面,和首頁注重轉化率的算法機制不同,影響發現流推薦算法的因素除了本身的內容質量,還會受到用戶瀏覽行為的影響,比如瀏覽內容時產生的關注、收藏、點贊、評論等互動行為。



          圖:表現內容互動率的互動指標


          逛逛相比首頁推薦,去中心化的機制也更加明顯,舉例來說,小米官方店的號,粉絲量達到了千萬級,但是內容的互動率很低,點贊評論甚至不超過個位數。


          個人認為是因為品牌天然的自帶營銷屬性,用戶在看到品牌賬號時,很容易形成品牌注冊賬號是為了賣產品給我的刻板印象。


          這也反映了逛逛的流量重點落在消費者的內容上,以消費者視角為突破口,擺脫和商品相關的品牌屬性,注重普通用戶對商品的真實評價,而不是圍繞IP賬號產生的內容消費。



          圖:小米賬號和個人賬號互動率對比


          在用戶路徑的引導上,發現頁并不支持點擊頭像進入用戶主頁,只能先點擊進入內容詳情頁然后才可以進行關注等操作,先看內容,再關注人。



          圖:更關注內容轉化率


          另外一個人關注流的動態則加強調社交關系的轉化,因為是經過用戶主動“關注”過后篩選出來的內容,是內容生產者和內容消費者相互選擇的關系,所以在產品設計上以單列大圖為展現形式,幫助用戶消費內容。為了防止讓用戶感受到廣告的營銷感,產品設計上特地強調了分享、點贊、收藏、評論等按鈕,弱化商品鏈接。


          和其他的社區一樣,關注信息流中也會推薦一些“你可能感興趣的人”,但不同的是,用戶無法直接關注推薦的博主,需要先“查看TA”,進入博主的個人頁后才可以進行關注操作,這樣的目的主要是為了讓用戶了解達人的領域內容之后,再決定是否關注,這樣的關注更加有效,粘性更強。



          圖:“關注流”視覺設計的思路


          “逛逛”的內容形式很好地彌補了淘寶缺乏用戶導購的問題(俗稱種草),依托KOL產出的優質內容,與消費者產生情感上的價值鏈接,創造出用戶的潛在需求。




          5. 逛逛和小紅書的產品設計區別


          這次改版之后,很多人說這是小紅書。關注、發現、垂直分類欄,都和小紅書很相似。



          5.1 內容起家和電商起家



          淘寶和小紅書對內容的分發模式是不同,小紅書默認分類欄處于收起狀態,只有主動下拉的時候太會出現,由此可以看出小紅書對自己的內容推薦還是比較有信心的,由于一開始就是做內容起家,所以對自身平臺用戶的喜好是有所了解的。


          但是淘寶是一個電商起家的平臺,在內容方面,缺乏對用戶的偏好判斷,所以逛逛的導航欄下方,會加入了“官方話題欄目”和“官方出品的內容”,利用精選話題引導社區內容的方向,一定程度上也可以通過話題數據了解平臺用戶的偏好。



          圖:小紅書比淘寶更懂用戶喜歡什么內容



          5.2 內容導向不同


          小紅書等平臺不光有購物種草,還有學習、音樂、科普等內容也相對成熟。和淘寶轉型社區內容一樣,小紅書也在進行圖文、視頻向直播內容擴展的戰略方向。所以我們會發現,在小紅書的編輯內容上,視頻和直播是強露出的,且不支持位置更換。


          再來看逛逛的內容,以穿搭、彩妝為首的消費品內容,這些都是淘寶擅長的領域,容易產出優質內容,反過來說,這些內容最終也都是可以在淘寶上可以消費到的,最終還是以平臺商品轉化為目的。



          圖:內容形式對平臺戰略的影響




          5.3  小紅書互動率更高,淘寶內容消費效率更高


          小紅書在內容消費形式上,比逛逛更加注重互動:首頁瀑布流點擊進入二級的內容頁后,可以直觀的看到博主全部的文本簡介,以及下方的用戶評論內容,用戶消費的不光是圖文本身的內容,也是其他用戶評論產生的內容,更容易產生社交關系鏈。


          逛逛則更注重內容本身的消費效率:產品設計上使用沉浸式的下滑體驗,用戶點擊產品圖后,進入的是同系列產品的瀑布流,如果想要查看評論的話,需要點擊評論icon進行二次跳轉,此時用戶會一直專注于內容的消費,容易忽略其他用戶評價等內容。



          圖:提高互動率的產品設計



           6. 寫在最后的一些思考


          此次淘寶做內容社區的優勢之處在于,淘寶將社交關系融入到了商品的消費鏈路中,消費者通過商品體驗、測評、種草等方式,和平臺產生互動,建立聯系。


          而淘寶最不缺的就是商品,并且擁有8億多的消費者,和其他平臺相比,更容易產生垂直領域的優質內容和專業的KOL,但是要想經營一個優質社群,除了需要一批優質的內容創造者,還需要考慮后續涌現的用戶是否會對現有社群模式產生沖擊。(比如知乎開放用戶注冊后,導致內容注水的現象)


          因為淘寶本身相當于一個巨型供貨方,大大縮短了帶貨變現的路徑和難度,不同于小紅書這類平臺,它們最開始是沒有帶貨模式的,常常需要通過接推廣給其他商品引流來變現。


          過短的變現路徑必然會吸引一些用戶或者機構抱著獲利的心態涌入社群,這種逐利的心態,也有可能會影響專業KOL的創作心態。

          文章來源:站酷   作者:抓馬橋分橋

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          編寫一份友好的交互說明文檔要注意哪些

          ui設計分享達人

          最近有設計小伙伴咨詢,怎么樣的交互說明才是最好的,是大家都喜歡的。最近他寫的交互說明文檔提交給需求評審會的成員審核時,大家都建議他再寫的合理些,這讓他傷透了腦筋。 

          我告訴他: 
          第一、崗位對象不同:沒有一份十全十美的交互說明可以打動所有人,讓所有人為之驚嘆。畢竟,由于閱讀交互說明文檔的對象不同,他們會對交互說明文檔有不同的要求,這是崗位屬性導致的結果。例如前端開發希望詳細到字段、初始默認值、數據調取接口等,而領導只要看保證業務方向沒有錯誤的大交互鏈路。 

          第二、同崗位不同認知:同一崗位不同成員的認知、從業經歷、個人喜好、性格脾性等也會導致不可能有完美適配所有人的交互說明文檔。例如在一個行業已經深耕多年的前端工程師,即使你的交互說明文檔寫的沒有那么詳細,他也可以從你現有的文字中推敲出其他方面,同時還能幫你補充完善;而針對剛入行的前端工程師,你要是寫的不詳細,他就會抓狂,項目時間緊急的時候還會自己腦補交互細節。之后你走查時候也會抓狂,但是沒用呀,誰讓自己沒有寫明白交互細節,遺漏了呢。 

          第三、使用場合不同:不同場合需要的交互說明文檔也不同。例如與對方面對面溝通,交互說明文檔可以少寫點;但是通過線上工具與對方溝通,就需要寫的盡可能詳細;如果是會議型的評審,那就要方方面面都做足功課了。簡單來說就像準備一份ppt:針對同一個主題的ppt,在外部演講和在公司內部演講,同一份ppt會需要設計兩個版本,一個是內部版,一個是外部版,原因在于使用場合不同。 

          第四、產品階段不同:交互說明文檔闡述的是一個產品的交互,而不是闡述其他的。如果產品所處階段為成熟期,那往往產品的交互文檔已經沉淀了很多通用法則,可以被復用,那么現在的交互說明文檔少寫點,問題也不大;但產品處于探索期或成長期,通常來說可復用性的交互資產是不存在的,那交互說明文檔就需要準備的相對完善。 


          有些設計小伙伴就說了,既然不可能滿足所有人,那我就按照自己的想法隨意寫好了。這可不行哦,畢竟我們的主要工作有一部分是撰寫交互說明文檔,這就必須要有認真、嚴謹、專業的工作態度,把這部分工作做好。那我們來看看,編寫一份友好的交互說明文檔要注意哪些。 


          什么是交互說明文檔
          交互說明文檔是用來告訴參與產品研發的團隊成員頁面交互相關細節的一個說明文檔,包括頁面間的邏輯跳轉、頁面內模塊的交互、頁面功能的狀態等。交互說明文檔寫的越詳細越有利于參與產品研發各方的正確執行。 


          有待改進的交互說明文檔
          我匯總了一些日常工作中有待改進的交互說明文檔形式,看看都存在哪些問題。 

          1、文字密密麻麻,無結構
          幾乎所有剛初入職場的設計師,在編寫交互文檔時,會怕自己寫少了別人覺得自己不專業,怕寫的不全沒辦法表達頁面細節,導致交互文檔密密麻麻都是文字,這讓閱讀者幾乎無法閱讀,找不到視覺落腳點。 


          2、描述簡單,不完整
          有幾年工作經驗的設計師,由于很多通用交互法則已了然于心,他們在編寫交互說明文檔時就比較簡單,一些交互就沒有寫在文檔上,這導致開發在開發時,忽略了某些交互。 


          3、數據太假,沒有邏輯
          交互稿數據沒有邏輯,是很多設計師經常會出現的問題,一部分原因可能在于產品經理沒有理順產品邏輯和細節就提交設計師畫圖了,另一部分原因可能在于設計時間緊張,來不及對交互稿中所有的數據都做到邏輯合理。 

          曾經遇到過的情況有,關聯數值關聯不上,表格中字段對應的值對不上,表單填寫的數據和實際情況不符。 
          建議大家在時間允許或有條件反推產品經理協助完善數據的情況下,盡量數據展現的真實與符合邏輯,如此有助于開發及相關閱讀者高效理解。 


          4、圖文太遠,找不到
          有幾次我注意到設計師提交上來的交互說明會標注“見圖X"這樣的文字。也就是一段說明讀完了,還得去頁面的某個角落尋找對應的圖,這種體驗非常不好。 

          在交互設計原則中有一項為“足不出戶”?!白悴怀鰬簟钡囊馑际侵改茉诋斍绊撁娼鉀Q的事情,不要去其他頁面;能在就近完成的事情,不要距離過遠。頻繁的切換和跳轉會導致用戶心流被打斷,容易引起用戶思緒中斷、思考不劉暢,甚至可能對產品產生反感。 

          同理,我們交互說明文檔中的圖文也應盡量相鄰,通過一眼文字一眼圖,讓用戶看的順暢、舒適,理解的快速。 


          5、零散,東一句西一句
          東一句西一句是指交互說明文檔中本該成為一體去描述的文字,被分成了好幾個部分去闡述,這對看文檔的人來說簡直是災難,他需要自己重新梳理交互思路,將交互規則串聯起來。 


          我們自己在編寫交互說明文檔時,盡量規避上述常見的問題。 


          什么是好的交互說明文檔
          對于什么是好的交互說明文檔,網上一搜一大把,這里我根據自己的經驗,和大家分享下什么是好的交互說明文檔。 

          首先我們來明確下,什么是好,有了好的標準以后,再來談談如何做到好。 

          1、什么是好
          通常情況下,交互文檔會給產品經理看,用來評審設計方案是否滿足需求;給視覺設計師看,用來指導視覺方案的呈現;給前后端開發人員看,用來指導開發邏輯;給測試工程師看,用來協助測試編寫測試用例?;诖?,好的交互說明文檔關系著設計方案是否可被最大程度的實現。并且如果交互文檔文字冗長、邏輯不清晰,不僅看的人吃力,還會需要增加額外的時間來和開發工程師溝通。好的交互文檔,我認為至少需要具備以下7點: 
          (1)明確價值 
          (2)考慮全面 
          (3)通俗易懂 
          (4)結構清晰 
          (5)圖文并茂 
          (6)僅此一份 
          (7)修訂記錄 

          2、如何做到好
          為了讓大家一邊學習一遍實踐,我使用“表單校驗”的交互案例給大家進行講解。 

          (1)明確價值
          能協助項目成員通過文檔更順利地完成工作任務,能幫助用戶解決問題,能達成產品目標,則是好的交互說明文檔。文檔對各方有價值,是一份好的交互說明文檔的起點。那么,如何編寫才能達到上述結果呢? 

          一方面是將此次文檔的價值寫清楚,包括寫明此次交互設計的背景與需求來源、需求清單,標明交互設計的理論依據,可以給用戶帶來的價值等。另一方面要和成員宣導這些內容,讓成員感受自己要做的工作是有價值的。 

          “表單校驗”上場: 


          (2)考慮全面
          拋開文檔閱讀對象等相關影響因素,通常來說交互需要考慮到以下幾方面: 

          a、整體交互流程
          整體交互流程是指產品頁面與頁面之間的交互邏輯。 

          b、頁面模塊交互說明
          頁面模塊交互說明是指模塊自身的交互說明,或同頁面內獨立模塊之間的交互邏輯,或不同頁面模塊之間的交互邏輯。例如點擊導航樹節點會聯動右側表格內容刷新;點擊banner跳轉到對應的商品詳情頁,且定位到頁面1/2位置。 

          c、頁面功能交互說明
          頁面功能交互說明是指單個功能的各種情況闡述。例如搜索框內輸入文字,通過enter觸發對應頁面跳轉。 

          d、盡量真實的數據展示
          雖然是交互說明,我們也盡量做到模擬真實數據,否則很容易讓閱讀者產生錯誤判斷。并不是所有人都會一字一句的去閱讀文檔,因此,盡量真實的數據,有利于閱讀者更有效的了解。 

          e、特殊情況額外補充說明
          很多情況下,會因為某些原因出現極端交互情況,此時也需要補充完整。 

          f、通用交互一處即可
          建議交互團隊為產品建立通用型交互說明庫,遇到類似的情況,直接調取即可。 

          實際上我們在編寫交互說明的時候,不太會分得那么細,很多說明是混合在一起表達的。 

          “表單校驗”上場: 

          (3)通俗易懂
          通俗易懂是指要讓文字、語言、圖片等做到讓受眾易于理解和感知,從而在信息傳遞過程中盡量少的出現損耗,這一點同時也與人類的理解能力有關。 

          百度百科是這么解釋理解能力的: 

          “理解能力是指一個人對事物乃至對知識的理解的一種記憶能力。 
          理解,有三級水平: 
          低級水平的理解是指:知覺水平的理解,就是能辨認和識別對象,并且能對對象命名,知道它“是什么”; 
          中級水平的理解是:在知覺水平理解的基礎上,對事物的本質與內在聯系的揭露,主要表現為能夠理解概念、原理和法則的內涵,知道它是“怎么樣”; 
          高級水平的理解屬于間接理解,是指:在概念理解的基礎上,進一步達到系統化和具體化,重新建立或者調整認知結構,達到知識的融會貫通,并使知識得到廣泛的遷移,知道它是“為什么”?!?nbsp;

          當我們了解了人類的理解能力水平是參差不齊后,我們就要盡量在工作中將專業知識化繁為簡(也可以針對人群化繁為簡),增強溝通效果,最終達到完成團隊目標的結果。 

          交互文檔盡量做到講人話,不要講一堆專業術語。記得之前有個交互設計師在會議上闡述自己的交互方案時,提到用了“提供邀請”原則。由于與會成員是開發工程師和產品經理,他們問到什么是“提供邀請”原則,并且在這個問題上大家討論了很久。 

          由此可見,表達通俗易懂,是很必要的。 


          (4)結構清晰
          交互說明文檔除了要表達通俗易懂外,還需要結構清晰。 

          結構清晰的內容不僅使閱讀者一目了然、理解成本低,還可以讓閱讀者了解撰寫者的意圖。要做到文檔結構清晰,除了需要遵守一些規則外,也不能脫離當前文檔的實際情況。 

          “表單校驗”上場(把文字進行分段處理,并取出關鍵詞): 
          (5)圖文并茂
          圖片和文字相得益彰可以加深閱讀者對文字的理解,同時避免閱讀者去想象文字對應的結果。由于人們對同一段文字的理解不完全相同,因此建議設計師盡量安排交互說明對應圖解。 

          “表單校驗”上場(左圖右文): 
          (6)僅此一份
          僅此一份是說交付給團隊交互說明文檔的時候不要多份。之前我們的前端小伙伴拿到了兩份交互文檔,一份是純原型交互文檔,一份是視覺稿交互文檔,兩者描述的信息大同小異。此時,建議交互文檔的信息做合并,只提交一份完整的給前端小伙伴,讓前端小伙伴能專心致志理解一份。 


          (7)修訂記錄
          建議交互說明文檔留存修訂記錄,一方面可以了解交互文檔的變更歷史,另一方面有利于回溯和查找信息。修訂記錄一般包括修訂人、修訂時間和修訂內容。 


          總結
          由于項目進度、業務復雜程度等不同,我們不可能每次都能寫出一份最好的交互說明文檔,但我們可以想辦法寫出一份相對可讀性高、可理解性高的友好的交互說明文檔。我們常說自己是做用戶體驗的,那交互說明文檔就是體現我們交互能力一個方面。 

          除了完成交互說明文檔,想要讓開發小伙伴真正理解交互說明,還需親自和開發溝通,千萬不要認為我寫的很詳細了,他怎么還是實現的有偏差。事實上,就如開篇所說:同一崗位不同人的認知理解、從業經歷、個人喜好、性格脾性等也會導致理解不同。特別是對于一些我們非常創新的、特殊的交互點,需要重點和開發說明。 

          并且,交互說明文檔基于業務的發展,也會不斷的迭代,我們要抱著多聽、多想、多思考、多接受的態度去不斷優化我們的文檔,盡力寫出一份友好的交互說明文檔。 

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:
          知果日記

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何自定義柵格系統

          ui設計分享達人


          柵格系統(grid systems)

          規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。


          基本原理

          在網頁設計中,把寬度為“W”的頁面分割成n個網格單元“a”,每個單元與單元之間的間隙設為“i”,把“a+i”定義“A”。他們之間的關系如下:

          W =(a×n)+(n-1)i

          由于a+i=A,

          可得:(A×n) – i = W

          我們通常把a稱為“柱”,對應代碼中的Column;i稱為“水槽”,對應代碼中的Gutter;a+i=A稱為“列”

          設計柵格系統,本質就是定義a,i,n的數值。

          UI設計中有一個通用做法,就是元素的寬度盡量是8的倍數,基于今天的大多數的網頁設計,畫板寬度都為1440px ,此時我們將a=24,i=24,n=24,這是一組簡單美妙的數值,可算得W=(24x24)+23x24=47x24=1128px;將柵格居中于畫板(偏置156px),此時的柵格系統如下:

          1128柵格系統:

          得到的這個柵格布局被廣泛使用,比如站酷網首頁:



          觀察計算公式W=1128=47x24=(24+23)x24,這里的47不是8的倍數,我們容易想到把它變成48,

          將a=25,i=24,n=24,算得W=(24x24)+(25-1)x24=48x24=1152px;此時的柵格系統如下:

          1152柵格系統:

          這個柵格系統的美感在于,寬度W=48x24=1152px,兩邊的留白為畫板1440px寬度的1/10等于144px。Ant Dseign中運用了此柵格:

          以上兩個柵格布局都是24柵格系統,使用24柵格系統的好處是,它可以輕松實現2等分、3等分、4等分、6等分、8等分、12等分,也可以進行1:2:1、   1:3:2、   1:2、 1:3  等不對稱分割的布局。


          除了最常見的24柵格布局外,也可進行36柵格布局,例如:

          a=16,i=16,n=36,W=(16x36)+16x(36-1)=16x(36+35)=1136

          1136柵格系統:

          a=26,i=24,n=24,W=(26x24)+24x23=24x49=1176px

          例如騰訊文檔:

          1176柵格系統:

          “廠”型布局網頁的柵格布局:

          以上的網頁布局都是瀑布式布局,在許多應用型網站中,常使用“廠”字布局,對于“廠”布局的網頁,該如何設計合適的柵格系統呢?

          我們可以先確定左側菜單欄的寬度,例如飛書管理后臺中左側菜單欄的寬度為228px,在拉動瀏覽器時,這部分通常是不動的,再確定主體內容去和左側菜單欄間的間隙,比如12px。

          此時可以計算W=1440-228-12x2=1188。

          使用24柵格系統時,12a+11i=1188,方程中有兩個未知數,我們設定其中一個時,就可計算出另一個。另i=12,解

          W =(a×n)+(n-1)i

          1188=(ax24)+23x12

          a=38

          是幫助,而非限制

          對開發者而言柵格是實現動態布局的手段,而設計師對于柵格的理解源自平面設計中的柵格,不應把柵格系統當成一種限制,而是幫助,也不用總是擔心元素超出柵格。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:
          隔岸吃瓜

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          對于網頁設計來說,柵格系統的使用,不僅可以讓網頁的信息呈現更加美觀易讀,更具可用性。而且,對于前端開發來說,網頁將更加的靈活與規范。

          如何提高設計還原質量和驗收效率?

          ui設計分享達人

          前言

          最近我們產品做了一次全新改版的項目。作為此次項目的設計師,從項目的前期分析、設計、交付開發、驗收上線,整個流程,在項目走查驗收階段我們設計師投入了30人/天!在我們覺得應該設計投入最少的階段,卻占了我們大量的工作 且最后還原度也遠不達預期。


          在這個項目中我遇到了哪些問題:

          還原問題不單單是設計師把設計稿做的多精準,標注的多仔細,這么簡單就能解決的。是設計和開發,團隊之間的合作共識問題。我把整個和開發對接工作分為前中后三個階段,在這里從頭來梳理一下,聊一聊設計師和開發如何高效對接,也是對自己的一次復盤總結。



          一、評審/排期


          1.1、設計師對還原的要求宣講


          在評審環節,設計師本人一定要將自己的設計稿進行宣講、幫助開發理解。注意給技術講述一些適配要求、設計規范、交互狀態及動效等,同時解答技術同學的一些疑問,這樣就能將一些可預見的問題解決掉,解決后期的溝通成本。

          有一些地方有多種實現方式,如果前期沒有跟開發溝通清楚,就會導致最終實現的效果存在誤差,比如:下方這個tab項,單給一張圖,開發根本不知道設計師想要的實現方式是什么,固定間距還是固定菜單寬度,還是每項平分寬度,最后很大可能就會按照自己的理解去做了,導致出現重復返工的現象。



          再比如一些點擊熱區,如果不手動標明,有可能就做的很小

          下圖是我們手動標注的熱區



          1.2、實際開發者要參與評審

          每個開發負責的具體頁面模塊不一樣,別人對具體了解程度也不會不一致,所以在評審會議上,一定要具體開發者在場,如果對應開發沒有發表意見,設計師可詢問,確保他已經理解需求。



          1.3、開發充分評估還原工作問題

          設計師在講解自己的要求后,開發也要及時反饋是否有還原困難,如:是否有技術限制?是否有組件改動困難(牽一發而動全身)?實現成本過高(投入產出的性價比不夠)?等意見和原因,設計師也可拋出之前是否遇到過類似的阻礙,幫助開發去了解。



          1.4、認真記會議紀要


          評審過程的問題和重要講解點,一定要記錄下來,會議中開發提出的一些問題及解決方案、或者沒有達成共識的地方,記錄下來等領導決策,在會議結束后以郵件形式、或wiki文檔發送前端們,抄送產品,確保會議內容的傳達到位。后面也好跟蹤。


          還有一點就是,我們之前遇到的情況,在宣講會上 講解的一些要求,開發在做的時候可能就忘記了,讓開發改他認為設計沒有明確要求、會有點難推動,就會搞得雙方都有抱怨。有會議記錄也可避免此類情況發生




          二、開發階段


          2.1、還原有問題及時反饋

          在前面我們做了詳盡的溝通和評審,但有時也避免不了在開發過程有些問題才發現暴露。這個就需要開發同學能重視還原問題,積極溝通反饋,和設計確認商議 是否有其它可替代方案,切勿自己發揮,等到后期驗收的時候才說出問題可能會影響進度


          2.2、開發完成后對齊設計稿自查

          開發者在完成自己負責的模塊界面時,可自己對齊設計稿自查一遍,參考【3.1驗收標準】的表格,可幫助判斷問題,在此階段也可發給設計者確認效果。


          三、驗收階段



          3.1、測試同學確保交互和視覺還原度至少在70%左右


          這里可以提前在項目排期階段,設計師將所需的驗收工時同步給技術和測試,將驗收時間考慮進去

          為什么要求測試同學保證還原度至少在70%呢?

          因為如果不要求測試走查還原度,設計驗收的時候就會有大量的問題,最后變成設計在測試界面而不是驗收。設計師不像測試對整個流程的測試配置那么熟悉方便,反復驗收需要測試和設計不斷配合,雙方的工作量都會加大。


          理想的狀態應該是測試整個流程走通,視覺和交互還原問題也要著重測試,設計和產品在測試沒什么大問題后再進行驗收。


          參考【驗收標準】的表格,可幫助判斷還原問題



          3.2、明確知道模塊的開發者

          最好是提前知道模塊的開發者,這樣驗收的時候一對一進行模塊的打版驗收效率更高


          3.3、設計走查問題標注優先級

          技術對功能上的BUG,可以自己很好的判斷哪些是嚴重的緊急的,但對于視覺和交互層面的感知就比較低。在提問題單的時候,我們可以幫他標注出優先級,告知開發哪些是比較嚴重的需要優先修改的,不然 開發自己很難判斷,可能就會挑一些比較好改的先改了,重要的問題反而被擱置了。尤其在項目時間比較緊張的時候,有優先級標注 開發能夠看出哪些是可以為項目進度做出妥協的,哪些是必須要修改的。



          3.4、BUG單

          設計提BUG單的不能簡單的說這里出錯了,請參考設計標注重新調整。要直接給出正確的尺寸、增多少、減多少、這樣可幫助技術提高更高效率,也能避免開發自己去看又出現誤差、又要返工修改。



          3.5、遺留問題有記錄



          四、結語

          設計師在驗收過程中容易遇到的一個比較頭疼的問題就是,技術和產品小伙伴可能因為項目上線時間緊,覺得視覺還原和頁面交互體驗上的問題不重要不給予修改,優先保障功能上線。

          除了這些原因,設計側也在檢討總結,自己有哪些做的不足的地方,所以 以上文檔也是對接下來工作的優化方案。設計還原度也是日??己酥?,需要大家重視,好的產品要嚴格把控精心打磨,希望這次的總結、相關流程和經驗,在接下來工作中能夠提升設計驗收效率和還原度。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷   作者:
          飛行的考拉

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          如何讓你的設計更具有說服力?

          ui設計分享達人

          對于一家做項目型的公司而言(今天主要講的是項目性質的設計工作,產品可以繞道哦),時間就是成本這句話體現的淋漓盡致?;旧辖o到UI設計的時間,是少之又少,那么如何在一個有限的時間里,設計出優秀的作品呢?這是接下來我想跟大家一起討論的~


          我們都知道用戶體驗五要素(戰略層、范圍層、結構層、框架層、表現層),這五大點是一個個遞進的過程,是一個從初步的想法到最后落地的過程。也就是說我們最后看到的表現層(UI界面)是如何做出來的,都需要靠前面一點點的去研究、細化、分析。所以這么一個強大而繁瑣的過程,我們如何要在一個有限的時間內去完成,下面跟大家聊一聊我在實際工作中的例子。


          一、溝通


          溝通是一切事物的前提和基礎,這個溝通一定是要跟客戶的直接溝通,不管是遠程還是面對面也好。中間人的傳達會加上個人思想理解的轉化,到你這里就不再是一手消息,也許就不會那么準確。拿到一個項目之后,我們要了解項目,所以需要對項目的背景、目標用戶、產品目標、核心競爭力進行分別分析。


          項目背景

          為什么設計師的背后總是有一群指點江山的人,因為我們的設計沒有被體現在產品上,只是表層,每次給別人解釋設計理念的時候總是說“我覺得這樣好看”、“我認為這塊應該用這個顏色”,卻沒有說出這個項目本身想要表達的是一個什么理念。

          本次項目是需要把手機版的內容改版成PC端,原有需求邏輯不變。那么問題來了,現在是一個移動互聯網的天下,為什么客戶卻需要將手機端的內容移到PC上呢?因為這個產品的使用環境之一就是在工作中,試想一下,工作中一直拿著手機刷來刷去,不知道的人還以為你在劃水。考慮到用戶使用環境的因素,就需要有PC端的設計。


          目標用戶

          產品的核心是用戶。所以一切要從用戶的角度出發,做用戶滿意的產品。在用戶調研這塊,常見的用戶分析有:用戶畫像、一對一訪談、問卷調查、焦點小組、眼動測試、測評以及埋點數據分析,但是項目型工作周期短,時間緊,沒有那么多的成本去做大量的分析,所以我們基本上采用三種方式去解決這個問題。1、與我們的客戶(甲方)去溝通,他們肯定更了解自己的用戶群體;2、通過現在市場上比較知名的網站(艾瑞網)中提供的大數據分析出的結果;3、如果身邊有這種用戶群體可以對他們進行簡單訪談。通過以上三種辦法也是可以得到一個較為準確的調研數據的。

          在跟客戶的溝通中了解到,我們的主要用戶是基中層領導,目的為提升領導力。下面會有我對這部分人群的用戶畫像分析。


          項目目標

          知己知彼,要了解我們此次設計的主要目的是什么?需要解決什么問題?

          因為這已經是一個已經上線一年的產品,我在跟客戶的溝通中很明確了目前有兩大問題:第一是:如何提高完成率;第二是:國外市場用戶使用不習慣。

          這兩個信息很重要,為后面的設計提供了一個明確的方向。



          核心競爭力

          這是體現我們產品優勢的地方,我們需要盡量的把產品強有力的能力展現出來,從而獲得目標用戶的信賴。把產品的能力、優勢,可以給用戶帶來的價值,要體現在比價明顯一些的地方。

          此次是一個本身有強大的體系支撐,有一個成熟的結構,在此基礎上開發研制的一套產品,所以產品的目標用戶量,獲得的成就就可以直接展示在首頁上,并且把正在學習人數或者為多少人帶來成就都體現出來。讓用戶感受到有這么多人都在努力,有這么多努力的人已經完成了自己的目標。


          二、分析


          我首先把手機版的功能都體驗了一遍,隨時記錄了在使用過程中不喜歡的地方并且可以優化的點,這都是點點滴滴的隨記,可以為后面設計中提供一些方向或靈感。根據上面了解到的信息。

          可以得到此次設計的主要方向,第一:針對目標用戶進行用戶畫像分析,以此來確定如何才能更好的提升完成率;第二:針對國外同類產品分析,對國外市場用戶使用不習慣的了解,并且還要結合國內市場優化交互體驗。


          用戶畫像分析

          在上面一個階段了解到我們的用戶群體是基中層領導者。根據市場數據分析,一般基中層領導者主要以男性居多,年齡大概在28-35歲之間,以需要提升領導力為目的,那么從這幾個特征中我們看出,這些人都有哪些特點呢?首先28-35歲的年齡段,基本上是已經結婚的比較多,并且有很大一部分人群也有了孩子,這個年齡段的孩子還比較小,基本也是在2-6歲之間較多。對于這種類型家庭而言,無論是在工作上還是生活上都較為忙碌。并且因為是領導者的原因,時間上也較為分散,一天下來沒有辦法集中去做一件事情,開會、匯報、溝通需求、分布任務等。由于不像在學校,事情太多也太雜,很多時候沒有辦法安心去做一件事情,導致規劃能力不強,需要借助平臺可以有個推力。



          國外同類產品分析

          其次是針對國外市場用戶使用不習慣這個問題,我對國外幾個大型的相關網站做了了解。edX、Coursera、Udacity這三個網站是國外市場使用較多,知名度較大的幾個網站。分別從內容上和視覺上進行分析,去了解國外市場的設計方式,用戶使用習慣等。



          從以上的分析中最終得出了以下三個結論:

          1、操作習慣:這個與國內的差不多,都是從上到下,從左到右呈Z字形排列布局的方式,視覺的落腳點都會在畫面的左上方,所以我們在設計的時候,要把重要或者想要表達的內容放在這個位置,使用戶進入頁面后就可以很快看到它。

          2、采用Complexion Reduction設計語言:將標題放大,制造視覺上的沖擊力,拉開頁面的層級關系,這種設計方式也是國外較喜歡、較常用的一種設計方式。

          3、視覺風格:國外網站的設計整體留白較多,讓頁面更有呼吸感,頁面上幾乎沒有無用的裝飾性元素,非常簡潔,顏色使用也比較簡單,不會用過多的顏色去擾亂用戶,簡單的設計對于教育類的行業來說,可以減少視覺疲勞,讓眼睛放在有用的事物上去。



          通過以上對用戶畫像和國外同類產品分析,總結出:我們要從多維度考慮,以優化交互為目的讓頁面更有層次感,從而給用戶帶來輕松的體驗感。是這次設計的核心思想。

          1、從用戶的時間分散且忙碌的特點,得到我們需要盡量優化交互邏輯,減少用戶學習成本,讓用戶可以快速找到自己想要的東西;并且要讓用戶在本身就較為忙碌的情況下盡量輕松的學習,不要再給用戶增加壓力。

          2、通過用戶規劃能力不夠強的特點,得到我們可以給用戶定制一個“學習計劃”,幫助用戶規劃自己的學習能力,并且在學習中增加互動性,比如隨堂筆記、收藏、標記這種小功能,隨時給用戶帶來互動,讓用戶更有參與感。

          3、從國外同類產品分析中總結出,整體國外市場的喜好是簡潔、少裝飾、以大面積留白來增加頁面的呼吸感,采用盡量簡單的卡片式的設計方式來拉開頁面的層級關系。




          三、設計


          現在就到了設計階段了,上面了解分析了那么多,給我們設計提供了那么多基礎材料,這個時候就派上了用場。上面的最后提到說:我們要從維度考慮,以優化交互為目的讓頁面更有層次感,從而給用戶帶來輕松的體驗感。接下來我就要講述,如何在設計去運用了。


          輕松-這個很重要。

          如何讓用戶在生活和工作那么繁忙的情況下,還要努力的去學習,努力的提升自己呢?所以我們這里就采用插畫的形式,插畫像是動畫片,讓我們回到了小時候,并且融入了AI人機對話,沉浸式的體驗更是可以讓用戶在一個輕松的氛圍內完成自己的學習。


          增加互動性

          原有手機端的功能缺少與用戶之間的互動,看視頻就是看視頻,做題就是做題。讓用戶在使用的時候不能按照自己的意愿去支配,這種感覺不好,一定要讓用戶有參與感,讓用戶占到主導性,而不是那么強硬的讓用戶跟著你走。所以在課程這塊的設計上第一采用了全屏的方式,讓用戶不用返回,在當前就完成本階段的所有的課程,增加效率。第二在原有的功能上增加“課堂筆記”、“收藏”和“學習計劃”等一些小功能,讓用戶隨時按照自己的意愿去學習,實時跟產品進行互動。



          層次感的表達

          教育類型的網站,頁面相對來說比較干凈、整潔一些,可以有效減少用戶視覺疲勞,避免不必要的干擾元素出現影響用戶的體驗。

          在本次的設計中,學習了國外同類網站的設計風格,采用卡片式的方式,將元素與標題包裹在一起,有效與其他元素進行區分,增加投影設計,讓頁面更加有層次感和空間感。標題上面采用了Complexion Reduction的設計語言,將標題放大,制造視覺上的沖擊力,拉開元素之間的層級關系,豐富頁面的設計。這也是國外網站較喜歡的一種設計方式。





          四、走查


          設計完成之后,切圖交到開發手里之后,不能算就完成了,最后走查這一步很重要,要保證實現出來的效果跟設計稿保持一致。不然前面說的再多,設計的再炫都是白搭,實際使用的用戶可不知道你前面都做了什么,他只感受他現在感受到的。

          我一般的方法是用Word的方式,將有問題的頁面截圖并標記出來問題點,并且按照菜單進行分類。這樣開發對照看起來就特別明確,只用文字不配圖的表達都是耍流氓,誰知道你說的是哪個頁面的哪個點。用Word進行歸類最重要后面追蹤也特別容易,可以很明確看到你哪塊問題還沒有修改,不用再反復提交。



          總結一下:

          一般我的設計流程就是:了解-分析-設計-走查,因為不是產品性質的,所以最后的迭代或者驗證這一步驟就會不那么重要,如果是做產品型的后面的驗證也會是非常重要,因為是項目型的所以這里就不多做說明。以上就是我個人在設計中的案例分析,大家有想法的可以多溝通,多交流。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。



          文章來源:站酷   作者:醬油不咸

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          設計模式|合理預設:如何為用戶提前設置好默認值

          ui設計分享達人



          What 是什么

          「合理預設」是指系統提供默認選項,這些默認選項不需要用戶做任何操作,可以節省用戶完成表單的時間和精力。

          這些默認選項來的數據源包括: 先前輸入的會話數據、來自用戶帳戶的信息、當前位置、當前數據和時間等等。


          案例 釘釘的“代辦事項”設置功能,可以自動抓取到語句中的時間信息,自動幫助用戶默認填寫時間,減少用戶的操作時長:

          相關模式 :語句填空


          Why 為什么

          系統通過提供合理的默認信息和答案,分擔了用戶思考和輸入信息的工作,減少時間,提高效率。

          而就算預設信息不是用戶想要的,也為用戶提供了一個示例來說明答案應該是什么樣子的。這一點也可以節約用戶幾秒的思考時間,或者避免輸入錯誤的信息。


          另外,合理的默認值還可以幫助用戶應對一些“難題”。如果用戶跳過了一塊字段,那么可能是這個問題沒有引起他的注意。用戶可能是不理解這個問題、或是默認值的含義。輸入答案,選擇值,或單擊按鈕的動作會迫使用戶有意識地面對這個問題。


          比如疫情期間,大部分公司都需要做健康打卡,下圖中有一些選項是直接填了默認值,但是有些就沒有填。比如下圖的左圖中,有關于“請假未到崗”這些問題,因為沒有填默認值,用戶就會對這個問題有印象。然后比如“今日是否有發熱癥狀”,“是否有咳嗽”這些,因為被系統默認填了,用戶很容易就忽略過去了。

          所以一些刻意希望被關注的問題,其實最好不要提供預設值,這樣可以讓用戶感知到這個重要信息的存在,進而加深對內容的認知。



          When 什么時候使用

          當產品要求用戶提供類似表單的信息輸入(例如文本框或單選按鈕),并希望減少用戶填寫時長時,可以使用提供默認設置。


          但是當問題的答案會很敏感或是與政治相關時,最好不要提供默認值,例如密碼、性別或公民身份等。最好也不要為用戶擅自訂閱非必要的內容信息,如“請給我發送廣告郵件”等。


          使用條件

          · 用戶需要做類似表單的信息輸入操作;

          · 系統希望減少用戶需要做的工作;

          · 系統希望確保用戶填寫的準確性和一致性;

          · 可能用戶并不知道或者不關心答案,不需要引起用戶的重視;

          · 問題的答案不屬于敏感信息或是與政治無關。


          How 如何使用

          設定「合理預設」有兩種普遍的用法:

          1、使用一個通用的、常識性的、滿足大部分用戶需求的默認值,預先填寫輸入框;

          2、可以調用用戶早些時候提供給系統的信息來動態地設置默認值。例如,某個用戶提供了一個中國的郵政編碼,系統可以從這個編碼推導出用戶所在的省,甚至市和區的名稱。


          除此之外要注意幾點應用原則:

          · 使用預設的默認值不僅僅是為了防止用戶留下空白的輸入區域;

          · 要充分的了解你的用戶,默認值的設定要有絕對合理的理由 —— 否則,系統會給所有人帶來額外的工作量。


          Example 案例

          案例一:唯品會小程序在購買服飾類選擇 SKU

          用戶需求:購買服裝時需要選擇尺碼


          唯品會小程序在購買服飾類選擇 SKU 時,每個尺碼點擊后會顯示對應的衣服參數,用戶不再需要去商品描述中的尺碼表格中再找,也可以是設置好自己的身材數據,平臺會默認選中適合你的尺碼。

          案例二:螞蟻鏈實人認證表單

          用戶需求:需要根據表單內容填寫和上傳文件

          螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區,幫助用戶默認選擇概率最大的選項,不需要用戶自己操作。

          案例三:Photoshop 創建新文件

          用戶需求:創建新文件,調整畫布大小

          在 Photoshop CC 中創建新的圖像文件時,默認情況下會從操作系統剪切板開始。這里的假設是用戶剛剛創建了一個屏幕截圖,并且正在編輯該圖像。因此,Photoshop 在剪貼板中獲取圖像的寬度和高度,并使用它們來預先填充創建新文件的尺寸,這是一種節省時間的聰明方法。不用擔心圖像和畫布會有尺寸不匹配的情況。


          當用戶想要調整畫布大小時,原先畫布的長寬尺寸會預設出現在新的畫布大小里面,方便用戶進一步進行尺寸調整。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。



          文章來源:站酷    作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

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

          存檔

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