element-ui表單

A step by step journey to create a good design from the daily UI challenge

一步步走，從日常的UI挑戰(zhàn)中創(chuàng)建出色的設(shè)計

內(nèi)容 (Content)

Introduction

介紹

Result demo

結(jié)果演示

Prerequisite

先決條件

Step by step guide

逐步指南

Conclusion

結(jié)論

介紹 (Introduction)

The “Daily UI Challenge” (https://www.dailyui.co/) is a challenge for UI/UX designers. They provide a different type of UI elements every week (like sign-in, user profile, search etc) and designer on the challenge attempt to create their own version. Many of the designs are very inspiring and creative.

“每日UI挑戰(zhàn)”( https://www.dailyui.co/ )對UI / UX設(shè)計師來說是一個挑戰(zhàn)。 他們每周都會提供不同類型的UI元素(例如登錄，用戶個人資料，搜索等)，挑戰(zhàn)者將嘗試創(chuàng)建自己的版本。 許多設(shè)計都非常具有啟發(fā)性和創(chuàng)造性。

In this article, I will pick one interesting example for “Sign in” form and try to actually implement it in code. The example I picked is “Art Platform — login” by Benjamin Krogh (https://dribbble.com/shots/3270775-Art-Platform-Login)

在本文中，我將為“登錄”表單選擇一個有趣的示例，并嘗試在代碼中實際實現(xiàn)它。 我選擇的示例是Benjamin Krogh的“藝術(shù)平臺-登錄”( https://dribbble.com/shots/3270775-Art-Platform-Login )

This is the design we will try to implement in code這是我們將嘗試在代碼中實現(xiàn)的設(shè)計

Note like this is usually further explanation

像這樣的筆記通常是進一步的解釋

結(jié)果演示 (Result demo)

This is the final result I created in codepen:

這是我在Codepen中創(chuàng)建的最終結(jié)果：

Can you spot the difference between this and the original design? (Spoiler: there’s a lot)您能發(fā)現(xiàn)它與原始設(shè)計之間的區(qū)別嗎？ (劇透：有很多)

Codepen: https://codepen.io/josephwong2004/full/NWGBRJQ

Codepen： https ：//codepen.io/josephwong2004/full/NWGBRJQ

先決條件 (Prerequisite)

Basic HTML, CSS and SCSS/SASS

基本HTML，CSS和SCSS / SASS

逐步指南 (Step by step guide)

Step 1: Create a quick draft

第1步：創(chuàng)建快速草稿

The first thing I do is to quickly draft the design myself, and break it down to different elements in coding.

我要做的第一件事是自己快速起草設(shè)計，并將其分解為編碼中的不同元素。

Please bear with my terrible drawing請忍受我可怕的圖畫

The first thing I notice is the different hierarchy level of the design. From bottom to top:

我注意到的第一件事是設(shè)計的不同層次結(jié)構(gòu)級別。 從下到上：

Background with white and orange split color

白色和橙色拆分顏色的背景

Container for the “card” like shape, holding the image. Also, it has an orange edge

像“卡片”一樣的形狀的容器，用于保存圖像。 而且，它有一個橙色的邊緣

Pop up sign in form

彈出登錄表單

I have some personal interpretation here as well. I assume the orange in the background and the orange on the card is separated. Although it is not that obvious in the original design, I believe since the card is “l(fā)ifted”, the orange edge part should be lifted as well. Making it extend a bit from the background.

我在這里也有一些個人解釋。 我假設(shè)背景中的橙色和卡上的橙色是分開的。 盡管在原始設(shè)計中并沒有那么明顯，但我相信由于卡是“提起”的，因此橙色邊緣部分也應(yīng)該提起。 使它從背景開始延伸一點。

Step 2: Make the background

步驟2：制作背景

We will create the design of the three different hierarchy one by one. Starting with the background. We will need to make it split between white and orange. My solution is to use a div with white background, and a “before” element with clip-path for the orange part.

我們將一個一個地創(chuàng)建三個不同層次的設(shè)計。 從背景開始。 我們需要將其分為白色和橙色。 我的解決方案是使用具有白色背景的div和橙色部分的帶有剪切路徑的“ before”元素。

On second thought after completing the whole thing, I should have just use backgroundlinear-gradient for the same effect. It is a more elegant way and we don’t need to have a “before” element just for background color.

在完成整個過程后，再三考慮，我應(yīng)該只使用背景l(fā)inear-gradient來達到相同的效果。 這是一種更優(yōu)雅的方法，我們不需要僅將背景色設(shè)置為“ before”元素。

If you are interested: https://stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves

如果您有興趣： https : //stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves

So let jump into the html and css.

因此，讓我們跳入html和CSS。

HTML (it is just one line for the background):

HTML(背景僅一行)：

SCSS:

SCSS：

There’s a lot of things in the SCSS, but most of them are just setting up for future use. Like the color, font, and helper mixin.

SCSS中有很多東西，但是其中大多數(shù)只是為了將來使用而設(shè)置。 像顏色，字體和輔助混合。

One thing I discover about clip path (not sure if it is browser specific issue) is that sometimes it show a tiny white border around the clipped area when two div are overlapping. Therefore you can see my $path actually exceed 100% and 0% as a workaround.

我發(fā)現(xiàn)有關(guān)剪切路徑的一件事(不確定是不是瀏覽器特定的問題)是，當兩個div重疊時，有時在剪切區(qū)域周圍會顯示一個細小的白色邊框。 因此，您可以看到我的$ path實際上超過100％和0％作為解決方法。

So pretty simple, we have our background with two-color split. The next step is to create the card container.

非常簡單，我們將背景分為兩色。 下一步是創(chuàng)建卡容器。

Step 2: Create the card container

步驟2：建立卡片盒

Okay, This part is very similar to the background. We basically need to create the same thing, just with smaller width and height and a box-shadow around.

好的，這部分與背景非常相似。 我們基本上需要創(chuàng)建相同的東西，只是寬度和高度更小，周圍有一個盒子陰影。

One tricky thing about it is that, if you are only using a box-shadow (say in light grey color) on the whole card container, when the grey shadow got projected to the background, you will see that on the white background part, you get a dark shadow, while on the orange background part, you get a white shadow instead. This is what I am talking about:

一件棘手的事情是，如果您只在整個名片盒上使用盒子陰影(用淺灰色表示)，那么當灰色陰影投射到背景上時，您會在白色背景部分看到它，您會得到一個深色陰影，而在橙色背景部分上，您將獲得白色陰影。 這就是我在說的：

The color is the same, but our eye will have an illusion of two different color顏色是一樣的，但是我們的眼睛會有兩種不同顏色的錯覺

From the original design, there are no “white shadow” on the orange part of the card. Therefore, I assume there are no shadow at all on that part. To only apply shadow on the “white part” of the card, I used a clip-path and filter: drop-shadow since clip-path and box-shadow doesn’t work together.

從原始設(shè)計來看，卡的橙色部分沒有“白色陰影”。 因此，我認為該部分完全沒有陰影。 為了僅在卡的“白色部分”上施加陰影，我使用了剪切路徑和filter: drop-shadow因為剪切路徑和box-shadow不能同時使用。

This is the code for the card container part:

這是卡容器部分的代碼：

HTML:

HTML：

You can see I have a container-shadow class. That is what I talk about for dropping shadow on the white part

您可以看到我有一個容器陰影類。 這就是我要在白色部分上投影的目的

SCSS:

SCSS：

One good thing about having mixin for clip-path is I can easily modify and experiment with the “clip” until it is perfect for me. Having a mixin greatly simplify this process.

對于剪輯路徑使用mixin的一件好事是，我可以輕松修改并嘗試使用“剪輯”，直到它對我來說是完美的。 使用mixin可以大大簡化此過程。

For the container-shadow, we need two element, a parent and a child to apply drop shadow. The parent is just the same size as container, while the child (after element) is clipped

對于容器陰影，我們需要兩個元素，即父元素和子元素來應(yīng)用陰影。 父容器的大小與容器大小相同，而子容器(在元素之后)被裁剪

And the result look like so:

結(jié)果看起來像這樣：

If you look carefully, there is still a bit of “shite shadow” on the orange edge. But it won’t affect the overall design如果仔細看，橙色邊緣上仍有一些“陰影”。 但這不會影響整體設(shè)計

It looks a bit weird look since we don’t have the image added. Let do that next.

由于我們沒有添加圖片，因此看上去有些奇怪。 接下來讓我們做。

Step 3: Fill in the image and icon

步驟3：填寫圖片和圖標

Next, we need to fill in the image and the icon. It took me some time to find the original image (the man looking at the painting). With google search by image for a similar photo, I finally got the original size of it. And for the icon, it will be far too blurry if I just clip it out from the design. So I used photoshop to create a similar one.

接下來，我們需要填寫圖像和圖標。 我花了一些時間才能找到原始圖像(那個看著畫作的人)。 谷歌通過圖像搜索類似的照片，我終于得到了它的原始大小。 對于圖標來說，如果我只是將其從設(shè)計中裁剪出來的話，那就太模糊了。 所以我用photoshop來創(chuàng)建一個類似的。

It is not the same, but close enough不一樣，但是足夠接近

With the image asset ready, we can fill up the card:

準備好圖像資產(chǎn)后，我們可以填充卡片：

HTML:

HTML：

SCSS:

SCSS：

Not much to talk about here. We are just reusing the clip path mixin again on the image. Again, the final clip percentage is just by empiricism (with trial and error).

這里沒有太多要談?wù)摰摹?我們只是在圖像上再次使用了剪切路徑混合。 同樣，最終片段的百分比只是憑經(jīng)驗(帶有反復(fù)試驗)。

We are almost there!我們就快到了！

Step 4: Create the sign up form

第4步：創(chuàng)建注冊表單

Last but not least (actually the most important part), we have to create the sign-in form UI. The form is lifted on the container using box-shadow. Again, we face the same problem that the shadow color looks different when dropped on the light background and the dark background (the image). Therefore, we will apply the same technique to drop-shadow only on the light part.

最后但并非最不重要的一點(實際上是最重要的部分)，我們必須創(chuàng)建登錄表單UI。 使用盒子陰影將表格抬到容器上。 同樣，我們面臨同樣的問題，即當陰影顏色放在淺色背景和深色背景(圖像)上時，陰影顏色看起來會有所不同。 因此，我們將僅在較輕的部分上將相同的技術(shù)應(yīng)用于陰影。

The input part is very simple. Although without specification of how the input reacts on focus, I can only assume it myself. I make the border line orange and make the button darker on hover.

輸入部分非常簡單。 盡管沒有說明輸入如何聚焦，我只能自己假設(shè)。 我將邊界線設(shè)置為橙色，并在懸停時使按鈕變暗。

The sign-in form part of the code look like so.

代碼的登錄表單部分看起來像這樣。

HTML:

HTML：

SCSS:

SCSS：

It may look like there is a lot of style, but breaking them down one by one, there are no fancy property. I am just trying to capture the UI element in the design and make them look similar.

看起來好像有很多風格，但是將它們一一分解，就沒有花哨的屬性。 我只是試圖捕獲設(shè)計中的UI元素，并使它們看起來相似。

And this is the final result. Hope you like it!

這是最終結(jié)果。 希望你喜歡！

結(jié)論 (Conclusion)

It is a very interesting exercise to copy UI and try to implement it yourself as precisely as possible. I have made a lot of mistakes (like not using background color and linear gradient for the orange background split) and learn a great deal doing this exercise.

復(fù)制UI并嘗試自己盡可能精確地實現(xiàn)UI是一個非常有趣的練習。 我犯了很多錯誤(例如不對橙色背景拆分使用背景色和線性漸變)，并且在進行此練習時學到了很多東西。

One thing you may notice on the codepen is, this design I made doesn’t scale well on responsive. The image just keeps scaling down on resize. A completely new design might be a need for a different size.

您可能會在Codepen上注意到一件事，即我所做的此設(shè)計在響應(yīng)式上的伸縮性不佳。 圖像只是不斷縮小以調(diào)整大小。 全新的設(shè)計可能需要不同的尺寸。

You can see the image deform on scale您可以看到圖像按比例變形

But overall, I like this design a lot. Feel free to leave a comment if you like this article!

但總體而言，我非常喜歡這種設(shè)計。 如果您喜歡這篇文章，請隨時發(fā)表評論！

翻譯自: https://levelup.gitconnected.com/daily-ui-challenge-impose-sign-in-form-step-by-step-tutorial-cef28f5a1b5f

element-ui表單

總結(jié)

以上是生活随笔為你收集整理的element-ui表单_每日UI挑战强加-登录表单（分步教程）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。