刀友訪談:被數萬人使用的產品設計模板怎麼做成的?

本文共計:6000字左右,乾貨超多,建議收藏後慢慢看~

一晃眼,「墨刀產品素材設計大賽」已經過去快一個月了。所有優秀的作品均上傳到素材廣場中了。

看到它們陸陸續續被刀友們查看、使用、收藏,作者和我們皆倍感榮幸。

前六個均是本次大賽的作品

我們先後採訪了「最佳產品設計獎」(點擊這裏查看文章)、「最具潛力產品設計獎」(點擊這裏查看文章)。

從獲獎人的表述中,我們瞭解到圖片社交產品通過配色和一些小設計可以年輕又高級,後臺產品要卡片化、層級化、情感化,以及一個旅行產品其實能涵蓋多種業務。

今天要繼續跟刀友們探討產品設計相關的內容,這次邀請到的是「最受歡迎產品設計獎」的三位獲獎者。

他們將與我們分享:醫療產品應該注重什麼、兒童教育產品跟其他教育產品的區別是什麼,還有怎麼才能做出讓老闆愛的全網最完整AI客服系統。

全網最強的AI客服系統

老闆最愛的男人

作者簡介:老闆最愛的男人—胡小弟,耿直的北方人,沒啥特別愛好,平時喜歡喝點小酒,帶狗子珠江邊溜達溜達,典型的老年生活。

點擊此處,體驗原型

參賽純屬偶然,主要是爲了分享經驗。前前後後用了一週的時間,結合了過往經驗,做了這樣一個大部分場景下或多或少都會涉及到共計173頁的完整客服後臺,具有一定的實用性。

10個模塊,總計173頁

由於從業時間較久,經驗比較豐富,我是直接上去從第一個功能開始設計原型,一邊設計一邊想功能。

建議不熟悉業務的不要這麼做,會遺漏功能,返工機率也很大,最好是老老實實的先出產品架構、腦圖、業務流程圖、功能清單,想明白了再開始設計原型。

具體流程就是:

1.把主要功能羅列出在菜單中,再將其鏈接好跳轉;

2.然後將一級頁面逐個完善;

3.倒回去從第一個功能展開到最後一層(這裏要注意的是要一邊設計界面一邊鏈接好,如果全部頁面做好再去鏈接的話非常非常耗時間且會鏈錯,直接導致精神錯亂)。

對於原型搭建,我覺得邏輯思維最重要,原型的初衷就是能快速有效且直觀的表達出功能需求。

相比文檔,高質量的原型交互可以更快速的讓開發人員與老闆理解,這一點墨刀給了我很大的幫助。

2013年前,我基本都是靠手稿,很喫力,一個白板上貼滿了手稿和圖釘,自從墨刀上線,我就徹底愛上了墨刀,爲我節省了很多時間,真正爲企業起到增效降本的作用,從那會起我也就成爲了老闆最愛的男人。

在這裏,給刀友們分享一個我的墨刀使用小技巧吧,能夠一定程度上提高速度和質量。

其實也簡單,就是我做了一箇中臺模板,把常用的頁面按照模塊進行歸類,例如後臺管理通用框架、對應移動端的比如登錄註冊、金剛區、提示、列表、個人中心、設置等等,統一在中臺模板,用到哪個直接複製黏貼到新項目中,非常便捷,各位刀友們不妨試試。

兒童教育產品原型—小學通

咔噠咔噠

作者簡介:不是百萬粉絲的大V,也不是業界大拿,無名校加持,亦無大牌傍身,更沒有乾爹護體,平平無奇追求美的擼圖仔。橫跨To C、To B、To G 領域,偶爾佛系,永遠愛甲方(沒錯,此處不容置疑)。

點擊此處,體驗原型

本次大賽參賽作品,靈感來源於生活,真的是生活。

簡單但是詳細來說就是這樣:

因疫情影響,在家辦公,偶然一日,房東敲門,說有事相求,原來是他家孩子要遠程上課,不知道怎麼操作那個上課系統,需要我幫忙操作一下(其實就是註冊登錄然後查看課程下載課程這麼一個簡單流程)。

又偶然一日,房東再次敲門,又是關於孩子上課的問題(其實就是用手機將孩子朗讀英語單詞的語音,錄下來然後發送到微信羣讓老師點評)。

……

一日復一日,在房東數次的求助下,我意識到現在的教育類產品體驗怎麼才能滿足房東這類互聯網小白用戶,同時又能切實地解決小學生學習的問題,解決老師和學生互動的問題。

有了想法,於是下載了應用商店教育類排名前25的APP,並且看了用戶的評價,縱向對比分析,提煉每個APP的主功能,解決的主要訴求;然後橫向對比兒童類產品,提煉交互、視覺元素通性。在把玩了大概3天后,最後手機卡了。終於確定了此次產品大賽的產品方向,即做一款面向6-12歲小學階段的孩子的學習產品,提供語數外同步輔導課程、精品課,課外學習,線下活動四大功能。旨在讓祖國的花朵們學得好,玩得爽。

整個製作週期大概花了30個小時左右,詳細製作流程如下:

01 確定目標

(1)思考當前教育類產品的問題

線下語數外課程知識記不牢,無法重複學習

學習沒興趣,不愛做練習題

線下補課費時費力費錢

練習資料魚龍混雜,不知道怎麼選

使用其他教育類產品不知道怎麼學,學什麼

充滿好奇心的孩子想要讀更多課外故事,沒有好的書單,又對紙質書感到枯燥,父母又擔心熒光屏幕傷眼

(2)我爲什麼要做這個產品?能改善什麼?

提供課外知識學習,豐富學生知識體系

提供線下專題活動,學得好,更要玩得好,豐富孩子童年生活

提供“打怪升級”機制,提升學習興趣,彌補線下補課得費時費力費錢

根據年級智能推薦用戶可能需要的內容

有聲搜索幫助識字不多的孩子找到自己想要的內容(課程,課外讀物)

(3)最終要達到什麼結果?

爲小學生提供語數外同步輔導課程、精品課,課外學習,線下活動四大功能。既要讓祖國的花朵們學得好,又要讓花朵們玩得好。

(4)定義使用人羣及心理

說實話,這塊都是上網找的現成的結論,沒花時間去做細緻深入的研究。

(5)競品橫縱向對比分析

下載了應用商店教育類排名前25的APP,並且看了用戶的評價,縱向對比分析,提煉每個APP的主功能,解決的主要訴求;然後橫向對比兒童類產品,提煉交互、視覺元素通性。

02 信息框架

梳理產品功能劃分,層級梳理。

部分功能流程

03 輸出原型

(1)紙上原型

  粗略勾畫產品主流程界面,確定功能及交互流程

(2)低保真原型

  a.根據紙上原型先輸出一級主界面的低保真原型;

  b.快速輸出剩餘界面的低保真原型,大概40幾個;

  c.跑通產品邏輯流程,完善邊緣場景,保證交互順暢閉環(當然時間較緊,有些頁面沒有畫,但確實在我的頭腦中成型了);

  d.蒐集符合產品調性的文案,情感化元素,分類整合。

(3)高保真原型

  a.根據設計目標、使用人羣確定產品風格走向,視覺調性、輸出主視覺;

  b.根據主視覺定義視覺基礎元素(文案、圖片風格、版式、圖標、色彩、字體層級);

  c.定義視覺規則與表現(網格系統、設計規範);

  d.抽離全局控件,方便複用,考慮擴展性,實用性;

  e.輸出二級界面5-8張,用墨刀在真機上預覽整體視覺調性是否統一,檢查,篩錯,調優,反覆優化;

  f.輸出剩餘界面,採用不同真機預覽檢查;

  g.完善視覺,優化體驗,保證品牌一致性(品牌基因、視覺風格)。

點擊此處,體驗原型

對於原型工具來說,常用組件、控件搜得到,能複用,無需重複造輪子很重要;其次,界面的可視性上能保證高效、簡便,客戶肯定不想預覽個原型還要經歷解壓 html 壓縮包,再安裝個擴展程序繁瑣的流程,很累的。

另外,熟悉所有的墨刀自帶的快捷鍵是必須的。這個部分基本上原則就是:軟件使用熟練度,和能不能找到合適的素材應用到需要的場景。

但是原型搭建的難點本質在於思考設計細節的深度,對業務邏輯的理解,以及對用戶痛點的洞察,這些部分纔是效率的瓶頸。

每個人都有對墨刀不同的使用技巧,我同樣。

以這次作品來說,我會先簡單梳理下主要界面的元素、組件有哪些,提煉出來可以複用的組件,這樣可以在墨刀中快速複用,節省了大量的時間。

同時,素材廣場的海量素材也能給我提供一個偷懶的機會。我認爲設計師快速提高專業能力的核心是:在正確的方向上,用聰明的方式下笨功夫。墨刀恰巧給我偷懶創造了機會。

很榮幸參加到本次本賽,因爲這是對自己的一次專業能力和思考能力的檢視,能夠讓自己從更高的維度思考產品,比如商業價值上,正如胡慶老師的點評中所說的那樣:”是否考慮了商業價值,以及落地的可能性?"

我覺得這是以後職業生涯中需要不斷提升的點,做設計並不是自嗨,視覺和交互再優秀,不能帶來商業價值或用戶價值,也是一個自嗨的產物。

至於什麼能稱之爲好產品?

我認爲它可以是好的點子,好的想法,能切實解決用戶痛點;或有流暢的交互,用起來不費力氣,很自然,帶來了體驗上的舒適;也可以是有良好的視覺體驗,引發一種獨特的視覺感受。

比如這個德雲社的作品,就滿足了鋼絲們的需求,我認爲就是好作品。

點擊此處,體驗原型

在此,我也想跟刀友們分享一下我的個人增值學習經驗。

如何讓自己增值

想讓自己增值,就要讓自己有價值。於自我成長而言,你的每一次挑戰,學習每一件新事物,都是自我增值的方式。於工作而言,想要增值就要向專業的人學習,加上自己的反思覆盤,真正的能夠解決問題,在一個團隊中找到自己的地位,同時貢獻自己的力量

學習方式

1.工作中提煉方法論

研究問題-洞察-發散創想-確定方向-收斂創想-形成方案-驗證方案-持續優化。

2.訓練設計邏輯

每個月研究一個小課題,比如:爲分頁加載和下拉刷新加載有什麼區別?模擬你要給老闆彙報這個事,然後把它寫出來,講出來,訓練兩年,你的設計邏輯應該會有很大提高。

3.讀書

讀書很有力量,讀書可以解答我們的很多疑惑,但是從發現問題到解決問題的這個過程中,更多的還是需要我們自己去運用,僅僅掌握知識並不是目的,目的是運用它。

4、聽樓下老頭老太太嘮嗑也是一種學習

最後大膽預測一下,未來產品設計的流行趨勢

1.新的技術的出現,會推動新的呈現方式的出現;如VR,可穿戴設備會愈發普及起來;

2.信息的發展會帶來用戶行爲和喜好的多樣化,一個APP的壽命可能不超過三天,在這 三天內如何留住用戶,需要產品設計師們深入洞察用戶背後的心理和行爲;

3.產品需要不斷探索新的玩法,可能會有除手機外的其他可交互設備,此時產品的設計肯定要滿足新的設備形態。

醫療產品移動端高保真原型

老何

作者簡介:一個學了一堆亂七八糟技能的產品經理兼交互設計師。

作爲醫療相關的產品已有4年多了,在這個行業也有一些小心得了,於是就報名參賽了。

要知道做醫療產品的日常工作中很多時候要面對甲方(醫院領導,事業單位領導),這時候高保真的原型和演示效果往往能起到更好的工作認同和意見收集效果,線框和純圖片設計稿一般都只會被象徵性的掃幾眼。

所以我想要做一套有通用性的醫療類型的模板,方便修改和演示。

點擊此處,體驗原型

至於黑白模式完全是因爲喜歡喜歡動效想做點不一樣的東西出來,本來期望是通過“神奇運動”動效,華麗的一下漸變到另一個狀態,最後效果還是有點卡。不然傳統醫療頁面可能會顯得太普通。

純爲演示設計的功能,並不是真實產品功能。同時如果想要單用黑或白模式,刪掉模板當中的“狀態1”或“狀態2”即可。

製作大概畫了一週半的時間,製作流程如下:

1)  審題

閱讀比賽規則,瞭解比賽目的,確認自己的原型想要達到的目的

關鍵詞:素材庫,模板,複用性,高保真

2) 行業定位

其實就算移動端應用會有統一的規範,但是每個類型的應用,對於用戶的年齡層,用戶的剛需功能會有很大的區別。

關鍵詞:醫療,全年齡用戶,老年人,安心就醫

3) 功能腦圖

根據行業人羣的需要,梳理原型基本需要具備的剛需功能並梳理頁面結構。由於對醫療比較瞭解這裏我梳理大部分常用的醫療功能,其實公司實際產品橫向比模板還要多很多。原型梳理了重要的部分,也方便使用模板的人,把不需要的橫向功能頁面整個刪掉即可,比如只做互聯網醫院。

關鍵詞:預約掛號,專家品宣,在線諮詢,互聯網醫院(作爲熱點,疫情鼓勵遠程就醫)

4) 原型搭建

其實到這一步就只用考慮每個頁面的用戶體驗和母版即可。但考慮到模板的複用性和實際使用價值,我設想了一些其他的東西用戶搭建出原型的特殊。

關鍵詞1:複用性

其實在大部分原型中圖片廣告要麼是純灰框,要麼是純圖。導致使用起來比較尷尬換成灰色那麼就不是高保真了,用圖片,裏面文案又和現在產品不一定匹配,所以製作中我把圖片內容和圖標都製作成了原生的,方便隨時可以改動。

關鍵詞2:黑白模式演示

行業原因,傳統醫療的頁面會相對傳統,對於老年人,頁面流程的調整學習成本都相當高。所以特色功能在腦洞下選取了用戶純演示的黑白切換進行製作。

個人認爲原型搭建最重要的還是功能流程設計,因爲流程基本確定了每個頁面的功能,然後纔是圍繞功能做用戶體驗以及建立統一具有複用性的模塊母版。因爲平時工作中也有遇到過因爲體驗不好,去修改流程的,最終導致架構和功能全部重做,其實也是因爲一開始的功能流程沒有思考到位。

作爲資深墨刀用戶,有幾個不錯的小習慣可以分享:

1)  活用母版,可以結合每個頁面的功能把公共部分提取出來,比如正常的列表和收藏中心的列表,一開始做的時候就定義成母版,這樣遇到需要修改細節的時候,只要改一個母版就能一鍵應用到全部頁面,提升效率。

2)  慎用12號以下的字體,血的教訓,自己看和演示的時候是好的,結果上傳參賽發現很多地方都換行了,也被評委批評了。其實也發現挺多作品和我有類似問題。也可以試想如果我實際工作中應用,自己看沒問題,然後XX醫院院長看演示版發現換行了的結果。

這次比賽中我覺得好的作品很多,這裏就說下同行吧,因爲我的作品可以和這套配套使用,畢竟自己公司中也做過一套很類似的自助機。

點擊圖片,體驗原型

線上掛號至線下取號(窗口取號或自助機取號),一整套醫院流程裏,掛號到線下取號一定是需要依賴自助機完成整個看病流程了。

醫療類的模板做的偏傳統,也是因爲醫療裏大齡的用戶其實佔大多數,我所在的平臺統計:年齡在55以上的用戶,會佔比30%以上,而自助機的使用率會更高。

這時候自助機對於用戶體驗的清晰引導就顯得尤其關鍵。這套原型頁面也把流程做的很清晰,我覺得不錯。

其實也希望能再整理配合下之後形成一整套,適合醫療類使用的完成閉環模板,方便大家使用。

產品和交互增值的話一般都依賴於自己工作中的經驗,踩過的坑,做過成功的功能,都會被積累下來,然後形成在面對一樣問題時的效率和解決。

所以我認爲提升價值的方法不光是閱讀產品趨勢文章,討論之類的,也需要更多的實踐去積累更多工作內容之外的經驗,參加比賽或修改優化一些常用的但是自己覺得不好的產品,做起來總比看起來難。

產品的學習更多要通過實踐,交互的話更多會看國外網站的一些成品規範學習和一些概念交互設計,雖然說概念設計沒有實際應用價值只是好看,但是其實可以作爲靈感來源,通過和實際場景的結合變換出新的交互。

以上就是本次的「刀友訪談」啦,有任何的問題,歡迎在評論區中提出。

對這些作品感興趣的話,趕緊去素材廣場體驗吧~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章