設(shè)計(jì)app 以及切圖 標(biāo)注 單位

?從上圖可以知道,在整個(gè)過(guò)程中,設(shè)計(jì)師的工作可以分為做人和做事兩大類(lèi)。

學(xué)會(huì)做人

樓主將這個(gè)放在做事的前面,特意強(qiáng)調(diào)了一下它的重要性。人的本質(zhì)是一切社會(huì)關(guān)系的總和。

同事之間會(huì)有部門(mén)、職位、年齡、婚姻狀況等各種不同的情況,是除了家人之外跟自己相處時(shí)間最久的一類(lèi)人。跟合作的部門(mén)同事相處融洽,信息溝通順暢,幫助他們解決問(wèn)題,是用最直接的方式去鍛煉自己了解人性,了解人的需求,以及解決這些需求滿足這些需求的過(guò)程。

在團(tuán)隊(duì)中每個(gè)人的分工和職責(zé)如下:

BOSS:關(guān)注的重點(diǎn)在于關(guān)注市場(chǎng)的走向,實(shí)現(xiàn)商業(yè)的盈利,產(chǎn)品的質(zhì)量,以及控制實(shí)現(xiàn)過(guò)程中的開(kāi)發(fā)成本。

PM:在和BOSS溝通完善的前提下,輸出PRD(Product Requirement Document,即產(chǎn)品需求文檔)文檔。而MRD(Market Requirement Document,即市場(chǎng)需求文檔)、BRD(Business Requirement Document,即商業(yè)需求描述)在這里就不是必須的,可能有也可能沒(méi)有。這樣只是效率更高。

開(kāi)發(fā)工程師:分為服務(wù)器和APP兩部分的開(kāi)發(fā)。負(fù)責(zé)服務(wù)器的開(kāi)發(fā)可能還要考慮產(chǎn)品的架構(gòu)搭建,負(fù)責(zé)APP實(shí)現(xiàn)的開(kāi)發(fā)則可能關(guān)注于APP的邏輯跳轉(zhuǎn)和與服務(wù)器數(shù)據(jù)之間的傳輸過(guò)程。QA負(fù)責(zé)產(chǎn)品的測(cè)試。

設(shè)計(jì)師:在理解以上三者意愿的情況下,設(shè)計(jì)出可視化的方案,交與工程師進(jìn)行開(kāi)發(fā)。

TPM:項(xiàng)目管理者,把控著時(shí)間節(jié)點(diǎn),平衡團(tuán)隊(duì)資源分配。(可能有的團(tuán)隊(duì)這項(xiàng)工作由PM做)

可以看到在人員職責(zé)中有兩點(diǎn)比較重要,一是負(fù)責(zé)做事,二是負(fù)責(zé)把控時(shí)間。

學(xué)會(huì)做事

我們?cè)谧鍪缕鋵?shí)是在幫人在解決問(wèn)題,說(shuō)到底也是在做人。而這個(gè)人,就縮小到社會(huì)上某類(lèi)有共同需求的用戶。

設(shè)計(jì)師在項(xiàng)目開(kāi)發(fā)中落實(shí)到實(shí)戰(zhàn)是在產(chǎn)品設(shè)計(jì)階段和開(kāi)發(fā)階段。

產(chǎn)品設(shè)計(jì)階段,在拿到PRD文檔之后,開(kāi)始分析,畫(huà)出簡(jiǎn)單的流程圖,然后在流程的基礎(chǔ)上輸出低保真原型圖,即low-fi。low-fi的標(biāo)準(zhǔn)是示意,表達(dá)出每個(gè)頁(yè)面有哪些元素,頁(yè)面之間的跳轉(zhuǎn)關(guān)系是怎樣的。

當(dāng)low-fi得到大家的一致認(rèn)同之后,就開(kāi)始著手到高保真效果圖階段,即high-fi。需要實(shí)現(xiàn)頁(yè)面完整的UI,以及整體的UI規(guī)范。畫(huà)出精致的icon,放上精美的圖片。是一項(xiàng)可以真正拿得出手,產(chǎn)生商業(yè)價(jià)值,讓用戶可以使用的,擁有完整視覺(jué)效果的產(chǎn)品。

high-fi階段過(guò)后,進(jìn)入制作動(dòng)態(tài)原型階段。這個(gè)階段的任務(wù)就是快速做出可以在手機(jī)上演示的demo,讓團(tuán)隊(duì)成員體會(huì)是否有體驗(yàn)不順暢的地方,如果可以的話拿給用戶去體驗(yàn),進(jìn)行小規(guī)模的測(cè)試。這一階段就是在產(chǎn)品開(kāi)發(fā)之前進(jìn)行驗(yàn)證,查漏補(bǔ)缺的一個(gè)過(guò)程,避免產(chǎn)品犯原則性或者交互上出現(xiàn)大的、方向性的錯(cuò)誤。

Demo演示完成之后,設(shè)計(jì)師就需要整理好文檔并導(dǎo)出資源,將主要的工作就交給開(kāi)發(fā)人員了。而設(shè)計(jì)師的工作還沒(méi)結(jié)束,設(shè)計(jì)師需要隨時(shí)準(zhǔn)備好回答開(kāi)發(fā)人員拋過(guò)來(lái)的一些問(wèn)題,得到解決方案。還有,著手下一個(gè)版本的設(shè)計(jì)工作,以及在這一個(gè)版本需要改善的體驗(yàn),都可以開(kāi)始準(zhǔn)備。新的一輪工作又開(kāi)始了~

創(chuàng)業(yè)公司扁平化的管理方式,使得團(tuán)隊(duì)精致而又高效。在團(tuán)隊(duì)成員密切配合的情況下,可以實(shí)現(xiàn)產(chǎn)品的快速開(kāi)發(fā)和迭代,形成小步快跑的節(jié)奏。當(dāng)然也有它的弱點(diǎn),就是沒(méi)有太多的時(shí)間去做細(xì)致。但在市場(chǎng)快速更替的情況下,快速試錯(cuò)然后改正何嘗不是一種優(yōu)點(diǎn)?

立項(xiàng)

在立項(xiàng)的過(guò)程中,總時(shí)長(zhǎng)不確定,如果項(xiàng)目比較趕,可能經(jīng)過(guò)半個(gè)月左右的時(shí)間去做,如果想考慮更周全,可能2個(gè)月左右。現(xiàn)在咱們就拿最短的時(shí)間為主進(jìn)行說(shuō)明吧。半個(gè)月在工作時(shí)間來(lái)看其實(shí)就是,10天(2個(gè)禮拜)的工作內(nèi)容加上最后一天的總結(jié)。

主要的思路是:Boss看中一個(gè)商機(jī),然后由一個(gè)商業(yè)機(jī)會(huì)延伸出來(lái)某個(gè)產(chǎn)品的功能,再在這個(gè)功能上進(jìn)行產(chǎn)品完善,最終目標(biāo)是做出MVP(Minimum Viable Product ,即最簡(jiǎn)化可實(shí)行產(chǎn)品,MVP是一種產(chǎn)品理論,這個(gè)概念聽(tīng)起來(lái)復(fù)雜,不過(guò)你可以把它想像成是一部電影的劇情大綱,或是一部漫畫(huà)的角色介紹)。

在立項(xiàng)的階段,基本上每天都會(huì)有會(huì)議,會(huì)議的參與人主要是PM和設(shè)計(jì)師以及項(xiàng)目負(fù)責(zé)人,Boss只是階段性查看一下成果,工程師偶爾參加。主要由項(xiàng)目負(fù)責(zé)人來(lái)push進(jìn)度,當(dāng)然,項(xiàng)目負(fù)責(zé)人也有可能就是PM本身。

每天大家都會(huì)進(jìn)行一次一兩個(gè)小時(shí)的頭腦風(fēng)暴,根據(jù)前一天的結(jié)論,大家會(huì)后去翻閱資料,自己先給出完整的總結(jié)之后,第二天再進(jìn)行討論,如此反復(fù)。也不那么絕對(duì),可能遇到的問(wèn)題比較麻煩,大家就多花點(diǎn)時(shí)間做研究或者直接做一些demo上手試試看效果。

此時(shí)PM的任務(wù)非常重要,需要在眾多的idea中篩選并且保持產(chǎn)品核心功能和目標(biāo)用戶不變。所以,一個(gè)優(yōu)秀的產(chǎn)品經(jīng)理,一定是原則性非常強(qiáng),并且在眾多壓力下能夠有充分的能力讓大家信服。

在立項(xiàng)階段有幾個(gè)特點(diǎn):

1. 變動(dòng)時(shí)常有

樓主知道,不管是設(shè)計(jì)師,程序員,都非常討厭需求的變動(dòng)。變動(dòng)意味著所有的設(shè)計(jì)稿和代碼都得重新進(jìn)行,一片心血付諸東流。PM也會(huì)受到大伙所有的噴子(PM確實(shí)不好當(dāng)?。?。但是在立項(xiàng)階段,設(shè)計(jì)師需要告訴自己的是:讓自己了解產(chǎn)品更多的走向,給產(chǎn)品更多發(fā)揮它價(jià)值的空間,不要太限制住自己。哪怕是MVP已經(jīng)完成,產(chǎn)品走向迭代的過(guò)程,也不要抱怨變動(dòng),每一次的變動(dòng)都有可能是糾錯(cuò)的過(guò)程,每一次的變動(dòng)都意味著產(chǎn)品與市場(chǎng)聯(lián)系地更加緊密。

2. 功能越核心越好,產(chǎn)品越簡(jiǎn)單越好

在立項(xiàng)階段,團(tuán)隊(duì)的目標(biāo)就是,用最短的時(shí)間做出能夠馬上放到市場(chǎng)上進(jìn)行驗(yàn)證的MVP。這個(gè)時(shí)候市場(chǎng)反饋在產(chǎn)品上最好更改,甚至產(chǎn)品的方向也能馬上進(jìn)行調(diào)整。MVP 的功用就是讓你拿來(lái)接觸客戶,從很早就根據(jù)客戶的回饋來(lái)改進(jìn)你的產(chǎn)品。典型的錯(cuò)誤就是窩在家里做沒(méi)人要的產(chǎn)品 ,卻自以為很有進(jìn)度。大家的經(jīng)驗(yàn)是,使用者要的東西往往是非常容易做的,但是也是最容易被你忽略的,如果你不一開(kāi)始就跟用戶接觸,就很難知道這些內(nèi)幕。

3. 用最接地氣的方案,方便工程師進(jìn)行開(kāi)發(fā)

避免出現(xiàn)太創(chuàng)新的設(shè)計(jì)方案或交互,讓工程師花費(fèi)大量的時(shí)間去實(shí)施。用最樸實(shí)的設(shè)計(jì)語(yǔ)言表達(dá)最有價(jià)值的核心功能就是這個(gè)階段最完美的方案。

立項(xiàng)階段過(guò)后,PM會(huì)出基于大家統(tǒng)一的MVP的基礎(chǔ)上進(jìn)行PRD文檔的輸出,設(shè)計(jì)師也開(kāi)始真正上手干活。

然后我們要先來(lái)說(shuō)一下設(shè)計(jì)的規(guī)范:

一. 基礎(chǔ)概念

1. 什么是DPI?

DPI(Dots Per Inch):每英寸點(diǎn)數(shù),表示指屏幕密度。是測(cè)量空間點(diǎn)密度的單位,最初應(yīng)用于打印技術(shù)中,它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會(huì)產(chǎn)生不清晰的圖片。

后來(lái)DPI的概念也被應(yīng)用到了計(jì)算機(jī)屏幕上,計(jì)算機(jī)屏幕一般采用PPI(Pixels Per Inch)來(lái)表示一英寸屏幕上顯示的像素點(diǎn)的數(shù)量,現(xiàn)在DPI也被引入。

安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96,Mac的初始值是72,雖然這個(gè)值從80年代起就不是很準(zhǔn)確了。 一般來(lái)說(shuō),非retina桌面(包括Mac)的PPI的取值區(qū)間在72-120之間,因?yàn)檫@個(gè)取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比例。

這里有一個(gè)應(yīng)用實(shí)例: 27寸Mac影院顯示屏的PPI是109,這表示在每英寸的屏幕上顯示了109個(gè)像素點(diǎn)。斜角長(zhǎng)是25.7英寸(65cm),實(shí)際屏幕的寬度大概是23.5英寸,23.5109約等于2560,因此原始屏幕分辨率就是2560x1440px。

屏幕密度計(jì)算公式:

1080x1920px屏幕密度:

2. 什么是PPI?

PPI(Pixels Per Inch):圖像分辨率;是每英寸圖像內(nèi)有多少個(gè)像素點(diǎn),分辨率的單位為ppi,通常叫做像素每英寸。圖像分辨率一般被用于ps中,用來(lái)改變圖像的清晰度。

二.?Android界面設(shè)計(jì)規(guī)范

1. Android各設(shè)備屏幕密度

安卓尺寸眾多,按每個(gè)屏幕去適配肯定是不現(xiàn)實(shí)的。

所以為了解決這個(gè)問(wèn)題,安卓手機(jī)屏幕有自己初始的固定密度,安卓會(huì)根據(jù)這些屏幕不同的密度自己進(jìn)行適配。這一點(diǎn)內(nèi)容掌握到能滿足自己設(shè)計(jì)工作需要就可以了……

以下是Android的密度劃分以及代表的分辨率,這里你可以發(fā)現(xiàn)已經(jīng)和設(shè)計(jì)稿尺寸和切圖輸出開(kāi)始掛鉤了。

安卓各屏幕密度

U妹來(lái)帶大家了解一下iPhone各設(shè)備的手機(jī)屏幕密度:

iphone 4/4S/5/5S/SE/6/7≈320DPI

2. Android開(kāi)發(fā)單位DP和SP

DP:安卓專(zhuān)用長(zhǎng)度單位。以160 DPI屏幕為標(biāo)注,則1DP=1PX

計(jì)算公式:dp x dpi/160=px

例:以720x1280px (320dpi)為例計(jì)算 1dp x 320 dpi/=2px

SP:安卓專(zhuān)用字體單位。以160 DPI屏幕為標(biāo)注,則1SP=1PX

計(jì)算公式:sp x dpi/160=px

例:以720x1280px (320dpi)為例計(jì)算 1sp x 320 dpi/=2px

3. 設(shè)計(jì)稿尺寸

從目前市場(chǎng)主流設(shè)備尺寸來(lái)看,我們要用1080 x 1920 PX 來(lái)做安卓設(shè)計(jì)稿尺寸。

以1080x1920px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸的原由:

① 從中間尺寸向上和向下適配的時(shí)候界面調(diào)整的幅度最小,最方便適配。

② 大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸,會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角。

③ 用主流尺寸來(lái)做設(shè)計(jì)稿尺寸,極大的提高了視覺(jué)還原和其他機(jī)型適配。

所以做安卓設(shè)計(jì)稿時(shí)請(qǐng)以1080x1920px來(lái)做設(shè)計(jì)稿

(sketch用戶以540 x 960來(lái)做設(shè)計(jì)稿)

界面設(shè)計(jì)控件尺寸:

4. 安卓圖標(biāo)尺寸

安卓的圖標(biāo)相對(duì)iOS來(lái)說(shuō)較少,我們只需提供以下幾個(gè)尺寸就可以了,但是需要提高2套,圓角和直角各一套,因?yàn)橛械牡胤蕉紩?huì)用到。

512x512px、192x192px、144x144px、96x96px、72x72px、48x48px

因?yàn)榘沧坑泻芏嗟臋C(jī)型,不同屏幕密度的手機(jī)對(duì)應(yīng)的icon大小也是不同的,所以U妹這里沒(méi)法給你給出相應(yīng)的icon所被應(yīng)用的位置。

5. 安卓設(shè)計(jì)字體

英文字體為 Roboto字體,中文字體為 思源黑體。在Android 5.0之后,使用的是思源黑體,字體文件有2個(gè)名稱(chēng),“source han sans”和“noto sans CJK”。

思源黑體是Adobe和Google領(lǐng)導(dǎo)開(kāi)發(fā)的開(kāi)源字體,支持繁簡(jiǎn)日韓,有7種字體粗細(xì)。

思源黑體字體下載地址,請(qǐng)戳這里:《免費(fèi)下載!谷歌攜手ADOBE推出超好看的的思源宋體(7種字重)》

6. 常見(jiàn)主流手機(jī)尺寸和分辨率

三. Android切圖標(biāo)注

1. 標(biāo)注設(shè)計(jì)稿時(shí),使用px還是dp或sp?

答:這個(gè)問(wèn)題需要和安卓工程師溝通,推薦使用dp和sp進(jìn)行標(biāo)注(這里指的是在安卓設(shè)計(jì)稿的前提下)。但目前很多設(shè)計(jì)師對(duì)dp和sp這個(gè)單位并不理解,所以有些設(shè)計(jì)師提供安卓設(shè)計(jì)稿的時(shí)候依舊使用px進(jìn)行標(biāo)注,這一點(diǎn)去和你的搭檔工程師進(jìn)行溝通,如果不影響他開(kāi)發(fā)以及他能換算清楚的前提下,你可以考慮使用Px,但是我并不推薦。

這里要記住一點(diǎn)(你只需要記住能幫助你工作就可以):

當(dāng)屏幕密度為MDPI(160DPI)時(shí),1dp=1px

當(dāng)屏幕密度為MDPI(160DPI)時(shí),1sp=1px

像素字號(hào)=屏幕密度/160 * sp字號(hào) 可以根據(jù)這個(gè)去算算設(shè)計(jì)稿中的像素字號(hào)標(biāo)注為sp是多少,比如xHDPI下,36px的字標(biāo)注為sp就是18sp,以此類(lèi)推。

按照不同的屏幕密度換算,也就是下圖所示的意思:

2. 你需要提供幾套切圖資源?

答:理論狀態(tài)下,如果你想兼顧到目前還存在的各個(gè)機(jī)型,應(yīng)該為不同的密度提供不同尺寸大小的切圖。

但這無(wú)疑提升了巨大的工作量,而且還可能浪費(fèi)很大的資源空間,實(shí)際上,很多機(jī)型已經(jīng)不占有主流市場(chǎng)了,而且很多奇葩的分辨率也沒(méi)必要去考慮適配,所以,具體輸出幾套需要看公司的產(chǎn)品需求而定。

通常我是這么干的:

選取最大尺寸提供一套切圖資源,交給開(kāi)發(fā)工程師處理,適配到各個(gè)屏幕密度。

這里要注意,這個(gè)“最大尺寸”,指的并不是目前市面上Android手機(jī)出現(xiàn)過(guò)的最大尺寸,而是指目前流行的主流機(jī)型中的最大尺寸,這樣可節(jié)省很大的資源空間。關(guān)于最大尺寸選取多少,你需要和你們的安卓工程師溝通,每個(gè)安卓工程師對(duì)這個(gè)問(wèn)題的結(jié)論并不同。(我的安卓搭檔,讓我提供XXHDPI的切圖資源就好,我用的切圖工具是Cutterman,切圖一鍵搞定)

3. Android的切圖資源提供哪個(gè)尺寸給開(kāi)發(fā)哥哥?

答:iOS的切圖有@2x,@3x之分,那么Android的切圖根據(jù)dpi的不同,其實(shí)和iOS的類(lèi)似,只不過(guò)是按照dpi來(lái)進(jìn)行資源文件夾的命名,如下圖:

根據(jù)不同的分辨率進(jìn)行切圖歸類(lèi),但是你看到了,如果切片特別多,提供5套切圖豈不是要累死了?

一般情況下,我們只需要提供3套切圖資源就可以滿足安卓工程師的適配,分別是HDPI、XHDPI、 XXHDPI 3套切圖資源。

目前我使用的辦法就是只提供最大尺寸的切圖,交給安卓工程師自己去縮放適配其他分辨率吧,所以和你的搭檔溝通一下。

其實(shí)現(xiàn)在絕大多數(shù)公司限于人力物力的限制,沒(méi)有這么嚴(yán)格的工作方式,基本上就是一個(gè)文件夾,命名好了就提供給工程師了。

這里還是提醒各位,沒(méi)有固定的工作方式和方法,任何方式都是為了提升工作效率而進(jìn)行的。

4. 在做設(shè)計(jì)稿時(shí)我們遇到的最多問(wèn)題

① 用哪種尺寸做設(shè)計(jì)稿?

iOS:用750x1334px來(lái)做設(shè)計(jì)稿。

安卓:就目前的市場(chǎng)來(lái)看,XXHDPI屬于主流機(jī)型;這樣無(wú)論是標(biāo)注,還是主流機(jī)型都能兼顧的到,所以推薦使用1080x1920px來(lái)做設(shè)計(jì)稿尺寸,這樣即使你標(biāo)注的是px,工程師也可以很方便的進(jìn)行換算。

② 如何用iOS的設(shè)計(jì)稿去適配安卓(劃重點(diǎn)啦)

現(xiàn)在有一種情況現(xiàn)在非常普遍,那就是一稿兩用;設(shè)計(jì)師都是做iOS版本的設(shè)計(jì)稿,來(lái)適配安卓,現(xiàn)在要給安卓用,應(yīng)該怎么辦?

iPhone的屏幕密度已經(jīng)達(dá)到xHDPI了,用750x1334px的尺寸做設(shè)計(jì)稿。

實(shí)際上,750×1334的@3x的切圖資源正好是安卓XXhdpi(1080x1920px)的切圖資源;安卓開(kāi)發(fā)用iOS的設(shè)計(jì)稿自己進(jìn)行換算就可以了,前提是你必須和安卓工程師溝通。

另一種情況:你可以把750×1334的設(shè)計(jì)稿等比例調(diào)整尺寸到安卓1080×1920尺寸下,對(duì)各個(gè)控件進(jìn)行微調(diào),重新提供標(biāo)注(用dp標(biāo)注)。也就是說(shuō),你需要提供兩套標(biāo)注,一套給iOS的標(biāo)注,一套給Android的標(biāo)注。

③ 大家可能還有一個(gè)問(wèn)題,那就是我用cutterman切安卓圖片輸出的有drawable和mipmap 2個(gè)文件夾,到底將哪個(gè)給開(kāi)發(fā)工程師呢?

答:以前用的開(kāi)發(fā)工具,是只有drawable, 沒(méi)有mipmap的,后來(lái)新的開(kāi)發(fā)工具里面才有mipmap這個(gè)文件夾,專(zhuān)門(mén)用來(lái)放png格式的圖片的,不過(guò)drawable里面還是可以放png圖片。

所以現(xiàn)在我們給安卓工程師的切圖輸出文件只需給mipmap-前綴開(kāi)頭的就好。

四. Android開(kāi)發(fā)單位換算

1. 安卓機(jī)型各種尺寸下的PX與DP、SP的對(duì)應(yīng)關(guān)系

2. 字體單位SP與PX的對(duì)應(yīng)關(guān)系

3. 距離單位DP與PX的對(duì)應(yīng)關(guān)系

以上就是我借鑒整理的資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容