Figma自編教程第三篇(也是做產品實習生的第三天)

語言: CN / TW / HK

前兩天,我發了Figma自編教程第一篇和第二篇,鏈接如下: Figma自編教程第一篇(也是做產品實習生的第一天) - 掘金 (juejin.cn)Figma自編教程第二篇(也是做產品實習生的第二天) - 掘金 (juejin.cn) 。這兩篇文章,説實話,其實已經將常用的一些Figma功能介紹完了,有這些知識,其實做一些較為簡單的原型是絕對沒什麼問題,但是其實業務中有一些問題並不是這些簡單的功能而已,今天這邊,我希望可以給大家介紹一下相對複雜一點,以及相對個性化,風格化一點的頁面設計類型,還有原型設計的相關入門.對了,今天我被領導拉過去,讓我做了一下UI設計,他給我分配的任務是按照我們項目已有的UI風格,對於“拍照歷史”這一功能進行一個圖標UI的設計

今天我先給大家分享一下關於我今天上午UI設計的過程與思考,然後再跳轉到關於Figma的原型設計入門部分吧

第一次圖標設計過程

今天上午被老闆安排了一個工作,那就是按照我們項目已有的美術風格,為“拍照歷史”這一功能模塊,設計其圖標。我先來給大家展示一下我們組的UI美術風格吧

這個是我們項目組的一個UI風格,今天對於篩查報告,還有健康報告的位置與UI需要進行變化,將原“篩查報告”的位置改為“拍照歷史”,而將“篩查報告”等同於“健康報告”。因此,我們不需要再次設計篩查報告的UI,但是對於拍照歷史的UI我們還需要重新設計,這就是我今天上午工作的背景。

在被分配任務之後,我開始思考,“拍照歷史”?他的重點到底應該放在哪裏?

因為所謂的拍照歷史,其實就是你把照片傳上來,然後後台AI自動對你的照片是否存在病變點來進行一個篩查,然後將篩查後的報告進行導出,然後你可以通過“拍照歷史”這個功能,看到自己曾經進行拍照智能篩查得出來的結果,而且也可以看到當時進行檢測的照片,也就是對於自己自己曾經進行拍照的結果還有照片可以進行一個回顧

那我一開始做時,我將重點放在了“拍照”這兩個字上,我認為這個很明顯,那不是就畫一個小相機就行???

於是我做了一個這樣的圖標,當時還覺得自己做的可好了呢!天,多漂亮的一個相機呀,這一版絕對沒問題!

至於這個的製作過程,真的很簡單

就新建一個畫布,然後畫一個矩形,通過右邊的Design來調整大小,然後,大家可以看到我有一個位置寫了40對吧,那個就是控制建立矩陣邊角的弧度,我一般喜歡40或是30.然後下面就是效果圖

然後改動顏色,啥顏色這不重要,大家自己選擇就ok,我這邊選擇的是綠色

剩下的,大家就往上套形狀就行,套什麼形狀都行,只要讓他看起來像是相機就ok

我這邊選擇的是,總共用了五個圖形,分別是三條矩陣豎線,還有兩個圓形來做鏡頭

三個矩陣顏色我選擇的是,紅黃藍

其設計模仿借鑑了這張UI,這種風格也被稱為擬物化。

做好的效果在上面展示過了

但我將這一版交給老闆看的時候,他提出了不同意的意見,他認為雖然我們這個圖標名稱為拍照歷史,但其實他的重點並不是拍照,而是用户可以通過這個按鈕,來點擊查看自己之前拍照搜查的照片與這張照片被AI智能識別之後,的出來的報告。

於是在這之後,我決定將圖標從相機擬物化,換為以文件為主要的設計點,在矩形框中畫一個筆記本的形式,重點突出文字的感覺

那這個筆記本需要怎麼畫出來呢,其實大家可以用畫矩陣,然後拖動其邊角移動的做法,畫完之後,點擊下面我截圖的的圖標,然後就可以就行繪製

上面繪製了他的弧度,現在我們再進一步畫

哎,我也不知道這邊要咋講,感覺其實也就是挺簡單的,這些東西其實就是你在上面加個圖層,然後就ok了。大家做完之後,一定要記得Group一下!這樣移動的時候會方便一點

我感覺這邊沒啥好講的,大家要是有問題,評論區裏説就ok。

之後就開始了我的顏色調配之旅。

其實這邊真不難,但是這個顏色,真的和大家商量了好久

通過大家很久的交流!最終定稿為這樣!

所以其實技術問題並不是很大,其實有時候這種原型設計,對於人與人之間的溝通交流能力,還有審美能力要求才是要求比較高的。

接下來是第二部分!Figma的原型設計

Figma的原型設計入門

原型有什麼作用呢?

原型的作用

Figma 的原型功能允許你創建交互式流程以模擬用户的交互方式。我們可以通過原型來分享我們關於項目設計的想法,測試不同方向,給他人展示我們的設計

原型模式

原型模式通過這邊進入 選擇圖層後,你將在原型選項卡中看到一些原型屬性,這將允許你為圖層或框架定義觸發方式、動作和溢出行為。

連線和熱點

完成框架後,可以使用連線和熱點將它們鏈接在一起。

可以從框架中的任何(子)對象建立連接;這會在原型中的該對象上創建一個熱點。例如:一行或一段文字;按鈕,圖像或圖標;導航菜單或工具提示等

然後可以將熱點連接到任何頂級框架,即設計中的任何其他屏幕,該框架將成為目標框架。

比如我這邊就可以這樣進行連接

大家看到上面的那個三角形了嗎

你點擊他,他就可以對你的連接進行模擬。

我們來試驗一下

點擊Flow1,頁面跳轉

然後會出現模擬的手機頁面

我們剛才將文檔圖標和下一頁連接在了一起,所以這邊我們直接點擊文檔圖標

結論是成功跳轉,然後關閉頁面就行

我今天只是給大家試驗一下,其實一個真正的頁面原型,要做很多,大家加油呀!

今天就先這樣發了吧,其實想昨天發的,但是昨天沒寫完,哭哭

  • 我正在參與掘金技術社區創作者簽約計劃招募活動,點擊鏈接報名投稿。