中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

參與到一個(gè)項(xiàng)目中，我們不單單只是做一個(gè)圖那么簡單，而是要把自己的工作對接到整個(gè)項(xiàng)目流程中去。

第一次寫稿，大家可以多交流。做UI和交互兩年多，在UI設(shè)計(jì)中，很多開始學(xué)UI尤其是自學(xué)UI的同事都會問這么一個(gè)問題，什么是UI設(shè)計(jì)？

百度百科解釋為：UI即User Interface（用戶界面）的簡稱。UI設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。

但實(shí)際中很多從業(yè)UI設(shè)計(jì)只做了界面美化的這一部分。所有有時(shí)候也弱化了UI設(shè)計(jì)范圍。因此我今天和大家交流的就是在APP視覺設(shè)計(jì)這塊的工作流程。參與到一個(gè)項(xiàng)目中，我們不單單只是做一個(gè)圖那么簡單，而是要把自己的工作對接到整個(gè)項(xiàng)目流程中去。

第一步

我們要知道一個(gè)項(xiàng)目中有那些成員，知道你的上游和下游是誰，需要輸入和輸出那些東西？我們需要交互設(shè)計(jì)師或者產(chǎn)品經(jīng)理手中拿到：

• 用戶任務(wù)
• 頁面流程
• 低保真原型圖

確認(rèn)并無任何意見，開始著手app視覺設(shè)計(jì)。有些產(chǎn)品或者交互只會給一個(gè)低保真原型圖，但盡量要掌握更多的流程和用戶信息，可以在設(shè)計(jì)中通過頁面更好的引導(dǎo)用戶。

第二步

設(shè)計(jì)環(huán)節(jié)，設(shè)計(jì)環(huán)節(jié)主要說一些規(guī)格，具體的如何設(shè)計(jì)頁面樣式，相信每個(gè)人都有自己的風(fēng)格和想法。再設(shè)計(jì)中要注重平臺插件樣式和平臺風(fēng)格，這樣更容易贏得用戶信賴。

1. 新建750x1334xp的畫布大小，顏色模式為rgb8，像素率為72（一般設(shè)計(jì)稿按蘋果6的大小尺寸）
2. 確定符合企業(yè)品牌的app主色調(diào)和材質(zhì)
3. 設(shè)計(jì)圖標(biāo)
4. 設(shè)計(jì)整個(gè)APP頁面，注意，細(xì)節(jié)有誤丟失？按鈕點(diǎn)擊狀態(tài)、反饋、缺失狀態(tài)、字?jǐn)?shù)超出、加載中、未加載態(tài)、加載失敗態(tài)，是否都提供了？
5. 頁面標(biāo)注
6. 切圖

第三步

設(shè)計(jì)環(huán)節(jié)的交付物，這個(gè)環(huán)節(jié)對UI新手來說是一個(gè)比較短板的環(huán)節(jié)，像做平面設(shè)計(jì)一樣吧界面設(shè)計(jì)好了，但該怎么交給開發(fā)，讓開發(fā)實(shí)現(xiàn)在產(chǎn)品上去，就難道了一大片。

首先我們的知道iOS和Android開發(fā)需要的設(shè)計(jì)交付物至少要有：高保真UI圖(設(shè)計(jì)稿），標(biāo)注，切圖。并且知道這些交付物對開發(fā)有什么樣的作用。

高保真UI圖：

高保真UI圖所起到的作用是，開發(fā)會參照其畫頁面，僅僅是獲知頁面樣子的一個(gè)手段，并非什么高精度的事情。所以不需要出IOS和Android兩套樣子一樣只有大小不一樣的圖。

標(biāo)注和切圖：

標(biāo)注和切圖的作用是，開發(fā)會按照標(biāo)注的尺寸，把切圖按照高保真UI圖的擺放方式做到界面上。

那么問題來了，iOS的開發(fā)和Android開發(fā)所需要的標(biāo)注和切圖是不一樣的。如何在一套iOS的高保真UI圖上做出兩套標(biāo)注和切圖呢？

首先ios設(shè)計(jì)的像素尺寸是750×1334（iphone6的尺寸）

Android主流的hdpi模式下的像素尺寸是480×800,

可以得出他們的換算關(guān)系是，iOS@2x像素尺寸*75%=Android的hdpi像素尺寸。（480÷640=0.75寬度比)

1>ios尺寸

iphone一二三代的：320x480px

@2x iphone4-4s：640x960px iphone 5，5c，5s ：640x1136px

iphone6：750×1334 px

@3x iphone6 puls：1080x1920px

2>Android主流尺寸

• idpi 240x320px 120ppi(像素密度）
• mdpi 320x480px 240ppi
• hdpi 480x800px 160ppi
• xhdpi 720x1280px 320ppi
• xxhdpi 1080x1920px 480ppi

Ios各尺寸的比為@：@2x：@3x = 0.5：1：1.6875

Andriod各尺寸的比為idpi：mdpi：hdpi：xhdpi：xxhdpi：xxxhdpi=0.75：1：1.5：2：3：4

在iOS切圖與Android切圖的轉(zhuǎn)換中：

因?yàn)椋篿OS@2x像素尺寸*75%=Android的hdpi像素尺寸

所以： iOS@2x的切圖縮小75%之后，就是Android的hdpi模式下的切圖，

又因?yàn)椋篽dpi：xhdpi=1.5：2=0.75

所以得： iOS@2x的切圖就是Android的xhdpi的切圖尺寸

又以上可以得出，在手機(jī)APP設(shè)計(jì)中，在IOS和Android兩套版本的樣子一樣只有大小不一樣設(shè)計(jì)稿時(shí)，我們可以單獨(dú)做一個(gè)ios@2x的設(shè)計(jì)稿，在切圖階段按照IOS和Android的轉(zhuǎn)換關(guān)系的出不同版本不同尺寸所需要的切圖。

注意：切圖在縮放之后像素會糊在一起，很可能需要重新調(diào)整，還有各種虛邊情況，尤其是那些帶透明陰影的，都要重新調(diào)。

Andriod的像素尺寸轉(zhuǎn)化為開發(fā)尺寸，即：px轉(zhuǎn)化為dp

我們以480*800像素尺寸下做的設(shè)計(jì)圖為基準(zhǔn)。

開發(fā)將部件尺寸換算成dp尺寸的方法是，像素尺寸*2/3。480px*2/3=320dp

這也是為什么要讓Android部件尺寸能讓3整除的原因。如在hdpi模式，480*800像素尺寸設(shè)計(jì)圖中，開發(fā)看到300px寬度的標(biāo)注，會定義其為寬200dp，到這里Android開發(fā)才得到一個(gè)他們真正會用于開發(fā)的數(shù)值。

綜合 上述關(guān)系：iOS@2x像素尺寸*75%=Android的hdpi像素尺寸

Android的像素尺寸*2/3=Android的hdpi的dp尺寸

得出：iOS@2x像素尺寸*75%*2/3=Android的hdpi的dp尺寸

所以：iOS@2x里一個(gè)寬600px的東西，在Android的hdpi模式下，正好300dp，正好是50%，

第四步

就是驗(yàn)收開發(fā)成果，我們不僅吧頁面設(shè)計(jì)出來，還要讓他最終展示在產(chǎn)品中，所以開發(fā)完成開發(fā)以后，我們需要驗(yàn)收界面效果是不是和我們設(shè)計(jì)的一致。如果一致，或者因開發(fā)原因沒有辦法實(shí)現(xiàn)，我們就要修改設(shè)計(jì)方案，在設(shè)計(jì)的時(shí)候我們就的注意開發(fā)的難易程度。

最后總結(jié)一下就是在做APP UI設(shè)計(jì)中，從拿到低保真原型圖到驗(yàn)收產(chǎn)品，才是UI設(shè)計(jì)師在一個(gè)項(xiàng)目中參與的本職的工作中。也可以根據(jù)個(gè)人能力延伸到界面交互，用戶任務(wù)的交互設(shè)計(jì)中。

這些只是我個(gè)人的一些工作經(jīng)驗(yàn)和一些文章中總結(jié)出來的一些東西。希望大家可以吐槽，多交流！

本文由 @?僧可 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自usnplash，基于CC0協(xié)議