隨著科技的進步和互聯網的發展,過去機械的單向交互方式逐漸被打破,用戶使用移動端的場景越來越豐富,設計師也開始需要通過主動的觀察用戶所處的不同場景,感受用戶情感,預判用戶意圖,來為用戶提供更智能更便捷更貼心更高效的服務,場景化設計已經融入互聯網設計的方方面面,下面的文章當中,我將從三個方向去闡述和列舉場景化設計。
隨著移動端的不斷發展,從固定電話到移動電話,移動端的設計漸漸的融入在用戶的身邊,深度的跟隨著用戶,陪伴著用戶,慢慢的,開始觀察用戶,感受用戶,在這個過程背后當中,場景設計逐漸產生,設計師通過針對用戶所在的實際場景來設計,建立用戶與場景之間的聯系,給用戶帶來更貼心,更高效的體驗設計。
如今各大產品都在上線了“青少年模式”,越來越多的產品關注到了成人與兒童這兩個不同的用戶群體,騰訊視頻在青少年模式中推出的播放器護眼模式,通過攝像頭來獲取用戶當前距離手機屏幕的距離,當用戶離屏幕太近會有提醒并停止播放,當用戶位置在正常距離以后,提醒消失。幫助青少年養成合理觀看手機,愛護視力的好習慣。
滴滴打車新增了“關懷模式”,在關懷模式下,整體的頁面字號放大,在功能上,更極簡的打車模式,將復雜的任務拆分為拆分為目標清晰的子任務,并提供清晰的反饋,來方便用戶的使用,關懷模式更有利于老年用戶以及視障用戶使用產品。
產品在體驗上的提升不應該僅僅是針對主要群體,跟多的是考慮到特殊群里的體驗,以上兩個案例,根據不同的年齡人群“青少年和老年”,適應了不同的產品體驗模式,讓更多的用戶群體都能夠得到更好的產品體驗。
當用戶在騰訊地圖設置中開啟左手操作功能,首頁地圖上的側方操作控件會移動到屏幕的左側,方便左手用戶點擊和操作,人性化的設計容納了擁有不同使用習慣的用戶。
在地圖軟件當中,我們通常都會用紅色表示路段擁堵,綠色表示通暢,在色盲色弱人群當中,紅綠色盲也是比較常見的色盲類型,所以在高德地圖中,為色盲色弱用戶做了專屬的路況配色,貼心的考慮到了特殊人群的體驗。
優酷視頻在更多模式選擇中,為用戶提供了“色弱模式”,并有不同色弱人群的細分“紅色弱”“綠色弱”“藍黃色弱”
在餓了么送貨騎手中,約8%受色盲色弱的困擾(全國男性群體中紅綠色盲色弱占比達8%-9%,餓了么騎手男性占比90%),為此餓了么設計團隊在2019年對app的進行了重新設計,包括使用WCAG無障礙色彩對比度,以及無障礙色盤,以及調整字階,使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。
外賣行業本身就具有一定的時間屬性細分,用戶早中晚點餐上肯定會有不同的訴求,美團外賣在不同的時間順應用戶的不同訴求來推薦不同的內容,幫助用戶挑選在該時間段內的用餐。
美團在一些周末和特殊節日上,用戶在不同時間的訴求不同的,相關推薦也會有所不同。
QQ音樂會根據不同的時間,給用戶推薦不同的個性化push通知,早上是“每天起床氣一句”“最氣不過起床氣” 冬日是“冬夜需要”。結合用戶當前時間段下推薦相關的push,不僅增加了用戶的點擊欲望,也拉近了和用戶的距離,讓用戶時而暖心,時而感到有趣,這么可愛的push通知,也是辛苦QQ音樂的運營小編了~
在iOS12系統當中,新增了地點勿擾模式,長按勿擾模式的按鈕,可以選擇“直至我離開此位置”,用戶在看電影,會議或一些特定的地點可以靈活的使用該功能。
在使用大眾點評時,當我的地理位置在我的常駐地北京時和將地理位置切換到“重慶”時,首頁展示的信息和內容框架都發生了變化,產品根據我的地理位置推斷出我現在搜索的目標地不是我的常駐地,預判到我可能存在即將出游到當前定位的城市,會直接給我推薦一些攻略,和一些“怎么玩”“”訂住宿“”游景點“的旅游攻略向內容。
iPhone在用戶接電話的場景下,根據用戶所處環境不同,適配了不同的方案。不同的當iPhone處于息屏狀態接電話時滑動接聽,防止誤觸;當iPhone在使用時接聽電話為按鍵接聽。減少用戶操作成本。
在支付寶的收款碼掃一掃功能中,用戶向他人展示收款碼時,手機向下傾斜后,掃碼的提示文字和用戶的頭像會發生旋轉,其他功能會相應弱化或者直接消失,以便方便付款人閱讀,充分考慮到了現實中的操作環境,保證了雙方的使用體驗。
支付寶等金融類的產品,在用戶開啟后臺后,會對頁面進行高斯模糊處理,避免了后臺場景下用戶無意中泄漏自己的信息,也防止了被偷窺。(支付寶在頁面底端還添加了溫馨提示:支付寶全力保護你的信息安全)
在輸入車牌省份時,會直接彈出各省/直轄市的縮寫專用鍵盤,并且可以直接進行大寫字母與城市簡稱的切換,降低了用戶的輸入成本,提高了整個功能的使用效率。
百度鍵盤在游戲模式下,會接入游戲快捷回復語并自動開啟和諧模式,增加趣味性的同時方便了我們在游戲進程中的快捷輸入,將九宮格按鍵進行等比縮小展示,方便用戶點擊。
Pad OS鍵盤在使用中,可雙指捏合可以快速縮小鍵盤,然后將它移到合適的位置,即能單手打字,又能給你的app留出更多的空間,并且增加了快速輸入的功能,只需要在鍵盤之前輕掃,即可打字。
情景預判的交互設計是建立在整個產品的框架上和對用戶深刻理解上的細節迭代。預判設計主要有兩類目的:一是在用戶初次體驗某種功能時引導用戶,避免用戶陷入困惑;二是提前判斷用戶行為,縮短行為路徑。新功能引導更傾向于產品功能本身的邏輯和價值,這次我們主要主要講第二點,提前判斷用戶行為。
預判設計強調主動性和智能性,是決定產品是否體貼、聰明的重要因素,是走向人工智能的基礎,對微交互中的預判設計進行分類研究有助于加深對其了解和認識,進而在實踐中應用以提升用戶體驗。預判設計可以很好的在用戶的操作過程當中進行簡單高效的引導和預判,幫助用戶更流暢舒適的使用產品。
在互聯網發展中,產品功能的流程越長,操作步驟越多,越要求用戶的理解能力和學習成本更大,耗時也會相應增加。因此體驗設計師在理解用戶行為的交互設計的基礎上能夠做到減少冗余步驟,簡化操作流程。順應用戶行為的預判設計也可總結為四個字:以簡馭繁。拋開繁雜的操作過程,運用更少的任務和行為來達成用戶目標。簡約不僅僅是視覺的形容詞,同樣適合行為。
聊天頁轉賬:在支付寶聊天頁,很多時候我們想給對方轉賬,會習慣性的在輸入框中輸入相應的數字,但在操作錯誤之后,支付寶會在輸入框上方彈出相應數字的轉賬,點擊之后會直接進入轉賬頁面進行操作。對我來說,這個功能已經不是簡單的幫助用戶糾錯,現在更像是一個快捷鍵一樣方便著我們的操作。
手機號轉賬:當我們復制手機號后打開支付寶轉賬功能,會彈出該號碼的轉賬氣泡引導,提前判斷了用戶通過手機號去轉賬的路徑。用戶可以點擊氣泡一鍵跳轉到轉賬頁面。
消息頁 - 找人轉賬:在消息頁面,當用戶開始上滑操作時,會出現「找人轉賬」的氣泡提示,點擊進入用戶列表的簡約頁面,去掉了一些生活號服務號企業號等無用的對話框,提高了用戶尋找的效率。
一個轉賬的功能,在不同的頁面不同的場景下,支付寶在體驗上把用戶情景預判設計做到了極致,事實上,用戶的行為中滲透了意識。從用戶的行為推斷用戶意圖,將用戶的意圖結果化,結合用戶的使用場景,順應用戶的行為,縮短用戶的路徑,才能給用戶帶來最流暢的交互體驗。
正如《一目了然》中所說,“當一個軟件設計得很糟的時候,我們往往能立刻指出哪里做的很差;但一個優秀的軟件,你卻往往難以解釋優秀從何而來”,因為沉浸式的流暢體驗為你減輕了很多思考的路徑與時間。
在新建收貨地址的場景下,填寫復雜的地址信息的過程往往都是繁瑣而費時的,而設計師在此場景下考慮到用戶需要地址的多樣性,以及用戶行為背后的含義,當用戶復制了一段收貨地址,打開新建地址頁面時,App將主動提示彈窗“是否粘貼剛復制的信息”點擊“確認粘貼”即可粘貼收貨地址到對應列表項,這種預判設計對于用戶來說是自然且讓人愉悅的。我們不僅順應了用戶的操作行為,還在其中大大的幫助用戶減少了很多操作。
預判設計的主體是用戶行為,從用戶的視角出發,分析用戶行為,是設計師建立在整個產品的交互里路程和功能框架上,對用戶的行為深刻洞察后進行細節的改進。
當我們使用電腦時,總會發現找不到鼠標位置的情況,iMac設計師在識別到用戶開始連續晃動鼠標時,分析到用戶當前的狀態可能是在尋找鼠標的位置,會對鼠標做一個放大的效果,幫助用戶快速定位到鼠標的位置。
在抖音我們刷到一些連載視頻后,我們都會去進入作者的個人頁去尋找上下集,在作者個人頁作品很多的情況下,可能要尋找好久,抖音在個人頁的作品卡片上添加“剛剛看過”的提示,方便了用戶在瀏覽中能夠更快速的定位到剛才的視頻。方便繼續銜接觀看。雖然一個小小的功能提示,我們從用戶行為,預判到用戶的需求,帶給用戶更方便更快捷的體驗。
在美團外賣中用戶可以在訂單頁面直接點擊「再來一單」按鈕選擇和上次一模一樣的商品加入購物車,如果一家店沒有營業的話那么則會顯示一個「相似商家」按鈕。
結合實際我們操作的場景,外賣產品,我們重復下單的頻率會比較高,當我們來到這個訂單頁面,「再來一單」的按鈕可以更方便更快速的幫助我們下單,但當商家休息的時候,這個時候繼續展示「再來一單」按鈕對用戶來說也是無效的,我們往往會回到首頁去搜索相關類似的相關產品,然后再重新下單,而這時候「相似商家」按鈕直接幫助用戶一鍵定位到后續的一系列操作,真正的做到在分析用戶行為中,預判用戶操作。
設計師做需求時,往往需要考慮在特定情景下,用戶行為背后的思考與需求。因此符合情景的預判,我們也可稱其為“符合用戶感知的預判”。思考用戶使用產品的情景,及時而高效的迎合用戶對于當前場景的需求。
墨跡天氣的降水雷達走勢圖,進入之后,放大、縮小屏幕就可以查看全中國的云圖了,墨跡天氣的云圖可以查看到降水情況、閃電、積雪(冬天才有的功能),并且伴有文字提示,在未來兩個小時的天氣情況,方便了有出門需要的同學實時查看天氣。
在微信聊天功能中,我們可以對兩分鐘以內的消息進行撤回,但相信大家都有跟我一樣的尷尬經歷,發了錯誤的內容想要撤回,卻一不小心點了刪除,再也沒有機會撤回了。
微信在這個功能上做了很好的改進,當我們的發出的消息小于兩分鐘時,該消息只能撤回,去掉了刪除功能,在該消息超過兩分鐘后,則撤回按鈕消失,只能進行刪除操作,兩個功能進行了互斥處理,很好的避免了這個場景下用戶會誤觸。
當我們選擇好評的時候,會自動勾選到“公開狀態”,當我們勾選差評時,系統會自動取消”公開“狀態勾選,默認匿名發送該評價,很好的保障了差評用戶的人身安全問題和個人隱私問題。
當我們在淘寶搜索電腦包時,展示的內容下方會自動展示商品的容量標簽“可放14寸電腦”,幫助用戶在列表頁面就能篩選到更合適自己的商品,當搜索玩具時,也會展示當前商品適用的年齡段。產品根據用戶搜索的內容,自動匹配能夠幫助用戶進行篩選的標簽。
預判設計當中我們從三個層面進行了分析,從順應用戶行為的預判設計,到分析用戶行為的預判設計和符合用戶行為的預判設計。一個好的產品,往往會更多的使用用戶語言,通俗易懂地讓用戶可以對整體的使用方式一目了然,而不是產生一系列的問題,迫使用戶停下來,進行不必要的思考。用戶的每一次停頓對我們來說可能都是一次用戶流失。而預判設計要做的,是根據用戶的行為/用戶所在的場景,讓功能主動找到用戶,并讓用戶與之產生自然的交互。
場景化設計中,以情感化為目標的設計同樣需要具體場景具體分析,通過細節上的改變使得產品在當前場景下能夠與用戶產生更多共鳴,主要從細節出發滿足用戶在當前場景下的情感需求,讓用戶感動,給用戶驚喜。
其實用戶在使用產品的過程中,同樣渴望在使用產品時能夠得到情感上的互動,這反映在設計上即是產品情感化設計。情感化把握得好的產品往往更能抓住用戶的心。
躺平是一款阿里旗下的生活方式APP可愛的小人和擬人的語氣,設計師讓每一個空白枯燥的空頁面瞬間變得可愛和有趣起來。
快手在每一個特殊的節日都會給用戶送來精美的開屏祝福,讓用戶在節日當天打開app就能接受感受到產品滿滿的心意和祝福。
在用戶生日的這個特定時間和特定場景下,很多產品都給予了用戶不同的生日祝福,B站是一張有關于星座的動漫海報,快手給用戶定制了專屬生日開屏,網易云音樂的每日推薦為用戶獻上生日快樂歌,不同的產品結合自身不同的產品屬性,給一位用戶都帶來了不同的生日祝福。
想必大家都有熬夜刷劇的經歷,在騰訊視頻中,在全屏模式下點擊退出清屏模式下,頁面上方的時間旁邊會顯示夜深了,只是簡簡單單的三個字,這深夜在這個場景下,感覺內心也有一瞬間被人關心的觸動,體驗了一個產品的人文關懷和對用戶的體貼。
QQ音樂的綠鉆到期挽留彈窗真的是別出心裁,推薦了4首歌曲,連起來就是VIP我們舍不得重要的你,用歌曲的的名字來表達對用戶的訴求,趣味化的設計讓這個小小的挽留彈窗不僅沒有感覺到打擾,還感覺很有趣。
當有特殊天氣時,我們打開美團外賣的配送頁面時,頁面會在頁面中做當前天氣的擬實物效果,下雨天整個頁面也是下著大雨,下雪天整個頁面飄著雪花,甚至霧霾天氣整個頁面是是伴著黃黃沉沉的云,設計師預判到用戶打開該頁面是想看外賣到了哪里,看到外面的天氣如此糟糕,大家都不忍心催促外賣小哥了,大大減少了特殊天氣下配送不及時的投訴率。
在B站輸入密碼的時候,頁面上方的小人會遮住眼睛,潛臺詞:我不看,你放心輸入吧。在輸入密碼的情景下,設計師用趣味生動的卡通形象給用戶帶來了更信任更安全的感知。
黃油相機的加載動畫,是一個可愛的切黃油的小人,并且加載當中的文案,會告訴用戶當去前正在加載的內容是什么,能夠讓用戶對于加載的時間有預期,讓等待加載的過程不會枯燥。
蘋果新增 13 個與殘障人士相關的 emoji,包括導盲犬、輪椅、義肢、戴著助聽器的耳朵等。有意思的是,蘋果不僅按照以往的做法為涉及人物的 emoji 按照性別和膚色提供多個版本,而且在表示輔助器具的 emoji 中還做了細節上的區分,比如輪椅有手動和自動之分,不同導盲犬的導盲鞍樣式也有所不同。
回看歷年蘋果emoji的更新,從膚色平等,到性別、性向平等,再到為殘疾人設計,這讓我想起了蘋果為殘章人士做的廣告 - 科技屬于任何人
最近,快手B站豆瓣等都陸續上線了“紀念賬號”,產品的意義不僅僅是留住生者的精彩瞬間,更多的也是留住逝者的人生印記,對已故用戶的賬號進行保護,豆瓣在已故賬號上做了悼念用戶的活動“在他/她的頭邊放一束山茶花”的方式來紀念已故的用戶。
騰訊公益的404頁面,這個項目的靈感源于歐洲失蹤兒童聯合會主導的,名為“NotFound Project”的網絡公益工程。就是利用404頁面展示那些被拐賣兒童、失蹤兒童的信息,幫助那些孩子重新找到家人。
丁香園404頁面界面展現了因惡性醫患遇害的醫生同道,文案是“你所訪問的頁面就如那些遇害的同道,已離我們遠去。”下面還會有這些白衣天使的照片和名字。以這樣的方式悼念亡者,也側面展現了丁香園的社會價值。
在頁面走失的這種特殊場景下,404頁面視作可被利用的空間,來呈現公益信息,這種方法暫時減弱了用戶對產品頁面走失的憤怒,將注意力轉向對弱勢群體或社會問題的關心,側面感受產品的社會價值,這種方法適用于社會公益性質或相關業務的產品。以上的騰訊公益和丁香園對于這塊的設計都是很好的案例參考。
在快手搜索一些負面的情緒詞匯時,會提示用戶“別怕,我們都在”。并附有24消失免費心理危機咨詢熱線,從推薦位banner點擊后會進入一個群聊,里面都是其他用戶留下的暖心話語,這些情感化的設計讓那些正在經歷困難,或者想要終止生命的人傳遞以溫暖。我們可以幫助你,你并不是孤單一人。微信/知乎等搜索引擎下都有不同的對于該情況的情感化設計。
在京東搜索穿山甲,會直接挑戰到保護瀕危動物頁面,傳遞出了一個企業對動物的保護意識。頁面中的穿山甲≠治病,向全民科普瀕危動物的現狀和對于人們對于野生動物的錯誤認知。淘寶更是對野生動物保護啟動了綠網計劃,搜索穿山甲/象牙等都會進入到該活動頁面。
情感化離不開場景化設計,上面四個案例分別是兩個404頁面以及兩個搜索引擎的不同設計,不同的產品賦予了不同的含義。不同的場景下設計師也需要有不同的思考,陪伴產品一同進步。
情感化設計更多的是帶給用戶瞬間感動,很難形成長期的用戶激勵或用戶增長,因此情感化設計主要目的是通過情感累加,提升產品品牌形象;產品不僅是所有功能的集合,他們真正的價值可以是滿足人們的情感需求,而其中最重要的需求就是建立自我形象與社會地位。 反思層是包含并超越前兩個層次,我們要經常思考,為什么同類型的產品,我們要選擇它,為什么它給我留下了很深刻的印象,這都是反思水平的設計需要做的。
文章來源:站酷 作者:劉狗蛋
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
對第一回還有印象的朋友應該知道,平面設計的定義簡單說來就是:“以某種法則,將文字、圖案、攝影圖片在平面空間中進行編排設計,以達成信息傳達或者行為引導等目的的活動”。
△ 圖文結合的平面設計作品
這個定義大致在 1970 年代才成熟,但相信隨著科技進一步發展,這個定義還會修正變化,但當前可以肯定的是,平面設計中有三個核心元素,分別是文字、圖案跟攝影圖片。
文字跟圖案都已經歷史悠久,其中圖案最早,文字次之,而攝影則到了 19 世紀中期才被發明,發明之前有著漫長的醞釀演變過程。
△ 圖文結合的平面設計作品
我們本次一起來了解一下攝影術的誕生過程,還有其對平面設計發展產生的一些影響。攝影術的發展其實主要分為幾個階段,史太濃把他們總結為三段,分別是:
根據歷史記錄看來,歐洲在古希臘時期就有人嘗試捕捉真實世界的影像,這個人很知名,就是大哲學家亞里士多德(Aristotle)。
亞里士多德發現的其實就是“小孔成像”原理,物理課大家有學過,因為光是成直線射入的,當人站在小孔前,頭部擋住上面的光,成影在下邊,腳擋住下面的光,成影在上邊,所以成像是倒立的。
△ 小孔成像原理
神奇的是,跟亞里士多德接近同期的中國思想家墨子也同時發現了這個情況,并且比亞里士多德還早一些做了這個實驗,記錄在「墨子·經說下」書中,這種文明發展不約而同的狀態非常多,很難解釋,似乎冥冥之中自有主宰。
△ 墨子關于小孔成像原理的研究
隨后有藝術家基于這個原理制作一種叫“暗箱”的東西來輔助自己進行繪畫創作,這樣可以高效的畫出相當準確的圖形來,好比我們設計師有時候也會使用“透寫臺”輔助臨摹一樣。
△ 畫家制作的暗箱裝置
時間一直去到 19 世紀初,有人基于這個“小孔成像”原理完成突破性探索,他就是來自法國的約瑟夫·尼伯斯(Joseph Niepce)。這個突破性發展跟一些現代材料的發展密切相關,就是他嘗試將一些感光材料涂在暗箱的平面上,通過曝光的化學變化嘗試將影像捕捉下來。
△ 尼伯斯的攝影探索試驗
這種方式被認為是最早有記載的攝影技術,尼伯斯將這種方法命名為“陽光腐蝕法”(sun engraving),通過這個方式尼伯斯在 1822 年制作出世界上最早的人物攝影作品,名為《紅衣主教》。(Cardinald Ambroise)
1826 年他再如法炮制,完成世界上第一張風景攝影,拍攝的就是其房間窗外的街道,圖像朦朧不清,但是完成了歷史的突破。
尼伯斯本身是一名印刷家,他這方面的探索動機其實是為了尋求一種替代手工插圖的方法,以提升印刷效率,因為手工插圖不但時間長,成本也很高,比如要邀請技術精湛的藝術家創作。
不幸的是,尼伯斯的探索還沒去到實用性階段本人就因為心肌梗塞在 1833 年去世了,幸好此時他已經有了一位合伙人,可以繼續他的研究,那就是畫家出身同為法國人的路易斯·達貴爾(Louis Jacques Daguerre)。
△ 路易斯·達貴爾
達貴爾基于尼伯斯的探索基礎進一步深化,首先改善感光材料,比方使用銀金屬成分的感光版,同時優化制作過程,對感光后的銀版再做工藝處理,出來的攝影效果讓精確度大幅提高。
1839 年時候,達貴爾采用自己打磨了 7 年的技術對巴黎街景進行拍攝,出來的效果可以說非常好,清晰度很高,讓他非常振奮。
獲得這樣的成果后,在一些經商朋友的建議下,他果斷向法國科學院呈報自己與尼伯斯的攝影研究成果,科學院的院士看到作品后大為震驚,一致表示肯定,而且迅速向全世界自豪的宣布法國人發明了攝影術。
與此同時,達貴爾也馬上開始努力的推動攝影術商業化,首當其沖的自然就是生產“攝影機“進行銷售,因為有法國科學院支持,過程很順利,第二年就生產并賣出 50 萬臺,讓達貴爾一下子名成利就。
△ 達貴爾相機
△ 達貴爾相機拍攝的作品
這事情讓一位叫塔波特(WilliamHenry fox talbot)的英國人氣得吐血,因為他早在 1833 年也開始探索攝影技術,并且在 1835 年就設計出一種小型攝影機,可以拍攝到很小的物體。
其原理連暗箱都不需要,屬于一種化學反應的直接曝光,產生的圖像是黑白負片,但是很精確,他獲得這些成就后居然不認為有商業價值,所以丟在一旁好幾年。
△ 塔波特相機拍攝的作品
當通過媒介聽聞達貴爾的事跡時候,他匆匆將自己的技術向英國皇家學院匯報,英國人也趕忙向世界宣布發明了攝影術,但也只能成為發明者之一,而并非世界第一了。
△ 很不開心的塔波特
但塔波特痛定思痛,發力追趕,1840 年時候更新了感光材料,居然可以將感光之后的底片取出來在暗房沖洗,也發明出負片變成片的方法,雖然多了一道程序,但是得到的效果完勝達貴爾相機,正負片這樣的攝影方式一直到 20 世紀 90 年代都還存在著。
△ 塔波特相機完成的作品
正負片的核心競爭力在于可以無限復制,而達貴人爾的銀版攝影只有一張圖片,所以塔波特相機的商業價值也完勝達貴爾,真正做到后來居上,可見事在人為啊。
上一期說過,當一件事情體現出商業價值,就會吸引到一大堆能人參與,讓事情的發展速度快速提升,攝影的發展也不例外。1880 年時候有人發明出干底片,因為之前的感光材料都是濕涂的,很不方便,再后來就是大家感覺相機體積太大,一起去研究怎么變小。1888 年世界第一臺小型照相機出現,發明者叫喬治·伊士曼(George Eastman),后來他成立了一間公司,就是大名鼎鼎的“柯達公司“(EastmanKodak Company)。
△ 喬治·伊士曼
△ 柯達公司 EastmanKodak Company
柯達公司同時也主力生產后來風行世界的膠卷,記得小時候我還能在家里找到很多這樣的小圓筒包裝的膠卷,很后悔沒有好好保存一些下來,現今的還能零星找到的卡帶在不久的將來也會消失,建議大家可以收藏。
首先將攝影與平面設計結合的是美國人約翰·莫斯(John Calvin Moss),他在 1871 年時候首先嘗試將有影像的底片投射到有敏感感光材料的金屬版上,通過腐蝕獲得正片樣式的畫面,這個金屬板就可以直接用于印刷,從而獲得插圖。
這種方式比金屬雕刻與木刻插圖都快很多倍,而且成本低,制作出來的插圖非常真實,還有一種特殊的類似鋼筆畫一般的藝術效果,廣受社會大眾的歡迎。
△ 莫斯結合攝影技術制作的印刷品
當攝影技術走向成熟的時候,有一些藝術家也開始嘗試基于底片為藍本,將其再創作為版畫,這樣就獲得了準確與藝術化的平衡,而且效率也很高。
世界上現存最早以攝影底片為藍本創作的木刻版畫作品叫《里什蒙運河邊的自由人》(Freemen on the Canal Bankat Richmond),創作時間是 1865 年,主題是一個黑人家庭合照,大家可以看到有很好的藝術韻味。
△ 《里什蒙運河邊的自由人》
而大部分印刷廠也在探索怎么直接將攝影圖片印刷在紙張上的方法,據聞這種方法其實約翰·莫斯已經掌握,但一直高度保密,沒有釋放到商業應用中。到了 1880 年時候,美國的《紐約每日圖畫報》第一次以攝影直接制版方法刊載了一個城鎮風景照片,因為地位特殊,這張印刷照片也歷史留名,叫《尚地鎮的風景》(A scenenin shanty town)。
△ 《尚地鎮的風景》
我們從圖片細節看來會發現圖像好像由一個個小點構成,如果這樣就對了,因為這種印刷照片的方法就是大名鼎鼎的“絲網制版”。這種方式是把攝影底片通過絲網照射形成很多細小的格子,格子黑白明暗程度不同,在感光底版上通過曝光就形成金屬印刷版,繼而就可以將照片印刷出來。
這種方式慢慢被不斷優化,越來越多印刷廠都廣泛采用。
△ 絲網制版與印刷
當攝影可以順利變成印刷品后,其媒介地位日益提升,因為采用照片方式做插圖有很多好處,其一是節省成本,其二是真實,其三則是效率很高。
所以攝影作品就跟之前任何一種媒介形式的發展路徑一樣,從追求有到追求好,再由追求好變成追求個性,大家都在努力探索一些新鮮的攝影方法,如今單純攝影的學問絕對不比平面設計低,而且兩者之間的關系非常密切,很多法則也可以相互引用。
世界上第一位探索人造光源攝影的人是來自法國的納達(F.T.Nadar),他在 1886 年做了世界上第一次攝影采訪,對象就是我們在「風格列傳」新印象派篇談到過的化學家謝弗勒爾(Michel Eugene Chevreul)。
△ 納達采訪謝弗勒爾
過程中完成了 21 張由人造燈光配合的現場照片,最后配以文字發表在法國刊物《插圖雜志》上,讓那一期的刊物銷量大增,因為讀者可以配合生動的照片更好了解內容,當時而言顯得非常有趣。
從此之后,照片與平面設計的關系變得越來越重要,越來越多平面設計師也開始進一步探索照片與排版之間的法則。
首先我們要知道APP的啟動頁和閃屏不是一個東西,啟動頁是用戶打開產品第一眼看到的頁面,閃屏是啟動頁之后出現的頁面。
啟動頁是一個APP必不可少的頁面,在iOS規范中,上架AppStore必須有啟動頁,Android系統會有1-2s的白屏,所以兩個端都需要啟動頁。蘋果官方給的解釋是,為了增加APP啟動時的用戶體驗,確實如此,當打開一個產品時,首頁內容都需要一定的時間加載。
啟動頁的設計角度一般是品牌信息傳遞,建立用戶與產品的認知,一般時常都在2s以內(看網速和手機性能)。啟動頁的設計一般不做動畫效果,因為只要是動畫,就會讓用戶感覺等待時間變長了。
閃屏是啟動頁后面緊接著出現的頁面,當然有很多產品沒有閃屏,如微信、淘寶等,因為產品的定位和運營模式不同。閃屏與啟動頁不同,閃屏是用來運營的,比如投放日常廣告、活動運營、節日等等,大多數產品閃屏出現的時間是3s或5s,一般都提供“跳過”按鈕。
閃屏的設計為了運營,所以可以適當有動畫效果或者視頻,目的是能夠更加吸引用戶,加深印象或是提高點擊率。
啟動頁是寫在安裝包里面的程序,如果更換就得發版,閃屏的程序設計是從后臺配置完成,所以可以滿足日常更換。
對用戶來講啟動頁和閃屏展示的時間越短越好,那時間減少不了,就可以通過設計讓用戶對時間的感知變少,從而提高體驗??聪聢D,兩張圖通過平滑過度,給用戶的感覺是一張圖在變化,這樣時間上給用戶的感知是變快的。
用戶等待感知短
當然對于不同的產品,設計的傾向性是不一樣的,比如網易云音樂,啟動頁是強烈的紅色,然后生硬的切換到一個跟啟動頁沒有任何視覺關聯的閃屏。這樣的設計形式,用戶等完一個頁面,又等一個頁面,那就會給用戶在時間上的感知是變長的。
品牌感知傳遞強
但是,對于一個音樂產品,渲染產品調性傳遞品牌,要遠遠大于減少用戶等待時間的體驗。所以,從這點來看,網易云音樂這樣的設計形式,也是非常恰當的,設計應該根據產品的定位,來確定設計的傾向性。
敲黑板,劃重點! 下面的內容才是本文重點!
手機尺寸那么多,閃屏設計尺寸應該如何定義,很多APP的解決方案是使用兩張不同比例的閃屏,還有一部分APP是區分系統,iOS適配一張圖,Android適配一張圖。
下面我以小米商城閃屏的改版為例,分享如何用一張閃屏尺寸適配所有機型,并詳細介紹適配的原理。下圖是改版前的閃屏,需要上傳兩張圖,一張1080*2070(不帶底部logo),另一張是720*1280(帶底部logo)。
老版本閃屏需要上傳兩個尺寸圖
兩張圖,設計人員就需在兩個模版上進行排版設計,小米商城閃屏更換頻率非常高,這樣其實會付出很多時間成本。所以,我們團隊嘗試使用一張圖適配所有機型,這其中的難點就是,找到一個合適的尺寸適配所有手機,并且閃屏內容的呈現在任意手機上都得合適,內容不能被裁剪。
先跟大家普及一下小米公司APP的設計稿尺寸,因為小米手機是Android系統,所以UI設計稿會優先適配安卓的主流手機,即1080*2340,這個尺寸接近iPhone12的比例和尺寸,切圖相當于3倍圖。
所以,閃屏寬度設定一定是1080px,然后高度分為兩部分組成,一個是內容運營區(閃屏內容設計區域),一個是logo位,如下圖所示。
藍色部分為閃屏
logo位部分由開發寫到程序中,所以閃屏頁面高度要去掉logo位高度。閃屏設計尺寸即是藍色部分,正常來看應該是主流長屏分辨率手機與現存短屏分辨率手機的平均數即可,但其實并不可取。
因為,短屏分辨率手機畢竟使用人群是少數,設計的宗旨一向都是優先考慮大多數用戶。所以,定義閃屏尺寸的原則是讓類似小米11、iPhone12等主流比例手機呈現的完美,短屏分辨率手機如iPhone8只要呈現的不出錯即可。
以安卓主流分辨率1080*2340為例(這個比例接近iPhone12),如下圖,logo位高度設定為270px,把這個圖切給開發,讓開發等比縮放去適配所有手機即可。
很多安卓手機底部會有一個系統高度,這個位置不可以占用,但開發可以改變顏色,所以這部分顏色可以跟啟動頁或閃屏顏色調成一致。頁面分辨率2340減去270的logo位就是2070,這就是長屏主流手機閃屏大概要呈現的高度,然后需要用這個尺寸去兼顧短屏分辨率手機。
把短屏手機也計算出來,安卓最短的手機比例是16:9(比例等同于iOS的iPhone8),以1080*1920為例,如下圖,1920同樣是減去logo位的270像素等于1650。
接下來就是最關鍵的時刻,要用1080*2070和1080*1650兩個尺寸設定閃屏的設計模版。先說一下手機的適配原理,如果一個張圖片的比例和手機屏幕不一致,開發設定是撐滿手機屏幕,這時手機上展示的圖片就會出現上下或左右被裁剪的情況。
所以,綜合兩個不同比例的尺寸,短屏手機裁剪上下,長屏手機裁剪左右,然后把呈現的內容保證在不被裁剪掉的區域。
閃屏模版尺寸設定嘗試
最后經過很多次的嘗試,最終選用1080*1920作為閃屏的設計尺寸,向上向下適配內容的呈現都非常合適。下圖是iOS和安卓手機的適配效果,向下適配16:9的手機(裁剪上下),向上適配20:9的手機(裁剪左右)。
長短屏手機閃屏適配效果
定制閃屏設計模版
模版中頁面上方留了較大面積,是為了讓標題內容能夠呈現在長屏手機更恰當的位置上,長屏手機內容靠上,看上去不會很舒適。底部空間留的較少,因為底部再加上logo位的高度,就會讓頁面看起來很協調。
最終小米商城的閃屏就是用一個尺寸適配了所有分辨率的手機,思路和適配原理都已經講清楚,如果自家的產品是優先滿足iOS手機,完全可以用上面介紹的方法嘗試。
敲黑板! 下面內容可能會顛覆你對UI設計的認知!
閃屏尺寸說完了,閃屏上面還有一個“跳過”按鈕,這個按鈕的位置設計非常非常重要,而且大有學問,會牽扯到廣告學,按鈕合理的設計會讓一個產品的收入倍增。
還是以小米商城的閃屏為例,之前的閃屏“跳過”按鈕在頁面右下角,新版我把“跳過”按鈕放到了右上角,為什么?
可以肯定的是,“跳過”按鈕,放在右上角,用戶體驗是不夠好的,右下角用戶操作起來才會更便捷,改為右上角其實就是為了讓用戶少點擊。用戶不去點擊“跳過”按鈕,那閃屏內容曝光的時間就會更長,這符合小米商城自營平臺的定位,自營平臺閃屏展示都是自己平臺的內容。
有很多產品閃屏的“跳過”按鈕,放在右下角,如微博、網易云音樂,優先滿足用戶體驗,是因為廣告的性質不同。
“跳過”按鈕在右下角的產品
在廣告學中有這樣幾個詞:CPS、CPC、CPM、CPT。
了解完常見的幾種廣告推廣方式后,我們再看一下微博和網易云音樂兩款產品。他們的廣告如果是CPM(曝光量)和CPT(包時間)的推廣方式,那“跳過”按鈕放到右下角可以提升用戶體驗,還不會影響推廣的收入。
再來看一下脈脈和花瓣兩個產品,他們的推廣方式大概率是按CPC(點擊率)或CPS(轉化率)收費的。閃屏的“跳過”按鈕放在右上角,內容的設計形式上強調并引導用戶去點擊廣告。
“跳過”按鈕在右上角的產品
聊一下脈脈和花瓣的閃屏設計,脈脈把閃屏設計成彈窗的形式,用一種騙的形式,引導用戶點擊假彈窗的“知道了”或關閉圖標。用戶的點擊行為與心里目標完全不一樣,這樣的設計雖然能讓平臺獲得更多的廣告收入,但也損害了用戶對平臺的好感。
花瓣閃屏的設計較為友好,實實在在的告訴用戶這是廣告,你有興趣就點“去看看”去了解,沒興趣就等一等,或點擊“跳過”?;ò赀@種設計形式較為適合CPS(轉化率)的推廣放過,因為點擊了解的用戶,都是對廣告興趣的精準人群。
最后總結一下文章的內容,啟動頁和閃屏是兩個東西,通過設計可以讓用戶等待的時間感知更快,從而提高體驗。閃屏可以用一張圖適配所有大中小手機,閃屏的“跳過”按鈕大有學問,合適的設計可以讓平臺的收入倍增。
設計從來都是用來滿足商業目的的,一個小小的按鈕設計,都會很大影響到平臺的收入,所以UI設計任何時候都需要清楚的了解產品定位以及商業模式,這樣才能有效的產出設計。
文章來源:人人都是產品經理 作者:吳星辰
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀:看過《鋼鐵俠》電影的朋友一定對“賈維斯”不陌生,這個智能管家是很多人的夢想,也是現在智能家居發展的方向。在5G和AI的加持下,智能家居的發展狀況如何?本文作者對此進行了分析,希望對你有幫助。
“賈維斯,你在么?-我隨時待命” ——只聞其聲,不見其物的賈維斯,相信看過電影《鋼鐵俠》的朋友對它并不陌生。像“鋼鐵俠機甲的大腦,獨立思考、處理各項事務,超級軟件、智能管家”等等,是它留給觀眾的印象。
但其實,賈維斯在影片中塑造的形象最貼近鋼鐵俠機甲的大腦,這也是我們對它最深刻的印象。不過,賈維斯以智能家居的形態率先亮相,相信很多觀眾會被那種智能的體驗所吸引。
賈維斯的出場方式給未來智能家居留下了很大的遐想,可如今的智能家居是否像熒幕上那般智能、令人向往?
要想回答這個問題,我們得知道,當下談論智能家居的我們究竟在談什么,是談智能家居帶給我們生活方式的變革,還是談智能家居根本不是生活的必需品?智能家居的“真與偽”,這個話題似乎進行得如火如茶。
那一起聊聊這個話題吧,本文將圍繞,[5G與AI的加持,智能家居能否“去偽存真”?]這個主題,做出一些思考和解析。
對于該主題,將從以下四個方面展開,并一一解析。
本文開頭提到《鋼鐵俠》中的賈維斯,是一個科幻角色,更是一種科技。不過,也正因影片留給我們一些難以觸及的畫面,所以對于科幻影視所塑造的科技,我們大都抱以不真實的態度看待,何以想象這些角色(科技)就如劇中所現(非簡單的外觀IP化)地走出熒幕,融入到真實生活。
時勢造英雄,Facebook的創始人扎克伯格,或是出于個人興趣,亦或是對商業的探索,于2016年打造出了人工智能管家——Jarvis(賈維斯),這也似乎預示著,科幻角色走不出熒幕的說法即將破滅。
但,扎克伯格給我們呈現的Jarvis,談不上是鋼鐵俠中的賈維斯原型,兩者并沒有一些很吻合的地方,似乎更像智能音箱是一款家庭語音助手。然而,這也印證了“鋼鐵俠中的賈維斯走出熒幕并不真實”的說法是正確的。
或許僅憑一個“失敗”的案例不足以證實以上的說法,那我們可以試著從這幾方面來佐證。
第一,我們熟知賈維斯是具備“自然交流”的能力,這種自然交流的能力并不是現在NLP能實現的對話,它的交流是自然的、不需喚醒、不需設計槽位,它不像機器的語音對話只能交互、回答一些淺層的問題,只能基于訓練過的語料做出回復。
它更像人一樣可以理解基礎、復雜的每一句話,做到精準的話語意圖識別,思考反饋。
如,鋼鐵俠:信不過別人,就先放我自己服務器上——賈維斯:這次算秘密計劃吧?
可惜,讓機器像人一樣思考和理解是目前的技術瓶頸,是弱人工智能所不能企及的。
第二,讓我們覺得有意思的是,賈維斯提供了全息影像的人機交互方式,雖然這種交互方式不如語言交流來得便捷,高效。但,也正由于一些信息是沒法通過語音表現,而又不得不處理這些信息時,全息影像的隔空控制是擺脫物理控制、屏幕控制乃至新型的觸控投影的最佳方式。
全息影像,也就是增強現實(AR)的結果,以現階段的技術實現來看,AR所能達到的更多是呈現一種沉浸式的畫面體驗。
最后,也就是賈維斯最為智能的地方,漫威的影迷肯定知道,從鋼鐵俠的系列更新,到復仇者聯盟的系列更新,鋼鐵俠一次比一次厲害,也許這是劇情所要。但,不能忽略的是,鋼鐵俠的強化,其實是賈維斯自我進化的結果。
“自我進化”說起來或許比較空曠。換種說法,我們看到的賈維斯在接收鋼鐵俠的命名后,不用鋼鐵俠的操作,就能自行的處理鋼鐵俠的各項命令。
例如:它能創造出另一個程序來自動的組裝鋼鐵俠鎧甲,它能自行設計鎧甲及鎧甲模型,它能自行處理“結冰”的問題等
而這種智能就像人在做事一樣,不需要外在的干預就能獨立完成?;蛟S,你會覺得當前利用神經網絡的深度學習也具備自行處理信息并給出反饋的能力。
但其實,深度學習是基于特定場景才能實現的自行處理,更何況深度學習是需要事先采集無數的數據,反復的訓練后,從而形成一系列規則。然而,對某件事進行處理前還得有觸發條件(規則內的數據),才能做出反饋(非技術者的理解,可能存在錯誤)。
例如:現在著稱具有創造性的AI海報設計,就是利用深度學習的結果。它首先需要學習無數張海報,才得以知道海報美與丑的規則,還需要學習無數組海報的標簽,才能理解海報內容與含義規則。
所謂的應用,我們也知道,當我們讓它設計一張符合“父親節”主題的海報時,系統就會根據規則輸出設計。難一點的就是需要先理解輸入的主題是何含義,才能輸出符合的設計。
所以,以目前的深度學習實現結果來看,擁有創造力,自我進化,自主意識的賈維斯并不容易。
基于此,我們可以清楚,原型的賈維斯在弱人工智能時代較難走出熒幕。讀到此,或許你會疑惑,走不出熒幕的角色跟智能家居有何關系?智能家居不應該像《鋼鐵俠》賈維斯開場秀那般能自動報時、自動開啟窗簾就可以了嗎?智能家居擁有像賈維斯那般能耐有何用途?
我想,這就是智能家居的“智能”給我們造成的潛意識誤判,我們總覺得每一樣產品要是具備聯網、自動、傳感器監測、交互控制就算智能了,由此眾多家居產品就自然被冠以智能的名號。
所以,我們就覺得智能家居并不需要像賈維斯一樣以人工智能管家身份存在。但想想,缺失人工智能技術賦能的家居產品,是真的智能嗎?真的會變革家庭生活方式?
奈何于只要人工智能(AI)對某個行業或某個場景成功賦能應用,就“稱得上”變革、顛覆。似乎顛覆是AI的一種標配。
不過從金融、交通、醫療、安防、教育等領域都有AI成功應用的典例來看,“顛覆”更是AI的驅動力,如今,處處是AI的影子。
AI在這些領域的應用好像都有一個共同點,那就是更好服務于人。于是我不禁就想,人生活于家庭,那如果所有服務于人的場景都可以融合到家中,那豈不是要顛覆社會呀。雖然,只是想想,但或許這才是人工智能的一個終極目標、是人工智能最大的應用場景。
文章來源:人人都是產品經理 作者:林胖
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著移動互聯網的發展與普及,人們的生活方式發生了巨大的變化。當我們足不出戶便可以享受到香噴噴的美食、相隔千里也能有面對面的交流體驗時,大多數老年人卻被關在了數字世界的大門之外:不會線上掛號、打不到網約車、因不會操作健康碼而被公交車拒載……這樣的事件屢見不鮮,本應同樣享受互聯網便利的群體,近幾年來卻處處受阻。
數據顯示,2020 年我國老年人口達到約 2.43 億,占比 18%,50 歲以上的網民群體占比 22.8%,數量不可小覷。如何打破互聯網產品的使用壁壘,讓老年人也能自如地參與到互聯網生活中,是我們設計師應當肩負的社會責任。
貝殼經紀人作為社區的貼心服務者,經常為社區內的老年人提供幫助,解決手機使用問題。
△ 圖 1 經紀人志愿者在社區幫助老人學習使用手機
我們通過觀察老年人使用手機的過程,并與具有豐富幫助經驗的經紀人深入溝通,發現老年人使用互聯網產品存在的主要障礙如下:
△ 圖 2 老年人使用互聯網產品的主要障礙
1. 手勢操作困難
由于骨骼肌老化,老年人動作幅度減小、操作的精細程度降低,他們在使用手機等小巧的設備時難以精準完成手勢操作,很容易出現誤觸現象。
皮膚老化同樣影響了老年人對手機的使用,細胞水分減少,皮膚褶皺加深,表皮干燥以及指紋的磨損,使得在使用觸屏時靈敏度下降,即便手勢正確,也難以順利完成操作目標。
2. 信息接收受阻
老年人的感官能力明顯下降。40 歲以后人的眼部開始老化,對光的敏感度以及對色彩的分辨能力下降,更容易炫光,難以識別藍紫色為代表的冷色調顏色;聽覺的靈敏度可能會減少 50%之多,難以分辨不同的聲音。我們認為毫無閱讀壓力的界面,在老年人眼中可能是模糊一片;我們聽起來特色鮮明的提示音,甚至都沒有傳入到老年人的耳朵里;讓我們感到新奇的震動觸感,老年人可能毫無感覺。
3. 界面理解障礙
老年人很難理解互聯網產品中的層級關系,以及元素間的關聯關系,這導致他們經常不知道自己在操作哪一步驟,更難以預期到下一步會發生什么。另一方面,老年人很難通過歸納概括信息的特點來區分不同元素的功能和屬性,比如,對調整鈴聲、連接網絡等“設置”屬性的功能沒有統一的概念,想要調整時不知道去哪里操作。
4. 容易情緒挫敗
由于神經系統退化,老年人對情緒的控制能力減弱,容易情緒低落。在使用手機受挫時,他們常會感到無助和沮喪,持續的負向反饋易降低老年人使用手機的意愿。加之屢次出現的互聯網詐騙案件,老年人對手機安全問題更加顧慮,難以分辨真假信息,便不愿嘗試不熟悉的功能。
洞察到以上問題及原因,我們分別從設計、功能、公益 3 個角度出發進行探索和實踐,為幫助老年人更順暢地使用互聯網產品添一把力。
設計應當順應老年人的生理和心理特點,并給予更多的人文關懷與鼓勵。為此,我們提出了以下設計策略:
△ 圖 3 適老化設計策略
研究表明,老年人更習慣單指操作,點擊、上下滑動、放大縮小是老年人可以清晰理解并熟練操作的手勢,交互中應盡量以這些手勢為主,需避免四指滑動、長按等復雜手勢。對于老年人來說,動作的簡單易學性、高效性是最重要的因素,遠高于隱喻性、趣味性等。
△ 圖 4 老年人常用手勢
顏色:
參考《Web 內容無障礙指南》中提供的指導意見,應使用 AA 級或 AAA 級的對比度標準:對比度(AA 級),文本的視覺呈現以及文案圖像對比度至少要有 4.5:1,大文本至少有 3:1 的對比度;對比度(AAA 級),文本的視覺呈現以及文案圖像對比度至少要有 7:1,大文本至少有 4.5:1 的對比度。有很多在線工具可以幫助檢測顏色對比度以及是否達標,如 Contrast Ratio 在線檢測工具:https://contrast-ratio.com/
△ 圖 5 Contrast Ratio 在線檢測工具頁面
界面中,組件與文本對比度的標準是不同的,文本比組件需要更高的對比度。
避免使用藍色、紫色等冷色調。隨著年齡增長,人類的晶狀體會變黃變渾濁,導致選擇性的吸收藍光。所以藍色色調在老年人眼中可能會出現模糊褪色的視覺效果,從而降低元素在界面中的對比度。
顏色不應該用作傳達信息、指示操作或區分元素的唯一視覺手段,需要用額外的文字提示,如:
△ 圖 6 顏色傳達示例說明
字體:
使用字體時,最小采用16像素,需要對主要信息進行加粗處理,并支持用戶可自由調節字體大小的能力,我們建議使用屏幕可讀性好的無襯線字體。
圖形:
首先需注意增加圖標和按鈕的尺寸大小。其次,應盡量采用擬物化、通用化的設計,圖標語義盡可能具有老年人的生活時代特征,符合他們的知識經驗。最后,建議搭配文字描述,方便老年人更清晰、快速理解。
△ 圖 7 圖形示例說明
引入更多維度的信息通道,能夠幫助老年人高效地接收信息。聽覺通道是僅次于視覺的最常使用的感覺通道,在設計時可考慮:
還可以通過點擊時產生的按壓觸覺來增強感知,更多的觸覺設計能夠幫助老年人獲得更加明顯的反饋。
界面的扁平化可分為 2 個方向:一是視覺層級的扁平化,弱化視覺效果,突出功能主義,以要表達的內容或引導的操作為核心,盡可能減少干擾信息;二是信息層次的扁平化,建議頁面層級最多不要超過 2 級,縮短用戶與目標信息之間的觸達路徑。
在流程設計時,可將復雜任務拆分為目標清晰的子步驟,每一步驟中只讓用戶完成 1 項核心操作,并提供清晰的反饋,來提醒用戶要實現的最終目標。如滴滴的關懷版中對打車流程的精簡設計,很值得參考。
△ 圖 8 滴滴適老化設計
我們在做產品設計時,還要盡可能的堅持正念,尤其是面向老年群體時,需透明化個人信息的使用方式、強化危險告知,杜絕引誘式的廣告、提示等,減少干擾,避免利用老年人的弱點謀取利益,幫助他們在紛繁復雜的互聯網世界中不輕易受傷害。另一方面,建議使用鼓勵式的反饋設計,操作過程中給老年人更正向的情感激勵,提升使用信心。
基于以上設計策略,我們試著在貝殼找房首頁、房源詳情頁這 2 個核心頁面進行了適老化設計改造,其中老年版首頁已上線,歡迎大家在個人中心的設置里切換體驗。
1. 精簡功能,強化視覺元素:
老年關懷版的首頁中,我們只保留了買賣租賃最常使用的功能,同時放大入口的點擊區域,確保老年人也可以很快的發現目標功能并且順暢的點擊。
△ 圖 9 首頁球區設計
2. 多通道信息傳達與交互:
房源詳情頁承載了非常多的重要信息,尤其是頭部。我們著重突出視頻講房功能,讓老年人可以更加直觀地接收房源信息,避免閱讀大量文字,降低理解負荷。同時,大面積的分段視頻按鈕,可點擊快速切換到感興趣的內容模塊,增強老年人的操作掌控感。
△ 圖 10 房源詳情頁頭部設計
房源詳情頁底部增加語音提問按鈕,吸底展示,方便老年人使用語音直接表達自己的訴求,信息以對話的形式直接地傳遞給用戶,更符合老年人的交流習慣。
△ 圖 11 房源詳情頁底部設計
3. 信息適老化:
結合老年人在房產交易中的特點,我們精簡了詳情頁中的信息,突出房源的養老宜居特點、與子女住所距離等老年人重點關注的內容。
△ 圖 12 房源詳情頁信息設計
適老化設計后的房源詳情頁整體效果如下(此版僅由設計探索產出,若上線使用還需深入打磨):
△ 圖 13 老年版房源詳情頁設計
在調研過程中我們發現,老年群體正在給火熱的二手房市場添柴加火,上海鏈家中,單 60 歲以上的購房者成交占比就達到 6.7%,53-62 歲成為置換客群的第二大年齡高峰。
△ 圖 14 2020 年上海市老年人購房情況
老年人的改善需求強烈,在選房時主要考慮與子女居所的距離、房屋本身的優質程度,重點關注:低樓層住宅、電梯房、小區環境、周圍醫院、小區的適老設施以及是否配備老年活動中心等信息。老年群體通常委托子女處理相關事務,但又有參與選房、表達意見的訴求,有部分的老年人會通過貝殼、鏈家 App 來了解房源信息。
因此,我們思考:如何通過更好的功能設計來滿足老年人這類特征明顯、訴求明確的客戶群體?比如,通過增加老年選房專題或調優房源展示策略,優選出近醫院、有電梯、便老設施齊全的房源和小區,方便老年人快速找到心儀的房源;再比如,增加設置子女小區功能,以此為基準向老年用戶推送相關房源;又比如,優化家庭選房功能,針對性設計分享房源給父母的環節……在功能設計方面,我們還會繼續深入探索,給老年客戶一個更加貼心滿意的購房旅程。
當我們在享受互聯網帶來的便捷生活時,有一個數量不斷增長的群體成為了“邊緣人”。
設計應當是民主的,是包容的,是具有人文關懷精神的。我們在日常產品設計中,需要有意識的考慮到老年人對于信息的接受、理解、記憶和行為的能力差異,在設計表現和產品功能上更加包容這個群體的特征,讓老年人同樣可以感受科技為生活帶來的美好變化。
雖然我們在盡力踐行著適老化研究,但依然還不夠。老去,是所有人都要面對的問題,我們終將會成為這個群體。適老化設計,應該是適合所有人的設計,也應當引起所有設計師的關注。
心存善念,盡力而為。
文章來源:優設 作者:貝殼KEDC
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
寫在前面的話
從互聯網行業崛起至今,廣告視覺設計風格經歷了多次“更新換代”,技法愈發講究,視覺愈發酷炫。但無論視覺表現如何進化,終究沒有脫離互聯網行業廣告設計的常規套路。
“讓用戶能最快識別廣告內容”是互聯網廣告設計的核心原則,因此我們縱觀市面上的各大平臺廣告設計,清一色是變著花樣堆砌商品與利益點的內容形式,唯獨不見傳統廣告所青睞的——創意。
的確,傳統的4A廣告創意內涵較為隱晦,往往需要觀者沉浸體驗、深入思考才能理解當中的精髓,這并不符合互聯網廣告的設計原則,但這不代表【創意】無法融入互聯網廣告之中。
樂信設計團隊利用將近1年的時間不斷探索、輸出與驗證,證實了創意也可以融入互聯網廣告,創意能為互聯網廣告產生更大的價值。
在分期樂平臺,創意廣告比普通廣告的點擊率平均提升了3倍以上!
互聯網創意廣告設計方法論
我們團隊是怎么樣做互聯網廣告創意的?
我們團隊基于互聯網廣告設計的核心原則上,開發出一套適用于在互聯網廣告領域融入創意的設計方法論,我們稱之為 【3S原則】。
何為【3S原則】?
【3S原則】分為三個部分,即 “Simple簡單”,“Story故事”,以及“Surprise出人意料”。
SIMPLE:簡單直接,易于理解。
由于互聯網廣告的性質決定了用戶只會匆匆掃視而過,所以內容上必須盡可能的直接明了,降低用戶的識別成本,畢竟我們不是真的在做4A廣告,用戶不會靜下心來細品某一張圖。
STORY:具有故事性,能引起情感共鳴。
能快速有效地引起用戶共鳴的方式之一是,通過情景還原來擊中用戶的痛點,情景其實就是一個故事,因此一個好的創意需要一個好的故事作為載體。
SURPRISE:情理之中,意料之外。
一個出人意料的戲劇化結果可以有效地激起用戶的興趣,從而吸引用戶的關注。比如在突出相機遠攝變焦功能時,“在高樓中抓拍到蜘蛛俠”是否要比單純的焦距倍數對比圖要有趣得多?
創意方案
我們來看看具體案例。
① 美妝類創意方向
· 保濕補水
首先是一套關于護膚品的案例,主打保濕補水的功能。在業內常見的做法可能是在產品上澆點水,甚至直接放到水里面去,用的是非常簡單粗暴的手法,那我們要怎么樣圍繞它來做創意呢?
根據【3S原則】,首先我們需要一個故事背景,其實就是講清楚我們產品的賣點的是什么。
在這套廣告里我們的“故事”其實就是表達產品補水效果的強大,且故事的結果必然是出人意料的,就是要讓用戶看到之后會驚呼:“誒,居然還能這樣”。
于是我們想到了一個詞——起死回生,用了這款產品能讓你的肌膚起死回生;最后則是用最簡單易懂的手法把我們的故事展現出來。
· 創意解讀
把一個果干還原成它原本鮮嫩多汁的樣子,并且利用1+1=2這種最簡單的數學公式把果干(也就是使用前的狀態)、產品、以及水果(使用后的樣子)串聯起來,讓人一目了然。
② 手機類創意方向
做手機類的創意跟其他產品不太一樣,因為手機是屬于具有多種功能的產品類型,所以我們得考慮哪些功能會是用戶更關注的。
在過程中我們挖掘了很多方向,比如有屏幕色彩、續航能力、攝影攝像、游戲性能等等,而我們選擇的是各大手機廠商旗艦機型最著重的功能——攝影。
但攝影里面也有很多細分,有廣角、遠攝、微距、人像等等,因此我們會根據廠商機型本身的賣點來進行創意發散。
但攝影里面也有很多細分,有廣角、遠攝、微距、人像等等,因此我們會根據廠商機型本身的賣點來進行創意發散。
當中我們挑選了兩款遠攝變焦功能特別強大的機型,分別是OPPO Reno 10倍變焦版以及VIVO X30pro。另外還有一款具備超級微距功能的OPPO Find X2。
A. 長焦距遠攝創意
我們先來看一下遠攝的案例。
一般來說官方的做法是直接把焦距放大的倍數效果圖放出來,比如原圖是怎樣、放大10倍是怎樣、20倍又是怎樣。這樣做雖然是非常直接有效的,但同時也會略顯無趣,而我們要如何做這個創意?
這里我們采用了兩種方案,第一種是“捕捉不可能”,意思是通過長焦我能抓拍到正常情況根本拍不到的東西,還記得【3S原則】里提到的意外結果的比喻嗎?在高樓里抓拍到蜘蛛俠就是這種。
· 創意解讀
而我們的方案是,我們的手機變焦的強大甚至能夠抓拍到河對岸森林里的野人。那這是其中一種。
另外還有第二種方向,當然因為賣點同樣是主打“超長變焦”,其實原理是一樣的,但這種方向除了捕捉不可能以外,還結合環境聯動的效果,看起來會更加有趣味性。我們一起來看看。
從方案里我們能看到正常拍出來是一個普通城市風景,當變焦到40倍時會發現“誒,大樓窗邊好像有什么東西”。當變焦到最大60倍時會愕然發現,居然有個人拿著張紙叫你“買它”,而且紙上還有個箭頭指著下面的手機。這種把畫面內容超出邊界,與環境互動的手法本身就比較特別,并且還蹭了個李佳琦的小熱點,最終形成了化學反應,使得我們的廣告更有趣味性。
其實在手法上用的是業內常用的倍數對比效果圖,但當我們有一個戲劇化的結果時候,一切都會變得不一樣起來。
B. 微距創意
我們再來看一下Find X2微距的案例。
同樣官方直接展示微距攝影圖,那根據 【3S原則】的“意外結果”,我們能不能通過拍攝微距,拍到一些不可能的奇妙事物呢?
· 創意解讀
由于疫情的爆發,我們不管去哪里都得帶上口罩,基于此我們把“疫情”、“口罩”這種熱點考慮到我們的創意里,于是得到了這個方案:我們通過微距攝影拍到了帶口罩的螞蟻!
利用這種超現實的夸張結果可以讓用戶眼前一亮,同時結合了廣告投放時正處于疫情這種特殊時期,可提醒用戶外出記得帶口罩。
C.5G及游戲性能創意
接下來還有關于5G及手機游戲性能的創意。
最近“5G”功能可謂手機界最大的熱點,而我們也圍繞了“5G”進行過創意?!?G”時代的到來預計會對人們的生活帶來顛覆性的改變,但由于現今尚未普及,我們想要接地氣的宣傳“5G“功能的話還需要結合一些現有的用戶痛點才行。
恰逢騰訊黑鯊游戲手機的上市,給了我們機會點,我們決定以5G+游戲性能為目標開展創意。
但現今手機對游戲性能的體現主要是硬件維度上的展示,但如果我們需要結合用戶痛點來體現我們的創意,則需要更清楚游戲玩家有哪些痛點才行,那么用戶在玩游戲時都會有哪些痛點呢?
我們根據簡單的用戶調研發現,玩家們最關注的痛點是“網速”、“性能”,由這兩個因素引發卡網、卡頓甚至掉線或死機是最難以忍受的,尤其是在競技、對抗類游戲中,稍微“卡”一小會都能影響比賽的勝負。
因此我們利用“卡網”這個痛點來開展創意,并根據 【3S原則】,給出了因卡網導致的意外結果。
· 創意解讀
創意主要結合了當下流行的游戲“吃雞”,畫面上以“對面快把你打死了,你連武器都還沒加載出來”來體現網絡卡、手機卡導致的悲劇,配以文案“絕不輸在加載中”來反向提醒用戶,你需要一臺性能強大、網絡連接極好的手機。
D.一加手機創意系列
這套創意主要圍繞著新品“一加8系列”手機來展開,我們對一加8手機提取了主要的兩個核心賣點。一個是一加8的“輕量”(整機重量只有180g,為當時全網最輕的手機),以及一加8pro所具有的超強還原的“瞳孔屏”。
針對這兩個賣點,我們根據【3S原則】延展出兩套創意,分別是以輕量為主的“輕如無物”,以及以屏幕還原為主的“以假亂真”。
方案一:輕如無物
· 創意解讀
既然主打輕量,那我們便把“輕”這個概念做到極致,讓“輕”變得“更輕”,變得就像空氣一樣,完全感知不到它的重量,因此畫面上展示的是拍照、玩游戲等日常的手機使用情景,但人物的手是空的,只保留使用手機時的姿勢。
方案二:以假亂真
· 創意解讀
對于“以假亂真”這塊,我們也延伸出了兩種不同的方向。其一是屏幕逼真顯示的事物騙過了寵物,營造出一系列出其不意的有趣結果,如小狗無視了遠處的飛盤,把手機叼回來給主人,以及貓貓被屏幕顯示的魚騙到,不停地舔屏;
至于其二,除了主打屏幕逼真顯示的賣點以外,創意上還融合了一加8全網最輕手機(僅180g)的理念,把手機置換成撲克牌,或者用小尾指撐起手機,仿佛如蝴蝶般輕盈。
數據反饋
以上創意方案我們均通過ABtest得知點擊率有很大提升。
補水專場:
創意廣告點擊率提升約2.87倍
OPPO Reno:
創意廣告點擊率提升約3.39倍
vivo X30 Pro:
創意廣告點擊率提升約3.87倍
OPPO Find X2:
創意廣告點擊率提升約3.13倍
騰訊黑鯊游戲手機:
創意廣告點擊率提升約4.49倍
一加8手機:
創意廣告點擊率提升約4.71倍
以上創意廣告不僅點擊率有大幅提升,對分期樂平臺首頁廣告區域產出的GMV也帶來了積極的提升作用,創意對GMV的拉升率約3.91%
One more thing?
然而,我們除了在平臺首頁banner應用創意以外,是否能有其他渠道,利用創意創造更大的收益呢?
答案當然是——有的!
· 品牌合作
有了創意,將使我們能與品牌方達成更深層次的合作。
我們可以利用創意來跟品牌方置換資源,比如在一加8系列廣告中,我們通過創意為公司爭取到品牌方的微博、微信、社區廣告的投放及眾多周邊產品,通過投放我們的創意廣告提升雙方的品牌曝光,促進手機銷售,實現雙贏。
創意,能讓我們的設計不再局限在自身平臺,能以更多的維度創造更大的價值。
結語
項目啟動至今,整個過程都由我們樂信設計團隊的設計師主導并推動業務方,我們持續挖掘創意在互聯網廣告領域應用的可能性,持續跟進數據反饋,最終不僅在專業維度上產出了優秀的創意作品,更在商業上取得了優異的成果,我們證明了好的設計、好的創意是具備促進業務增長的商業價值。
文章來源:站酷 作者:樂信用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在工作中,由于需要帶一些新人了解 B 端知識, 而他們了解到的關于 B 端資料又非常少且都是碎片化的呈現。并且相對于 C 端的創新和趣味,會覺得 B 端設計顯得更理性,視覺發揮空間相對有限,也會對 B 端設計的價值產生迷茫。因此,我嘗試將自己 B 端經驗提煉總結出來,一方面用于給團隊成員做培訓,另一方面也整理成文章,分享給其他同仁,希望互相學習。
作為剛接觸 B 端的人,可能并沒有很快的認識到自身的角色和其所具備的責任、技能和能創造的價值。也不清楚如何體現自身價值以及增加自身價值的方向。
我們先來看一下基本產品的設計流程
△ 基本產品設計流程
你常常聽見的設計流程就是產品出原型,在原型和需求文檔的基礎上進行設計,這在與產品的配合中屬于被執行者,被動的接收產品的需求,按照原型輸出設計稿,這會使 B 端的設計變得無趣,也體現不出你的價值。
△ 你當前的流程
實際當中你可以是與產品互相成就、互相補位。與產品共同參與到對需求的挖掘、用戶分析以及調研摸底當中,這會使你對項目的了解和后期的需求分析具有很大的幫助,能與產品一起組合考慮需要解決的根本問題是什么,我將采用何種設計方案去解決問題,這樣才不會變成被動接收信息的工具人。
你要對所屬項目的深入了解,看看是業務支撐類產品還是辦公協同類產品或是商家端的產品等等,先了解是干什么的,在了解使用人的操作習慣和哪些方式對他們效率的提升有幫助。平常也要注意對通過用戶發聲的渠道收集他們對產品的討論、建議和意見。便于我們對問題的積累和歸類,使我們更容易站在全局的角度上思考問題,當啟動相關問題的設計時我們能更快捷更深入的設計出用戶需要的東西。另外幫助我們在與產品討論一些迭代的體驗優化提供數據支持。
B 端設計師的核心競爭力就是解決問題的能力,快速理解業務和處理業務的能力,只有擁有這些能力后,才可以去創造更多的價值。
B 端設計師可以在這幾個地方鍛煉自身的價值:
1. 從拆解入手:
我們通常在設計工作中會遇見小需求和大需求(包含多個產品模塊小需求),小需求基本上是點對點需求,不需要細化拆解,這里就不多說了。
而大需求通常包含多個小需求,我們要采用化繁為簡的方法——先規劃后開工,拆解設計任務,從整體出發系統化的思考產品任務,在明確產品目標和設計目的后對需求進行拆分為多個階段,再對每個階段進行設計。在你拆分任務的時候你已經對未來的工作在心里有了建設,比如哪些地方是核心展示區域,我們需要花費的精力是多少,哪些數據圖的展示形式會造成下游工作量的增加,是否對整體進度產生影響,哪些明細的展示是次要的花費精力最少,這里面也有可能會有團隊協作的情況,這就要求大家有一致的目標、一致的規范。
△ 基于目標拆解需求
2. 從解決問題入手:
后臺的搭建離不開一套強大的、統一的 UI 規范。規范是設計視覺統一的基礎也是配合技術團隊高效產出一致體驗所必不可少的工具。
說到規范就得提一下組件了,組件的產生是為了避免我們重復的造輪子,并且對控件細節進行了把控。市面上雖然有已經成熟的組件,但是和自身的業務特點并不一定貼合,就需要我們基于 B 端產品特性和自身業務特點,以靈活性、復用性、全面性的設計原則來進行設計,例如我們就對頭部篩選項的自定義設置,在縱向間距關系和橫向間距關系上指出信息之間的距離和關聯性之間的關系,更能靈活的選取我們想要的狀態進行搭配,復用全局的使用。提升了研發團隊的效率也解決了視覺一致性的細節問題,節約時間去做更有意義的事情。
△ 根據類型選擇需要的頭部篩選組件
對業務需求的 100%支持是設計的本職工作,那么我們的附加值就在“賦能“上,說起賦能我們就要說一下文章開頭對思維的培養了,對思維的培養就是對需求的深挖,對問題的收集和思考,那么再進一步就要行動起來,主動進行用戶調研,挖掘需求的突破點,找到更好的解決方案和更有價值的驅動點。那么我們在對不同項目賦能時也可采取此種方法進行思考,拆解任務跟進落地,提供規范與組件支撐,采集此流程中帶來的價值,在項目結束后進行復盤總結,逐漸沉淀累積自身能力,逐步搭建自身的方法論在驗證中成長。
這是一些我對自身價值尋找的一部分提煉,在工作當中我們也有很多其他方面的價值,這需要你自己去尋找,在尋找中增加自身價值,在設計中體現價值。變得越來越好。
文章來源:優設 作者:JellyDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近日在短視頻上有關「高德 AR 導航」的相關視頻成為爆款,得到了廣大用戶的歡迎和點贊,下面就和大家一起分享,高德 AR 導航從無到有的體驗設計原則和背后思考。
△ 高德 AR 導航效果
各大公司入局 AR 現實增強領域,現實增強技術也逐漸趨于成熟,隨著對 AR 應用領域深入探索,圖像識別數據的積累以及 AR 導航體驗探索變得非常重要。高德地圖基于大量的地理信息數據和精準的導航能力,AR 實景導航正式發布,讓駕駛員能夠身臨其境的感受增強現實帶來的駕駛樂趣,那么在復雜的環境中又如何把握體驗設計?與界面設計又有什么不同?一直是我們在思考的課題。
我們先從用戶反饋、競品分析、AR 導航載體、安全性、環境感知、設計語言 6 個層面切入分析,把探索的方案落地到 AR 引擎中實驗,再到高德地圖車機版上線驗證,最后服務于高德 ToB 車企出貨,帶來實際收益。
作為設計師,習慣了用屏幕的二維空間去思考信息效率的最大化,但是把體驗和設計放在三維空間中,會受到環境、光線、安全性、場景、人、車、路等相互影響。
1. 環境影響設計
環境的變化影響分為自然環境、道路環境、駕駛環境三類,不同的天氣、道路等級、駕駛因素都會對駕駛員的感受、反應、狀態產生影響,所以在 AR 的空間體驗設計中,這些影響需要充分考慮其中。
當考慮完環境因素后,還應該去真實的駕駛情景中分析信息呈現的權重,比如車輛在行駛中前方移動的物體一定比車輛靜止時看到移動物體的權重要高,那么在設計上,需要明確信息層級和顯示時機及策略,讓駕駛員在行駛中能夠快速獲取,且正常駕駛不受其影響。
2. 空間體驗設計
AR 空間體驗設計最大的難點在于:在界面設計中,我們只關注信息層級、顏色、大小、動態等,都是在二維平面中去思考信息效率的最大化,但是在 AR 的三維空間中,除上述我們還需關注安全性、空間性、以及如果讓駕駛員快速獲取增強信息來輔助他進行平穩駕駛。從下圖比較看,在界面中告訴我前方有什么路況信息遠遠不如直接看的效率快。
AR 導航的視域不僅要考慮水平、垂直視野中的布局,劃定舒適區域,還要考慮距離對于信息呈現的感受。
經過以上對于布局的規劃,我們可以得到以下布局關系。
3. 顏色及視覺權重
在顏色的選取上,讓整體的配色符合真實世界的認知,在我國道路交通中對于顏色界定,路牌中的藍綠色為不會立即影響駕駛者行為的信息,紅色、橙色、黃色用戶告知駕駛員暫時性和永久性的危險,所以我們可以得出以下顏色體系。
在 AR 導航設計中,最大的不同在于,你所有的設計都需要跟據實現后的策略+真實環境路測去反復調整,檢驗設計邏輯是否符合駕駛員的真實感知,經過了大量路測及實驗才能敲定。
1. 案例分析
我們嘗試用一個案例展開來訴說實際的道路環境遠比紙面上的分析要復雜的多。
在司機正常駕駛中,既為用戶提供了紅綠燈檢測,又給用戶提供了車道線提示,單獨看紅綠燈識別及車道線提醒都沒有問題,但在十字路口場景可以發現,紅綠燈和車道線重合,帶來了信息疊壓的問題,經過分析發現:
針對上述的紅綠燈和車道線重合問題,可以從兩個層面分析解決。
所以迅速采取了方案 2 的方式,讓紅綠燈和車道線差異策略時段顯示,規避了該問題,上述問題為簡單舉例,在實際現實空間場景時,需要注意的是現實物體識別是否遮擋駕駛視線或者和 AR 常駐信息重疊。
△ 壓線效果
△ 場景服務卡片
△ 斑馬線提醒及行人預警
我們試想下,如果在轉彎情況下,我們展示了很多行人 ADAS(預警系統)提醒,是否影響了正常駕駛?在每個元素出現和消失的時候,需要充分的考慮到它對其他元素的影響,是否符合 AR 空間設計體系和權重策略,差異化顯示為更優解。
△ 標注:本篇文章內容效果在后續版本中陸續上線
抖音、快手、snapchat 等國內外社交平臺上的 AR 濾鏡應用大多簡單有趣,比如給你的臉上實時畫個妝,拍邊時四周漂浮一些可愛的小動物,非常符合現代人的使用心態。但是 AR 在地圖中的應用(如步行導航、駕車導航) , 也應該考慮如何利用 AR 的特性讓地圖中的數據清晰易懂、與人的互動也變得更輕松隨意。
常規使用導航時,隨著地圖放大,可以看到更多的道路細節(車道數量,路邊停車位,斑馬線,交通事故等)。但是開車時需要時刻和真實世界做對應。受限于屏幕大小,這些信息的展示總是有限的。當我們用上了 AR,這些信息就能直接展示在真實世界中的相應位置,不用費力去尋找。傳統地圖的方式也將被顛覆。
案例分析 1:放在道路上的虛擬路障
利用 AR 視覺效果進行更逼真的強警示作用,而不是導航路線上的一個簡單標記。
案例分析 2:AR 導航商圈透出
開車到陌生城市時,結合 AR 地理位置標記,能清楚的知道所在商圈的信息。
2. AR 在出行領域的更多應用
隨著城市建設路網越來越復雜,AR 在旅游景區的導覽,多種交通工具混合出行的場景都能更好的發揮出價值。這也是今后我們探索的方向
文章來源:優設 作者:AlibabaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
帶各位了解下B端和C端的區別,重點介紹下設計規范體系搭建的框架和思路
C端 Consumer,表示為消費者、個人用戶或終端用戶,
直接面向普通用戶提供服務來幫助他們實現個人需求,
常見就是大家手機中常用的應用。
B端 Business,表示為商業和企業,
是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺,
常見的兩種類型:
支撐前臺產品(千牛、商家后臺、微信公眾平臺、微信開發平臺、微博開放平臺等)
資源管理產品(Sass、ERP、CRM、OA、WMS、TMS、呼叫中心客服系統、FMS財務管理系統等)
C端產品主要偏向消費互聯網,更感性,怎么用的舒服怎么來,用戶體驗極佳;
B端產品主要偏向產業互聯網,更理性,能解決實際問題,降本增效;
因為B端產品屬性不同于C端,競品參考少之又少,能找到也可能因為付費或者權限的原因,無法從“上帝”視角查看全局,也只能看到冰山一角,而且每個企業單位都有一套自己的產品體系,競品差異化還是有的,但是有一點是不變的,就是設計底層的規范和原則,變得只是產品流呈現,就像樂高。
B端產品往往擁有復雜的業務邏輯且頁面量級巨大,快速迭代也會引發頻繁的變動以及并行概率的增加,需要設計師內部協同,或與開發能夠快速的產出方案保證上線。這樣的工作模式引發的副作用如:“體驗一致性差”、“設計效率低”、“還原度不可控”的問題也逐漸顯現,變成一個急待解決的問題。
設計規范就是為了節約成本,提升效率,保證質量。
這里不由得要提另一個概念——原子化組件思維,一個完整的頁面是由無數個元素構成的,頁面元素可以進行層層拆解。“組”是頁面元素的搭建方式,“件”由不同的最小單位解耦元素組成。
這里著重說一下一定在前期做好設計規范的規劃和宣導落地,自己在項目設計執行階段因為時間緊張且經驗不足,一邊畫頁面一邊搭建規范,設計稿前后優化內容差異較大,導致有大量之前實現的頁面問題較多,后期要投入很多的時間和人力去修改,這個問題還是蠻典型的,希望各位可以意識到設計規范的重要性。
我們沒必要自己從0開始搭建,一套完整的規范體系,需要經過上百甚至上百張頁面的積累打磨才能完成,時間也不允許我們這樣做,但我們可以站在巨人的肩膀上去實現,現在很多大廠都有自己一套完整的設計規范體系,以下也是自己經常參考的規范:
螞蟻設計:https://ant.design/index-cn
螞蟻數據可視化:https://antv.vision/zh
餓了么:https://element.eleme.cn/#/zh-CN
iview:https://www.iviewui.com/
貝殼:http://design.ke.com/page/home
自己為公司建立的設計規范體系也是基于AntD,根據公司產品屬性做了一些調整和優化,才逐漸形成了適合自己產品的規范體系,下來帶各位梳理下設計規范需要做什么?
先放一張通用架構圖,總體了解下有什么
接下來帶各位過一下這五大板塊內容,重點展示會配圖解釋,沒配圖的可在文末下載AntD設計規范作為參考,
設計過程中及時要和產品研發進行溝通評審,防止大面積復用帶來的改稿,痛苦面具···
主題色、功能色(錯誤/警告/成功);
狀態色(A/B/C等級);
文字色(主要/次要/輔助/禁用/占位符/白色);
線條色(基礎/分割器);
背景色(基礎/禁用/表頭);
順序色板(8種順序顏色,餅圖/環圖適用);
同色相色板(8種順序顏色,餅圖/環圖適用);
分組柱狀圖/堆疊圖色板(5種顏色);
語義色板(成功/警告/嚴重);
文字色(軸標簽/軸單位,繼承文字常規顏色);
線條色(XY軸實線/網格虛線);
字體家族(字體識別順序);
字號(3~5種,保持克制);
字重(Regular/Medium/Semibold);
行高(一般為@1.5,較大字體行高需特殊處理);
默認(上下左右方向);
懸?。ㄝ^默認偏深);
模態框;
通用圖標(線性/填充);
行業圖標(業務需要);
間距(8點網格法是最為合適的產品間距制定方法);
框架(導航/頭部/頁頭/標簽欄/樹狀容器/內容區域);
柵格與標注(篩選/表單/詳情/表格單元/彈窗);
順手
常規按鈕(填充/線框/虛線按鈕);
圖標按鈕;
文字按鈕;
下拉菜單、標簽頁、步驟條、分頁器、錨點鏈接、面包屑;
輸入框、選擇器、單選框、多選框、開關、日期選擇器、時間選擇器、滑動輸入條、上傳;
頭像、徽標、標簽、文字提示、氣泡卡片、內容、表格、滾動條、統計數值、時間軸、折疊面板、分隔器;
對話框、全局提示、警告提示、進度條、結果、氣泡確認框、加載中;
空數據、電話號碼、數值、金額、日期、時間、相對時間、脫敏、標準詞匯庫;
數據可視化這個板塊其實并沒有想象的那么簡單,畫個圓畫個長方形什么的,你要重點了解的是以下幾點:
1. 選擇正確的圖表類型(時間類、比較類、分步類、流程類、占比類);
2. 組件使用規范和說明(標題與注釋、軸、圖例、標簽、提示信息);
3. 圖表布局自適應(面對海量數據量與有限屏幕空間的沖突);
4. 交互(數據獲取、信息加工、知識流轉);
這里不多做贅述,基礎介紹可以看看之前發布的文章,深層級的介紹可移步https://antv.vision/zh。
規范體系搭建完成后,我們就可以用組件去搭建各類型場景的標準模板頁面了,就像搭積木一樣,過程還是很有成就感的。
登錄頁、引導頁、工作臺、查詢列表、表單、詳情、彈窗、左樹右表、設置頁、異常頁、空狀態;
每一類模板頁面都有自己的使用場景、基本構成、注意要點等,舉個例子,
1.【工作臺】為用戶提供處理和查看信息的捷徑,為產品適當宣傳產品的新動向等運營內容。
2.【查詢列表】四大構成:數據過濾—數據統計—數據列表—批量操作;;
3.【表單頁】明確當前頁面任務,快速定位修改目標,簡化填寫流程,確保用戶準確、輕松、快速地完成任務;
最終的這些模板頁面還是要根據自己公司的產品屬性來做一些調整,隨著經手的同類型頁面越多,最后的模板頁面越標準。私密原因,這里展示些AntD的標準頁面參考下:https://preview.pro.ant.design/
上述就是規范體系的主要構成了,規范搭建也只是設計部門的產出物,宣導和落地才是重中之重,
我們要對產品和研發拉會進行一次完整規范的內容宣導,
讓產品同學明晰現在的產品框架和樣式,原型圖繪制樣式和交互接近視覺稿;
讓研發同學知曉我們是基于什么前端框架設計,源生組件有哪些地方修改過,還原過程中注意些什么;
給出我們規范的產出物,一份完整的PDF查看手冊,一份上傳設計稿可查看標注的鏈接地址和一個規范迭代文檔,方便相關人員查看和對接迭代。
這中間過程不比規范搭建所花費的時間和精力少,做好持久戰的決心,公司產品體驗升級是否能成功就靠這一戰了···加油。
以上就是本次分享的全部內容了,總結的方向比較多,但都不太細致,也是先給各位一個整體框架和思路來應對相關的設計,更多的內容可以多去參考大廠,你會發現很多有意思的東西,從0到1或者從0.5到1,自己去探索去實踐,成就感滿滿,這個過程就是進步的味道,相信你會愛上。
文章來源:站酷 作者:MiFan菌
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這幾年私域流量這個詞很火熱,很多企業都開始做私域流量,特別是在微信場景下進行的社群運營;一個優質的社群運營能讓社群一直處于活躍狀態,并且可以提高轉化率;本文作者分享了關于微信的私域流量生意,我們一起來了解一下。
最近這兩年,隨著在線教育和社區團購行業的興起,私域流量這個詞越來越被大家所熟知。不過我很討厭私域流量這種說法,仿佛不把人當人看,而僅僅是一種流量數據指標而已。
那么什么是私域流量呢?用一句話來說,私域流量就是一個能與顧客拉近距離,離用戶最近、最方便觸達的方式而已。
在這之中,人情味是核心,比拼的是執行力,是一個慢工出細活的事情。
做好一個私域的內核是用戶和內容的運營。
我今天來說說私域中的一個類目,社群運營
整個體系涉及到了打磨產品、如何做好增長、如何做好用戶的活躍、和內容的產出以及如何服務好用戶的多元化需求。
我相信在座的各位,在私域中與用戶打交道的時候或多或少的溝通問題。
解決溝通問題有一個核心思路:你說出去的每一句話,做出來的事兒,都要真誠。
我們今天拆解的兩個案例,一個是目前互聯網最大的創投類科技媒體同時也是納斯達克的上市公司;另一個則是目前國內規模最大的針對于企業高管的知識付費課程。
還有一系列的私域案例,有我深度參與的,有我日常打輔助的,也有也有我們進行代運營工作的(但是由于客戶的隱私問題,有的案例我不方便透露具體的名稱)。
我敢保證,今天的兩個案例在座的人80%的人都或多或少使用過他們的產品,或者聽過他們的名字。
為什么我把冷啟動放在第一位?
因為一個冷啟動好與壞直接關乎于后期的分銷變現的效果。
先說一下XX創新大學。
目前市面上很多頭部知識付費的公司,他們開始做上市輔導的IPO工作了,不要天真的以為這些公司都是靠單打獨斗起來了,其實他們在很多的城市都有地方站的布局。
看似很牛逼,但是你知道他們在早起布局的過程中,也栽了不少的坑。
知識付費的地方站本質是一個代理生意,由于這是一個代理的生意,執行人員很容易按照原先設定話術和引流的一些行為ctrl+v 進行運營工作,但很快就發現了問題。
一是因為地方的認知與一線城市的差距很大。
不知道大家在過年回家的時候,跟身邊的朋友或者當地的企業家前輩聊天的時候,能發現的明顯的代溝。
我認識的很多當地傳統企業的老板他們對于互聯網和新媒營銷的認識差距還是很大的。
其次,是因為當地年齡代溝的問題。
我們發現當地企業領導和公司高管都是將近四五十歲的人,線上時間較短,更不要提成交轉化了。
基于這兩個問題,我們開展了一系列攻艱克難的嘗試。
首先,我們通過了很多人脈在線下對接到了很多地方優秀的創業者,在接觸的過程中發現,大家在疫情時期對于傳統行業如何轉型有著迫切的需求,而且他們泡在線下的時間遠比線上的時間多。
針對于這一點,我們打算從線下的交流分享會進行切入,將交流會的服務搭配著虛擬會員一起售賣,不僅提升了客單價還可以發展很多線下的分銷渠道。
那我們是如何做線下的冷啟動呢?
因為對我們而言,線下流量的多少,直接關系到我們的成交,以及品牌勢能,包括后期分銷渠道的搭建。
因為我們針對的更多的是企業家,也就是B端的用戶,他不像C端的流量可以進行投放去算ROI。一個好的冷啟動是非常關鍵的。
當時我們想了很多花里胡哨的操作,最終讓我們醍醐灌頂的是王興說過的一句話。
王興最喜歡講的一句話,結硬寨,打呆仗,你知道這句話誰說得嗎,是曾國藩。
曾國藩曾給清廷上奏,原文是這樣寫的:
“臣不善騎馬,未能身臨前敵,親自督陣。又行軍過于遲鈍,十余年來,但知結硬寨、打呆仗,從未用一奇謀、施一方略制敵于意計之外?!?
說白了,這里講的就是步步為營,穩扎穩打,不出奇兵,戰勝對方。
我們經常說一句老話,就是:聽了這么多道理卻依然過不好這一生。
我問一下大家,大家有多少人堅持100天來履行自己的健身計劃呢?所以說,大家抓執行的能力的度待提升的,因為大部分人是不一定具備躬身入局的能力。
就拿我們老家,河北省的地方運營中心來說。我們也算是把細節做到了極致。
我們前期,通過人脈關系讓所有人都免費參加,來增強線下的初期勢能。
針對地方已購買產品卻長期沉默的用戶我們人工電話一個個電話或者線下一對一的去進行召回的。在這里說一點,一個聲音好聽的妹子,確實可以讓用戶多聽你BB一分鐘。
那個時候一天在線下能見30多個人,嗓子都干了,確實累,不過,只要有效,莽就完事了。
用盡一切的能力去找到聯運方,那個時候我們很榮幸的找到一個很有名的讀書的地方代理,但是大家要記住,在聯運的前期,一定要把雙方的權益寫清楚,否則后期會遇到很多麻煩的事情。
動用你所有邀請到的人,讓他們去發發朋友圈,因為他們企業家的朋友圈還是比較精準的。
那個時候我們通過大半個月的時間基本把當地的創業者跑了一遍,初次召集了2000多號的人。
試想一下當地上千號的大小老板在同一時間的發朋友圈幫你宣傳,是一種什么樣的影響力。
利用個人IP好好的去做內容,保持個人的內容輸出。
通過這種方式我們在前期基本上能在當地進行小規模的刷屏。
后期我們又不斷提升線上的影響力。我們在抖音、快手和視頻號的平臺選擇中,最終選擇了全力做視頻號;我們利用手中已有的企業家資源,進行微信視頻號的連麥直播,通過社交關系,很快的就覆蓋了市內的大部分企業家,不僅增強了品牌的影響力,也慢慢的增強了他們對于線上的使用習慣。
到此為止我們才慢慢的開始利用品牌的影響力開始裂變分銷。
我相信很多人都在意社群的轉化,在意分銷體系的搭建;只不過一口吃成一個胖子,這是不現實的。
在分銷轉化之前還有很重要的一步,就是活躍。
這個案例是一個行業媒體的社群。
在上文中我們列舉了冷啟動做起來的種種方法,在啟動后相信很多人都遇到了一個問題,社群是有生命周期的,我們拿這個行業媒體的社群給大家拆解一下生命周期活躍的這個事兒。
作為行業媒體來說,大家更看重其自身所帶的內容,所以在社群的活躍方面,用戶的忠誠度一定是以內容的價值來衡量的。
那么針對于一家互聯網創投媒體來說什么是有價值的內容呢?
創投媒體的受眾大部分是以互聯網、廣告營銷、金融為主的人,還有一部分的創業者和對商業科技感興趣的學生;所以在話題的選擇上也是圍繞這些去做文章,盡量的找一些大家感興趣的話題引起討論。
如何做一個社群交流的話題呢?
按照我的總結就是:信任感+信息差。
所謂的信任感,來源于用戶對于品牌信任,以及群友對于群主的信任。絕大多數人不具頭部品牌的影響力,那么就更要專注于你與群友之間的信任建立。
信息差是什么?俗話說:三日不見當刮目相看。
為什么人和人拉開距離的速度會非常的快?這背后的原因就是是彼此的認知和信息差不一樣。
國與國之前有信息差,行業之間有信息差。那么信息差呢?
我來舉個例子!
我問大家兩個問題:
這些看似是討論移動支付或互聯網金融的商業問題,但這個簡單的問題底下是我們通過詞云埋藏了十多個話題點供大家討論。
每一個詞云點里至少有大于三種的討論方向,大家想想海王為什么和姑娘總有的聊。
那么當這種內容進行發散輸出的時候,這就是大家所期待的有價值的內容。
作為一個好的群聊話題,它是有節奏性的,從拋出話題,再到討論話題,再到最后話題的總結,它是一個有始有終的過程;所以說,作為群主,想好這個話題的討論點,把控好每一個環節,不要讓這個環節里面出現過于激烈的爭論。
如果有的話,你需要動用自己的情商去好好的緩解;千萬不要評判這個人說的是對的還是錯的,其實世界上所有東西在我看來沒有對和錯,只有說合適和不合適。
分享的形式有兩種:一種是邀請嘉賓,另一個是主題討論。
我們會利用客戶平臺資源去邀請一下嘉賓?;蛘哐埲河堰M行分享。
有的群友可能沒有那么系統性的輸出,那么就可以進行一個主題會,比如我曾經就邀請了關于電商平臺的運營人員、MCN以及品牌方從各個角度來講解關于品牌營銷的主題演講。
那在群里,什么樣的人符合KOL的標準呢?
當一個合格的 KOL,其實并不容易,既要上知天文又要下知地理,又要能文善武,既要保持調性,還要平易近人,不能讓群友太過仰視,離群友距離太過遙遠;更不能讓群友們俯視,變成單獨服務向的“客服小妹”。
那我們篩選的漏斗模型是什么呢?
大家一定要好好服務好這些人,無論是做一筆生意也好,還是交朋友也罷,這些挖掘到的kol都是你在數字世界開疆拓土的戰略盟友。
他們獨樹一幟的思想一定是能夠在未來引起別人的關注。
在分享的過程中,一定要對分享者多多鼓勵,畢竟誰不喜歡被表揚呢,無論這個分享是怎樣的,能分享就是好的;一定要讓分享,成為群內的良性循環。
不過再怎么活躍,各位一定也會遇到死群的問題;很多做微信生態的人都非常的擰巴,總覺得解散社群是一件非常抹不開面子的事情。
對于一些死群,我會利用解散社群重組的方式重新活躍。
每一次換血都意味著生命體細胞的再造。
這句話話怎么理解呢?
其實社群生命周期的本質跟細胞的組成是一樣的,按照生物學的角度來說:人體細胞是有壽命的,每天都在更新,衰老死掉的細胞會被新的代替。
但是,人的大腦細胞是永久不變的,就算過了7年的周期,你的腦子依然還是同一個。
那么針對于社群來說,群主就是這個生命體的大腦,群員就是細胞,你的信息與內容就是流動的血液。
不要害怕社群的生命周期,作為一個生命體來說,攝取更多的氨基酸和維生素,尋找新的細胞來源,才是大腦應該考慮的事情。
當社群到了無話不談的時候,就會出現新的交流需求。
群中有的人聊生活,有的人聊工作,有的人聊行業。
大家從陌生到熟悉是需要時間去建立的,每一個愿意在群里聊天的人都有他存在的意義,每一位發言的群友都值得被認真對待。
對于絕大多數人來說,剛開始進入一個行業,最佳的方式不是創新,而是復制頭部玩家成熟的模式,以保證自己能夠在行業理解、團隊結構、 技術運營等能力上迅速度過冷啟動期;所以每一個互聯網人,都應該有分析項目、拆解項目、復制項目的能力。
我們需要對于行業頭部的打法保持敏感,同時想把辦法跨行業的知識進行融合。
群主本身即群員,我們既是社群的運營者,同時也是別人社群的群友。
當你脫離出kpi的數據視角,用人本主義的視角和同理心去理解社群,你會發現更大的世界。
求知欲就是對一切事物保持好奇。
我特別喜歡的一句話就是:好奇心是我對這個世界永不停歇的熱情。
在人類的進化史中,人類之所以為人,是因為人會使用火。在數字世界中生存進化,我們也需要利用好一切可以輔助運營的工具,方便我們進行事半功倍的管理。
我時常問自己一個問題:一個知識社群的終局是什么?社群模式的天花板又在哪里?
先直接說一個結論,從長期來看,社群必然走向沉默。以社群為主的商業模式也注定會有天花板。
社群經濟更多的是以服務成年人,以活躍的角度來說,沒有一個人有時間在群里面天天扯閑。而且隨著社群的發展,會逐漸導致流量的不精準,群里面也會逐漸“水”化,這是其一。
其二是因為,隨著社群規模的擴大,就必須要做標準化的流程。
大家知道標準化是什么嗎?
標準化意味著工業化,工業化的過程中就很難讓底下的執行人兼顧到互動和情感。
但是,互動與情感其實是在數字社會中是尤為可貴的,這也是主辦方伴我們召集在線下的原因,我們在線下的每一個點頭,每一次眉頭緊鎖,都是很好的情感交流,這其實是在一個工業化的社群中很難做到的。
但這不意味社群的生意不賺錢,一個高效率的社群一定要講究標準化,只有足夠穩定的SOP才能做起來規模;所以社群組織的機體再生能和情感傳遞力才是我們應該多思考的思路。
解題不一定在當下,當大家好在嘲諷拼多多的拼一刀的時候,黃崢已經在思考生命科學和糧食安全的事情。
我粗淺地認為,這個事情,是從他22歲和段老師一起會面巴菲特的時候,就已經注定。
做一個砍一刀的電商并不性感,利用科學為社會提供價值才是性感;做一個數據導向的社群不性感,讓社群有生命力有再生能力,才是真正的性感。
文章來源:人人都是產品經理 作者:紙皮小火車
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn