實戰分享:核桃App界面設計及視覺規范

47 評論 59156 瀏覽 382 收藏 10 分鐘

因為最近做公司項目的設計規范,所以決定把設核桃的計規范也整理一份。但由于是概念稿,所以規范做的不算全面;而且每個產品也有各自的規范思路和維度,沒有絕對的定性方法。這里只是提供一個大體方向,疏漏之處,希望給予批評指正。

2016已經接近尾聲,上兩天剛參加完比賽,利用這幾天空閑時間,把最近沉淀下來的東西分享出來。

上個月團隊小組進行友誼比賽,命題是“郵件”(溝通)。規定大家以產品思維去設計一款全新的產品,形式不限。很難得的是所有人都參加了產品設計的每一個環節。我們秉著發現問題、解決問題的態度開始了這次友誼比賽。

通過不停的嘗試與否定后,我們鎖定目標人群為威客群體。針對威客群體接私單的特定場景,通過用戶問卷、訪談、旅程圖,最后得到以下幾個痛點:

    1. 來回寄合同,費錢費力費時間
    2. 執行溝通的過程中經常改需求
    3. 合同的擬定,需要在網上找模板
    4. 對于新客戶,不了解,不能完全信任
    5. 可能會逃單、違約

針對這幾個痛點,我們的解決方案是:

  1. 增加發送合同郵件,雙方直接簽約,無紙化
  2. 通過郵件溝通,后期作為憑證
  3. 平臺提供各種合同模板
  4. 增加個人資料、信息(個人、公司網址)添加評價系統
  5. 定金凍結功能

所以,最后我們的產品定位是:威客人群的無紙化溝通簽約工具。

通過這次嘗試,大家都參與了所有流程——信息收集、競品分析、確定目標人群、場景梳理、用戶旅程圖、尋找痛點和機會點、信息架構、交互稿、視覺稿。這對于我們每一個人都有很大的幫助。

因為最近做公司項目的設計規范,所以決定把核桃的設計規范也整理一份。但由于是概念稿,所以規范做的不算全面;而且每個產品也有各自的規范思路和維度,沒有絕對的定性方法。這里只是提供一個大體方向,疏漏之處,希望給予批評指正。

至于為什么叫“核桃”,有三個維度的寓意:

  1. 與合同諧音
  2. 威客就是用智慧在互聯網上賺錢的人,而核桃補腦,形狀又像大腦,所以寓意恰巧吻合。
  3. 核桃的外殼是堅硬的,給人一種受保護的安全感,而郵件、合同也正是如此。
  • 界面設計:林佳娜、蔡鑫
  • logo設計:蘇桂
  • 交互設計:李祖松、丁明艷、蔡鑫
  • 規范設計:蔡鑫

核桃APP界面展示

app分三個模塊:

  1. 溝通(普通郵件與合同郵件)
  2. 合同
  3. 我的

以上就是概念稿的所有設計頁面,下面來主要展示一下設計規范。

核桃APP視覺規范

規范從7個維度來展示:

  1. 前言
  2. 命名
  3. 顏色
  4. 文字
  5. 圖標
  6. 控件樣式
  7. 互動狀態

規范說明:

  1. 此規范為核桃App基礎規范,未涉及到內容盡量采用相似性原則進行設計
  2. 此規范以iphone7尺寸一倍圖(375×667)進行設計、標注、說明
  3. 輸出切圖格式為png
  4. 規范是在概念稿階段輸出,所以會有考慮不全的情況,此處只是為大家提供思路與方法

設計原則:

  1. 簡化流程,降低用戶學習成本
  2. 輕量化、扁平化設計理念
  3. 情感化設計體現、重視品牌傳播

命名規范:

  • 模塊_類別_功能_狀態.png
  • 舉個例子:nav_button_search_default@2x.png
  • 對應中文:導航_按鈕_搜索_默認@2x.png

顏色分為:主色、點綴色、灰色系

字體使用各系統默認字體,但為了統一設計稿使用平方regular字體。

字體大?。?8、16、14、12、10(一倍圖尺寸)

桌面圖標大小根據每個平臺尺寸適配

通用圖標尺寸有:16x16px、24x24px、48x48px、64x64px、100x100px,如有特殊情況可根據實際情況制作圖標,但應盡量采取相近原則

導航欄

底部標簽欄,高度為50px

按鈕共有三種樣式,以后如有增加通用樣式,需加入控件庫。

圖標與按鈕一定要考慮Normal、Disable、Pressed、Selected、Clicked這5個狀態。

小結

有設很多計師會提出“規范只是公司給外部看的一種噱頭”,更像是體現一種公司視覺形象(VI)。其實,互聯網公司的產品設計規范并非是僅僅用來宣傳形象的,更多用來使用、簡化開發過程、使多個產品擁有一致的體驗,是落到實處的東西。在一個部門含有多個產品線的情況下,此時產品設計規范最能體現其作用。

所以,我覺得規范本身其實就是一種美!

 

作者:菜心(微信號:410628210 ?微信公眾號:菜心設計鋪),華為ITUX用戶體驗設計師(主視覺),3年工作經驗,參與華為Welink、3MS、連長社區等多個項目的用戶體驗設計工作。歡迎大家互相交流關注。

本文由 @菜心 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 認同小結、支持規范

    來自廣東 回復
  2. SKETCH可以試用多久啊?

    來自廣東 回復
  3. 原則上色不過三,你這里主色加上點綴色都好幾種顏色了,會不會顏色的使用有點多了?

    來自北京 回復
  4. 受教了,多謝分享,但是有個問題想請教。

    雙方只是在網上平臺交易,那么相對應的個人信息的時候是不是也添加自己的身份驗證信息什么的,還有就是如果第三方買通什么改變合同什么的

    來自上海 回復
  5. 非常受教的規范文章,謝謝。所以想請教一下logo設計的含義(視覺上),說實話我有些沒有看懂。還有一個----此規范以iphone7尺寸一倍圖(375×667),這個尺寸是腎6吧。 ??

    來自上海 回復
    1. logo的含義:1.核桃(合同)開頭字母都是HT,logo的形狀就是HT,2.形式采用簽字的筆觸,突出app的核心功能,簽合同。
      iphone7與iphone6尺寸是一樣的哦!

      來自廣東 回復
    2. 哦這樣子 ??

      來自上海 回復
  6. 我快速的閱讀了一下,規范方面做得還挺好的,從UI設計的角度來看的話,解決了上下游及團隊之間的不規范化,但對于平臺本身,我還是有質疑的,平臺既然是從威客延伸出來的核心需求,不知道作者對功能的本身有沒有做過全面的市場調研及精準用戶的分析,使用場景是很明朗化,但我覺得這種合同平臺的本身,作為企業與雇傭者,線上的合同是否真的具有法律效用,因為對于法律這塊的知識,大部分人還是空白的,會出現很多疑問,何況,即使是線質的合同,一般人也會非常慎重去使用,線上的就更難了。。。。如何解決這個問題?另一個,是否真如作者所說,用戶對這種平臺的需求性(因為不是剛需,沒有經過任何的市場培育,線上合同的概念淺?。?,到底是要定位成工具平臺,還是溝通平臺也要需求有理論依據~~~~,因為現在im的應用很多都很成熟,還有平臺的名稱,核桃,我第一看是并不知道這是什么,我潛意識聯想到食物。我可能更多的是站在產品的角度去看代這個平臺,成為真正為市場、為用戶群解決問題,它的定位,是否只是個市場偽需求,這些都需要求證。 ??

    來自廣東 回復
    1. 感謝讀者這么詳細的評論。

      對于信不信任的問題,之前我在一家做線上汽車交易的公司上班,人們對于線上買車也是不信任的,他們的做法就是從熟人開始做起,一點一點的線下推廣,現在已經慢慢做大了。

      法律的問題,我們的愿景是與律師事務所合作,一起來規劃法律方面的問題,至于怎么執行,具體沒有考慮。

      名字的問題,說到蘋果,你想到什么?

      還有,我們這個只是一個比賽,為期一個月,目的是為了讓全員參加整個項目的流程,由于時間與性質的問題,產品方面考慮不周的地方還請包含,以后會盡量改進,謝謝。

      回復
  7. 導航欄的高度不對吧,底部50px,button的高度也是52px?

    來自廣東 回復
    1. 導航欄是沒有問題的,我們自定義了大小,不過底部欄和Button確實要統一高度,謝謝提醒

      來自廣東 回復
  8. 規范做的挺好的,受教

    來自北京 回復
    1. 謝謝支持

      回復
  9. 很棒~!請問大牛,你的標注是用標注軟件做的嘛?還是用sketch自己畫的呀?

    來自上海 回復
    1. Sketch 畫的,平時標注都是用sketch 插件自動標注的,非常方便

      回復
  10. 還沒上線吧?

    來自江西 回復
    1. 只是一個比賽,設計的概念方案

      回復
  11. 設計規范的確讓我學到了很多;
    但是對于合同和企業的實質需要個人覺得網上簽約并不是很適合,除非使用區塊鏈技術,否則對于信息的儲存安全是一大隱患;
    且可學習微信的信息存在本地,可選擇性讓用戶存儲在服務器上根據吸引力;
    其應該更側重于合同正式簽約以及對于紙質合同收、發狀態的變更顯示更有實際意義;

    來自浙江 回復
    1. 你的建議很對,謝謝

      回復
  12. 確實看到很多的盆友都有這方面的擔憂,非紙面合同是否具有法律效力

    來自湖南 回復
  13. 規范本手就是一種美

    來自廣東 回復
  14. 規范本身其實就是一種美! ??

    來自上海 回復
  15. 視覺規范對于公司內部來說真是挺重要的。合作的設計師沒有一套標準的設計規范,無論是他上游的我還是他下游的攻城獅,都感到相當痛苦。你的這篇分享,已經分享給我們的UI。再次感謝作者~

    來自北京 回復
    1. 不客氣,以后會分享更多干貨,歡迎關注我的公眾號:菜心設計鋪,我會繼續努力

      回復
  16. 一單出問題法律上如何維權

    回復
    1. 法律上確實存在一些漏洞,這一塊沒有很嚴謹的規劃,不過在接單的整個過程中,我們是用預付款去牽制甲乙雙方的,前期的話很多東西只能線下去解決

      回復
    2. 電子簽名具有法律效應

      來自北京 回復
    3. 簽章是之前設定好的簽字,通過驗證流程過后確定的是電子簽章,你設計的這個是簽名,貌似簽名不具備法律效力。 目前我們也遇到簽名這個問題,但是簽名人不可能人人都弄個電子簽章,難倒了

      來自北京 回復
  17. 你好大牛,我想問問你原型中,元件尺寸標注和那些引線說明是用axure制作的嗎?

    來自北京 回復
    1. Sketch 做的

      回復
    2. 謝謝 :mrgreen:

      來自北京 回復
  18. 講的不錯 學習了

    回復
    1. 歡迎關注微信公眾號:菜心設計鋪,以后會有更多干貨

      回復
    2. 1

      來自上海 回復
  19. 非常受用,感謝!想問您一個問題,您這個規范是和程序員看的還是給其他設計師看的呢

    回復
    1. 我們的目標是兩個角色都可以看,目前可能做的還不夠全面,正在努力研究中

      回復
  20. 法律方面的不太懂:
    1、不知道網絡上簽的受不受法律保護?
    2、合同用印怎么辦?
    3、如果買通了第三方,在程序中修改了合同條款及內容,沒有地方可以證明
    4、一般公司的合同都要紙質用印后存檔,問題怎么解決

    來自安徽 回復
    1. 法律方面,我們的想法是“平臺和律師事務所合作,在平臺所操作的內容全部都是有法律效應的,我們的目標是取代紙質合同

      回復
  21. 學習了

    來自上海 回復
  22. 流程——信息收集、競品分析、確定目標人群、場景梳理、用戶旅程圖、尋找痛點和機會點、信息架構、交互稿、視覺稿 這些要是能詳細分享。就更棒了。

    來自福建 回復
    1. 可以關注我公眾號:菜心設計鋪,以后會分享更多干貨

      回復
  23. bucuo ??

    來自上海 回復
    1. 謝謝

      回復
  24. 視覺設計方面很棒,給個贊。 產品方面出發有一個小的疑問,如果是定位為無紙化溝通簽約工具,最主要的功能就是簽約(合同),這樣一來是不是引導線下的合作商家到線上簽約,本質上還是一個工具。但引入評價系統的時候,是不是又想往平臺方去發展,如果是要不要加入即時聊天呢?

    來自廣東 回復
    1. 對的,我們的終極愿景是做平臺的,但是從小工具做起,至于沒有即時聊天也是在溝通時的一個痛點,所以如果可以做下去,后面的方向就是郵件IM 化

      回復
  25. 非常有用,太感謝了。 ??

    來自廣東 回復
    1. 不客氣,多多交流

      回復