因為現在大多數的PM/交互/UI設計師,在設計產品的時候都是以iOS為基準 思考產品上的各種功能邏輯、交互狀態,而很容易忽略了某些功能在Android里并不能“一稿適應兩端”,部分產品差異在安卓上是不一樣的。
所以本文就講下Android和iOS 10大產品/交互差異,希望你在日后的產品設計時,可以考慮到更多層面的知識點(可能在某些安卓高級機型里并不通用).
對在于一些虛擬商品的支付上,如vip會員、xx幣,xx豆。iOS和Android就存在不同的支付規則:Android基本無限制,無抽成。而iOS限制比較多,而且要抽成大約30%的手續費。
舉個例子:同樣充值30元,Android端會得到300金幣,而在iOS中,只有210金幣。正因這個抽成規則的不同(沒辦法,這是蘋果硬性規定的),才會出現各種平臺的虛擬貨幣,在Android和iOS中的充值比例是不一樣的,如快手:
所以對于虛擬商品在iOS端的抽成規則,在產品設計時一定得考慮清楚,因為這關系產品的商業和盈利模式。通常有2種解決思路:
A. 讓用戶承擔30%的抽成
a. 同樣的價格,iOS用戶得到的商品少些
如同樣充值30元,Android端會得到300金幣,而在iOS中,只有210金幣。像快抖音、陌陌等各種貨幣充值。
b. 同樣的商品,iOS用戶支付更高的費用
如3個月的vip會員,Android端定價是58元,iOS端則可以設為68元。如優酷、騰訊視頻的vip會員價格。
B. 公司自己承擔30%的抽成
如iOS端充值30元,公司實收21元,但iOS用戶能得到和Android一樣的300個金幣(理論上是有這個解決思路,但現實中很少有公司去實現,畢竟抽成成本就擺在那里).
另外還需要注意的是:因為抽成規則的不同,對于同一個ID的賬戶余額,在Android和iOS端中是不能通用的。因此在產品設計時需要將這個點告知用戶,預防用戶犯錯、以及惡意刷幣。
Android由于開源的特性,因此對接的都是第三方支付平臺,如微信支付、支付寶、銀聯卡等。
而iOS出于系統的封閉性和安全性考慮,只能調用蘋果自己的支付系統:登錄APPle ID,然后用授權的支付方式(支付寶、銀聯卡)進行付款。
“狀態欄”也就是我們手機界面最頂部的電池欄,它除了可以在不同背景里切換顏色外,在交互的觸發上,Android和iOS中也各不相同。
雖然這一交互差異是iOS專有的,但它卻啟發我們一個新的設計思路:在必要的時候,狀態欄可以為產品承載新的交互狀態。如網易的LOFTER(iOS端),用戶離開音樂播放界面時,狀態欄就用于顯示音樂信息和操作入口,方便用戶在瀏覽其他內容時可以快速關閉音樂時,極大提升了用戶的操作效率。
這種大多應用于運營的“拉新”場景,為了能新用戶得到好處(紅包、優惠券、更好看的內容等)。通常會讓新用戶下載產品APP領取。而由于Android與iOS的下載方式不同,會帶來不同的交互狀態和產品邏輯。
可以在當前頁面(后臺)下載,也可以在應用商店下載;過程中可以顯示進度,且允許用戶暫停下載;下載完成后調起安裝頁面,用戶可以取消安裝,也可以自動安裝…
正因為Android下載軟件的各種便捷性,所以才會帶來各種交互狀態:未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設計師需要特別注意的,每個不同的狀態背后都會不同的產品邏輯。
只能跳轉到App Store里下載,所有下載流程和狀態都是在那完成的,可以脫離開活動頁面,相比于Android的下載方式就簡單很多。跳轉的方式可以是全屏幕,也可以是半屏。
由于安卓的開源特性,當有新版本時都會提示用戶更新,且每個產品內部都帶有“版本更新”入口。而更新的方式可分2種:
而iOS端出于對用戶體驗的考慮,是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的iOS產品,都是沒有“版本更新”入口的原因(像QQ、支付寶、百度網盤等大廠產品)。即使有,點擊了也直接跳轉到App Store查看版本情況。
且下載渠道都固定在App Store里。理所應當的,軟件的更新方式也只能在App Store里進行,無法做到與Android的一樣做到后臺下載、后臺更新。
在手機鍵盤里輸入文字時,iOS由于系統的限制,對文字的發送指令只能在鍵盤上來完成,因此iOS用戶的交互操作都全部集中在鍵盤右下角。
而Android端就靈活很多,不僅可以在鍵盤上執行發送指令,也可以在輸入欄/搜索欄周邊新增操作入口。
長按一張圖片后,都會彈出一個列表浮層,因為iOS手機只有一個“Home鍵”而已,為方便用戶退出浮層才增加了“取消”入口。
而Android手機本來就有“返回”虛擬鍵,安卓用戶的退出/返回行為都習慣于通過虛擬鍵觸發,所以多做一個“取消”的意義性不大。
iOS端一直教育著用戶使用“左滑”刪除列表信息,所有的刪除功能都是支持“左滑”來實現的。
而Android系統大部分只能通過“長按”來觸發編輯狀態,其中就包括了刪除功能。不過現在也有極少數的產品,正在逐漸打破這兩端間的“刪減”界限,比如網易郵箱(Android)就做到了左滑刪除信息。
當我們第一次打開產品、允許了獲取消息通知的權限后,所有的信息傳輸都會基于服務器進行推送。而兩端在這塊的推送機制又有所不同:
所有新信息都會實時推送到你的手機里,即使你關閉了軟件,還是一樣會收到提示。就算使你處于斷網狀態,信息也會先儲存于蘋果服務器,等你聯網時再一次性把收到的信息推送給你。既釋放手機內存,又不會讓用戶遺漏有新消息。
而安卓則不同,你若退出了產品,數據的推送只有等你再次打開產品時,才會通知你有多少新信息。雖然減少了對用戶的干擾性,但也增加了服務器數據儲存的壓力,還容易耽誤用戶接收新消息。
也就是我們手機的輸入法鍵盤,在微信聊天內、手機短信里復制了一段內容后,由于Android與iOS的平臺特性差異,會給兩端用戶帶來了不同的交互差異。
復制完文字后,打開輸入法鍵盤會顯示來自剪切板的文字內容。用戶只需點擊,即可將文字復制在搜索欄、輸入欄等需要文字填寫的操作區域里,無需觸發“粘貼”操作。
而有些安卓機(如小米/錘子/樂視等),無論你復制了什么信息(文字、數字、網址等),都很難實現輸入法里的“剪切板”功能。用戶需要觸發“粘貼”功能,才能輸入將剛剛的復制內容。
而對于特定的信息類型:如網址。用戶復制網址往往都帶有極強的目標性、搜索性,一些瀏覽器產品會預判用戶這一操作行為,將復制的網址前置展示出來,以抵消Android端對于復制文字帶來的系統限制。如QQ瀏覽器(安卓端)就有2種解法方法:
而UC和百度也有類似的解決辦法:將復制后的廣泛信息(文字/數字/網址/郵箱地址等等)嵌入在搜索框下方,用戶點擊就能搜索。
這也是一種妥當的解決方法,因為用戶可復制的信息類型特別廣泛、目標不是很清晰。無法準確判斷出用戶一定會有搜索訴求。所以才將復制后的信息放在搜索框下面,而不是自動粘貼到搜索框中,既考慮了用戶目標,又兼顧了操作效率。
以上就是Android與iOS的差異總結,若有描述得不當請多指教!下面是總結文件。
文章來源:人人都是產品經理
互聯網發展業已進入下半場,眾多互聯網產品的營銷比重迅速攀升,用戶心智已經形成,很多產品設計方面沒有太大發揮空間。未來,面對嚴峻現實,產品人的選擇在哪里?
前段時間一款叫ZAO的換臉APP刷屏朋友圈。這款產品的主要功能是把影視片段中明星的臉換成你的臉,讓你實現大片夢。
實際上,在ZAO之前,就已經有廠商開發出了同類型的換臉APP。今年的四月,一款名為顏技的App上線了IOS版,它具有和ZAO相同的圖片換臉到視頻功能。不同的是,它沒火起來。
相反是由于ZAO的大火,已經上線好幾個月的顏技才突然被人發現。并因此登上了娛樂免費榜的第二名,第一名是ZAO。
AppStore上有上百萬個APP,想要讓別人找到你的APP已經非常困難了?;仡欁罱鹌饋淼哪切〢PP,大部分都有“重營銷”的影子。比如綠洲、ZAO、靈鴿等。
營銷對于一款產品來說變得越來越重要。
劉潤老師寫過一篇文章《如何判斷一個行業是否值得進入》描述這種商業競爭的規律:文章里提到了一個行業的發展階段可以用商家的競爭手段去判斷。
實際上這個觀點就是用4P的視角去理解商業規律。商業的本質實際上就是4P模型:產品、渠道、促銷、價格。而且這幾個點的優先級是依次遞減的。
一個項目想要成功,就需要依次做好這些點。如果別家已經在某一個環節做得很好,你再想超越,就必須也做好這一環節,然后在下一個環節做得更好。
因此在某一個特定領域內,對于后來者來說,創業會越來越難。王興在幾年前說互聯網進入下半場,目前看來這個下半場里,產品經理已經不在是舞臺的中心。
現在越來越多的產品偏向營銷驅動,這很值得我們用4P的視角去思考一下互聯網的發展現狀和趨勢。
在移動互聯網時代的早期,有很多需求可以從線下搬到了線上,或者從PC端轉移到手機端。由于這類用戶需求是一直存在的,用戶會自發地去尋找這類型的APP。
在這個時期,“產品即營銷”,只要比別人做的更早,比別人做的更好,不太需要廣告的支持,用戶會自帶傳播效應。這個時期是產品人最愛的時期,只要用心做好產品,就很容易獲得成功。
最初在移動互聯網上,沒有一款比較方便的社交軟件。然而用戶實際上是有很強的社交需求的。雖然手機QQ可以解決一些問題,但是沒有為移動互聯網的環境做相應的優化。
另一個款產品米聊,雖然也是為了解決移動互聯網的社交問題,但是產品穩定性不足,偶爾會閃退或者發不出消息的情況。
微信在那個時期是移動互聯網做社交做好的產品,所以經過用戶的自發傳播,兩個月就超過了米聊成為了最大的移動互聯網社交APP。
很多人認為微信的成功是因為獲得了QQ的關系鏈,實際上這是一種誤解。
當時運營商忌憚微信,不允許微信用手機通訊錄,于是微信只能用QQ登錄。
但QQ登錄和QQ關系鏈是兩回事。QQ登錄不等于關系鏈的使用,微信對QQ關系鏈的使用,只是添加好友時可以從QQ好友里選擇。
事實上作為一款熟人社交軟件,手機通訊錄的價值和作用更大——因為是更真實的好友,而QQ好友里很多是陌生人。如果微信當時選擇把QQ關系鏈復制過來,那就成了另外一個手機QQ了。
所以微信的成功,是因為它在產品為王的時代,做出了最好的移動互聯網社交工具。
在互聯網時代的中期,同一個細分領域會出現了很多同質化的APP。這時,競爭考驗的是各個公司的渠道能力。
你能更好地觸達用戶,就能更地擴展市場。
早在PC互聯網時代,搜狗輸入法就依靠“番茄花園”、“雨林木風”等盜版系統的預裝,僅用一年時間做到了輸入法領域70%的市場占有率。
在移動互聯網時代,新聞類APP的同質化也比較嚴重,在產品端的優化很難和其他競品拉開差距。為此搜狐早晚報(搜狐新聞的前身)依靠中興手機的預裝,一下子從幾萬日活提升到上百萬日活。
在國外的Twitter模式興起時,四大微博的競爭進入白熱化階段。最終新浪微博突出重圍,成為了最后的贏家。
新浪微博的打法也是依靠渠道。當時新浪微博搶先與頭部的手機廠商簽下獨家合同,激活一個用戶支付廠商1.5元,很多手機廠商看到好處都選擇了合作。
后來這筆錢改成了資源置換。手機廠商預裝新浪微博,而微博會在用戶在發布手機動態時,露出手機品牌型號。
除了預裝,SEO和ASO也是非常重要的渠道來源。
今日頭條早期的SEO要比其他公司效率更高。
一般我們在百度進行渠道投放時,只知道投放相關的關鍵字,這種常規操作的結果是量少、多家競價、轉化效果不佳,而且成本非常高。
今日頭條創新性地利用每天百度新產生的大量沒有人競價的關鍵詞進行拓詞,通過技術手段自動生成聚合這些關鍵字的落地頁,然后在百度進行投放。這樣做的好處是量大而且價格便宜,落地頁聚合的內容本身比百度的還好,用戶轉化效果自然就非常理想了,大大降低了渠道投放的成本。
優質的搜索渠道流量,也是今日頭條成功的一大因素。
到了互聯網時代的后期,就連渠道商的競爭也同質化,并且渠道商的價格越來越高。
在這個時期,廠家會發現爭奪渠道效果已經很差了,幾個大的渠道已經被巨頭們把持了,想要突破必須開始爭奪消費者的心智。所以這個時期的策略是通過吸引眼球的營銷方案,讓用戶產生購買意愿。
支付寶誕生的時候是產品為王的時代,解決了用戶線上支付的問題,因此作為先驅者占據了線上支付的絕大部分市場份額。
騰訊作為支付領域的后來者,想要超越支付寶,怎么辦?
財付通是騰訊的第一次嘗試,依靠騰訊自己的電商渠道,財付通的市場占有率一度只有3.3%。這是因為錯過了產品為王的時代,而且在渠道為王的時代,騰訊的電商品牌也不是特別給力。
后來騰訊有了微信,然后有了微信支付。其中最大的使用場景是微信紅包。
微信紅包依靠用戶的自發使用,在2014年春節達到了458萬的用戶峰值。但之后的幾個月,用戶數從峰值持續下降,再也沒有回到這個數量。
照理說,微信紅包的產品沒問題,渠道更沒問題,微信的用戶量級可是比騰訊的電商用戶多得多。這時騰訊要再想突破,就只能從營銷端思考。
2015年,微信和春晚合作,搞了一個搖一搖搶紅包的活動。那天晚上,微信紅包的用戶數從400萬增加到了一億,而支付寶積累一億用戶用了大概8年的時間。
在幾年前,如果有人告訴你,做一個拼團類低價購物APP很有機會,你一定會對此嗤之以鼻。電商市場又不是沒有人做過這件事,就算是淘寶的聚劃算也沒做得太成功。
但是今天,拼多多依靠社交裂變的玩法,已經成了“五億人都在拼”的電商巨頭,市值都超過了百度。
拼多多殺入市場時,電商領域的產品、渠道都已經進入了白熱化的競爭階段。拼多多從營銷端發力,大力開展社交裂變的玩法實現了電商領域的突圍。
雖然拼多多的玩法也有價格的因素在里面,但是同樣有很多主打低價的產品卻沒法做到拼多多的規模,最主要的還是營銷的問題?,F在很多人想到買低價的產品,第一個想到的就是拼多多,這也說明了拼多多的營銷成功地搶占了用戶的心智。
另外,這個階段想要超越不單單是要做好營銷,而是之前的產品和渠道都不能少。
上述的兩個案例都是產品本身過硬,并且憑借微信這個大渠道作為基礎的。
其他的競爭階段也是一樣,必須做好前面階段需要做的工作,再做好當前的階段需要做的才有可能追趕領先者。
這是很多人學習4P理論時最容易忽視的點。
如果按照4P理論,劉潤老師還應該補充最后一個階段——價格為王。
單純價格戰這事技術含量太低,似乎不值得單獨來講。不過作為一種商業趨勢,目前互聯網行業部分領域的競爭態勢儼然已經走到了這一步。
在信息流領域,等到今日頭條成長到非常大的體量后,百度才反應過來。
為了快速奪回市場,百度在2019年的春晚狂砸9億紅包“買客戶”。這個活動和之前提到的微信紅包活動很像,但是仔細思考還是有一些不同。
春晚面對的幾乎是全國的觀眾,其中很多人平時并不太接觸互聯網。對他們來說,微信的搶紅包活動是沒見過的玩法,很新奇,很有傳播性。
微信搶紅包的這次活動,營銷的概念其實要要大于價格的概念。但是經過了這一次的用戶教育,加上之后的支付寶集五?;顒?,這種送錢的營銷活動對用戶來說已經不陌生了。
百度的紅包活動更多的用戶已經不是覺得好玩,而是單純地在衡量投入產出比。為了拿到這些紅包的錢,付出那么多時間劃不劃算。這成了單純的買用戶,單純的價格因素。
最近微視也搞了一次這樣的活動,邀請好友得3~10元的紅包。這說明短視頻領域也已經進入了競爭的大后期。
價格為王的階段是其他手段都失效的情況下,不得不采用的策略。
當然前提是產品足夠好,否則用戶也是留不下來的。
這里說的產品經理是那種創造性的產品設計工作,類似喬布斯、張小龍所代表的最初的產品經理的定義。
隨著現狀互聯網解決的問題越來越多,邊界越來越廣,想要再通過創造性的產品設計打動用戶已經非常困難了。而且很多功能模式都有了約定俗成的規范,發揮創造性的空間已經不大了。這導致現在的產品經理更多的是偏向項目管理而不是產品設計。
我的一個產品經理朋友,覺得自己原來所處的行業相對比較傳統,換了一家更加迎合年輕人的行業。
但是現實馬上教他做人,雖然新公司的產品更加年輕化,但是產品經理的工作其實沒有太大的變化,還是以畫原型、項目推進為主。
在可預見的未來,產品經理將離開互聯網的舞臺中心。
運營人才將接替產品經理的位置,站在在互聯網的舞臺中心引導之后的風向變化。當然,這里說的是大部分一線產品經理,如果你是牛人,你永遠都站在舞臺中央。
不同競爭階段的工作重心是不一樣的,所以在做職業選擇時,最好選擇那些適合自己發揮的行業和公司。
如果你是產品經理,那么最好是進入還在產品為王時期的行業。
如果你是渠道BD,渠道運營等,選擇那些競爭中期的行業。
如果你是活動運營,那么最好去那些競爭非常激烈的行業。
在適合自己的行業中,你的重要性得到了提升,擁有更多的機會學習和實踐,對于自我提升來說是事半功倍的。
有很多創業公司還保持著產品為王時代的思路。
它們所處的行業很可能已經在營銷為王的時代,卻還抱著精細打磨產品的意識,根本原因僅僅是因為領導者是產品和技術出身。
這類公司如果渠道端和營銷端沒有比較好的動作的話,很可能在燒光融資后就被迫關閉。而失敗的原因不是因為產品做的不夠好,而是沒有在正確的時間做正確的事。
有一些公司好一些,它們在產品為王的時代,通過打造優秀產品而崛起。但這種公司很容易形成路徑依賴,原來我們通過產品的優化成功了,那么現在就要繼續做好產品這件事。
但是產品體驗的護城河會慢慢被競品攻占,如果領導者不轉變身份,從“首席產品經理”變成精神領袖,那么很可能就會慢慢衰敗。
因為成功的企業家與市場的用戶的需求距離太遠,如果太專注抓產品的單點突破,就意味著在商業格局平衡和公司長遠戰略上的短視,結局自然不會太理想。
文章來源:人人都是產品經理
有理有據,有面有料,是一個設計作品的專業體現。之前花了四篇小文(鏈接在文末),講述如何提升設計師設計作品的內在含金量和外在形式感,今天,我們將用最后的篇幅,聊聊如何給設計作品創造一個盡可能完美的終局——交互文檔的細節。
千里之堤毀于蟻穴,再專業的交互設計,如果在后期交付時頻繁出現細節的缺失和補充,其實還是很容易遭受研發和測試同學diss的。甚至有可能因為一個細節的疏忽,導致整體交互方案的崩盤,不得不從頭再來。
如果研發過程中發生這樣的設計事故,其實是非常影響團隊士氣和個人專業影響力的。
設計細節篇,分兩個維度來闡述,一個是文檔外,一個是文檔內。
文檔外,其實是要回歸設計的初衷,很多設計師包括我自己,設計久了,總愿意把自己當作是用戶的代言人,盡可能的為用戶體驗著想,絞盡腦汁的尋求最佳體驗的設計,并以此為傲。
這如果是在產品發展的成熟期,功能相對穩定,體驗同質化嚴重,這個時候追求的體驗,尋求體驗的突破是非常有意義的,可以讓產品獲得更多的口碑,從而帶來更多的用戶和收益。
但是如果是在探索期和成長期,過度的追求單一維度的體驗,可能反而會成為一種產品發展的桎梏,阻礙產品的成長,而在衰退期追求的體驗,則完全背離了公司作為商業組織的利益點,會顯得和整個項目組格格不入。
產品生命周期與用戶體驗要求
所以對于探索期和衰退期的產品來說,設計師要盡可能考慮商業性和技術可行性。用最小的設計代價,快速的迭代,完成產品的目標(驗證價值或解決問題)。
如果設計師在這兩個階段太揪細節,可能會因為得不到項目的支持而心灰意冷。
技術可行性和商業收益,不是我們所擅長的領域,通過前面的設計法則和用戶埋點也不能準確推算,所以還需及時向技術及商務同學確認,別人家能做的產品形態,咱們家技術框架不一定支持。別人家能做的精簡,可能會損害咱們家的主營業務。
涉及到這兩點,除非有自上而下的旨意,否則單憑設計之力無異于蚍蜉撼樹,很容易讓自己費力不討好。
文檔內的交互細節,主要在于文檔的完整性和閱讀體驗,既要面面俱到,又要清晰簡潔。
面面俱到是指要盡量包含所有流程、頁面及狀態,避免遺漏。它體現了一個交互設計師設計思維的嚴謹性和設計態度。
網上有很多關于交互走查表的模板,非常的全面,但就是因為太過全面,反而讓很多新人設計師望而生畏,避而遠之,這就失去了交互走查表本身的意義。
我認為,交互走查表其實就是提供給設計師的一份幫助文檔,大家都知道在設計的時候,提示要盡可能的簡短,要適時出現,要清晰簡潔,遺憾的是我看到的交互走查表往往都不滿足這一條。
冗長的交互走查表,就像是冗長的幫助文檔一樣,把責任都推給了設計師,仿佛在說:誰讓你不按照我逐條檢查呢?
如果出現細節的遺漏,就變成了設計師自己的錯。
誰都不想遺漏,但是后期設計時間往往真的就很緊迫,設計師除了細節的補充,可能還有其他很多任務需要做,大家只是想確認一下而已,哪有時間和精力去看那么冗長的“幫助文檔”。
所以發揮一下設計師的同理心,根據二八原則,80%設計師可能遺漏的問題都只是認知走查表里20%的內容,這20%的內容也真正意義上影響我們80%的用戶和體驗,是設計者最為關心的。
那么,我們是不是先把這20%的設計解決好呢?這才是真正急設計師之所急,站在設計師的角度考慮問題。
所以本文精心篩選出最容易被大家所忽略,且大多數設計又必須要考慮的異常分支,為大家整理了一份《設計細節check表》,以確保主體流程的主要設計“面面俱到”。(流程設計、布局設計,以及互動設計,如果大家在前期有遵守對應的設計原則,再加上數據的支持,應該大方向都是正確的。我也希望大家盡量通過前期的理論和數據,去保證流程和整體設計的正確性,而不是要等到最后細節確認的時候,才來審視檢驗整體,讓細節篇,真的是在完善細節。)
設計細節Check表
我把這份《設計細節check表》按照從整體到局部進行了歸類:
最大的單元是指每個任務流程的檢查,然后是頁面單元,因為頁面涉及到加載的異常分支比較多,所以單獨拆出來和頁面狀態并列分別闡述。最后是組塊單元,主要包括輸入類和非輸入類的組件操作及反饋。
下面我們逐一來看:
流程檢查主要包括三點:
秉承一致性原則,同一個產品,能保持一致的地方,要盡可能保持一致。
在實際項目中,同一個產品,往往有多個設計師,每個設計師都負責相對獨立的一大模塊,偶爾就會涉及到相似功能的設計,因為是不同人在進行,所以設計出來的形態就可能不一致;
但對于用戶來說,使用相似功能的人,往往可能是同一撥人,設計的不一致,體驗就會有差異,不僅對于用戶來說學習成本高,而且對于項目組來說同時維系兩套不同的設計,成本也比較高。
如果一個流程的正向流程和逆向流程是完全一致的,一般無需特別說明,但是如果返回時需要跳過某些頁面或者狀態快速返回,則需要進行特殊標注,否則可能會被研發同學遺漏。
當遇到特殊情況,程序崩潰,后臺殺死,斷電等,進度是否能夠能自動保存并恢復,如果需要,就需要考慮恢復的時機和形式。
說完流程,再來說單獨的頁面。談到頁面時,首先要談的是加載狀態,畢竟頁面不是憑空就有的。
加載狀態主要要考慮以下幾點:
預加載的時機是什么時候,預加載的內容有多少?(對于用戶會長時瀏覽的內容,一般建議預加載,預加載的內容一般會結合內容大小、瀏覽時長、甚至網絡狀態綜合決定)
在信息未加載出來前,界面是顯示空白引導,還是默認占位符,還是顯示上一次的緩存內容?(一般有緩存優先顯示緩存,無緩存先顯示默認占位符,等內容加載完成后再進行替換)
是否顯示加載圖標,進度條,是否可以取消加載?(一般情況下等待超過0.1s,就能夠被用戶感知到,就建議顯示加載圖標,以便用戶知道程序已經接收到并在響應用戶的操作指令。如果等待超過1秒,就建議顯示進度條,并提供取消操作,便于用戶自主控制)
是全部加載,還是分布加載顯示?(一般情況下,在2~3屏內的有限內容,或者完全非同類的內容,是可以一次性全部加載的,因為用戶可能就是沖著某一類內容進來的,很可能會快速滑動到目標內容。
而對于同類型的圖文信息,而且是內容比較多時,一般都會采取分布加載的形式,避免浪費多數用戶的流量。
視頻播放機制、廣告圖片加載等,一般還要考慮網絡情況,一般WIFI情況下,因為對流量及網速的要求低,所以采用自動播放視頻,自動顯示圖片、播放廣告等,更容易被用戶所接收)
是否自動重試加載,何時進行超時提示等。(很多產品在設計時,如果不是完全無網絡,僅僅是網絡信息不穩定,會嘗試自動加載,以避免用戶手動操作。如果自動加載超過上限,才會提示讓用戶稍后再試)
頁面加載出來后,就要要考頁面本身的狀態了。
需要考慮的異常頁面狀態主要有以下幾種:
考慮完整體頁面后,最后再來考慮一下頁面內的組件狀態。先來看一下輸入類。
輸入框/文本框要考慮的主要有三點:
最后看一下非輸入類的操作組件。
“文本/圖標按鈕、鏈接、可操作的卡片/列表”要考慮一下幾點:
如果設計完成后,初步檢查以上五項內容,基本上可以確定主題流程的主要設計內容已經面面俱到了。
文章來源:人人都是產品經理
HMI是什么?這又和我有什么關系,如果你想置身于智能時代,HMI的認知是一個不可錯過,而海哥把這一生的精力投身于該領域,下面我們開始開啟這條認知之路。我將分三個部分闡述HMI,分別是:HMI是什么?HMI有什么用?誰在做HMI?
HMI,是英文Human Machine Interface的首字母縮寫,中文意思為“人機界面”,或“人機接口”,在國內用“人機界面”多,HMI是“人與機器之間傳遞和交換信息的媒介和對話接口”,可以簡單理解為是一臺微型的電腦,外形像平板電腦,比如蘋果的iPad,但是她有很多插口,像傳統辦公桌上的臺式電腦(后面稱PC電腦),有usb接口、網線接口、串行接口。通常HMI像個積木一樣,嵌入到機器上的,一般是自動化大機器,通過HMI來控制和監視機器的運作,你可以理解為HMI是一臺電腦,她控制打印機打印東西這樣的關系。海哥帶你看看HMI廬山真貌:
看起來是不是一個平板電腦嗎?對的,外形看起來像平板,但是它比較厚,而且很多電腦用的接口,而大家在生活中接觸最多的兩種HMI有兩種,一種是取款機,另外一種就是汽車中控。
下面,海哥帶你了解HMI組成,它是由兩大部分組成的,就是硬件和軟件。
HMI硬件方面,像PC電腦一樣,有五大模塊:處理器(如CPU)、顯示單元(如顯示器)、輸入單元(如鼠標、鍵盤)、通訊接口(如網卡)、數據存儲單元(如硬盤),那一個優質的HMI硬件主要看哪方面呢?就是處理器,處理器有8位、16位、32位,數字越高,處理能力越強。接下來看看硬件周邊的接口,HMI可以連接很多種設備,比如可編程控制器(簡稱PLC)、變頻器、直流調速器、儀表和工業設備等,它們連接到HMI的串口接口,串口的類型有RS232、RS485等。
好了,上面大概對HMI的硬件有初步了解,下面海哥帶你看看軟件部分,軟件部分包括兩部分,就是系統和畫面組態軟件。系統就像PC電腦的windows系統一樣,有自身硬件運作正常的系統,比如我們華為的鴻蒙OS系統。接著就是畫面組態軟件,其實就是像windows里面的Word軟件,叫法上不一樣而已,常規情況下畫面組態軟件只有一個,不能像windows那樣裝很多種類型軟件,而HMI固定是裝一種,我們常規叫他為“工程”,當然汽車上的HMI,就像平板電腦上,功能和軟件都很豐富,因為它是滿足消費者人群的,而只運行一個軟件的,多用在工業機器上,可以減少HMI資源消耗,還能保證整個HMI的穩定性。
海哥剛開始對組態軟件不太懂,組態到底是什么?“組態”(Configure)是“配置”、“設定”等意思,它讓用戶像搭積木一樣,把所需要的軟件功能搭建起來,不需要編寫計算機程序。目前常用的組態軟件有:iFix、Vijeo Designer、WinCC、組態王、MCGS,不同廠家的HMI硬件使用不同的組態軟件,所以他們連接要有不同的驅動程序,這對技術人員來說,學習成本還是比較高,因為目前還沒有一個巨頭來定義這個通用標準,而最近華為的鴻蒙OS系統,開始定義行業的平臺標準,海哥個人覺得這是一件了不起的事情。下面看看常用的組態軟件長什么樣子,我們用WinCC作為例子。
接下來,海哥告訴你HMI的分類,大概可以分三種:
(1、薄膜鍵輸入的HMI,顯示尺寸小于5.7ˊ,畫面組態軟件免費,屬初級產品。
(2、觸摸屏輸入的HMI,顯示屏尺寸為5.7ˊ~12.1ˊ,畫面組態軟件免費,屬中級產品。
(3、基于平板PC計算機的、多種通訊口的、高性能HMI,顯示尺寸大于10.4ˊ,畫面組態軟件收費,屬高端產品。
對于高端HMI產品,面對5G的個性化定制的市場特征,HMI的“配方功能”會很重要,所謂配方功能,就是一臺設備完成不同種類工件的加工,這需要人機界面上具備配方功能,在加工A產品時,執行A配方,加工B產品時,執行B配方,比如西門子公司的MP系列,而如果要實現千人千面的生產需求,也許配方更是一個海量級的,這也是自動化所面臨的機遇與挑戰。
下面說說工作流程,一個HMI制作應用的制作過程大概是這樣的流程:
海哥簡短解釋一下這些流程,在日后海哥會在每個模塊都會有細節教程。
市場調研:了解到市面上的數據量,比如手機用戶數量,大部分用戶使用時長,競爭對手處于什么樣的狀態等;
用戶畫像:了解用戶的年齡、地區、行為習慣、心理習慣等,并賦予到一個場景中,了解用戶在場景中的整個活動和心理的過程;
需求定位:了解到目標用戶的特征后,定制產品或的重點價值,用戶為什么需要你,你有什么不一樣;
頭腦風暴:由不同崗位人員,一起想點子,先暢所欲言,再根據調研和需求來判斷合適的點子;
原型設計:原型簡單理解為手工紙質品,或模型,可以用塑料泡沫或電腦的Axure等軟件,做出實體或虛擬的產品,這需要快速簡單進行;
可用性測試:測試原型是否可行,讓一些陌生人用用,看他們能理解這是什么,會不會用等;
高保真設計:就是把“毛坯房”變成精裝修,開始做最終的視覺效果;
開發制造:開發與機器制造,實現功能;
測試修復:用一種極端條件來檢查產品有沒有問題,比如24小時運作會不會有問題,突然斷電有沒有問題;
版本迭代:第一代產品做出來不等于成功了,因為市場在變,用戶也在變,需要保持變化,優化產品。
下面是一些問題,可以幫助大家更好了解HMI:
問:HMI看起來不就是一個很厚的觸摸屏嗎?
答:HMI是由兩部分組成,分別是硬件和軟件,而像手機或平板的那種觸摸屏,只是一個觸摸的硬件,這種只是讓你能觸摸的部件而已,可以理解為臺式電腦上的顯示器,只是這個顯示器可以觸摸。
問:PC電腦能當HMI設備用嗎?
答:當然可以,只是PC電腦不在會嵌入到機器上,而是通過很長的線或者無線網絡連接到機器,而PC電腦需要通過HMI的軟件,來操控機器。
問:SCADA與HMI的區別?
答:SCADA是監控和數據采集系統,英文是Supervisory Control And Data Acquisition,它包含HMI,SCADA是整局的工業控制系統,范圍更大。
HMI有什么用?海哥認為,有機器的地方就有HMI存在的可能性,特別是5G物聯網的“萬物互聯”的到來,數據不只是在電腦上流動,還會在機器、衣服、鞋子、碗、車等場景中串聯,而把目光放在當下,HMI應用領域已經在機器、工廠、建筑物、汽車、高度監管的制藥和食品行業、石油/天然氣、采礦等領域已經有運作,從這些行業屬性來說,你有沒發現從事HMI的行業的人,它的市場體量有足夠大的想象空間?哈哈,別拉后腿了,與海哥一起跟上。
目前的HMI可以做些什么呢?
(1、實時的信息狀態與趨勢顯示;
(2、圖形化、流程化控制生產線監控和控制;
(3、警報的產生和記錄;
(4、歷史信息的自動記錄、報表自動生成;
HMI的意義有哪些呢?
(1、發揮機器應有的功能,因為你可以通過數據顯示上了解到;
(2、人工合理調節機器參數,讓機器間的協作、使用效率提高;
(3、HMI預警能確保安全與經濟提升;
(4、讓使用者操作機器和系統更友善,符合他們的生理、心理的需求,提高使用者的滿意度;
想在這個行業有所作為,我們怎么能不知道行業的頂尖高手在哪呢?有了標桿,起碼可以衡量我們自身的水準,還有我們缺什么,從另外一個角度來說,你如何作戰略選擇,讓自己也能從差異化中,變成另外一個頂尖高手,下面我們看看專注于HMI的企業,海哥找來自動化制造類的和汽車類的,行業很深很大,日后海哥繼續挖掘新的。
下面是自動化領域HMI企業。
三菱
三菱奉行的企業經營理念“Changes for the Better”,“One三菱電機”為中國“更好的未來”和實現“更好的社會”做貢獻為經營理念。e-F@ctory靈活運用IT技術,將生產現場與上層信息系統直接相連。即可實現工廠的“可視化”,同時又能促進生產設備的高性能化和最優化,縮短開發及調試周期,降低運用及維護成本,從而削減生產工序的整體成本,實現“工廠全面最優化”
西門子
網址:www.industry.siemens.com.cn
面對日益復雜的機器和系統過程,作為一站式供應商,西門子專門設計開發出了 SIMATIC HMI 人機界面技術。SIMATIC HMI 采用開放式、標準化硬件和軟件接口,可快速集成到用戶的自動化系統中,從而滿足用戶的特定人機界面需求。
施耐德
施耐德電氣是家居、樓宇、數據中心、基礎設施和工業領域能源管理與自動化技術數字化轉型的領先企業?!拔覀兊目萍?,無處不在”,施耐德電氣確保每一個人,在任何時間,在任何地方都能盡享能效之利。
歐姆龍
創立于1933年的歐姆龍集團是全球知名的自動化控制及電子設備制造廠商,掌握著世界領先的傳感與控制核心技術。通過不斷創造新的社會需求,歐姆龍集團已在全球擁有超過35,000名員工,營業額達8,595億日元。產品涉及工業自動化控制系統、電子元器件、汽車電子、社會系統、健康醫療設備等廣泛領域,品種多達數十萬種。
BEIJER 北爾
北爾電子成立于1981年,總部在瑞典南部的Malm?。北爾電子是上市公司北爾集團三大事業部之一。北爾集團的客戶包括 阿法拉法(Alfa Laval)、龐巴迪(Bombardier)、阿爾斯通(Alstom)和艾默生(Emerson)等要求苛刻的大型跨國企業。2018年北爾電子集團銷售額達到14億瑞典克朗。
臺達
臺達成立于1971年,總部在臺灣,為全球提供電源管理及散熱解決方案,秉承“Smarter. Greener. Together.”的品牌理念,自動化模塊中,專注于交流馬達驅動器、電源治理、感測、控制與運動等產品領域的創新研發,同時整合工業自動化產品,繼而開發工業控制網絡,為全球客戶提供全方位的解決方案服務。
汽車中控領域HMI服務企業中,海哥找了三家,他們分別是:HARMAN、INTELLIAS、ELEKTROBIT。
HARMAN
1980年成立,總部在美國,它是三星的子公司,公司員工規模過萬,開發聯網汽車系統,音頻和視頻產品,企業自動化和互聯服務。北美,歐洲和亞洲汽車制造商是哈曼的客戶。該公司還是HMI軟件開發服務的先驅提供商。
INTELLIAS
Intellias是一家定制軟件工程公司,專注于汽車、基于位置的服務和金融技術行業。公司員工規模上千人。Intellias被Inc. 5000公認為歐洲最有前途,發展最快的私營公司之一。該軟件開發公司也被列入全球外包100。
ELEKTROBIT
作為汽車軟件行業的領導者,憑借 30 多年為本行業服務的經驗,EB 的軟件為 1 億多輛汽車中的逾 10 億臺設備提供支持,并提供針對互聯汽車基礎設施、人機界面 (HMI) 技術、導航、輔助駕駛、電子控制單元 (ECU) 和軟件工程服務的靈活、創新的解決方案。
總結一下,今天的《海哥HMI人機交互》,海哥帶你了解了HMI是什么,可以簡單理解HMI就是一個平板PC,既包含了硬件,又包括了軟件系統,硬件方面核心是看處理器,而軟件方面需要用組態軟件來開發,針對項目來做定制開發,開發出來的工程文件,通過串口下載到HMI的處理器上,這樣HMI就可以管控自動化生產的設備,HMI是SCADA總要組成部分。
文章來源:站酷
Sketch 58 Beta 版本已于近期推出(其實最近一段時間已更新了好幾個測試版),官方終于推出 Smart Layout 智能布局,讓 Symbol 組件獲得響應功能,變得更加靈活和強大。
之前我們只能使用第三方插件來制作響應式組件,比如之前介紹的 Kitchen 和 Anima。不過畢竟不是官方親生的,難免會包含一些 bug 和不足。
比如 Kitchen 插件在制作 Symbol 組件的時候,其自動排版功能會出錯。Anima 插件對上傳到藍湖的標注會有顯示問題。關鍵是在團隊協作的時候,其他使用源文件的同學也必須安裝對應的插件,否則沒有效果。
那么這次 Sketch 58 Beta 版本新推出的 Smart Layout 智能布局功能,能否解決長期困擾設計師的響應布局問題呢?一起來看下。
如果想體驗 Sketch Beta 版本,請進入 Sketch 測試版主頁下載→https://www.sketch.com/beta/。但是要記住,一定不要用在自己的正式文件中,防止修改后,低版本打不開。
Sketch 58 要求 Mac 系統版本是 macOS High Sierra 10.13.4 及以上,下面是 Sketch 各大版本對應的 Mac 系統版本,如果遇到新版的 Sketch 打不開就需要檢查下自己的系統版本。
本次 Sketch 58 Beta 最大的更新就是 Smart Layout。
在新建 Symbol 組件時,彈窗新增 Layout 選項,總共有 7 個屬性,分別對應不同的圖標,下面是每個屬性的簡單介紹。
1. No Layout
正常布局,也就是和原先一樣,沒有特殊效果。
2. Left to Right Layout
賦予 Symbol 組件智能布局效果,組件尺寸會根據內容變化,方向是水平從左往右布局。
3. Horizontally Center Layout
同上,方向是中間往左右兩端布局。
4. Right to Left Layout
同上,方向是從右往左布局。
5. Top to Bottom Layout
賦予 Symbol 組件智能布局效果,組件尺寸會根據內容變化,方向是垂直從上往下布局。
6. Vertically Center Layout
同上,方向是中間往上下兩端布局。
7. Bottom to Top Layout
同上,方向是從下往上布局。
另外在選擇好 Layout 屬性后,Symbol 頁面的畫板組件圖標會發生變化,除了 No Layout 布局還是之前的畫板圖標之外,其余 6 個都有對應的新圖標,看下圖。
此外,選擇畫板后,右側的屬性面板中會新增布局選擇功能,包含上面講的7種屬性,可隨時對 Layout 布局進行更改。
看上面的描述還是比較迷惑,實際上智能布局簡單來說,就是賦予 Symbol 組件內容邊距的功能,尺寸隨內容變化而變化,有點類似于前端 CSS 中的 padding 屬性。下面用實際例子展示。
以前我們使用過 Kitchen 和 Anima 制作過彈性按鈕。需求是,文字兩端的邊距(即CSS中的padding)保持固定,文字數量不固定,按鈕寬度隨文字內容走。
那么在 Sketch 58 中,我們先制作一個按鈕,文字兩端的邊距是 20。
轉化為 Symbol,出現彈窗,在新增的 Layout 下拉中,選擇 Left to Right Layout,這樣文字變化時,左邊是固定不動的,內容往右邊延展。
這樣一個彈性按鈕就做好了,不管文字有多少,兩端邊距永遠保持固定 20。和前端 CSS 中的 padding-left 和 padding-right 功能一樣。
如果這個時候我們再拉伸 Symbol,右側 Overrides 會出現一個新的圖標:縮小實例以適配內容。點擊后,被拉伸的組件會還原為文字內容長度。
注意,這個和原先的重設覆蓋層圖標不同,不會清除覆蓋的文本內容,只會還原為適合內容大小。
以上是從左往右的布局,水平兩端和從右往左也是一樣的道理,只是方向不一樣,下圖是從右往左的布局。
這就是智能布局的主要功能,賦予 Symbol 組件 CSS 代碼 padding 屬性,具備響應特征。還需要注意的是,智能布局目前只針對 Symbol 組件,Kitchen 插件是可以作用于普通組的。
上面是單個組件的智能布局,如果是嵌套組件呢?也是可以的,一起試下。
我們把剛才做的按鈕橫向分布三個,再一起做成新的按鈕組 Symbol 組件,結構看下圖。
新的按鈕組內,每個按鈕已經是響應式的,那么做成組后就會保持組內元素的間距固定,更改下文字內容看下圖。
非常棒,已經滿足了我們剛開始的需求。但是不建議嵌套過多,要保持組件化設計思維。當然了,間距問題,Sketch 57 已經提供了多元素間距調整功能,只多了一步,但是不用把整體再次轉化 Symbol,大家可以根據自己的需要靈活選擇。
以上講的是水平方向布局,同理垂直方向布局道理也一樣,我們以最常見的信息卡片為例子。一般情況下卡片圖片不變,標題和內容文字的不固定會導致卡片整體高度也會發生變化。利用智能布局我們可以讓卡片變成響應式擴展。
確定好上下左右的間距,例子中用的 16,然后建立組件,Layout 選擇從上往下布局,這樣標題和內容文字增多,上下的間距是保持不變的,內容高度自動增加。
以上就是 Sketch 58 Beta 版本新增的 Smart Layout 智能布局介紹。關于這個新功能,我們還可以做很多響應式的組件,提升設計效率。Sketch 的更新速度也在加快,很多之前第三方插件才可以實現的效果也被官方一一收入囊中。希望 Sketch 的發展越來越好,成為設計師真正的設計利器。
58 版本的歡迎界面也做了大更新,至于好不好看就因人而異了。最后來一睹芳容。
文章來源:優設
這幾天,各個產品群設計群又被「綠洲」的話題刷屏了,自從8月29日新浪悄悄上架了這款產品后,一時間中國版ins、意圖稱霸圖片社交、趁小紅書下架搶占用戶等等說服層出不窮。今天我們就從一個設計師的角度,看看綠洲這款產品有什么不同。
綠洲是一款社交產品,從已經看到的產品功能和內容上,類似ins,也就是說他是一款圖片社交產品,由新浪推出,目前處于內測階段,除官方邀請的kol外只能通過邀請碼注冊使用。
社交產品在國內難做大家都知道,原因也不必再說,但社交產品一旦做成產生的巨大利益和助推力又讓國內大大小小的公司都在向這個寶藏發起沖擊。那么為什么新浪選擇的是圖片社交產品呢?
首先是基于國內市場,還沒有出現一家獨大的圖片社交產品,不像國外已經有了ins,國內的圖片社交領域勉強還能算作是「藍海」,加上最近小紅書下架導致市場有短暫的空白,大批kol和內容生產者出走。也正是推出這款產品的良好時機。
當然也有一種說法是:國內的社交產品形態存在「跳代」的現象,從文字社交直接跳到了視頻社交,并已經有了很成熟、用戶規模極大的產品抖音,所以從產品發展形態來看,圖片社交產品在國內并沒有什么生存土壤。這里我直接說出自己的觀點:我認為圖片社交在國內還是有機會的,而且機會不小。對此我有以下幾個維度的思考:
1. 信息含量和傳達效率
首先不可否認的是圖片的信息含量是遠遠大于文字的,使用圖片能夠更的傳達信息和更豐富的情感,想一想過去很多偉大的文學作品往往需要用一本書來體現某些情感和精神。但是在科技社會里,往往是一張攝影作品更能震撼人心,圖片中包含的信息更加直觀,人物、場景、顏色、故事都可以直接呈現在用戶面前,而不需要通過文字進行描寫,也不需要運用很多寫作技巧進行鋪墊。這并不是說圖片比文字更優秀,而是說圖片的形態在互聯網產品中可以更的傳達信息和情感。
說到這可能有朋友會說:圖片的信息和情感的傳達更,那視頻也同樣比圖片的信息含量更多,更,為什么圖片社交還有機會呢?這就要說到下一個維度—內容生產門檻。
2. 內容生產門檻
無論是圖片社交還是視頻社交,內容都是產品中極重要的一部分,例如現在大家在看抖音時,大部分高質量內容都是由專業的內容生產者制作的,其中涉及到選題、劇本、拍攝、剪輯、后期、壓縮等等流程,即使不是專業的團隊生產也是身兼數職的多面手生產者。流程一長,工作量也就大大增加了。工作量一增加,門檻就會變高。如果不是為了靠抖音賺錢、如果不是為了增粉變現,又有多少人能投入這么多精力和時間去生產內容?內容不多、質量不高又怎么吸引更多用戶來使用-參與-生產最后形成閉環?
綠洲則不是這樣,雖然用戶可以上傳視頻,但主要的內容還是圖片,拍一張圖片的各種成本要比拍一段視頻小太多啦,結果就是有更多的內容生產者可以參與進來,而不是被高門檻攔在產品之外,當你生產了一段內容,至少要發給幾個親朋好友來看看吧?即使只在產品內部發個動態,如果有人為你點贊、評論、又關注了你,至少再拍一點的動力會大一些吧?這樣循環下去,內容、用戶就全部都有了。舉個極端一點的例子,如果微信只能發圖片,那么還會有這么多人使用嗎?原因也是圖片的生產成本要大于文字(非文學作品的文字)。所以我認為,內容生產門檻也是綠洲的優勢之一。
3. 信息接收程度
最后一點則是大眾用戶的信息接受程度。我們可能從新聞報道上經常能看到體育記錄的突破,例如幾十年前科學家預言了人類短跑極限早就被突破幾十次了?;蛘呤强吹饺祟惼骄鶋勖谶^去幾百年的時間里提高了幾十歲。這里我想說的是:當互聯網尤其是移動互聯網普及之后,人類對于信息可接收量增加了多少?過去看紙質書和現在拿著手機,每天閱讀文字圖片視頻等等能達到過去的多少倍?這里我沒有找到專業機構的研究報告。但是這個增長程度我想大家的意見應該會十分一致。
信息接收能力的提高會倒逼著改變產品形態、過去我們每天只能接收2000個文字和50張圖片,所以我們習慣看報紙?,F在我們每天能接受10000個文字和300張圖片,所以我們在用頭條用微信用微信用抖音。當用戶有了適應一項改變的基礎,那么必然會出現滿足用戶這種進化的產品。抖音是,綠洲可能也是。
4. 磨刀霍霍的kol和網紅
前幾年無論公眾號、頭條號、直播很是催生了一批實現財務自由的幸運者們,但更多的確實沒有抓住平臺早期紅利的玩家,在眾多自媒體和直播平臺都成熟之后,想要從中獲利是越來越難了。這時候出現了一個新興的、并且很有潛力的新平臺。那這些錯過了上一波機會的預備役kol和網紅們會不會蜂擁而至呢?而更多的現有kol和網紅為了鞏固自己的地位、擴大影響力和粉絲規模也同樣會去參與一番。去了之后為了自己的利益更是會給更多人安利這個產品。
說他有潛力是因為它占據的天時、地利與人和。天時已經說過,市場潛力巨大又縫小紅書下架,地利則是國內暫無一家獨大的圖片社交產品,人和則是擁有幾億活躍用戶的微博作為后盾。如此的產品,再加上利益驅動。想必內容方面已經問題不大了。
5. 內測+邀請的機制
這幾天下載了綠洲的朋友們應該都知道,如果你沒有邀請碼的話即使下載了也是不能注冊的,整個產品還處于「內測階段」 。只有前期官方邀請的部分kol和少量內測用戶才能使用,每個內測用戶又只能邀請一定數量的更多用戶。并且整體內測數量也有限制。截止9月4日下午內測人數已經滿了,之后即使有邀請碼也不能注冊使用。那么這個內測+邀請機制有什么好處呢?
有種說法是饑餓營銷,利用用戶越得不到越想要的心理來獲取更多用戶。但這種說法有點說不通,因為內測總人數是有限制的。并且現在不是幾年前了,可能今天你內測限制注冊人數那明天用戶就把你忘了,畢竟現在產品這么多,娛樂活動數不勝數,已經不是十年前那個產品稀缺的時代了。我大概有兩點猜想,一是產品方希望通過內容試水,看看產品在市場上的反饋,進而做出符合國內用戶習慣的修改再大規模推廣(嗯,之所以要做符合國內用戶習慣的修改是因為他太像ins了~),二是產品方希望變「爆火三天死」為「細水長流」,之前的馬桶MT、聊天寶、包括子彈短信等等產品在剛剛發布的時候都是非?;鸨⒂脩粼诙潭處滋熘畠染瓦^了百萬大關,但是現在呢?還有多少人在繼續用?增長曲線還敢貼出來嗎?而使用了內測+邀請機制則不同,一方面可以保持用戶維持一定數量的增長,一方面又不會因為用戶的三分鐘熱度而快速冷卻,對于社交產品而言,如果你身邊有朋友在用,那你繼續用的概率就會大很多。如果你發現你身邊的朋友在用,那即使你已經卸載了也有一定可能重新下載回來再用一用,也就是用細水長流的方式不斷召回之前的用戶,用留存做增長。
上面說了一些我為什么認為綠洲(或其他圖片社交產品)有一定生存空間的原因。下面我們來看看綠洲中一些很不錯的設計細節。
1. 條目巨大,更重視內容質量
用戶的一條動態(在產品設計中我們一般習慣稱之為條目,下面以條目稱呼它)往往占據了一整屏的空間,作者使用的還是長度較長的全面屏手機依然如此。這種設計可以在一定程度上說明產品方比較重視內容。做產品設計的朋友應該都知道:條目占據的空間越大一般包含的信息量就越多,也更容易形成轉化,對應到綠洲中這個轉化就是點贊、評論、關注等等用戶的操作。一旦用戶做出這些操作,就會對產品形成更深度的使用習慣,也就有更多可能性變成活躍用戶。當然條目占據空間過大同樣有風險,也就是如果這一條內容的質量不夠高的話用戶可能會產生流失,因為用戶可能并不會繼續向下滑動去看下一條內容了。所以一般內容質量較高的產品條目占據的空間較大,質量較低的產品條目占據空間較小,希望一屏之中能夠容納更多數量的條目,用戶數量換質量希望其中能有一條對用戶形成轉化。所以綠洲的這個設計細節作者猜測是產品方重視內容的體現。
2. 上傳圖片,實時看到效果
如下圖:
當我們在上傳圖片時,頁面上部為圖片的放大展示圖,頁面下部分為縮略圖,用戶可以在選擇圖片時實時看到自己選擇的圖片的細節,舉個例子,如果某漂亮妹子想發張自拍,但是相機里保存的是幾十張連拍照片,此時她就可以在選擇圖片時直接看到自己當前選擇的圖片是否是自己最滿意的一張。而不需要上傳后才能看到,或是切換到系統相冊中去查看,再記住那張自己最滿意的照片的位置再回來重新上傳。
我們常見的產品中上傳照片時一般都是直接顯示縮略圖,好處是頁面效率高一屏可以展示更多圖片,壞處是不能直接看到照片的細節。這種設計比較好的平衡了這個問題。關于上傳圖片的優秀設計我們前幾天還分享了ZAO里面的一個設計案例,下圖是ZAO核心流程中的兩個頁面,是選擇「影視劇片段」和「上傳替換素材」的頁面:
在此頁面選擇要替換的人物,點擊后進入下圖上傳素材,選擇從相冊選擇。
我們可以看到,當我們選擇從相冊上傳素材進行替換時,系統已經自動對相冊內的圖片進行了判斷,在用戶上傳照片之前就對照片清晰度是否合適進行了提示,而不是上傳后再給一個彈框。
作者對這個設計細節大致想法如下:
與上面案例相關的東西作者還想起了閑魚:
一是閑魚中,當用戶上傳的商品圖片比較模糊時系統會提示用戶重新上傳,以提高二手物品的賣出速度。這里的設計是在用戶上傳圖片進行提示,作者覺得就沒有ZAO中這個設計體驗更好。
3. 更強、更方便的互動方式
社交產品中,用戶之間的互動率是一個十分重要的指標,對內容的點贊評論可以很大程度上加強用戶粘性,使用戶與用戶之間產生關系鏈,這樣用戶流失的概率就會小很多。一般的產品中常見的功能像點贊評論在綠洲里也有了不一樣的變化,并且體驗還真的不錯,如下:
當用戶對某一條消息產生了互動的傾向時,可以直接使用三個表情表示不同的情緒,分別是愛心、鼓掌和笑哭,如果想要評論的話只需要點擊WOW按鈕系統就可以自動生成一句評論,不需要用戶自己思考寫什么內容,這樣用戶進行評論操作的成本就大大的降低了。如果對生成的評論不滿意的話還可以再次點擊生成不同的評論。
4. 不足的用戶認知負荷
當然作者同事也看到了體驗不是很好的設計細節,如下圖產品中使用了太多無文字按鈕,導致根本不知道這些都是什么功能,綠洲對自己的介紹是更清爽的朋友圈,如果說是為了讓界面更干凈簡約才使用了這樣設計的話我覺得有些本末倒置了,國內用過ins的用戶畢竟還是少數,對于大部分用火狐來說綠洲還是一款陌生的產品,在陌生的產品中使用這種不能明確表達功能含義的無文字按鈕則讓用戶十分迷茫,大大增加了認知負荷。
昨天晚上作者在家附近的面館吃飯,正在等著自己的油潑面、羊肉串、拍黃瓜、小酥肉、酸梅湯的時候看到了一件事:某50歲左右的大叔點菜說想要一份涼皮。
服務員問:您是要麻醬涼皮的還是秘制涼皮?
大叔猶豫一下,問:秘制涼皮是什么的?
服務員答:就是有涼皮和面筋摻一塊,放上醋、鹽、香油、辣子,酸甜口的可辣可不辣。
大叔繼續猶豫了一下說:那給我來個麻醬涼皮吧。
故事到這開始有點意思了,這個用戶(大叔)對秘制涼皮是沒有概念的,雖然經過服務員解釋之后明白了是什么,也知道了口味,但是對于「秘制涼皮」這個概念的熟悉程度還是比較低,所以最終沒有選擇它。這和我們在進行產品設計時對一些文案的設計很像。大家第一眼看過之后能明白是什么意思嗎?反正我是沒有明白。不明白就會產生認知負荷。也就會影響向下的轉化率。當用戶點擊幾次沒有找到自己想要的東西之后,他也就走了,去哪了呢?可能是「商城」「歷史文章」「限時促銷」這些他明白是什么意思的地方。
你只是綠洲,你還不是微信,這樣的設計有些為時過早了。
昨天我故意吃的比較慢,觀察了一下麻醬涼皮和秘制涼皮的購買人數,在大約40分鐘的時間里,大約有7人選擇了麻醬涼皮,2人選擇了秘制涼皮。服務員大約解釋了4次什么是秘制涼皮,每次大約需要20秒,加上顧客猶豫的時間,這40分鐘里服務員大約多花了3分鐘時間解釋、等待用戶做選擇。
如果把這種場景放到我們的產品設計中則意味著更低的效率、更少的使用時間、更低的轉化率。以及推出新功能之后更少的使用率?,F在很多產品中對功能的命名都基本一致、一些常規圖標的樣式也都基本一樣。目的也就是為了減輕用戶的認知負荷。
2019年7月20日,UXRen北京舉辦了《如何通過體驗設計賦能產品增長》的沙龍分享,本文基于嘉賓 何曉頔(搜狗高級用戶研究工程師)的現場分享總結而成。
何曉頔2015年開始從事用研工作,2018年加入搜狗,目前在搜狗搜索擔任用戶研究工程師;期間支持搜狗搜索相關產品的用戶研究工作,完成搜狗閱讀app、搜狗搜索app、搜狗圖片搜索改版研究,搜狗醫療搜索系列研究,搜狗翻譯app調研等項目;擅長全局思考問題,綜合考慮各方訴求,通過研究方法的熟練運用,需求的深度解讀,結果的產出,不斷提升用研的影響力及價值。
由于用研資源的緊張,傳統研究模式周期長,使得用研游離在項目邊緣,融入難,導致時效性跟不上整個項目的推進,出現信息不對等的情況,從而造成研究方向的偏差,而且研究結果也會和設計、產品的需求脫節,造成落地難的問題。
敏捷用研可以很好的解決這個問題,它可以很好地融入在項目的各個階段中,能夠在3-5天內地完成調研需求,真正融入到整個項目的流程中,在每個階段都以結果導向的解決問題,形成每個階段的連接器。所以說他以用戶思維為核心,通過用研的驅動性,增加用戶在整個項目中的參與度和體驗感,不僅能夠實現成本的減少,還能提高響應的效率,實現信息層面的對等,還原用戶的真情實感,性價比高的同時還提升了用研的價值。
敏捷用研可以在敏捷項目的各環節中發揮作用,而且在不同階段可以有針對性的解決問題。
2.1 改版前
需求分析
用戶點擊行為研究
書城結構布局研究
2.2 改版中
用戶需求挖掘
搜索行為探索
2.3 改版后:改版效果評估
2.4 項目合作模式
3.1 招募策略——健全流程
招募問卷設計
招募渠道
招募用戶特征及數量
獎勵機制
3.2 研究策略——模板化、透明化
模板化:搭建問題包,分門別類、系統整理,隨時調用、整合
過程透明:邊訪談邊總結,根據需求,隨時調整、直到數據樣本趨于穩定
3.3 溝通策略——循序漸進
結合迭代研究模式,從小范圍調研起步,與客戶及時共享研究進度和成果,循序漸進:
3.4 參與策略
3.5 小結
敏捷調研不是為了快而快,而是快速解決產品需求和設計問題打造好的體驗!
問題1:內部用戶招募。國企,公司logo優化調研, 因為時間和成本的關系,邀約的是公司的內部員工(年齡集中在40-50歲區間段),調研的結果內部員工更偏好原logo的微小變化的版本,與設計方期望差別非常大,想知道是否是不應該找內部員工測試。
回答:就上述問題,不建議找內部員工測試。
內部招募是一種短平快的用戶招聘渠道,但是,
問題2:概念測試。概念型產品可以用電話訪談的形式進行測試么
回答:概念型產品,由于屬于市場上未出現產品,很難在電話中通過語言描述的方式讓用戶理解和想象出來,因此,概念類測試不建議用問卷和電話訪談的方式,建議通過面對面訪談+高保真原型展示的方式進行測試,如果實在滿足不了高保真,哪怕線框的示意圖都比單薄的語言描述更強。
問題3:用研考核機制。用研的輸出建議,有些被采納,有些不被采納,采納的建議到產品成型很多已不是建議的“原型”了,如何衡量用研結果的直接作用。
回答:
每一次學習改版案例,不僅僅只是去看在視覺層面的變化,更多的應該是要學習到作者改版背后的思考。為什么要這么改,原因是什么,目的又是什么,怎么做,有哪些限制等等,有很多東西要去思考。所以,帶著問題并結合自己實際中所做的項目來看案例,應該會是一個很有收獲的過程。
Booking.com繽客 是一家荷蘭初創公司,并已經發展成為全球最大的旅游電子商務公司之一。
在Booking上,旅客可以選擇世界上任何一處的住宿地點,包括公寓,度假酒店,民宿,五星級豪華度假村,樹屋甚至冰屋等等。每天,通過平臺預訂的房間數超過155萬。無論是商務旅行還是休閑旅行,人們都可以快速輕松地預訂到理想的住處。
自從Booking發布以來,許多競爭對手都采用類似的商業模式瘋狂跟進,搶占市場,并且在某些方面比Booking本身做的還好。
在調研的前期階段,我去搜集了一些競爭對手和類似的平臺,分析UI,用戶體驗,用戶地圖,信息架構和關鍵功能。但是我并不會花太多時間過于深入的去分析這些產品,因為我希望將重點放在Booking這個產品本身的訴求上。
在之前的調研過程中,我發現了許多不同的使用場景,經過匯總歸集,我集中關注以下3個場景:
在進一步的研究中,我明確了4位具有不同需求和不同目標的典型用戶,這些數據對于改善不同用戶的體驗非常有用。
這個分析的目的是通過梳理最佳的用戶流程并提升產品體驗,來為不同需求的用戶提供最好的用戶體驗。
△ 數據來源:在線研究和用戶訪談(30個用戶樣本)
收集用戶評論,從中我收到了很多有價值的反饋,這些評論中沒有特別明確指出是可用性或功能性的問題。我將這些反饋分為4類(譯者注:對反饋的問題進行提煉整理):
毫無疑問,最相關的是預訂被取消的問題。太多用戶會注意到不合理的費用或與房間的主人取得聯系時遇到困難。
基于30個用戶樣本,我試圖獲得進一步的用戶反饋,從中注意到以下的幾點事實:
我想引用一段話,來總結這里面遇到的問題,這段話也蠻有意思的,它說的是:
「與其他應用比較來看,套路顯得有點多,會讓你覺得一切看起來都蠻劃算,總是想多賣一些東西給你?!?
總結之前的分析,我提出了以下幾點觀點:
從用戶痛點出發,嘗試找到合適的解決方案,來提升產品體驗。
1. 主頁
總的來說,我對首頁進行了大手術。主頁的搜索功能已經完全重新設計,減少過多的干擾信息。
導航:我設計了一個新的導航欄,剝離出「已保存」功能,這樣用戶就可以快速找到自己所收藏的商品。此外,我也優化了「交易」的模塊,后面我會詳細的說說這塊的改動思路。
其它功能 :至于之前的版本,我保留了搜索和相關推薦的功能,重新設計界面以改善UI的可用性。
2. 社交功能
如今,社交網絡在用戶的生活中扮演重要的角色,那沒理由在booking中做的這么差。我搞了一個新功能,允許用戶關聯自己的好友并查看他們的選擇,包括他們的評價(喜歡/不喜歡)。我已將此功能放置到主頁的下方,因為我希望在將其推廣到其他模塊之前收集更多有關它的數據。
3. 搜索功能
把這個功能分解為多個步驟。在輸入第一個詞后,即使沒有指定日期或其他信息,也能顯示相匹配的酒店。此外,我也加入了語音搜索,使搜索更容易?;谥拔覍Σ煌脩艚巧亩x,搜索的結果將根據最后的信息進行推薦:
4. 列表頁面
列表頁針對易用性方面做了整體的優化:
5. 詳情頁
我列出許多可以在詳情頁面中加入的修改。將總價格突出顯示,以免有些隱形消費用戶可能會被忽略。
增強了一個與評論相關的次要功能,允許用戶通過不同標簽篩選它們。
6. 交易功能
在優化開始時,我確定了操作場景2—— 「用戶還不知道自己的目的地」作為優化方向。為了提供更好的用戶體驗,我增加了一個新的功能,用戶可以在其中找到不同目的地的區間。利用篩選功能,用戶可以選擇最適合其需求的區間(區間 – 大陸 – 國家等…)
最后,我還設計了一個整個項目的動效原型,把之前所有重設計的頁面串聯起來。
由于時間限制,分析和結果是基于我的個人經驗和少量數據,需要進行深入分析和其他測試,以便完善和驗證解決方案。
文章來源:優設網
在去餐廳用餐之前,我們還有些時間再了解一項基礎設計原理。讓我們回頭看看在「鄰近性」原理當中提到的燈光明暗控制開關。你能僅通過最左側這個開關的樣式看出它所控制的燈光明暗度嗎?
如下圖這樣又如何?
我們之所以能從后者當中進行判斷,所依據的就是映射關系。所謂「映射」,即是指,將被控對象的行為規律體現到控件自身的操作方式中,譬如開關把手的上升和下降,對應著燈光亮度的升高和降低。
映射同樣體現在多個控件的布局當中,它們的次序應該能夠反映出多個被控對象之間的相對位置關系。
我們假設這三個開關用于控制臥室天花板上的三盞燈。依據映射關系而設計的開關位置應該能夠幫助人們快速判斷出它們各自控制著哪一盞燈。映射原理有助于設計師對控件的類型、位置和次序進行決策。
當映射關系不明確時,我們通常需要依靠文本標簽才能理解開關與燈之間的對應關系。這并非完美的解決方案,因為閱讀和理解文字需要花費時間和精力,同時人們也難以依靠記憶進行快速操作。
在界面設計當中,映射關系也體現在控件類型的選擇上。例如通過滑塊(slider)控制文本的橫向字間距就是很符合直覺的交互方式。而相比于滑塊或是步進控件(stepper),旋鈕則更適于旋轉操作。
當然,最直接的映射才是最好的映射。為人們提供直接操作目標對象的能力是最為簡單、精準、符合直覺的解決方案。macOS 上的鼠標指針操作,或 iOS 當中的手勢操作,都可以為人們帶來直接操作的體驗。
不知各位如何,我是很餓了,這就準備下樓去吃飯。我們在大堂見,然后一起去餐廳。
坐在餐桌前,你會看到面前擺放著一個空盤子。我們能用這個盤子做什么?顯然,放些食物在里面。除此之外呢?
盤子很光滑,可以旋轉或是滑來滑去。
盤子有一圈寬邊,可以抓著拎起來。
我們對于如何與這個盤子進行互動的觀點便是可供性的體現。換句話說,盤子的外形特征為我們提供了如何與之進行互動的視覺及觸覺線索,使我們意識到哪些交互行為可行,哪些不可行。我們會意識到要將食物放進去,或是將它滑到其他地方。但我們通常不會想要倒水進去,然后端起來喝。
可供性并非物體自身所具備的屬性,它更多是在代表行為主體與目標對象之間的互動關系。可供性會因行為主體的差異而有所不同。舉個極端些的例子,對我而言,飛盤可以用來抓住或扔出去,而對我的狗來說,飛盤就是單單用來叼的。不過另一方面,碟子對我和我的狗來說都是用來盛放食物的。
由于可供性所具有的主觀特性,一個人能感知到的交互特性在另一個人看來則未必如此。當可供性所傳達的交互特性與人們的常規行為有著高度關聯時,人們會更加容易感知到。
例如,我其實可以把碟子當作茶托,這會是個不錯的茶托。但我猜我們大家日常很少真的這樣去做,因此我會更樂于將碟子視為盛放食物的容器,而非將水杯放在里面。
我們能從我們所互動過的任何環境及事物當中感知到可達性。當我們走進餐廳時,門的大小及形狀可以傳達出供人穿過的特性,連續的地面使我們意識到可以在上面安穩地行走。
椅子的造型暗示我們可以坐下,桌子的構造令我們明白可以將物品擺放在上面。
人造物品當中都包含有傳達可供性的視覺線索,使人們明白哪些行為可行。清晰的、顯而易見的視覺線索可以幫助人們迅速了解如何與之進行互動。
對于 app 界面設計而言也是同樣的道理。滑塊控件由把手和滑軌構成,暗示著拖拽的特性。
旋鈕的樣式意味著可以旋轉。
按鈕則一目了然地傳達著可點擊的特征。
在以上每一個例子當中,可供性的傳達效率都是極高的。事實上,隨著時間的推移,我們會越發適應于抽象度不斷提升的可供性傳達形式。我們所熟悉的界面當中的按鈕,無非是現實世界里真實按鈕的高度抽象化版本;那四個圓角足以將虛擬與現實兩個版本的同一種物體關聯起來。
同理,滑塊把手周圍那細微的投影效果也足以讓我們意識到其獨立于滑軌之上的操作特性。
而且,僅有的這一點點視覺線索可能都不是必需的,對于很多人來說,一條直線上的一個實心圓足矣傳達滑動操作的可供性了。
有時候,可供性也可以通過動效進行傳達。在天氣 app 中點擊主體內容,界面整體便會稍稍上升,暗示著可以通過滾屏來查看更多內容。
無論你使用何種方法,都必須確保 app 界面能夠清晰準確地傳達其自身的交互特性,否則,人們將困惑于如何與之互動。他們很可能會以錯誤的方式進行操作,然后發現無果,進而將控件理解成不可交互的元素,app 的可用性也會因此而受損。
藍藍設計的小編 http://www.syprn.cn