微信小程序UI練習(xí)總結(jié)

今天是我在公司上班的第四天，在經(jīng)過三天的觀察、臨摹、學(xué)習(xí)后，薇姐終于給我派任務(wù)了（當(dāng)時(shí)那個(gè)激動(dòng)啊  (￣▽￣)~* ），雖然流程寫的很簡(jiǎn)單（目測(cè)只有三頁，僅限于目測(cè)罒ω罒），但對(duì)于我一個(gè)新手來說實(shí)在不易。在學(xué)校自學(xué)的UI，沒有老師教，純靠自己，早就經(jīng)歷過盲目崩

潰，所以我并不懼怕折中任務(wù)，反而很開心（動(dòng)詞打次動(dòng)詞打次 (￣▽￣)~* ）。

一、流程圖（薇姐一寫字讓我著實(shí)驚訝，難道這世上只有我不會(huì)寫連筆字嗎  (T ^ T)  ）

          （我方了 ε(┬┬﹏┬┬)3  ，最近練得都是APP，怎么是個(gè)微信小程序）

二、模型圖

一般的項(xiàng)目都會(huì)有個(gè)前期制圖，然后才會(huì)到設(shè)計(jì)師手里，鑒于這是個(gè)練習(xí)，邏輯方面還是得自己來（畫什么模型圖，直接上手  o(′^｀)o   ）。

三、制圖

我們公司一般用iOS的750×1334進(jìn)行設(shè)計(jì)，這里有個(gè)尺寸圖。

1.狀態(tài)欄（40px）

2.導(dǎo)航欄（88px）：內(nèi)容圖標(biāo)是44×44px。重點(diǎn)：圖標(biāo)用矢量工具去畫，我用AI軟件，畫圖標(biāo)的時(shí)候要時(shí)刻切換為像素圖（Ctrl+Alt+Y）去查看自己畫的圖標(biāo)是不是標(biāo)準(zhǔn)（就是畫的橫平豎直的時(shí)候是沒有鋸齒的，除非你畫錯(cuò)了，拐彎的地方有鋸齒很正常。我覺得這個(gè)模式還有一個(gè)好處，就是可以數(shù)著像素格來修改自己的圖標(biāo)，可以使自己畫的圖標(biāo)更標(biāo)準(zhǔn)。還有一種畫圖標(biāo)的方法，就是用帶“黃金比例圈”的繪圖本，在本子上畫好，然后拍下來放到AI上描出來，我忘記帶那個(gè)本子了，就直接畫的）。畫好圖標(biāo)后將圖標(biāo)全選，點(diǎn)擊“對(duì)象-擴(kuò)展”使圖標(biāo)成為一個(gè)整體，將圖標(biāo)從AI軟件里直接拖到PS里，一定要記得在圖標(biāo)的下方畫一個(gè)44×44px的矩形，只將矩形設(shè)成透明，將圖標(biāo)和矩形對(duì)齊后打組或轉(zhuǎn)為智能對(duì)象（因?yàn)閷?dǎo)航欄的圖標(biāo)是44×44px，但是圖標(biāo)的不規(guī)則性又不一定全部撐滿，就在下方畫一個(gè)透明的矩形，這樣切圖的時(shí)候即使圖標(biāo)再不規(guī)則，也會(huì)切出一個(gè)44×44px的圖表來）。將圖標(biāo)放到導(dǎo)航欄上，兩邊的安全距離我設(shè)置的是24px（不是死規(guī)定），再打上文字，然后將內(nèi)容與導(dǎo)航欄執(zhí)行對(duì)齊。

錯(cuò)誤糾正：

1、Home頁中的訂單詳情我加了一條下劃線，不要隨變亂加，還有就是開始掃碼和訂單詳情的比重關(guān)系我沒有設(shè)計(jì)好（薇姐提出來的時(shí)候，我感覺她好專業(yè)  T^T  ）。

2、訂單詳情頁中的待收貨下方有一條直線要用直線工具去畫，一定要考慮到三個(gè)字和兩個(gè)字的直線長(zhǎng)短是不一樣的，要在打標(biāo)注的時(shí)候標(biāo)出來告訴工程師（這點(diǎn)是最令我意外的，因?yàn)槲腋揪蜎]有想到，欲哭無淚啊

 o(╥﹏╥)o     o(╥﹏╥)o    o(╥﹏╥)o    o(╥﹏╥)o   o(╥﹏╥)o    o(╥﹏╥)o   o(╥﹏╥)o ）。

3、最尷尬的就要屬訂單的排版了，收貨信息和訂單應(yīng)該屬于一個(gè)整體，我硬生生的給收貨信息一欄里的框上下加了兩條不合適的直線，不僅分開了界面，還顯得突兀。

4、訂單列表頁面中的物流信息，應(yīng)該是一個(gè)軸線型的樣子，我為了省事，就給用幾行字給省略了（好想打自己一個(gè)耳光），字為了不出現(xiàn)頭部參差不齊的情況，要用T工具畫一個(gè)段落框，再打字，行間距應(yīng)該是字體的兩倍左右。

四、打標(biāo)注

1、因?yàn)橛幸恍┐a基礎(chǔ)，所以在打標(biāo)注的時(shí)候我大多是知道怎么打的。值得注意的是給字體、顏色打標(biāo)注時(shí)盡量和測(cè)距標(biāo)注的顏色分開，否則工程師會(huì)看的很頭疼。

2、導(dǎo)航欄是88px，我只把圖標(biāo)的44×44px給標(biāo)注了，要把圖標(biāo)與邊框的間距給標(biāo)上，不要讓工程師自己去算。

 

五、切圖

  這個(gè)練習(xí)，我并沒有切圖，我安裝了cutterman，但還沒有用過，我會(huì)切圖，但是不規(guī)范，自己還在學(xué)習(xí)。不過我知道另一種切圖方法，可以不用插件。CC2015版本以上的軟件可以右擊自己的圖層或編組，選擇導(dǎo)出為，在彈出來的框里可以進(jìn)行多倍導(dǎo)出，方便切圖。有些設(shè)計(jì)師覺得這樣會(huì)更好用，單憑個(gè)人感覺，選擇適合自己的就好。

 

 

        用此文來記錄我的成長(zhǎng)，夠努力才會(huì)更幸運(yùn)！

        本人是大四學(xué)生，在公司實(shí)習(xí)，希望能夠在這里遇到我的伯樂，最好北上廣深，成都、漢州、重慶、湖南都可以，世界那么大，我想去看看。