Моливът е инструмент, който можем да използваме, за да очертаем макет на потребителския интерфейс на приложението ни. Голямото нещо за молив е, че е лек, лесен за използване и плътно интегриран с Firefox. На всичкото отгоре е безплатна програма с отворен код! В края на статията ще ви дадем проста демонстрация за това как да използвате молив, за да създадете подобна на бризцова рамка.
А wireframe е скица на идеята за оформление на страница. Калъфът се фокусира върху информационния дизайн на страницата, за да се гарантира, че дизайнът се вписва в това, което потребителят се нуждае. Калъфът обикновено се състои от различни форми (като кутии, овали и диаманти), които представят съдържателни, функционални и навигационни елементи. Тези фигури показват разположението им на страницата.
Отначало може да изглежда като загуба на време, създавайки груби скици на страница. Рамката за тел е важна, за да накарате потребителите си да се съсредоточат върху елемента на важността на вашата страница. Създаването на груба скица на страница без фантастични визуални елементи пренасочва вниманието на потребителя към важни елементи като оразмеряване, оформление и поставяне на компонентите на вашата страница. Ще започнем да получаваме по-добро разбиране за това, което клиентът наистина иска и се нуждае от софтуера, когато потребителят започне да се фокусира върху важните елементи на страницата. Създаването на телена рамка позволява на вас и вашите потребители да си сътрудничат ефективно и да идентифицирате потенциалния проблем с дизайна рано.
Изтегляне на молив от Pencil's add ons page. След като инсталирате молив, той е достъпен от "Инструменти"> "Скициране с молив".
Ето как изглежда Бризз. Това е доста готино уеб приложение, което обобщава вашите Facebook и Twitter в една страница.
Това е крайният резултат от телената рамка. Основните форми в тази рамка са правоъгълниците, текстовите полета и разделите. Следващата част на статията ще даде прост пример за това как да създадете всяка форма.
Първата стъпка за създаване на формата на телта е да изтеглите форма от менюто "Shape Collections" върху платното.
Преоразмерете правоъгълника до подходяща ширина и височина.
Можем да персонализираме текста, границата и цвета на фона на всяка форма в молив. Кликнете с десния бутон върху правоъгълника и изберете "Свойства", за да отворите прозорците за свойства. Това е екранът за свойства на фона. Задайте цвета на фона на правоъгълника на бяло (#FFFFFF).
Кликнете върху раздела "Граници" и настройте свойствата на границата. Задайте цвета на рамката на черно (# 000000) и променете теглото на границата на 1.
Екранът с текстови характеристики ни позволява да персонализираме типа на шрифта, размера, стила, теглото, цвета, яркостта и непрозрачността на текста.
Картите за дома, чернови и картинки са три раздела, които са подредени един върху друг. Плъзнете три "панела Tabs" в правоъгълника. Преоразмерявайте всеки раздел, така че всеки раздел да се показва едно до друго.
Отворете екрана с текстовите свойства, за да коригирате цвета на шрифта в раздела "Картини" и "Чернова". Задайте го на сиво (# 989898).
Преместете формата "Текст" върху платното, за да създадете всяко от менюто. Можем да настроим външния вид на текста, като отворим прозореца за свойства на текста.
Цветът е една от най-важните елементи при доставката на приятна телени рамка. Най-точният начин да промените цвета на дадена форма е да посочите HTML кода на цвета. Определянето на HTML кода за определен цвят може да бъде трудно. Можем да използваме HTML шаблона от w3cschools.com, за да открием правилния HTML код за определен цвят.
Също така искаме да използваме colorzilla, за да избираме цветовете от екрана и да го използваме в молив. Кликнете върху иконата за капки за очи в долния ляв ъгъл на Firefox, за да изберете цвят на екрана. Можем също така да отворим цветния инструмент на ColorZilla чрез двукратно натискане на иконата за очни капки. Просто копирайте поставете кода на Hex в цветния HTML код на Pencil.
Моливът е лесен за използване инструмент за разкрояване. Интегрирането на молив с Firefox ни дава възможност да използваме друга приставка за Firefox, за да създадем по-добър интерфейс
звена
Изтегляне на молив
Изтеглете Colorzilla
W3C HTML цвят измама лист
