<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          “個人主頁”設計相關思考

          資深UI設計者

          “個人主頁”是一個聽起來很熟悉,但又跟“個人中心”傻傻分不清楚的一個模塊,一般情況下處于APP底Tab的最右邊,通常喊它為“我的”。





          這個界面看似沒什么挑戰可言,給設計師一種“不就是排排版的事兒嘛”的膨脹誤解,認為完全在自己射程范圍內,整個人都有點飄。


          但最近發現,它并不像表面所呈現出的那么簡單,其實里面有很多小揪揪需要深挖和思考,所以千萬不能小瞧它。


          好,廢話不多說,上才藝。






           個人主頁和個人中心的區別是? 




          講“個人主頁”前,先跟大家捋一下它倆的區別,避免混淆。首先,并沒有官方定義它們的名字,只是喊的人多了也就成了它們的名字了。


          所以“個人主頁”也好、“個人中心”也罷,只是大家習慣性稱呼,為了合作過程中大家在同一個話語體系,提效而已。


          要說它們倆的區別,其實還是有的。




           什么是個人中心?


          個人中心,承載著自己賬號信息、設置管理、福利信息等功能的聚合地,主要用于個人信息的管理。


          它常見于“工具類”產品中,如下:





          對于“個人中心”,設計師要考慮的最核心是:如何解決“效率”問題。因此信息布局合理,視覺盡可能減少干擾,變得格外重要。





          什么是個人主頁?


          個人主頁,一般承載著用戶個人信息、個人影響力、生產的內容等等,以此突顯自己魅力或定位。


          常出現在內容、社交、社區類產品中,比如以下產品:



          當然,還有一些產品,它既包含“個人中心”,也包含“個人主頁”,如下:





          整體來看,“個人中心”偏向于個人信息的管理,更關注于“效率”;而“個人主頁”偏向于展示自我,關注點更“多元”,會復雜一些,下面會細講。搞明白了它們的區別之后,大家會發現“個人中心”相對更簡單一些。


          所以,這次我們先聚焦聊聊“個人主頁”。







           設計“個人主頁”前思考什么?




          在工作中,做任何需求都應該有其目的或目標,不然所有的忙碌都容易淪為資源的浪費?!皞€人主頁”也應有其價值和使命。


          像上一趴所說,“個人主頁”是為了讓用戶突顯或塑造自己的魅力,很像是一個人的“個人名片”。那么,用戶塑造個人魅力對產品有什么價值和收益呢?目標是什么呢?





          拿短視頻產品舉例:如果用戶能夠在“個人主頁”充分展現自己的才華和魅力,從而帶來了更多瀏覽者的“關注”,那他們就更有動力分享或生產優質內容,進而使產品內容更加豐富;從而吸引更多新用戶的瀏覽、留存。


          更多新用戶的加入、瀏覽、留存,讓內容生產者有更多的漲粉空間,粉絲規模做起來之后再進行商業化。


          這樣對消費型用戶、內容生產者、平臺方都有利,進而處于良性循環。






          這就是“個人主頁”背后的大概邏輯和目的。







           如何進行“個人主頁”的設計?




          了解完“個人主頁”存在的價值和目標之后,那么,作為產品或設計師們需要幫助用戶解決幾個問題:1.樹立人設;2.輔助吸粉; 3.助力變現。




           1.樹立人設 



          人為什么需要樹立人設?


          樹立人設,本質上是兩種目的:獲得認可(提升關注/約X),獲得收入(提升變現能力)。



          如何幫助用戶快速建立人設?


          個人主頁里有幾個區域,影響著用戶建立人設:a.頭圖區;b.個人信息區;c.作品區;



          a.頭圖區


          頭圖,指的是“個人主頁”頂部的圖片區域。


          為了讓瀏覽者進入“個人主頁”快速了解作者,頭圖這種處理手法,是很多社交/社區/內容類產品,“樹立人設”的標配。


          比如:社交類產品的頭圖,用戶要么放自己照片,要么放風景;




          大V、商家等角色的用戶,會把頭圖打造成自己品牌的招牌,輔助瀏覽者快速了解自己定位。




          不過,頭圖尺寸占比要把控好。


          尺寸大小會影響界面的“屏效比”和用戶“上傳門檻兒”,對產品核心數據也有著千絲萬縷的關系。




          b.個人信息區


          個人信息區,也是作者的基礎資料。


          一般包含著:用戶的昵稱、賬號、簡介、標簽、粉絲關注量、關系鏈等信息。這個區域設計時需要重點考慮“信息親密度”和“信息優先級”。


          信息親密度:指的是如何將更親近的信息,以信息組的形式傳遞,減少用戶認知成本。


          比如下圖,常見的社區或內容類產品針對“個人信息區”的處理方式(同一顏色的色塊代表親密度更強的信息。)



          同時,“信息組”與“信息組”之間也需要處理好親密度,比如“小紅書”和“instagram”的“好友關系鏈”與“關注按鈕”是放一起的,方便用戶快速作出“關注”決策。




          c.作品區


          作品區的重要性不用多說了,它是作者“樹立人設”的重要組成部分,也直接影響著瀏覽者是否愿意關注的關鍵因素。


          “作品區”設計時,有2個重要因素需要考慮:“作品尺寸占比”、“作品信息外顯”。




          1)作品尺寸占比:


          比如下圖,同樣是短視頻產品,Before作品區一排僅1個作品,剪映2個作品,而抖音3個作品。




          單從排版美丑來評價是不負責的,那么如何決策哪種處理手法“對”的呢?


          這需要通過自己產品定位分析,以及通過不同布局方式進行上線測試,重點觀測核心數據(用戶消費時長/作品消費個數/關注率等)的影響情況來決策。





          2)作品信息外顯:


          除了作品本身,它的“輔助信息”也是幫助用戶做決策的重要因素。


          比如:“Before”除了對作品熱度信息(瀏覽量、評論量等)外顯以外,更強調和引導用戶進行互動,如:收藏、分享、評論、充電;“剪映”根據產品屬性,更強調“使用數”和“作品的描述文案”;“抖音”作品僅外顯“點贊數‘,同時通過“置頂”和“剛剛看過”提升用戶決策效率。



          以上可以看出,頭圖區、個人信息區、作品區,是讓瀏覽者快速且準確的了解或關注內容創作者重要組成部分,也是內容創作者“樹立人設”的主要手段。





           2.輔助吸粉 


          輔助吸粉,換句話說也是輔助用戶提升“關注率”。


          不可否認,清晰的編輯個人信息,產出優質的內容,是用戶吸粉的根本,我們能做的只是“助攻”。


          所以,在做此類“個人主頁”時,我們需要通過設計手段做個靠譜“奶媽”,有幾個維度可以嘗試:a.強化關注;b.沉淀粉絲。


          a.強化關注


          衡量粉絲多少,是通過用戶是否點擊“關注”了內容創作者。


          因此身為產品工作人員,在個人主頁設計時,除了其它信息呈現以外,在不影響頁面信息合理性的情況下,盡可能強化“關注”按鈕,引導用戶操作。









          b.沉淀粉絲



          有了粉絲之后,提升粉絲忠誠度和粘性,是每一個內容生產者面臨的問題,也是工作人員們需要幫內容創作者解決的。


          左邊是“快手”,在個人主頁內有粉絲群入口;右邊是“火山”,打造自己的“圈子”,粉絲們可以在里面發自己的動態,或進行互動。



          這么做是為了提升內容創作者的粉絲粘性,給他們更大的空間去運營粉絲,培養感情,打造更忠誠的私域流量。






           3.助力變現 



          除了樹立人設、輔助吸粉以外,助力他們變現,才能使他們長期扎根于此(留在自己平臺)。不然大V們會帶著自己圈到的粉絲,去別的地兒賺錢,給你的產品帶綠帽子。


          拿知乎舉例,內容創作者可以在個人主頁掛自己的商品櫥窗,給符合自己人設的商品帶貨。





          也可以開通付費咨詢模塊,通過幫助用戶解答問題實現變現。




          除此之外,還可以做付費Live課程。



          再來看下像嗶哩嗶哩、抖音、火山、QQ音樂等平臺,在個人主頁都有輔助用戶變現的入口。





          下面是“聲撩”,利用用戶聲音的優勢去變現,比如:陪打游戲(軟妹子聲音讓王者峽谷的漢子們興奮)、睡前陪聊、睡前連麥等等。


          如果你真的很富有,且不想讓妹子陪聊陪打游戲,就是單純的想砸禮物引起注意,右圖可以看出,有個入口是直接“送禮”。



          這么做滿足土豪訴求(博取主播注意),滿足主播訴求(變現),滿足平臺訴求(抽成),何樂而不為。


          同時,也越來越多了產品不僅解決C端用戶的變現訴求,同時解決B端用戶變現訴求。比如,抖音賦能商家,商家號的“個人主頁”可以自定義tab,默認展示“商品”tab。


          用戶不僅能在這里消費作品,還能通過作品建立的信任促進購買行為。




          再比如,instagram也提供B端用戶開店鋪功能。





          以上,是關于“個人主頁”如何助力用戶變現的案例,其實玩法還有很多,這里僅提供一些思路,大家平常玩APP時可以多關注下。






             總結   



          總的來說,“個人中心”與“個人主頁”最大的區別在于:“個人中心”主要是“給自己看的”,更注重使用效率。


          “個人主頁”主要是“給他人看的”,更注重突顯自己魅力。在滿足使用效率的基礎上,需要通過產品設計手段幫助用戶“樹立人設”、“輔助吸粉”、“助力變現”,從而使用戶和平臺實現雙贏,打造一個更完善的生態。


          以上,是“個人主頁”設計相關思考,希望對你們有所幫助。

          文章來源:UI中國    作者:大牙


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



          超贊 時尚簡約 手機APP界面UI設計欣賞 - 藍藍設計(十)

          前端達人

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品,為你的產品設計注入靈感。

          WechatIMG107.png

          WechatIMG108.png

          WechatIMG109.jpeg

          WechatIMG110.png

          WechatIMG111.jpeg

          WechatIMG113.png

          WechatIMG115.png

          WechatIMG116.jpeg

          WechatIMG117.jpeg

          WechatIMG118.jpeg

          WechatIMG119.jpeg

          WechatIMG120.jpeg

          WechatIMG121.jpeg

          WechatIMG122.jpeg

          WechatIMG124.jpeg

          WechatIMG125.jpeg

          WechatIMG126.jpeg

          WechatIMG128.jpeg

          WechatIMG129.jpeg

          WechatIMG130.jpeg

          WechatIMG159.jpeg

          WechatIMG160.jpeg




          --手機appUI設計--

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

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



            更多精彩文章:

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

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

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

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

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

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

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

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

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




          抓住關鍵點,提升App搜索設計的體驗!

          ui設計分享達人

          可能很多人認為搜索設計很簡單:在主頁頂部設計一個搜索框或者搜索圖標,就可以完成操作。但搜索前、中、后的體驗大家有沒有仔細考慮過呢?

          在搜索過程中需要展示什么?如何幫助用戶盡快找到他們想要的?搜索的體驗如何與其他體驗相聯系?這是很多設計師思維模糊的地方。

          在本文中,將介紹搜索設計需要了解的內容,以及在不同App和案例中的搜索體驗。 

          一、搜索前的體驗

          搜索是產品中不可或缺的一部分,無論打開哪個App, 我們都能很快找到搜索功能。搜索作為一個功能入口,簡單的呈現方式對用戶來說很重要。

          搜索設計常見的形式有3種:

          • 頂部搜索框

          • 圖標(放大鏡)搜索

          • 底部搜索導航

          從視覺和優先程度來看,底部導航>搜索框>圖標。那么每種形式的優缺點是什么,又分別在什么時候使用呢? 

          1、頂部搜索框

          搜索框通常位于App主頁的頂部,作為一個大的觸摸目標,更容易被用戶發現和使用。搜索框的組成一般包括容器、預設文字、操作按鈕。

          容器通常填充為白色或灰色,里面帶有預設好的產品文案。但是容器什么時候用白色,什么時候用淺灰色呢?這取決于App主頁的背景色。

          設計準則是始終將容器的顏色與頁面背景色相對比。拿谷歌地圖和微信讀書相比較,灰色背景下用白色的搜索框,反之亦然。

          當然也有例外,Airbnb在白色背景上就有一個白色的搜索框。為什么這樣設計呢?因為它的搜索框帶有陰影,能和背景作出區分,也是一種可行的設計方法。

          預設文字的作用是提示用戶要搜索的內容或搜索方向,告訴用戶可以從搜索中得到什么。在App Store中,預設文字告訴用戶可以搜索“游戲、應用、故事等”,Messenger中的預設文字只有“搜索”,為用戶提供功能入口。

          預設文字在內容瀏覽類App中很常見——不僅可以展示擁有的內容類別,還能結合搜索趨勢來積極地推廣熱門內容。比如微信讀書的搜索框使用最近流行的書作為預設文字,以此提高內容的曝光率,吸引用戶閱讀。

          操作按鈕雖然與搜索相關,但擺放的位置不固定??赡茉谒阉骺騼炔?,也可能在搜索框兩側。哪些圖標/文本按鈕對搜索有幫助呢?最常見的是搜索框中的語音輸入功能和二維碼圖標。

          另外一個好的搜索體驗的關鍵是能從視覺上區分與搜索相關的圖標。

          2、搜索圖標

          如果一款產品希望用戶專注于瀏覽內容,或者不需要頻繁使用搜索,可以采用圖標的樣式將搜索入口放在頁面頂部。例如,在Medium上用戶通常是漫無目的地瀏覽內容,而不是搜索特定的主題;Facebook上的用戶通常只想瀏覽朋友的帖子,很少搜索內容。 

          3、底部搜索導航

          與前兩種形式相比,底部搜索導航離用戶距離最近,更容易作為接觸目標也被賦予更多的特性。

          UberEats通過主頁的排序和過濾,幫助用戶分類感興趣的餐廳,并將搜索作為底部導航的第二個標簽,這樣用戶就能夠不斷看到和探索新餐廳。

          Tiktok也將搜索入口放在第二導航中,完整的首頁有利于為瀏覽視頻的用戶提供沉浸式的體驗。

          二、搜索頁內容展示

          當用戶想搜索某個內容,點擊搜索框之后該做什么呢?App應該如何幫助用戶搜索?

          用戶點擊搜索框時會彈出一個頁面,我們將其定義為“搜索頁”。搜索頁的目的是讓用戶做好搜索的準備,對要尋找的內容進行提示,拓寬用戶對要搜索的內容的看法。

          彈出的搜索頁幫助產品完成兩個主要任務:

          • 利用視覺和交互告訴用戶已經做好搜索的準備;

          • 通過頁面上的內容提醒用戶他們正在尋找的東西,或者為他們提供可能感興趣的東西。 

          1、視覺和交互——做好搜索的準備

          當我們有一個特定的搜索目標時,我們的注意力就會完全放在搜索框(或搜索圖標)上,如果突然被引導到一個新的頁面,可能會帶來零碎的體驗。

          所以要把“搜索前”到“搜索頁”的轉換做得更自然,讓用戶感覺仍然在同一個頁面上操作一樣。點擊Facebook的搜索圖標,圖標通過平滑的動效擴展成一個搜索框。

          無論搜索在什么位置,顯示搜索框的不同狀態很重要,告訴用戶“已經準備好進行搜索”。以領英為例,分析一下從搜索前到搜索頁面發生了哪些變化:

          • 從搜索中返回的方法:取消。這對所有的搜索體驗都是必要的,可以使用取消或者返回圖標。

          • 搜索框改變了填充色。搜索框從灰色變為白色,反映當前搜索操作處于焦點狀態。

          • 只留下必要的圖標。二維碼能幫助搜索所以仍然保留,而左邊的個人資料圖標和搜索圖標都會消失。

          • 彈出光標來鼓勵用戶輸入文字。

          在某些App中,搜索框在“搜索前”和“搜索頁”中的位置可能不相同,這樣做的目的是在兩種體驗之間進行平滑的過渡。Google的搜索框向上滑動來展示搜索內容,保證過渡動效的流暢性。

          有些搜索體驗不可能讓用戶停留在同一頁面上。Airbnb的搜索需要一系列的引導將用戶轉移到一個全屏的流程中。

          關鍵的地方在于,搜索頁面在屏幕中間彈出,鍵盤向上滑動,用戶可以通過無縫的交互從“搜索前”平滑過渡到“搜索中”。 

          2、內容——提示搜索的信息

          歷史記錄可以幫助用戶進行有針對性的搜索,因為過去的興趣是當前興趣的有力指標。但是只顯示歷史搜索記錄會將用戶的注意力集中到過去的搜索上,而不是保持搜索的狀態。所以除了顯示搜索記錄外,顯示推薦內容能拓寬用戶對潛在事物的興趣。

          關鍵點1:“沒有內容可推薦”

          當一款產品的功能主要是為了讓用戶完成某個特定的任務或達到某個目標,那么它可能就沒有動機去推廣任何內容。這類產品只會顯示最近的搜索記錄,比如Notion是一個筆記應用,只負責存儲用戶的筆記,因此只顯示過去的搜索記錄來幫助用戶進行搜索。

          關鍵點2:“在搜索前推廣內容”

          有的產品通過將各種內容提供給用戶查看和探索,為用戶實現某個目標。谷歌地圖的搜索框下面有熱門的標簽,用戶很可能會從標簽中找到他們感興趣的類別。用戶點擊搜索框后,谷歌就會假設用戶有特定的去處,只專注于幫助他們到達想去的地方。

          關鍵點3:“平衡內容推薦和歷史搜索”

          主頁上的推薦內容可能很容易被忽略(因為它可能與用戶的操作無關),但是搜索頁上的熱門推薦很少會被忽視。因為用戶是帶著目標主動進入搜索頁,所以不會省略頁面上的任何信息。

          熱門類別

          通過在最近搜索頁上將各種美食放在首位,UberEats和Doordash這類送餐App就可以引導用戶嘗試更多的餐廳。

          熱門話題

          展示熱門話題能為用戶創造一種社區感,會讓用戶覺得他們與更大的社會保持聯系。Quora是很大的問答平臺,它不僅顯示推薦的話題,還顯示了關注者的數量??吹竭@一點,用戶會想:“如果一個話題有13萬追隨者,那一定很好!我也想成為其中的一員?!?

          熱門新聞

          新聞類搜索具有很強的時效性,用戶很清楚明天的內容將不同于今天的內容。所以有些App會對新聞或熱搜進行實時排名,向用戶展示最熱門的資訊。

          Reddit展示了當前的趨勢,讓用戶了解的內容,Robinhood每小時都會更新華爾街關于股市的文章,這樣用戶就可以做出及時和明智的財務選擇。

          搜索推薦

          通過算法,很多App都能從用戶過去的興趣中推斷用戶的喜好,然后不斷推送相似的內容,比如淘寶的相似商品推薦。

          同樣的策略也可以應用于搜索頁。小紅書作為一款流行App,搜索頁顯示根據用戶口味定制的推薦;Twitter的“For you”標簽根據過去的搜索展示的相關內容。顯示更多與用戶相關的內容可以拉近與產品的距離,用戶也會花更多的時間使用產品。

          搜索細分

          Medium的搜索做得很聰明,它將搜索頁面細分為兩個步驟:先點擊搜索框來瀏覽不同的主題,再次點擊會顯示光標和搜索記錄。通過這種分解體驗,用戶在搜索時獲得了更多的信息量和更簡潔的體驗。

          總結

          以上是關于搜索前和搜索頁的體驗設計。產品的搜索體驗受到多方面的影響:自身目的、內容種類、受眾類型。希望這篇文章能夠讓你了解搜索體驗的可能性,為搜索設計帶來更清晰的方向。


          文章來源:站酷      作者:Clippp

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

          超贊 時尚簡約 手機APP界面UI設計欣賞 - 藍藍設計(九)

          前端達人

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品,為你的產品設計注入靈感。

          WechatIMG67.jpeg


          WechatIMG68.png


          WechatIMG69.jpeg


          WechatIMG70.jpeg

          WechatIMG71.jpeg

          WechatIMG64.jpeg

          WechatIMG65.png

          WechatIMG72.png

          WechatIMG76.png

          WechatIMG77.png

          WechatIMG78.png

          WechatIMG79.png

          WechatIMG80.jpeg

          WechatIMG81.png

          WechatIMG82.png



          --手機appUI設計--

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

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



            更多精彩文章:

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

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

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

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

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

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

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

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


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

          前端達人


          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品,為你的產品設計注入靈感。

          jhk-1589856824505.png

          --手機appUI設計--

          jhk-1589856834298.jpg

          --手機appUI設計--

          jhk-1589856847369.jpg

          --手機appUI設計--

          jhk-1589856965196.png

          --手機appUI設計--

          jhk-1596893249060.png

          --手機appUI設計--

          jhk-1596893316552.jpg

          --手機appUI設計--

          jhk-1596893336786.jpg

          --手機appUI設計--

          jhk-1597108869110.jpg

          --手機appUI設計--

          WechatIMG50.png

          --手機appUI設計--

          WechatIMG51.png

          --手機appUI設計--

          WechatIMG52.png

          --手機appUI設計--

          WechatIMG53.png

          --手機appUI設計--

          WechatIMG54.png

          --手機appUI設計--

          WechatIMG62.jpeg

          --手機appUI設計--

          WechatIMG63.jpeg

          --手機appUI設計--

          WechatIMG66.jpeg

          --手機appUI設計--

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

           





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



            更多精彩文章:

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

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

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

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

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

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

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

          餓了么、美團都在用的輕擬物風格,到底是什么?

          資深UI設計者

          擬物化設計的回歸

          在今天的 UI 設計領域,由扁平化設計風格占據主導地位,已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外,對設計師而言就是設計的難度大大降低了。

          一個界面的 UI 視覺元素,僅僅只需要圖片素材、矢量圖標、幾何、文字,UI 設計師的工作僅僅是對內容進行組織和排版,涉及到繪制原創的也僅僅只有少量的圖標(大多數人還畫不好)。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          這種狀態持續了很多年,看起來歲月一片靜好。

          但是,這兩年市場發出了一些不同的聲音,那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。

          比如新擬態風格在年初炒了一波熱度,各大平臺和公眾號都鋪天蓋地的發文和介紹,介紹它的設計理念和設計方法。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標,引起設計圈的熱議。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          首先講講新擬態設計,之所以之前只字不提,是因為我對這個風格實在沒什么好感,有種對純擬物借尸還魂的味道,且它的樣式對于信息密度高的應用是完全不適用的,只能活在飛機稿里。

          而國內大型應用開始在實際項目中上線擬物圖標,意義就不一樣了,證明這樣的設計是經過幾個大廠團隊認可,且有共識的。

          當然,這并不因為大廠用了就無腦推崇。而是純扁平的設計已經越來越難滿足部分需要強視覺效果的頁面設計了。

          今天的互聯網和過去不一樣,用戶的增長留存不再是過去一樣通過裂變和口碑完成,一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的,而互聯網產品又層出不窮,佛系的等待用戶臨幸是沒有出路,這種現狀也被稱為互聯網的下半場。

          佛系不行,當舔狗更不行(成本太高),所以今天大型產品都在對待用戶的態度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高,運營活動越來越密集,廣告和強提示也越來越多。比如剛打開了三個應用,進入的首頁大家自己意會……

          餓了么、美團都在用的輕擬物風格,到底是什么?

          有點扯遠了,回到話題上。在這種掠奪用戶注意力的思路指引下,再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后,那么進一步在一些細節處應用擬物就成為必然的選擇。

          而擬物的應用并不可能鋪設到整個應用中去,因為完全擬物化的設計降低信息瀏覽效率是必然的,所以它只適合做局部的視覺強化,來加強用戶對特定區域的感知。

          最常見的需要被凸出的要素,就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配,相信大家已經很習慣了。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          只是,這些圖標開始在脫離運營活動的狀態下,也開始使用非扁平模式,那就不再是運營設計師的工作職責,而是 UI 設計師們繞不過去的檻了(知識盲區)!

          且除了 APP 外,其它領域對于擬物設計的需求也會開始逐漸提升,尤其是目前越來越復(fu)雜(kua)的大屏數據展示、車載界面、定制系統等等。

          作為新世代的 UI 設計師,多數人對擬物的設計可以說是完全空白的狀態,所以是時候要重拾擬物設計這個傳統藝能了。

          擬物和輕擬物的認識

          前面我有提到,擬物主要應用在關鍵的圖標上,但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物,而是經過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。

          首先我們看看,過去優秀的擬物圖標和設計案例,它不僅表現元素本身的光影、透視、構造,甚至會非常完整的表現物體表面的材質和肌理。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          這種圖標單看起來確實很好看、細致。但是,把它丟進我們當前的頁面中是非常違和的,因為它們細節實在太多了,而且畫起來非常耗時間,不利于項目整體的推進。

          所以為了符合畫面的質感,又要考慮項目效率,輕擬物這個概念開始被提出和應用,作為一個折中的解決方案。

          它和純擬物設計的共同點在于,也表現光影、結構、透視,但它盡可能精簡了輪廓的復雜度、肌理和層級,呈現出更概念化、理想化、易于辨識的擬物圖形。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          所以,我們主要去學習的內容是輕擬物的設計方法,而不是徒手畫照片(這個可以緩緩)!

          而輕擬物雖然 「輕」,但它依舊也還具備擬物的基本特征,是有實體質感的。但是扁平從插畫到圖標設計經過多年的改版,有各種嘆(hua)為(li)觀(hu)止(shao)的設計,應用大量的漸變、投影、模糊的效果,比如下圖案例。

          餓了么、美團都在用的輕擬物風格,到底是什么?

          這在我們之前圖標的系列干貨中有提過,這類設計是面性圖標的進階版,它們依舊屬于扁平風格的范疇之內,不能和輕擬物劃上等號。

          所以,先掌握這些概念,到下一篇中,我們就會展開具體的技法講解和演示了。

          結尾

          對于這幾年才開始學習 UI 設計的新手來講,擬物已經變成一個很陌生的事物,這對行業來說是比較悲哀的一件事。

          因為擬物的設計不僅僅是畫圖標而已,對它的學習可以全方位的提升設計師的基礎素養,不僅包括對傳統美術(結構、光影、色彩、透視)知識點的剖析,還包含對 PS 使用的深入探索。

          可以說,自從擬物不成為必修題材以后,九成以上的UI設計師是不會用 PS 的,這極大的限制了他們自身的可能性和作品的多樣性。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          資深UI設計者

          項目背景

          站內攻略作為每年大促玩法的預告者,承擔了向用戶輸出平臺節奏、吸引用戶預約回流的重要任務。 不同于著眼于轉化的賣貨會場,或是著眼于分享的互動H5,如何能讓用戶更好地了解京東的大促平臺玩法,便捷用戶的購物旅程,就成為了它的主要任務。

          設計思路&設計執行

          1. 產品化思路與定位

          在開始設計之前,我們對比了2017年至今的所有攻略頁面,發現往年頁面存在缺乏延續性、定位不清晰的問題。作為大促信息傳達的先行軍,往期的攻略反而更多承擔了轉化型的會場類任務,對于優惠信息的預告往往是輕描淡寫地用文案帶過。而每一次的攻略樣式都是「船新版本」,也產生了較大的人力消耗。

          然而盡管攻略的任務是信息傳遞,但作為整體大促鏈路中的一環,它終究還是需要為大盤GMV服務。那么應該如何平衡二者,以達成更好的數據效果呢?

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          首先,從攻略存在的核心意義——助力集團大盤GMV的提升出發,它需要達成以下幾個目標:

          • 讓用戶愿意逛:讓用戶明白京東大促的節奏和玩法、并且在了解后有意愿參與;
          • 讓用戶愿意買:提供能提升用戶購物欲望的決策信息;
          • 讓用戶養成習慣:當攻略持續為用戶產生了用戶價值后,就可以養成用戶「來京東購物前先看攻略」的心智,從而更好地引導用戶進行操作。

          然而縱觀大促會場全局,許多賣貨會場也可以達成這些目標,那么站內攻略和它們相比有具有哪些差異性呢?我們可以從對內和對外兩個角度進行分析:

          對內差異化:從站內來看,「我的」和「AI助手」也都承擔了向用戶進行活動會場推薦的功能,但「我的」是圍繞用戶已有的操作展開管理和推薦,是絕對精準的量身打造,「AI助手」是理性層級下的導購,需要用戶先產生「想法」,再指導操作;站內攻略則是引導用戶未來行為的指導和說明,先組織、篩選促銷信息,再使用戶產生「想法」,從而產生操作,有一定「逛」的性質。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          對外差異化:從站外來看,站內攻略的定位與「什么值得買」有些近似。相比之下,站內攻略的優勢則在于它能更緊密地圍繞京東用戶的消費習慣進行定制化推薦,和近年來以長圖為主的阿里系攻略相比,則提供了更為豐富的操作(如預約),一定程度上能減少用戶的記憶成本。

          基于以上基礎,我們對往年攻略的用戶畫像進行分析,并對攻略進行了橫向與縱向的對比,總結出了攻略作為一個長線產品視角下的迭代思路,并根據攻略的特性制定了分時期的北極星指標:提升預熱、專場期的預約加購率、提升全時期的活動分流以及提升高潮期的商品轉化。那么我們又是如何根據這三個指標來拆解細分策略的呢?

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          2. 提升預約加購——日歷優化

          交互層面:動效輔助內容聚焦

          作為站內優惠信息的聚集地,如何清晰簡潔傳達內容,一直是交互側需要重點思考解決的難題。于是在本次攻略中,我們對比了往期攻略中的預告樣式,在數據表現較好的日歷樣式基礎上,對頁面的層級進行了進一步的簡化,配合動效的引導操作,以便用戶能夠更聚焦地瀏覽日歷部分的核心內容:

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          視覺層面:視覺層級清晰

          經過對交互稿的分析理解,以下3個痛點,對此次頁面的信息層級和畫面舒適度是一個考驗:

          • 內容信息較多:為了提升預約吸引力,這次在單日預告內露出了更多的BI單品,同時增加了預約瓜分京豆的玩法,所以這次首屏的內容信息和雙11相較而言,是有所增的。
          • 日歷展示狀態增加:日歷嘗試了新的交互樣式,有展開和收起兩種狀態。
          • 卡片顏色多:為了讓用戶感知到每日主題的差異,日歷卡片的顏色會根據每日主會場的主題顏色相呼應。

          那么如何通過視覺的手段,讓視覺層級清晰展示且畫面顏色和諧呢?下面從最基礎的視覺構成里的構圖和色彩兩方面進行分析并落地:

          「構 圖」整體用方形進行構圖和內容分割

          方形是最簡潔的幾何形態,對于信息量較大的頁面,方形會讓設計空間利用最大化,并且可以排除形態上的干擾,結構清晰的展示信息內容,讓用戶通順的瀏覽頁面。

          簡化視覺層級

          在交互稿上,瓜分京豆模塊和日歷選擇器兩部分內容劃分較為明顯,但所留出的空間,會增加視覺層級的復雜度。為了盡量簡化視覺層級,找交互同學商量是否可以在保持內容劃分清晰的情況下,把瓜分京豆模塊背景和日歷選擇器拉通,同時,也咨詢了前端同學,視覺這樣處理在實現上是否會有問題。最終,三方達成一致后,采用了視覺最終呈現的方案。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          「顏 色」

          為了更好的覆蓋618全時期,挑選了色環上三種距離基本相等的色彩進行從暖色到冷色的色相漸變。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          • 頭圖運用了較為清透的黃色至紅色的暖色漸變,適用于618全時期,體現了大促的熱鬧氛圍;
          • 頭圖過渡到日歷選擇器,則是運用了從頭圖的紅色漸變至紫藍色,這樣既能讓選擇器的文字信息清晰識別,也能將頭圖和日歷選擇器兩部分內容進行自然的分割,減少了線面分割所帶來的復雜層級關系;
          • 瓜分京豆模塊的顏色則選用了偏中性的黃色,這樣一來和每日不同顏色的卡片搭配和諧,二來和頭圖有所呼應,整體畫面色彩保持平衡。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          前端層面:復雜交互動畫與跨平臺功能適配

          關于選中移動動畫

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          日歷選中動畫部分我們需要實現的一種跟隨移動的效果,那么我們需要考慮的是在當前日期是有可能去到任何一個可點擊日期的位置。

          實現方式:

          用純css方式控制,方塊使用背景圖的方式實現,通過控制類名移動位置,比如.move-[start]-[end],缺點:需要寫好每個日期對應到其它日期的位置,不夠靈活

          用js控制。把日期看成一個棋盤格子,每個格子都占相同的坑位大小。我們把當前日期看作a,移動至日期看作b。假設把a移動至b的橫向占格子數設為n,把a移動至b的縱向占格子數設為m。那么n=當前下標 % 行個數,m=當前下標 / 行個數取整。那么a移動到b的x = w * n,y = h * m (w為格子寬度,h為格子高度)。

          注:寬度獲取使用block.getBoundingClientRect().width;clientWidth會忽略小數位

          • 關于展開收起動畫,半圓實現:
          • 可以使用clip-path
          • 我的實現方法為使用border-radius+height實現,半圓的弧度使用兩倍大圓取其部分圓弧顯示,展開收起實現使用高度修改:在低端機會略卡,因為每次使用會引起頁面重繪(有待探討優化)
          • 使用svg,canvas等
          • 關于app預約,小程序預約
          • app預約采用的是京東app日歷預約,用戶開啟手機日歷(寫入)權限后,預約就會寫入用戶的手機日歷,在活動開始前會以日歷提醒的方式提醒用戶。
          • 小程序預約走的是微信大賬號提醒流程,預約需要分三步進行:預約-> 授權 -> 上報授權狀態。進行完上述步驟后,用戶會在活動開始前10分鐘左右通過大賬號(已關注用戶)或服務通知(未關注用戶)收到消息

          2. 提升活動分流——福利秘籍

          提升篩選效率

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          福利秘籍專區作為大促期間福利互動活動的集中地,承擔了為互動分流,為用戶提供快速查找篩選可參與活動的任務。而互動往往存在較為復雜的規則,對用戶而言存在較高的理解成本。此次除了集團主推的互動,又增加了對于事業部互動的展示,對于保證頁面展示效率也帶來了一定的挑戰。通過對往期迭代內容進行數據對比,同時參考其余會場對于多信息展示的策略,最終我們采用了BI展示,同時對用戶弱相關的互動卡片進行折疊的方式提升頁面的效率;而在卡片的信息展示上,選擇重點突出活動可得的利益點,讓用戶一眼即可篩選出對自己最有價值的互動進行參與。

          視覺創新優化

          雖然運營同學對雙11的秘籍視覺比較認可,但是仍然提出了希望有秘籍形式感的同時,能進行視覺創新的訴求。經思考后,我認為運營的訴求無法滿足:

          • 視覺風格和618大促整體風格保持統一;
          • 能體現秘籍感的視覺表現手法有限;
          • 視覺創新的前提是要保證信息清晰的展示給用戶;

          于是帶著以上3點找運營同學再次溝通清楚對方的真正訴求到底是什么,經溝通,對方最重要的訴求是希望有視覺創新,秘籍形式感訴求較弱。接下來針對重要訴求集中發力,并結合此次618視覺概念(光點、光線),找到了視覺創新優化的解決方案,并和運營達成了一致。

          「構圖」

          上面提到了方形可以排除形態上的干擾,考慮到活動入口圖數量較多,且氛圍圖不可把控,左側以方形構成,右側結合了618主圖形——光線,把文字和氛圍圖分開,讓各部分信息更加聚焦。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          「顏色」

          結合雙11用研結論——活動入口主題不夠鮮明,除了活動文案類似的因素,我認為顏色也是影響因素之一。所以這次在上部分平臺級活動入口,采用了2種暖色的近似色交替構成,下部分事業部活動入口,統一采用了1種和上部分近似色的冷色構成;單個活動入口,文字和氛圍圖的背景進行統一色相的明暗深淺變化。從整體樓層來看,從上至下,由暖至冷,不僅活動主題有了明顯差異化,而且較好的過渡到下一樓層;從單個活動入口來看,左右深淺顏色的劃分,不僅對不可把控的氛圍圖適應性更強,且主題文案更加明顯。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          「表現形式」

          整體頁面在按鈕的部分采用新擬態風格,在保證吸引力的同時,也減少了顏色過多的問題,減少了信息層級。新擬態風格更適合工具功能類產品,本次只嘗試使用在了頁面的按鈕部分,風格上也會有眼前一亮的感覺。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          3. 提升商品轉化——今日導購

          分時期變化的樓層策略

          針對高潮期的轉化指標,我們參考了往期的迭代經驗,發現隨著大促節奏的漸進,臨近高潮期時,頁面的轉化模塊表現往往有較大的提升。于是在本次設計中,我們針對這個數據表現,對樓層順序進行了動態調整,高潮期將轉化樓層前置,以更好地匹配不同時期的用戶需求。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          同時根據往期的樓層數據表現,本次我們也延續保留了數據表現較好的模塊類型,例如增加了榜單的露出,以輔助頁面目標的達成(以下數據來自于lan.jd.com)。

          樓層整體化、內容吸引力包裝

          基于之前今日樓層視覺整體感較弱的問題,這次樓層背景色和頁面背景色有所區分,樓層內模塊顏色和樓層背景色同色,較往期此樓層來看更加整體化,又能讓頁面層級更加清晰。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          其中,針對這次品牌入口和上海美影廠IP形象結合的策略,為了提升用戶吸引力,且不干擾信息內容的前提下,視覺上采用了和用戶共情,且和IP形象契合的元素——老電視機,同時按鈕文案也進行場景契合的包裝,增加趣味性。

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          項目成果

          與往期站內攻略對比,本次618站內攻略主要在以下方面有較為明顯的提升:

          品牌視覺契合及創新

          在延續主視覺元素的同時,視覺風格有所創新,在頁面的按鈕部分采用新擬態風格,減少顏色過多而導致的復雜信息層級問題,同時也保證了視覺吸引力

          視覺精致程度

          整體頁面顏色較有節奏,且更加清透舒適

          元素細節(打光、投影等)的刻畫更加精致

          信息層級清晰度

          通過對顏色的合理規劃,有主次的文字信息,讓單個樓層更整體化,各樓層模塊劃分清晰

          如何讓用戶愿意逛愿意買?來看618站內攻略項目總結

          數據表現

          根據上線后的表現,本次福利互動模塊的點擊數據獲得了顯著的提升,今日模塊的點擊轉化率相比往年也獲得了成倍的增長,頁面目標基本達成。

          項目沉淀

          1. 好的經驗

          針對攻略這類規律性存在的活動會場,我們可以針對其主要的功能組成模塊進行數據導向的設計與迭代,來更好地指導后續的優化方向;同時也可以輔助業務側更加清晰地規劃會場定位,提升頁面對用戶以及大促的整體價值。

          2. 如何溝通

          Q:需求方一味的追求熱鬧復雜的視覺樣式創新,該怎么辦?

          A:熱鬧的氛圍對于大促活動來說固然非常重要,但也要根據頁面類型去判斷(重氛圍or重信息)。設計師要傾聽訴求并搞清訴求的根本原因,并用專業的角度判斷訴求的合理性,以及價值大與否。熱鬧氛圍塑造的前提是不能影響信息的識別,否則就會本末倒置,并且熱鬧氛圍的視覺樣式要和該場景邏輯匹配 。

          3. 待優化項

          雖然本次頁面大部分模塊基于產品化的思路迭代均獲得了一定的正向反饋,但產品的發展往往是個曲折上升的過程,活動會場也不例外。結合上線后反饋,站內攻略依然有以下可優化點:

          日歷操作體驗

          根據用研結果顯示,日歷操作體驗問題反饋較多,日歷模塊為滑動改變日期,而非點擊跳轉日期的操作方式,與用戶的認知不符,且首屏動效較復雜,在安卓機型上體驗較為卡頓。后續如有同樣的交互方式,需優化操作體驗。

          福利互動入口主題文案

          根據用研反饋,主題文案描述不直觀,不易理解,導致用戶容易滑過整個模塊。建議后續活動主題能簡單清晰的描述優惠和玩法。

          綜上,未來站內攻略需要進一步探索主要功能模塊對用戶的價值,探索其在大促鏈路中獨特的差異性;同時保留高用戶價值模塊并持續優化,以求達到更好的用戶體驗,用設計策略為用戶與業務帶來更多的價值。

          文章來源:優設    作者:JellyDesign

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


          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          資深UI設計者

          大部分電商詳情頁教程都著重教你如何做好首焦圖,「產品參數模塊」這個部分則鮮有人提。今天這篇教程,用超多案例,幫你掌握「產品參數模塊」的設計方法。

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?

          詳情頁中最容易被忽略的產品參數模塊,該如何設計?
          文章來源:優設    作者:美工美邦

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


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

          前端達人

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。

          手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品,為你的產品設計注入靈感。

          專業又貼心醫療App頁面設計

          醫療行業設計案例

          微信圖片_20200818185149.jpg

             --手機appUI設計--

          微信圖片_20200818185156.jpg

             --手機appUI設計--微信圖片_20200818185200.png

             --手機appUI設計--微信圖片_20200818185204.jpg

             --手機appUI設計--微信圖片_20200818185208.png

             --手機appUI設計--微信圖片_20200818185211.png

             --手機appUI設計--微信圖片_20200818185217.png

             --手機appUI設計--微信圖片_20200818185221.jpg

             --手機appUI設計--微信圖片_20200818185226.jpg

             --手機appUI設計--微信圖片_20200818185229.jpg

             --手機appUI設計--微信圖片_20200818185235.png

             --手機appUI設計--微信圖片_20200818185239.png

             --手機appUI設計--微信圖片_20200818185242.png

             --手機appUI設計--微信圖片_20200818185246.png

             --手機appUI設計--微信圖片_20200818185249.png

             --手機appUI設計--微信圖片_20200818185254.jpg

             --手機appUI設計--微信圖片_20200818185257.jpg

             --手機appUI設計--微信圖片_20200818185301.jpg

             --手機appUI設計--微信圖片_20200818185307.jpg

             --手機appUI設計--微信圖片_20200818185320.png

             --手機appUI設計--微信圖片_20200818185323.jpg

             --手機appUI設計--微信圖片_20200818185326.jpg

             --手機appUI設計--微信圖片_20200818185333.jpg

             --手機appUI設計--微信圖片_20200818185336.jpg

             --手機appUI設計--微信圖片_20200818185339.png

             --手機appUI設計--




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



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



            更多精彩文章:

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

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

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

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

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

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



          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          資深UI設計者

          接下來的訪談翻譯自微軟官方博客,微軟的 Office 設計部門的兩位主管 Jon Friedman 和 Deepak Menon 在訪談中聊了一下 Surface Duo 背后的設計故事:

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          在過去的幾十年當中,數碼產品制造商經常會為了適應用戶的習慣和需求,來不斷創造產品。我們傾向于讓事物變的更小、更輕、響應更快、更具包容性。我們將不同感官融入程序,創造而優雅的產品。

          隨著日常生活節奏和生產力的觀念變化,我們經常需要反思一個問題:如何賦予人們在創作和消費、專業和個人之間流暢切換的可能性?

          即將發售的 Surface Duo 是一款獨特的雙屏移動設備,它有著一套專門為它的硬件所定制化的產品體驗,而它的設計也折射出我們探索問題的方式。

          對于設計師來說,創造這樣的獨特產品的機會是難得的,就像你在一個住了十幾年的房子里面,發現新的房間一樣。會打開的是哪扇門?會通向哪個區域?會延伸出哪些創意?

          對于 Surface Duo ,我們想知道,它的兩塊屏幕會延伸出哪些全新的工作流程,它的接縫要如何處理,怎樣減輕用戶的認知負荷?

          受多年來我們在用戶研究上的成果所啟發,我們通過軟硬件結合的方式來進行 Surface Duo 的研發,讓它能適合你日常的需求,還可以帶來獨特的體驗,比如在雙屏上并排打開文檔。

          Surface Duo 仍然處于起步階段,我們知道,它還有很多待解決的問題,這也是為什么微軟會引入更多的用戶和設計師,來不斷地完善它。

          為了讓大家更好地了解 Surface Duo 的設計歷程,我們請來了 Deepak Menon ,他不僅參與了 Surface Duo 的研發和設計,還是 Office 設計團隊的負責人,讓他來告訴大家,Surface Duo 背后的創意、研究和設計決策。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          Jon:謝謝你能來,Deepak,在過去的2個月時間里,我們一直在非常密集地使用和測試 Surface Duo~

          Deepak:實際上,我干脆是拿它單主力機,現在我都覺得我已經不需要其他的任何設備了。

          Jon:我們當然會這么說,畢竟是我們設計了它。但是,我想這也證明了一件事情,就是這種拓展式的雙屏,已經具備應對日常工作的能力,并且貼合大家的需求了。

          Deepak:對。這不僅僅是「2塊屏幕智能手機」所帶來的體驗,它更接近于是一款「折疊式的平板電腦」的感覺。它是新事物,盡管是通過鉸鏈和轉軸來實現這種可能性。

          Jon:我們接觸 Surface Duo 的時候,我們首先想到的一問題是:人類還有哪些需求是未曾被實現的?人們在達成目標過程中,有哪些問題是需要工具來彌合的?我們要如何來幫助用戶達成這個目標?雙屏的這種形態,讓我們有重新思考生產力的切入點。

          Deepak:對,尤其是在移動端的生產力上。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          在雙屏界面下,使用 Office 在 PDF 文檔上簽名,然后使用 Outlook 發送出去,簽合同的便捷操作。

          Jon:確實,你的團隊在中國和印度這樣移動端優先的國家做了非常深入的調研。

          Deepak:我們注意到很多用戶在同一設備上執行并完成一系列的任務,他們需要更快地切換。同時,企業也正在倚靠我們過去認為非?!笂蕵坊沟拿浇閬磉M行必要的經營。

          Jon:在過去,生產力有這非常清晰的定量標準,比如一秒生產多少零件。但是如今,生產力和創意息息相關,你的情緒狀態和輸出的內容是一樣重要的。我們在不斷消費又不斷創造,反思和行動來回切換。其實這都涉及到一種傾向或者流程,你會按照一定的方式來處理信息,或者當你腦中突然劃過一個想法的時候,你會想立刻構建或者制作某個東西,而這也需要一系列的操作和任務來支撐。

          從整個數字設備的發展歷程來看,雙屏的設備可能是最適合處理這種帶有步驟的「流程」。Surface Duo 最精巧地的地方,就在于它可以按照你的各種需求來折疊翻轉和交互,可大可小,同時也是一款貼合你的口袋尺寸的設備。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          在橫屏模式之下,你可以像翻書一樣瀏覽 Word 文檔

          Deepak:當然,它將內容消費提升到一個全新的層次,對于豐富內容的處理,Surface Duo 更加適合和專業。在 Outlook 當中,你可以快速瀏覽整個星期的工作安排,在 Word 中,你可以像翻書一樣閱讀內容。屏幕 折疊所賦予的空間讓更多的信息有了自然的展現空間。

          借助 Surface Duo ,創造性的工作也得到了增強。當我使用 PowerPoint 來制作幻燈片的時候,我喜歡在一個屏幕上編輯,在另外一塊屏幕上預覽,兩塊屏幕當中,一塊幫我保持專注內容制作,另一塊幫我統領全局。另外,我也會在屏幕上開啟多個不同的應用。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          將團隊的視頻通話和 PowerPoint 并列擺放,讓你一邊溝通一邊查看內容

          Jon:使用它來進行遠程會議可能是我最喜歡的場景之一。我喜歡在開會的時候使用雙橫屏模式,將視頻置于頂端,在下面的屏幕瀏覽文檔。

          Deepak:或者用另外一塊屏幕來調用嬰兒監視器!哈哈,疫情讓我們和家庭的關系更加密切,Surface Duo 讓我可以更多兼顧到家庭這邊。

          Jon:對,很多人認為在疫情期間,家里有這么多人,移動設備的使用量可能會降低,但是很多數據表明,情況恰恰相反(僅2月初到3月下旬,微軟的 Team 移動端的用戶數量就增加了超過300%)。就我個人而言,我不想一直待在一個房間里面,盯著一塊屏幕,其他人也都反映,需要四處走動,或者在外面工作。當我開始使用Surface Duo 的時候,開始從中獲得更為強大的支撐,獲得更加有效的體驗。

          當然,它最優雅的還是在窗口的管理上。打開多個窗口是一種非常常見的 PC 體驗,但是在單屏的移動端設備上其實還不算太普遍和舒適,但是在 Surface Duo 上則很自然。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          Outlook 中雙屏帶來的額外空間讓你可以更快查看相關的收件箱和日歷

          Deepak:關于用戶如何使用窗口來提高生產力,有過很多研究,并且兩塊屏幕之間的天然接縫,或者說轉軸,其實很自然地造就了「兩塊屏幕」和「多窗口」的認知。在某些情況下,因為接縫的存在,在兩塊屏幕上打開完全不同的兩個應用,其實是非常自然的事情。

          在很多其他的情況下,用戶可能會在一個屏幕中打開一個新的程序,打開新的界面,執行單獨的操作,或者通過一個程序,在另外一個屏幕中打開下一步操作,然后再在兩個界面之間來回操作,這都是非常平穩的。這種被分割開的兩塊屏幕,創造了一種全新的交互契機,而不是制造約束。

          Jon:對于 Surface 的軟硬件團隊,我最為欣賞的一點,就是這種共生和互相促進的模式。使用 Surface Duo,你可以擁有更大的屏幕空間,而且擁有眾多不同的使用應用的新方法,而 Surface Duo 也正好可以適應各種各樣不同的使用場景。而我們在創建這個產品的過程中,想要兼顧到如此之多的場景和需求,其實是需要兩個團隊親密無間地協作,才能做好。

          對了,你剛剛說道關于照片、視頻、語音等內容——這些輸入方式的協作,對于創造性的工作到底有多重要?

          Deepak:的確,在移動端設備上,攝像頭和麥克風是必不可少的。我們希望最大限度地讓 Office 最大限度地利用這些傳感器,在移動地使用過程中進行協同。用戶在通勤過程中如何參與到線上課程的互動?老師如何更快地給孩子批閱作業,家長要如何協助孩子?其實,Surface Duo 在研發探索的過程中,就有意識地在兼顧這些場景和問題。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          從媒體庫當中,將媒體拖放到 PowerPoint 當中

          Jon:我喜歡這些富有包容性的解決方案。人們的學習方式和工作方式通常是截然不同的,這些自適應性良好的輸入模型,能夠幫助能力各異的用戶完成他們所需的工作。

          Deepak:當我們將新的輸入模型和智能化的功能結合到一起的時候,有趣的事情就開始發生了。我們幾乎還沒有涉及到創作方面的內容,用戶就已經擁有很多契機自由發揮,他們可以輕松、清晰地借用這種交互模式來表達自己。比如可以更加順暢地利用模板來制作精美的 Word 文檔和 PowerPoint 。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          Jon:物理世界中有太多東西,我們可以將其逐漸的數字化。

          Deepak:的確,將智能化的程序和多樣的傳感器耦合到一起,提高生產力的方式有很多——無論是提升工作效率、家庭安全性還是讓內心更加平靜。其實第三方開發者身上,我看到了更多思維和想法的延展,以及可能性。

          Jon:對,我們已經看到很多非常有趣智能的東西了!在 Microsoft Hackathon 大會上,有人為 Surface Duo 設計了一款雙人游戲,兩個玩家各占一塊屏幕,隔著轉軸來來操作,彼此面對面,非常有趣!

          Deepak:確實如此!

          Jon:我們很高興 Surface Duo 最終能夠面向普通用戶,我很期待它最終會在普通用戶手中會迸發出怎樣的創意和靈思,他們能夠構建出什么樣的創新軟件。

          Deepak:有太多值得期待的東西了 !

          譯者按:

          微軟在硬件產品上,有著豐富的翻車歷史。90年代的事情太過久遠姑且不說,最近十幾年,出過很多比較失敗的產品,比如上架僅 6 天就全線下架的時尚社交手機 Kin One 和 Kin Two,比如被支付寶團隊戲稱為「1%」的 Windows Phone 系統和手機,比如幾乎不存在兼容性的 Surface RT 系列的平板電腦。這些硬件我全都買過,可以說全是坑。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          這些產品單獨來看是失敗的,但是放在更長的時間跨度上來看,卻又是微軟整個生態和產品鏈條的構成和發展上,不可或缺的部分。Kin One 是整個 Metro 設計美學真正成型并走入移動端智能設備的里程碑(之前僅用于Zune系列播放器上),Windows Phone 則是 Windows 系統向小屏幕探索的必經之路,而 Surface RT 固然失敗,但是它是帶著桌面端 Windows 系統從傳統 X86 架構走上 ARM 的一次大膽嘗試。

          微軟設計負責人專訪:我們是如何創造雙屏設計的?

          失敗總是難免的,而微軟這種大廠更是有著試錯買單的底氣。從內部設計和產品團隊各自為戰,到統一到一個部門來統一管理,Surface 系列產品的誕生就是分水嶺,而這件事情是在 10 年發生的。

          當然,在此之后翻車的產品依然會有,但是成功的概率比起更早的階段(比如應對 iPad 誕生時,倉促推出的觸摸屏PC),已經提升很多了。

          如今只剩下拼硬件參數數字產品的世界簡直是太無聊了。我很期待 Surface Duo 這類雙屏折疊硬件能帶來改變。


          文章來源:優設    作者:Jon Friedman

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

          日歷

          鏈接

          個人資料

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

          存檔

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