《UI設(shè)計(jì)》課件-4.UI什么是APP設(shè)計(jì)改版

`INTERFACE

DESIGN`UI設(shè)計(jì)基礎(chǔ)課程案例X光片＋內(nèi)衣氧氣APP創(chuàng)始人徐黛妮01氧氣最大亮點(diǎn)是場(chǎng)景化描述商品:文字+圖片用到具有故事性的組圖表達(dá)形式，將產(chǎn)品放在讀者生活或向往的場(chǎng)景中拍攝。圖片營(yíng)造的生活方式刺激讀者的購(gòu)買欲，而不是產(chǎn)品本身。內(nèi)衣導(dǎo)購(gòu)+內(nèi)衣文化分享→內(nèi)衣電商+小額庫(kù)存→UGC2014年6月，氧氣正式上線。通過場(chǎng)景化描述內(nèi)衣的方式，推薦和售賣內(nèi)衣。（UserGeneratedContent，用戶生成內(nèi)容的意思）消費(fèi)者：女性（“正在從女孩到女人蛻變”的一群人）如何獲取：免費(fèi)贈(zèng)予，邀請(qǐng)為平臺(tái)內(nèi)衣代言如何持續(xù)：內(nèi)衣文化社區(qū)（PGC+UGC）引導(dǎo)用戶產(chǎn)品是什么：內(nèi)衣（有形），態(tài)度或價(jià)值觀（無形），場(chǎng)景式販賣體驗(yàn)怎么付費(fèi)：免費(fèi)（試穿+拍照上傳到社區(qū)），購(gòu)買（*場(chǎng)景式）產(chǎn)品如何到手中：郵寄，平臺(tái)展示01需求——流量（消費(fèi)者？如何獲??？如何持續(xù)？）交易——物流/資金從《胤禎美人圖》、《紫禁城祥瑞》，到獻(xiàn)給小朋友的《皇帝的一天》再到《韓熙載夜宴圖》，《每日故宮》已經(jīng)是故宮博物院發(fā)布的第五個(gè)App類產(chǎn)品了02每日故宮藏品高清圖＋筆記+日歷特殊節(jié)慶的動(dòng)畫效果，跳轉(zhuǎn)到當(dāng)天即可查看消費(fèi)者：專業(yè)人士、深度愛好、小眾如何獲?。汗蕦m文創(chuàng)大IP的周邊，興趣導(dǎo)向如何持續(xù)：工具類，暫無02需求——流量03需求——流量（消費(fèi)者？如何獲??？如何持續(xù)？）除了最基礎(chǔ)的記步功能，Walkr還添加了社交元素。添加好友后，可以共同打造星際艦隊(duì)，還可以拜訪好友的銀河。/app/6860?utm_source=baidu&utm_medium=sem&utm_campaign=WalkrWalkr的規(guī)則是，把你的步數(shù)作為動(dòng)力來驅(qū)動(dòng)飛船，只需要多走走，你就可以駕駛飛船探索應(yīng)用里的數(shù)百顆星球：能欣賞各種各樣的星際美景，還能與各種奇怪的外星生物在星河里相遇。04AT是一款時(shí)間追蹤工具，簡(jiǎn)單地說就是設(shè)立一個(gè)目標(biāo)時(shí)間，紀(jì)錄你離那個(gè)時(shí)間點(diǎn)還有多遠(yuǎn)。軟件的操作非常簡(jiǎn)單，配色也很清新可愛，還有一些角色可以選擇，啟用桌面部件能讓你更方便地查看時(shí)間。需求——流量（消費(fèi)者？如何獲取？如何持續(xù)？）AT實(shí)用起來非常簡(jiǎn)單，首先你可以用它來跟蹤一個(gè)日期。寫上項(xiàng)目名稱，選好開始和結(jié)束日期，再選一個(gè)自己喜愛的角色，一個(gè)日期追蹤就這么建立好了。消費(fèi)者：在往常的工具類中玩出新意如何吸引：游戲化，有趣，視覺04需求——流量（消費(fèi)者？如何獲?。咳绾纬掷m(xù)？）產(chǎn)品使用對(duì)象Productconsumers

主要使用對(duì)象與使用場(chǎng)景

須了解使用者與購(gòu)買者(TA)是誰，在什么狀況(Context)下使用，從中發(fā)展可提高黏度/非用不可的情境應(yīng)用工具：自主使用工具，社區(qū)：?jiǎn)稳恕⒍嗳耸褂镁C合體：多種利益團(tuán)體，或系統(tǒng)A為B(如老人、小孩、寵物等）或ABCD等就話題或興趣聚在一起與日常生活相聯(lián)系，自己查詢數(shù)據(jù)平臺(tái)如淘寶平臺(tái)連接商家和買家如醫(yī)院平臺(tái)連接醫(yī)生和病患如健身平臺(tái)連接健身房或私教和需要運(yùn)動(dòng)的人綜合體附錄1：APP類型工具社區(qū)（社交屬性/興趣導(dǎo)向/交易）reflectlyapp2019年Google最美應(yīng)用例子在week8素材UIUX案例研究：我的停車場(chǎng)UIUX案例研究概念A(yù)PP：寵物飲食APP改版提案改版項(xiàng)目流程，提綱參考選擇一款A(yù)PP進(jìn)行改版提案(userstory和功能需求；用戶畫像)(思維導(dǎo)圖整理要改版的界面功能)【例1】/work/ZNDg3NzA3NTI=.html【例2】根據(jù)尼爾森的十大交互原則來檢驗(yàn)現(xiàn)有APP存在的問題選擇一款A(yù)PP進(jìn)行改版提案(userstory和功能需求；用戶畫像)(思維導(dǎo)圖整理要改版的界面功能)6、尼爾森十大交互原則大作業(yè)

匯報(bào)內(nèi)容：1、什么APP？什么用戶?解決用戶什么問題？2、該APP目前的競(jìng)品有誰？通過體驗(yàn)該產(chǎn)品及同類競(jìng)品，你發(fā)現(xiàn)了所選APP具備哪些問題？3、通過與用戶了解、資料搜索整理、界面體驗(yàn)（尼爾森十大交互原則）等方式發(fā)現(xiàn)了哪些問題或哪些需求，需要進(jìn)行改進(jìn)?4、原APP的功能架構(gòu)圖如何？你們團(tuán)隊(duì)打算從哪幾個(gè)方面入手進(jìn)行改版？列出相應(yīng)的時(shí)間、計(jì)劃5、改版頁(yè)面不少于12個(gè)本PPT觀點(diǎn)來自黑馬青年目錄1、改版的目的，從不做無意義的事情；2、制定時(shí)間規(guī)劃，是為了治療懶??；3、如何挑選改版產(chǎn)品，再也不是選“美”了；4、體驗(yàn)，這是你的第一次深度探尋；5、功能梳理，理清流程好開工；6、競(jìng)品分析，做好知己知彼；7、素材采集，打開禁錮的思維；8、體驗(yàn)，走了一圈才發(fā)現(xiàn)你可以更好；9、交互設(shè)計(jì)，實(shí)現(xiàn)你心中的更好；10、設(shè)計(jì)風(fēng)格推導(dǎo)，符合產(chǎn)品的設(shè)計(jì)趨勢(shì)運(yùn)用；11、界面設(shè)計(jì)，碎片化積累；12、審核，尋找導(dǎo)師；13、調(diào)整優(yōu)化，不放過任何一個(gè)細(xì)節(jié)；14、包裝，整理設(shè)計(jì)思路；15、分享，設(shè)計(jì)交流。1、改版的目的，從不做無意義的事情在真實(shí)的場(chǎng)景中，有一部分設(shè)計(jì)師也存在著以下情況：a.項(xiàng)目參與度低，沒有更多的機(jī)會(huì)發(fā)揮自己的專業(yè)；b.公司產(chǎn)品迭代緩慢或者視覺支持較小，空余時(shí)間較多；c.沒有機(jī)會(huì)在項(xiàng)目中嘗試一些新的設(shè)計(jì)語言；d.自學(xué)UI中，沒有真實(shí)項(xiàng)目能夠發(fā)揮；e.增強(qiáng)設(shè)計(jì)效率和產(chǎn)品設(shè)計(jì)思維等能力。如果你擁有以上的情況之一，利用自己的業(yè)余時(shí)間進(jìn)行APP設(shè)計(jì)改版將會(huì)給你帶來更多的提升空間，不但可以通過練習(xí)增強(qiáng)自己的設(shè)計(jì)效率，也能體驗(yàn)更加豐富的產(chǎn)品設(shè)計(jì)。在改版中也能不斷加強(qiáng)一些交互或者產(chǎn)品的思維，可以讓你在以后的工作項(xiàng)目中不局限在視覺層面，具備更多的產(chǎn)品思考，做出更合理的設(shè)計(jì)。2、制定時(shí)間規(guī)劃，是為了治療懶病制定時(shí)間規(guī)劃不僅可以合理的利用好自己的業(yè)余時(shí)間，也能更好的按照這個(gè)規(guī)劃表去逐步的推進(jìn)這次改版項(xiàng)目，把一個(gè)大的事項(xiàng)拆分為若干的小事項(xiàng)，每天推進(jìn)一部分，一次改版設(shè)計(jì)很快就在不斷的推進(jìn)中被完成。APP改版時(shí)間規(guī)劃表大家可根據(jù)自己的習(xí)慣設(shè)置，表格形式還是簡(jiǎn)單的文字記錄都可以，進(jìn)度把控需要結(jié)合自身情況而定，確保其有效性。3、如何挑選改版產(chǎn)品，再也不是選“美”了面對(duì)應(yīng)用商城里面海量的APP產(chǎn)品，你是否有點(diǎn)不知所措，如果選擇一個(gè)自己從來不玩的APP，改版的時(shí)候?qū)Ξa(chǎn)品的服務(wù)模式、功能架構(gòu)、交互邏輯等都是比較陌生的，需要一定的時(shí)間進(jìn)行學(xué)習(xí)。如果選擇一些大型的產(chǎn)品，由于其自身的設(shè)計(jì)團(tuán)隊(duì)就是非常的專業(yè)，你很難從中發(fā)現(xiàn)可以優(yōu)化的點(diǎn)，即使勉強(qiáng)進(jìn)行改版，也會(huì)發(fā)現(xiàn)自己設(shè)計(jì)得不如原版的好，進(jìn)而打擊自己的自信心。通過上面的分析，我們?cè)谔暨x改版產(chǎn)品的時(shí)候，需要結(jié)合自身的一些情況先做出一定的預(yù)判，然后再去挑選現(xiàn)階段相對(duì)比較符合的產(chǎn)品進(jìn)行改版練習(xí)。a.挑選自己接觸過的直接產(chǎn)品或者間接產(chǎn)品；b.對(duì)APP里面所提供的產(chǎn)品或者服務(wù)比較認(rèn)可或者沒有一定的排斥感；c.挑選無論是視覺層面還是交互層面都有一定優(yōu)化空間的產(chǎn)品，別輕易嘗試精品；d.如果身邊有朋友使用過的產(chǎn)品優(yōu)先考慮，因?yàn)榭梢猿蔀槟阏{(diào)研數(shù)據(jù)的來源；e.選擇陽光積極型的產(chǎn)品，不做傳遞負(fù)能量或者違反規(guī)定的產(chǎn)品；f.初次嘗試APP改版設(shè)計(jì)，從輕量級(jí)的產(chǎn)品入手，可以控制練習(xí)時(shí)間和自己的駕馭度。*輕量級(jí)：即產(chǎn)品功能專注做一件事情，如工具類的備忘錄、天氣、記賬等。4、體驗(yàn)，這是你的第一次深度探尋這個(gè)過程需要你對(duì)產(chǎn)品有一個(gè)很深入的了解，不只是熟悉主流程操作邏輯，對(duì)一些偏冷門的功能操作也要非常的熟悉，如果是需要注冊(cè)使用的產(chǎn)品，一定不要忽略注冊(cè)會(huì)員以后的體驗(yàn)。最終達(dá)到的級(jí)別是你可以向身邊任何一位朋友輕松的進(jìn)行推薦和演說，能夠通過你的講解讓他輕松地學(xué)會(huì)使用該產(chǎn)品。5、功能梳理，理清流程好開工當(dāng)你對(duì)改版APP進(jìn)行第一次深度體驗(yàn)之后，利用思維導(dǎo)圖軟件繪制出整個(gè)產(chǎn)品的功能結(jié)構(gòu)圖，思維導(dǎo)圖軟件種類很多。第一次進(jìn)行功能梳理無需進(jìn)行增刪處理，真實(shí)還原產(chǎn)品現(xiàn)有功能即可，其目的是整理自家“倉(cāng)庫(kù)”，做到心中有數(shù)。在進(jìn)行功能梳理的時(shí)候，如果遇到操作復(fù)雜的功能需要備注信息，以便自己后期預(yù)覽時(shí)能夠快速理解其含義。如果是第一次做功能結(jié)構(gòu)圖越詳細(xì)越好，這將有助于你充分理解每個(gè)功能傳達(dá)的含義。6、競(jìng)品分析，做好知己知彼深度體驗(yàn)完改版APP之后，做了功能結(jié)構(gòu)圖，此時(shí)你對(duì)所需要改版的APP以及這個(gè)行業(yè)的產(chǎn)品都有一定的認(rèn)知，此時(shí)你再去體驗(yàn)直接競(jìng)品和間接競(jìng)品必然是以一個(gè)專家級(jí)用戶的水平去探尋。在體驗(yàn)過程中需要結(jié)合改版產(chǎn)品的功能進(jìn)行對(duì)比，可能第一遍體驗(yàn)無法很好的進(jìn)行對(duì)比，所以需要至少體驗(yàn)3次以上才能很好的得出對(duì)比的結(jié)論。體驗(yàn)產(chǎn)品時(shí)需要注意的幾個(gè)維度：a.不要急于進(jìn)行總結(jié)，先進(jìn)行至少3次以上體驗(yàn)；b.先看整體布局再分析局部細(xì)節(jié)；c.重點(diǎn)功能交互形式需要提取出來進(jìn)行對(duì)比；d.主界面的各版塊布局設(shè)計(jì)需要進(jìn)行對(duì)比；e.配色分析，作為改版時(shí)的配色優(yōu)化指導(dǎo)；f.圖標(biāo)和組件庫(kù)的分析，找出細(xì)節(jié)的優(yōu)化方向。進(jìn)行競(jìng)品體驗(yàn)時(shí)，盡可能多的找出差異化的設(shè)計(jì)形式，作為改版APP優(yōu)化的指導(dǎo)方向。由于作為UI設(shè)計(jì)師進(jìn)行APP改版練習(xí)更多是視覺優(yōu)化為主，交互優(yōu)化為輔，所以我們需要在相同模塊上面找出更多不同的設(shè)計(jì)樣式，作為視覺優(yōu)化的方向。如果你自身交互能力較好，也可以以交互優(yōu)化為主，視覺優(yōu)化為輔，這個(gè)可以結(jié)合自身情況選擇。在進(jìn)行競(jìng)品體驗(yàn)的時(shí)候也要根據(jù)優(yōu)化目的的不同，著重的轉(zhuǎn)移體驗(yàn)的重心。7、素材采集，打開禁錮的思維通過競(jìng)品體驗(yàn)?zāi)銜?huì)總結(jié)出改版APP各個(gè)模塊的差異化，相同的功能模塊各自產(chǎn)品的交互形式、布局樣式、視覺風(fēng)格都存在各自的差異。此時(shí)，你對(duì)改版APP中的很多設(shè)計(jì)都一個(gè)初步的優(yōu)化清單，你需要再深入一步，因?yàn)楦?jìng)品的設(shè)計(jì)樣式不一定就是值得借鑒的，我們需要尋找更多的靈感，打開自己禁錮的思維。通過國(guó)內(nèi)外的一些設(shè)計(jì)平臺(tái)、素材網(wǎng)站等我們可以去采集更多的設(shè)計(jì)樣式作為靈感借鑒，日常的一個(gè)采集收藏習(xí)慣也就變得尤為重要了，作為一個(gè)優(yōu)秀的UI設(shè)計(jì)師，我們需要養(yǎng)成這樣的習(xí)慣。個(gè)人平時(shí)經(jīng)常訪問的設(shè)計(jì)平臺(tái)有站酷、UI中國(guó)、致設(shè)計(jì)、Dribbble、Behance等，采集收藏靈感會(huì)經(jīng)常用Pinterest和花瓣，都是一些大家經(jīng)常訪問的平臺(tái)，所以不是別人知道你所不知的優(yōu)秀平臺(tái)，而是你沒有他的良好習(xí)慣。8、體驗(yàn)，走了一圈才發(fā)現(xiàn)你可以更好采集完一些靈感素材之后，我們又回到體驗(yàn)改版APP的起點(diǎn)，走了一圈之后你會(huì)發(fā)現(xiàn)改版APP中很多你可以入手優(yōu)化的方向，比起第一次體驗(yàn)，你會(huì)更加有信心能夠做出一個(gè)不一樣的設(shè)計(jì)作品。再次進(jìn)行產(chǎn)品體驗(yàn)的時(shí)候，你需要帶著腦海中處理相同功能板塊的不同設(shè)計(jì)表現(xiàn)形式進(jìn)行思考，尋找出更好的設(shè)計(jì)表現(xiàn)形式來解決這個(gè)功能模塊。在構(gòu)思優(yōu)化樣式的時(shí)候，可以繪制一些簡(jiǎn)單的草圖，以防后期進(jìn)行交互輸出的時(shí)候遺漏靈感細(xì)節(jié)。在進(jìn)行設(shè)計(jì)優(yōu)化的時(shí)候先從靈感庫(kù)中尋找較為符合的樣式進(jìn)行思維嵌套，然后再發(fā)散思維，融入自己原創(chuàng)性的思維，形成自己的原創(chuàng)思路。9、交互設(shè)計(jì)，實(shí)現(xiàn)你心中的更好作為UI設(shè)計(jì)師最終輸出的必然是高保真的視覺稿，那么交互原型設(shè)計(jì)是為了快速的把自己的思路展現(xiàn)出來，所以不局限于原型軟件的繪制，哪怕是紙上的草圖繪制也是可行的方案。最終的交互稿是給自己看的，所以能看懂就能達(dá)到最終的目的。10、設(shè)計(jì)風(fēng)格推導(dǎo)，符合產(chǎn)品的設(shè)計(jì)趨勢(shì)運(yùn)用在開始進(jìn)入界面視覺設(shè)計(jì)時(shí)，我們需要對(duì)整體APP設(shè)計(jì)做風(fēng)格推導(dǎo)，這將直接關(guān)系著最終界面呈現(xiàn)的效果。如果你是一位對(duì)行業(yè)趨勢(shì)關(guān)注的設(shè)計(jì)師，各種設(shè)計(jì)趨勢(shì)呈現(xiàn)在你腦海中，你需要進(jìn)行篩選，結(jié)合改版產(chǎn)品的屬性選擇合適的設(shè)計(jì)語言去表達(dá)，切不可為了趨勢(shì)而犧牲產(chǎn)品定位。在進(jìn)行風(fēng)格確定的時(shí)候，顏色的選擇也占據(jù)一定的因素，我們可以選擇改版APP現(xiàn)有的主色進(jìn)行優(yōu)化，也可以進(jìn)行推翻重選。如果是重新選擇配色方案，我們可以通過情緒版的方式在身邊朋友或者各種群里進(jìn)行。也可以與競(jìng)品形成視覺差異化，選擇一些形成對(duì)比的配色方案確定好配色方案之后，我們需要考慮設(shè)計(jì)的表現(xiàn)形式，無論是何種設(shè)計(jì)形式都需要符合產(chǎn)品的屬性。比如大標(biāo)題、大圓角卡片、大投影等設(shè)計(jì)表現(xiàn)形式會(huì)在視覺層面帶來不錯(cuò)的效果，卻需要考慮信息量的因素，如果本身改版APP就屬于信息量很大的產(chǎn)品，在選擇時(shí)就要綜合考慮。根據(jù)APP的風(fēng)格定位，比如文藝類、娛樂類、兒童類等，那么設(shè)計(jì)的風(fēng)格也會(huì)對(duì)產(chǎn)品風(fēng)格定位起到一定的影響。11、界面設(shè)計(jì)，碎片化積累為了能夠充分利用好業(yè)余時(shí)間，我們需要把數(shù)十個(gè)界面分配到具體的日程中，最大程度的利用碎片化的時(shí)間進(jìn)行積累。規(guī)定自己一天完成兩個(gè)界面，就要嚴(yán)格執(zhí)行，只有這樣你才能具備超強(qiáng)的戰(zhàn)斗力。12、審核，尋找導(dǎo)師歷盡艱辛你收獲了希望，一套APP改版設(shè)計(jì)作品初步完成，接下來你需要尋找到一位導(dǎo)師，俗話說當(dāng)局者迷，你自己構(gòu)思出來的東西需要得到驗(yàn)證導(dǎo)師在哪里？a.可以是身邊的同事/同學(xué)/老師/目標(biāo)用戶，導(dǎo)師不一定是大神，旁觀者的意見都是具有一定的思考價(jià)值；b.通過一些設(shè)計(jì)交流群尋求意見c.通過設(shè)計(jì)平臺(tái)尋找那些活躍的老司機(jī)；d.機(jī)緣巧合下加上的大神微信或者QQ；13、調(diào)整優(yōu)化，不放過任何一個(gè)細(xì)節(jié)通過不同形式的意見反饋，我們即將面臨一次調(diào)整優(yōu)化，在眾多的反饋意見中，我們也不能盲目的進(jìn)行修改。14、包裝，整理設(shè)計(jì)思路在進(jìn)行作品包裝的時(shí)候，可以加入自己的設(shè)計(jì)思路輔助傳