UI設計流程

? ? ? ?一磺平、確認產品需求

? ? ? ? 產品需求一般有兩種來源途徑:一種是甲方客戶(俗稱外包項目)瑰排,另一種是自研產品挖炬。甲方客戶產品需求就需要與甲方進行多次溝通來確定產品需求雪情;如果是自研產品則除了內部的多次溝通外,還需要根據產品的定位鸭巴、目標用戶眷细、競品分析等來確定需求。無論需求是哪種鹃祖,溝通都是非常重要的溪椎。兩者在確定需求方面方法論其實是差不多的,不是割裂和對立的恬口。對于需求的理解越透徹后期就會越好開展工作校读。


  二、討論并制定草圖框架

  在項目的開始祖能,UI設計師就需要參與到整個項目當中歉秫。對于產品需求的了解,不只是產品經理或者項目負責人的事情芯杀。所以端考,需要UI設計師雅潭、項目負責人、產品經理等一起作出討論却特。在此階段扶供,UI設計師可以通過畫出一個大概的框架草圖來提高溝通效率。

  對于一些外包項目裂明,客戶的需求很多時候都是模糊的椿浓,客戶方一般會說先提供幾個版本的設計稿看看,這個時候闽晦,整個產品的功能扳碍、結構框架也都是模糊的,所以仙蛉,可能需要UI設計師積極的與客戶或者項目負責人溝通笋敞,了解清楚。切記荠瘪,在需求明確之前別開始設計工作夯巷,不然做出來的東西也是無用的,重復這類工作還會打消自己的積極性哀墓。

  三趁餐、流程圖

  這個時候,你需要結合開始的產品需求和框架草圖篮绰,用流程圖工具做出一個具體的流程圖后雷,理清你的設計思路。這樣你的項目負責人可以直觀的看到整個的流程吠各,你在開始設計的時候臀突,也可以依據你做的流程圖。

  做腦圖/思維導圖/流程圖的工具其實有很多走孽。在這里呢惧辈,列舉一些常用到的流程圖工具琳状,如Mindnode/百度腦圖/Xmind/Visio等等磕瓷。

  四、原型圖

? ? ? ?在原型圖設計階段念逞,界面應避免用色困食,一般用黑白灰,這樣可以避免顏色影響視覺聚焦功能需求翎承。

  所需工具:Sketch(框架圖)硕盹、Adobe-XD、POP(初步原型)叨咖、墨刀(高保真原型圖和交互)等

? ? ? ?五瘩例、制作設計規(guī)范

? ? ? 設計規(guī)范指導要兼顧一致性和可用性原則啊胶。

一致性:

  1、設計目標一致

  軟件中往往存在多個組成部分(組件垛贤、元素)焰坪。不同組成部分之間的交互設計目標需要一致。例如:以老年人作為目標用戶聘惦,以簡化界面邏輯為設計目標某饰,那么該目標需要貫徹軟件(軟件包)整體,而不是局部善绎。

  2黔漂、元素外觀一致

  交互元素的外觀往往影響用戶的交互效果。同一個(類)軟件采用一致風格的外觀禀酱,對于保持用戶焦點炬守,改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統(tǒng)一的衡量方法剂跟。因此需要對目標用戶進行調查取得反饋劳较。

  3、交互行為一致

  在交互模型中浩聋,不同類型的元素用戶觸發(fā)其對應的行為事件后观蜗,其交互行為需要一致。例如:所有需要用戶確認操作的對話框都至少包含確認和放棄兩個按鈕衣洁。對于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同墓捻。但是我們可以看到這個理念雖然在大部分情況下正確,但是的確有相反的例子證明不按照這個理念設計坊夫,會更加簡化用戶操作流程砖第。

可用性原則:

  1烁登、可理解

  軟件要為目標用戶服務倦微,軟件各元素對應的功能要被目標用戶所理解。如果不能為用戶理解御毅,那么需要提供一種非破壞性的途徑智听,使得用戶可以通過對該元素的操作羽杰,理解其對應的功能。例:刪除操作元素到推。用戶可以點擊刪除操作按鈕考赛,提示用戶如何刪除操作或者是否確認刪除操作,用戶可以更加詳細的理解該元素對應的功能莉测,同時可以取消該操作颜骤。

  2、可達到

  用戶是交互的神經捣卤,交互元素對應用戶需要的功能忍抽。因此交互元素必須可以被用戶控制八孝。用戶可以用諸如鍵盤、鼠標之類的交互設備通過移動和觸發(fā)已有的交互元素達到其它在此之前不可見或者不可交互的交互元素鸠项。要注意的是交互的次數(shù)會影響可達到的效果唆阿。當一個功能被深深隱藏(一般來說超過4層)那么用戶達到該元素的幾率就大大降低了⌒獯福可達到的效果也同界面設計有關驯鳖。過于復雜的界面會影響可達到的效果。

  3久免、可控制

  軟件的交互流程浅辙,用戶可以控制。功能的執(zhí)行流程阎姥,用戶可以控制记舆。如果確實無法提供控制,則向目標用戶提示相關的信息呼巴。


  六泽腮、確定設計稿和原型交互demo

  所需工具:Sketch(設計稿)、Axure(原型交互)衣赶、Marvel(原型展示)诊赊、Principle(交互動效)、墨刀(原型交互)

  七府瞄、對接開發(fā)

  所需工具:PS碧磅、AI等(設計)、Cutterman (切圖工具)遵馆、PxCook(標注鲸郊、切圖工具)、Zeplin(切圖货邓、設計稿標注)等秆撮。

當你設計完成頁面以后,要做的工作就是:標注换况、切圖职辨。以及跟進開發(fā)實現(xiàn),確保設計稿落地效果复隆。

  八拨匆、上架

  軟件是為目標用戶服務姆涩。因此應該由目標用戶來使用和控制軟件挽拂。軟件響應用戶的動作和設定的規(guī)則。對于目標用戶交互的結果和反饋骨饿,提示目標用戶結果和反饋信息亏栈,引導目標用戶進行自我需求的下一步操作台腥。

  九、跟進用戶反饋及后續(xù)迭代


  以上是UI設計流程的內容绒北,內容也許不是最全黎侈,但也能讓你對UI設計流程有清楚的認識。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末闷游,一起剝皮案震驚了整個濱河市峻汉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌脐往,老刑警劉巖休吠,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異业簿,居然都是意外死亡瘤礁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門梅尤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來柜思,“玉大人,你說我怎么就攤上這事巷燥∩呐蹋” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵缰揪,是天一觀的道長亡脑。 經常有香客問我,道長邀跃,這世上最難降的妖魔是什么霉咨? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮拍屑,結果婚禮上途戒,老公的妹妹穿的比我還像新娘。我一直安慰自己僵驰,他們只是感情好喷斋,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蒜茴,像睡著了一般星爪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上粉私,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天顽腾,我揣著相機與錄音,去河邊找鬼。 笑死抄肖,一個胖子當著我的面吹牛久信,可吹牛的內容都是我干的。 我是一名探鬼主播漓摩,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼裙士,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了管毙?” 一聲冷哼從身側響起腿椎,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎夭咬,沒想到半個月后酥诽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡皱埠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年肮帐,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片边器。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡训枢,死狀恐怖,靈堂內的尸體忽然破棺而出忘巧,到底是詐尸還是另有隱情恒界,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布砚嘴,位于F島的核電站十酣,受9級特大地震影響,放射性物質發(fā)生泄漏际长。R本人自食惡果不足惜耸采,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望工育。 院中可真熱鬧虾宇,春花似錦、人聲如沸如绸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽怔接。三九已至搪泳,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扼脐,已是汗流浹背岸军。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凛膏。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓杨名,卻偏偏與公主長得像脏榆,于是被迫代替她去往敵國和親猖毫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內容