حتمی UI ڈیزائن گائیڈ

مواد

• 01. اپنی نوع ٹائپ کا انتخاب کریں
• 02. دائیں پیلیٹ منتخب کریں
• 03. اسٹائل لنکس اور بٹن
• 04. اپنے اجزاء بنائیں
• 05. دستاویز اور تعاون

یوزر انٹرفیس ڈیزائن کیا ہے؟ ایک بہتر سوال یہ ہوگا کہ یوزر انٹرفیس کے ڈیزائن میں اصل میں کیا جاتا ہے؟ جمالیات پریوست؟ رسائی؟ ان میں سے سب؟ یہ سبھی عوامل ایک صارف کے زیادہ سے زیادہ تجربے کو قابل بنانے کے لئے کس طرح متحد ہوجاتے ہیں اور جو پہلے سامنے آنا چاہئے؟

رسائی کو ہمیشہ پہلے آنا چاہئے ، اور زیادہ سے زیادہ استعمال کے ل for بنیاد رکھنا چاہئے (ایک اعلی ویب سائٹ بلڈر استعمال کرنے سے یہاں مدد ملے گی)۔ اور پھر ، جب UI قابل رسائ اور قابل استعمال دونوں ہوتا ہے ، تو اسے خوبصورتی کے معاملے میں پہلے ہی کہیں زیادہ مہذب نظر آنا چاہئے (UI ڈیزائن کے اوزار یہاں مددگار ثابت ہوں گے)۔ اس کے بعد ، اس بات کو یقینی بنانے کے لئے کہ آپ کا ڈیزائن ہر سطح پر کام کرتا ہے ، آپ کو اسے اچھی طرح سے جانچنا ہوگا ، جو آپ ہمارے بہترین صارف آزمائشی ٹولوں کے انتخاب کے ذریعہ کرسکتے ہیں۔ آئیے ہم زیادہ تر ڈیزائنوں کے بنیادی عنصروں پر گہری نظر ڈالتے ہیں اور بصری مستقل مزاجی کو یقینی بنانے کے لئے کیا کیا جاسکتا ہے۔

01. اپنی نوع ٹائپ کا انتخاب کریں

زبردست نوع ٹائپ (جیسے ڈیزائن کے بہت سے پہلوؤں) کی رسائ پر ابلتے ہیں۔ بصری ڈیزائن یقینی طور پر صارف کے مجموعی تجربے میں اضافہ کرتا ہے لیکن دن کے اختتام پر ، صارف UI کے ساتھ بات چیت کررہے ہیں ، اسے آرٹ کے طور پر نہیں دیکھ رہے ہیں۔ واضح حروف کے نتیجے میں وضاحت اور پڑھنے کے قابل الفاظ وہی ہیں جو صارفین کو مؤثر طریقے سے مواد ہضم کرنے میں مدد دیتے ہیں۔ دونوں کسی بھی بصری جمالیاتی سے زیادہ اہم ہیں۔

تاہم ، اچھی طرح سے ڈیزائن شدہ نوع ٹائپ اب بھی جمالیاتی اعتبار سے اطمینان بخش ہوسکتا ہے۔ سیاہ فام سفید ہیلویٹیکا (یا اسی طرح کا فونٹ) خوبصورتی کی چیز ہو سکتی ہے صرف کچھ آسان ٹائپوگرافک اضافہ کے بعد۔ اضافہ کے ذریعہ ، ہمارا مطلب ہے کہ فونٹ کا سائز ، لائن اونچائی ، خط وقفہ وغیرہ۔ فونٹ یا متن کا رنگ نہیں۔

’خوبصورت‘ نوع ٹائپ دراصل بدصورت ہوتی ہے جب یہ ناقابل تلاوت ہوتی ہے کیونکہ مایوسی ہمیشہ ہی جمالیات کو ٹرپ کرتی ہے۔ زبردست ڈیزائن متوازن اور ہم آہنگی والا ہے۔

UI ڈیزائن کے بہت سے پہلوؤں کی طرح ، رسائ اور خوبصورتی کو متوازن کرنے کے ل fine ٹھیک ٹوننگ ویزول چیلنج نہیں ہے۔ چیلنج پورے ڈیزائن میں مستقل مزاجی کو برقرار رکھنا ہے۔ مستقل مزاجی مختلف اہمیت کے عناصر کے مابین واضح درجہ بندی قائم کرتی ہے ، جس کے نتیجے میں صارفین کو UI کو تیز تر سمجھنے میں مدد ملتی ہے اور یہاں تک کہ مواد کو زیادہ موثر انداز میں ہضم کیا جاتا ہے۔

جب بات قابل اہلیت اور پڑھنے کی اہلیت کی ہو تو ، WCAG 2.0 ویب مواد کے رسائ کی رہنما اصولوں کے مطابق بیان کردہ کم از کم قابل قبول فونٹ سائز 18pt (یا 14pt بولڈ) ہے۔ استعمال کرنے کے لئے بہترین فونٹ سائز زیادہ تر خود فونٹ پر منحصر ہوتا ہے لیکن بصری درجہ بندی کو ذہن میں رکھنا ضروری ہے اور یہ کہ اس کا سائز کس طرح اپنے خلاصے اور عنوانات سے ممتاز ہے (جیسے۔ h1>, h2>, h3>).

اپنے UI ڈیزائن ٹول کے انتخاب کے ساتھ (ہم انویژن اسٹوڈیو کا استعمال کریں گے) ، متنی تہوں کی ایک سیریز بنائیں (ٹی) اور پھر مندرجہ ذیل ٹیمپلیٹ کے ساتھ وابستہ ہونے کے لئے تمام سائز کو ایڈجسٹ کریں:

• h1>: 44 پکس
• h2>: 33px
• h3>: 22px
• p>: 18px

انویژن اسٹوڈیو (اور دیگر تمام UI ڈیزائن ٹولز) کے ساتھ ، یہ دائیں طرف انسپکٹر پینل کا استعمال کرتے ہوئے اسٹائل کو ایڈجسٹ کرکے کیا جاتا ہے۔

اگلا اپنے فونٹ کا انتخاب کریں ، لیکن ہوشیار رہیں کیوں کہ آپ کو کچھ فونٹ کے ذریعہ جو کچھ محسوس ہوگا وہ وہ ہے جو 18px ہے p> اور 22px h3> سب کچھ مختلف نہیں لگتا ہے۔ ہمارے پاس دو انتخاب ہیں: فونٹ کے سائز کو موافقت دیں یا عنوانات کے ل a ایک مختلف فونٹ پر غور کریں۔ مؤخر الذکر کے ساتھ جائیں اگر آپ کو اندازہ ہے کہ آپ کا ڈیزائن متن بھاری ہوگا۔

یاد رکھیں کہ:

• بصری UI ڈیزائن اکثر گٹ احساس کا نقطہ نظر ہوتا ہے
• کچھ بھی طے نہیں ہوتا ہے۔ سب کچھ تبدیل کرنے کے تابع ہے

لکیر کی اونچائی

مناسب حد کی اونچائی اس بات کو یقینی بناتی ہے کہ متن کی لائنوں میں ان کے مابین کافی فاصلہ موجود ہے تاکہ پڑھنے کے قابل مہذب سطح کو حاصل کیا جاسکے۔ یہ ایک ’’ معیار ‘‘ کی حیثیت سے زیادہ سے زیادہ پہچانا جارہا ہے۔ گوگل کا لائٹ ہاؤس آڈٹ ٹول یہاں تک کہ اسے دستی چیک (یا ایک جھنڈا یہاں تک کہ اگر متن میں ایسے لنکس شامل ہوں جو سب کے سب سے نیچے کی اونچائی کے نتیجے میں قریب قریب ہوسکتے ہیں) کے طور پر بھی تجویز کرتا ہے۔

ایک بار پھر ، ڈبلیو سی اے جی نے اس اعلٰی اعلٰی کو یہ اعلانیہ کرتے ہوئے کہ اس کی مدد سے ہماری مدد کی ہے ، فونٹ کا سائز 1.5x ہونا چاہئے۔ لہذا ، آپ کے UI ڈیزائن ٹول میں ’لائن‘ (یا اسی طرح کے) کے تحت ، فونٹ کے سائز کو کم سے کم - 1.5 سے ضرب کریں۔ ایک مثال کے طور پر ، اگر جسمانی متن 18px ہے ، تو لائن اونچائی 27px ہوگی (18 * 1.5 - آپ انسپکٹر میں بھی ریاضی کے آپریشن کو براہ راست انجام دے سکتے ہیں)۔ ایک بار پھر ، اگرچہ ، ذہن نشین رہیں - اگر 1.6x بہتر فٹ محسوس ہوتا ہے تو ، 1.6x استعمال کریں۔ یاد رکھیں کہ مختلف فونٹس مختلف نتائج برآمد کریں گے۔

اپنے ڈیزائن میں حقیقی اعداد و شمار کے استعمال کے بارے میں سوچنا بہت جلدی ہے لیکن ، کم سے کم ، ہمیں پھر بھی کچھ حقیقت پسندانہ ڈیٹا (حتی کہ لورم ایپس) بھی استعمال کرنا چاہئے۔ انویژن اسٹوڈیو کے پاس ایک اصل اصلی ڈیٹا ایپ موجود ہے جس سے ہمیں یہ دیکھنے میں مدد مل سکے کہ ہماری نوع ٹائپ اصل میں کیسی ہوسکتی ہے۔

پیراگراف کی جگہ

پیراگراف اسپیسنگ وہ انداز نہیں ہے جس کا اعلان ہم انویژن اسٹوڈیو کے انسپکٹر کا استعمال کرکے کرسکتے ہیں۔ اس کے بجائے ، ہمیں اسمارٹ گائیڈز (⌥) کا استعمال کرکے دستی طور پر سیدھ کرنے کی ضرورت ہوگی۔ لائن اونچائی کی طرح ، جادو ضعف 2x ہے (فونٹ کا سائز ڈبل) مثال کے طور پر ، اگر فونٹ کا سائز 18px ہے ، تو اگلے ٹیکسٹ بلاک میں جانے سے پہلے کم از کم 36px جگہ ہونی چاہئے۔ خط کا فاصلہ کم از کم 0.12 ہونا چاہئے۔

تاہم ، ہمیں اس کے بارے میں فکر کرنے کی ضرورت نہیں جب تک ہم اجزاء بنانا شروع نہ کریں۔

مشترکہ شیلیوں

اگر آپ کا UI ڈیزائن ٹول اس کی حمایت کرتا ہے (انویژن اسٹوڈیو ابھی نہیں کرتا ہے) ، تو ان ٹائپوگرافک اسلوبوں کو ’مشترکہ طرزیں‘ میں تبدیل کرنے پر غور کریں تاکہ بصری مستقل مزاجی کو یقینی بناتے ہوئے ان کو تیزی سے دوبارہ قابل استعمال بنایا جاسکے۔ یہ عام طور پر انسپکٹر کے ذریعے مکمل کیا جاتا ہے۔

02. دائیں پیلیٹ منتخب کریں

آپ کے ڈیزائن کے لئے کامل رنگوں کا انتخاب جمالیات سے ہٹ کر ہوتا ہے: اس سے آپ کی سائٹ کے پورے درجات کو آگاہ کیا جاسکتا ہے۔

جب بات UI کے ڈیزائن کی ہو تو ، رنگ عادت کے ساتھ پہلی چیزوں میں سے ایک ہے جس کے ساتھ ہم چکنا چلانا لطف اٹھاتے ہیں لیکن ہمیں یہ سکھایا گیا ہے کہ براہ راست بصری ڈیزائن میں غوطہ خوری کرنا ایک بری چیز ہے۔ یہ یقینی طور پر سچ ہے ، تاہم ، جب بصری مستقل مزاجی کی بات کی جائے تو ، رنگ کو سب سے زیادہ تشویش ہونی چاہئے کیونکہ یہ دوسرے کردار ادا کرتا ہے۔

UI ڈیزائن میں رنگا رنگا رنگ موثر ثابت ہوسکتا ہے لیکن چونکہ کچھ صارفین (بہت سے ، اصل میں) طرح طرح کی بصری معذوری کا شکار ہیں ، لہذا یہ ہمیشہ قابل اعتماد نہیں ہوتا ہے۔ کہا جا رہا ہے ، یہ ضروری نہیں ہے کہ اس مخصوص رنگ کے بارے میں جو استعمال ہورہا ہے ، بلکہ رنگ کی قسم ہے۔ یہ سچ نہیں ہوسکتا ہے جب برانڈنگ کی بات آتی ہے چونکہ اس حوالے سے رنگ جذباتی اثرات کے لئے استعمال ہوتا ہے لیکن ، UI ڈیزائن میں ، رنگ ارادے ، معنی اور ، ظاہر ہے ، بصری درجہ بندی کو بھی بات چیت کرنے کے لئے استعمال کیا جاتا ہے۔

01. سٹارک
اسٹارک پلگ ان اسکیچ اور اڈوب ایکس ڈی کے ساتھ مطابقت رکھتا ہے اور آپ کو رنگ کے برعکس کی جانچ پڑتال کرنے اور کینوس سے براہ راست رنگ اندھا ہونے کی تقلید میں مدد کرتا ہے۔ فگما اور انویژن اسٹوڈیو کے لئے اعانت بہت جلد آرہی ہے۔
02.رنگ
رنگ 90 رنگوں کے امتزاج کا ایک مجموعہ ہے جس میں WCAG 2.0 رہنما خطوط کی تکمیل کے لئے رنگ کے برعکس کی مناسب مقدار ہوتی ہے - ان میں سے کچھ تو AAA معیار کو پورا کرنے کا انتظام بھی کرتے ہیں۔
03. A11y پروجیکٹ
A11y پروجیکٹ ہر چیز سے متعلق متعلقہ اشیاء کا ایک بہت بڑا مرکز ہے۔ اس میں وسائل ، اوزار ، اشارے ، سبق شامل ہیں اور یہ اسٹارک پلگ ان کے بنانے والے کے ذریعہ تیار کیا گیا ہے اور انویژن سے فنڈ وصول کرتا ہے۔

رنگ کی تین اقسام

رنگ معنی رکھتے ہیں ، لہذا یہ ضروری ہے کہ ان میں سے بہت سے نہ ہوں۔ بہت سے معانی کے نتیجے میں مزید چیزیں پیدا ہوتی ہیں جن کو صارف کو سمجھنا اور یاد رکھنا پڑتا ہے - ہمارے بارے میں فکر کرنے کیلئے مزید رنگ امتزاجوں کا تذکرہ نہیں کرنا۔ عام طور پر ، یہ تجویز کردہ شکل ہوگی:

• کال ٹو ایکشن رنگ (بنیادی برانڈ رنگ بھی)
• غیر جانبدار گہرا رنگ (UI عناصر یا سیاہ رنگ کے ل for بہتر ہے)
• مذکورہ بالا سب کے ل slightly ، ہلکی ہلکی اور گہری تغیر پزیر

یہ مندرجہ ذیل کو قابل بناتا ہے:

• گہرا موڈ آسانی سے قابل حصول ہوگا
• ہمارا سی ٹی اے رنگ کبھی بھی دوسرے رنگوں سے متصادم نہیں ہوگا
• کسی بھی منظر نامے میں ہم زور دینے اور ڈی-زور دینے کے اہل ہوں گے

اپنا پیلیٹ ترتیب دیں

اپنے UI ڈیزائن ٹول کے انتخاب کے ساتھ ، ہر رنگ کے لئے ایک کافی بڑا آرٹ بورڈ (ٹیپ اے) بنائیں (جس کا نام ’’ برانڈ ‘‘ ، ’غیر جانبدار / روشنی‘ اور ’غیر جانبدار / سیاہ) ہے۔ اس کے بعد ، ہر آرٹ بورڈ میں ، رنگ کی گہری اور ہلکی مختلف حالتوں اور خود دوسرے رنگوں کو ظاہر کرنے کے لئے اضافی چھوٹی مستطیلیں بنائیں۔

ہم بالترتیب 10 فیصد اضافی سفید اور 10 فیصد اضافی سیاہ کے طور پر قدرے ہلکے اور گہرے سمجھیں گے۔ جب آپ کام کرچکے ہیں تو ، ہر آرٹ بورڈ پر ٹائپوگرافک طرزوں کی ایک کاپی ڈسپلے کریں۔ ان عبارت پرتوں کا رنگ غیر جانبدار روشنی ہونا چاہئے ، سوائے غیر جانبدار لائٹ آرٹ بورڈ کے جہاں ان کی غیر جانبدار تاریکی ہونی چاہئے۔

اس کے برعکس

اگلا ، ہمیں زیادہ سے زیادہ رنگ کے برعکس کے ل our اپنے رنگوں کو چیک کرنے کی ضرورت ہوگی۔ بہت سارے ٹولس یہ کام کرسکتے ہیں ، مثال کے طور پر اسکیچ اور اڈوب ایکس ڈی کے لئے اسٹارک پلگ ان یا میکوس کے لئے اس کے برعکس - تاہم ، آن لائن حل جیسے کنٹراسٹ چیکر یا کلر کنٹراسٹ چیکر بالکل ٹھیک کام کرے گا۔

ہر مرکب کے لئے رنگ کے برعکس کو چیک کریں اور اسی کے مطابق رنگوں کو موافقت کریں۔ اگر آپ کو یقین نہیں ہے کہ کون سے رنگ استعمال کریں گے تو ، کلر سیف کی سفارشات کو استعمال کرنے کی کوشش کریں۔

03. اسٹائل لنکس اور بٹن

سائز

بٹن اور لنکس ، زیادہ تر نوع ٹائپ کی طرح ، کچھ مختلف حالتوں میں ہونا چاہئے۔ بہر حال ، تمام اعمال ایک مساوی سطح کی اہمیت کے حامل نہیں ہیں اور ، جیسا کہ ہم نے پہلے بھی تبادلہ خیال کیا ہے ، رنگ مواصلات کا ایک ناقابل اعتبار طریقہ ہے ، لہذا یہ بصری درجہ بندی کو متاثر کرنے کا بنیادی طریقہ نہیں ہوسکتا ہے۔ ہمیں سائز کے ساتھ کھلونا بھی چاہئے۔

ایک بصری فاؤنڈنس ٹیسٹ ایک پریوست ٹیسٹ ہے جو اس بات کا تعین کرنے کے لئے استعمال ہوتا ہے کہ آیا نل کے اہداف قابل کلک دکھائے جاتے ہیں۔ اسٹوڈیو سے فری ہینڈ تک ڈیزائن مطابقت پذیر بنائیں (.F) ، نتیجہ دینے والا یو آر ایل ٹیسٹرز کو بھیجیں اور ان عناصر کو ان کے دائرے میں داخل کریں جس کے بارے میں وہ یقین کرتے ہیں کہ وہ قابل کلک ہیں۔

نان-انویژن اسٹوڈیو صارفین بھی فری ہینڈ کا استعمال کرسکتے ہیں ، لیکن انویژن اسٹوڈیو کے صارفین انویژن اسٹوڈیو سے بغیر کسی رکاوٹ کے فری ہینڈ میں اپنے ڈیزائن لانچ کرسکتے ہیں ، جو صارفین سے بصری تاثرات حاصل کرنے کا تیز ترین اور موثر طریقہ ہے۔

عام طور پر ، ہم تجویز کریں گے کہ بٹن متن کو 18px (باڈی ٹیکسٹ کی طرح ہی) قرار دیا جائے لیکن بٹنوں کے خود ہی سائز میں تین مختلف ہوتی ہیں۔

• عام: اونچائی میں 44px (گول کونے: 5px)
• بڑا: اونچائی میں 54px (گول کونے: 10px)
• اضافی بڑا: اونچائی میں 64px (گول کونے: 15px)

اس سے رنگوں پر انحصار کیے بغیر کچھ بٹن زیادہ اہم دکھائی دیتے ہیں اور گھوںسلا کے بٹنوں پر بھی مثال بناتے ہیں (مثال کے طور پر ، فارم کو کم سے کم نظر آنے والے فیلڈ میں بٹن کا استعمال کریں)۔

گہرائی

قطع نظر اس سے قطع نظر کہ نل کا ہدف بٹن ہے یا فارم فیلڈ ، گہرائی میں اضافہ کرنے کے لئے سائے کا استعمال کیا جانا چاہئے اور اس وجہ سے باہمی روابط کو تجویز کریں۔ بٹنوں اور فارم والے فیلڈز کی تمام اقسام کے لئے ایک واحد سائے اسٹائل ٹھیک ہے۔

انٹرایکٹیویٹی

ہر بٹن کی قسم کو اپنی ہوور حالت کی نشاندہی کرنے کے لئے مختلف حالتوں کی ضرورت ہوتی ہے۔ اس سے صارف کو واضح ہوجاتا ہے کہ انہوں نے جو کچھ کرنے کی کوشش کی ہے وہ بالکل ٹھیک ہے اور یہ یقینی بناتا ہے کہ وہ بغیر کسی تاخیر کے چلتے رہیں۔

یہ دراصل بصری مستقل مزاجی کو برقرار رکھنے کے ایک زیادہ پیچیدہ پہلوؤں میں سے ایک ہے کیونکہ جب ریاست بننے کی بات آتی ہے تو رنگ اکثر تبدیل کرنے کا پسندیدہ انداز ہوتا ہے۔ شکر ہے کہ یہ ریاست کی تبدیلیاں نسبتا sub ٹھیک ٹھیک ہوسکتی ہیں ، لہذا رنگین کو اس کی ہلکی ہلکی یا گہری تغیر میں تبدیل کرنا ٹھیک ہے۔ یہی وہ چیز ہے جس کے لئے وہ ہیں۔ یہ لنک پر بھی لاگو ہوتا ہے۔

اس کے خلاف فیصلہ لینے سے ہمارے پاس ایسا رنگ استعمال کرنے کا سبب بنے گا جس کا یا تو پہلے ہی اہم معنی ہے ، جس کے نتیجے میں صارف الجھن میں پڑ جاتے ہیں ، ورنہ کسی اور رنگ کے ساتھ آنے کا فیصلہ کرتے ہیں۔ ثانوی رنگ کا استعمال کرنے کا فیصلہ مکمل طور پر ٹھیک ہے لیکن اسے UI عناصر کی بجائے مارکیٹنگ کے اندازوں کیلئے محفوظ کرنا چاہئے۔ کم زیادہ (اور آسان) ہے۔

ہر آرٹ بورڈ کے ل this اس مرحلے کو دہرانا یاد رکھیں۔ برانڈ آرٹ بورڈ پر برانڈڈ سی ٹی اے بٹن شامل نہ کریں - بعد میں ہم اس پر احاطہ کریں گے کہ جب کچھ مجموعے کام نہیں کرتے ہیں تو کیا ہوتا ہے۔

04. اپنے اجزاء بنائیں

اجزاء ایک بہت بڑا وقت بچانے والے ہوتے ہیں اور تمام UI ڈیزائن ٹولز یہ خصوصیت پیش کرتے ہیں (جیسے اسکیچ میں ، انہیں علامت کہا جاتا ہے)۔ اسٹوڈیو میں ہم ان تمام پرتوں کو منتخب کرکے اجزاء تشکیل دے سکتے ہیں جن میں جزو کی تشکیل ہونی چاہئے اور ⌘K شارٹ کٹ

اجزاء استعمال کرنا

وائر فریم بہت مفید ہیں ، نہ صرف اعلی استعمال پذیر UIs کے ڈیزائن کرنے کے لئے بلکہ یہ جاننے کے لئے کہ ہمارے UI کی طویل مدت میں کیا ضرورت ہوگی۔ یہ اس طرح کی مستقبل کی پروفنگ کی طرح ہے۔

اس کا مطلب یہ نہیں ہے کہ ہمیں بہت سارے اجزاء کو ڈیزائن کرنے یا کسی بھی ممکنہ منظرنامے کے لئے تیار رہنے کی ضرورت ہے لیکن اس کا مطلب یہ نہیں ہے کہ ہمیں ’’ کیا تو؟ ‘‘ رویہ استعمال کرنے کی ضرورت ہے۔

مثال کے طور پر ، اگر ہمارا تار فریم ایک 3x1 جزو کے لئے مطالبہ کرتا ہے لیکن ہم جانتے ہیں کہ مواد پتھر میں ترتیب نہیں دیا گیا ہے تو ، تھوڑا سا غور کرنے سے ہم حیرت کا سبب بن سکتے ہیں: ’اگر یہ اجزا 4x1 ہی ہوجائے تو کیا ہوگا؟’۔ انگوٹھے کا اصول یہ ہے کہ: صرف صارف کی ضروریات کے لئے ڈیزائن کریں جو پہلے سے موجود ہیں لیکن حل کو نسبتا flex لچکدار بنانے کی کوشش کریں۔ بصورت دیگر ، ہم کچھ انتہائی گندے ’ڈیزائن قرضے‘ کو بعد میں لکیر سے نیچے کردیں گے۔

اب ہم اس جزو کو بائیں ہاتھ کی جانب لائبریریوں> دستاویز سے کینوس پر گھسیٹ کر دوبارہ استعمال کرسکتے ہیں ، اگرچہ اس بات کو ذہن میں رکھیں کہ یہ آپ کے UI ٹول پر منحصر ہے کہ یہ ورک فلو مختلف ہوسکتا ہے۔

اسٹائل گائیڈز بنانے کا یہ طریقہ (اور آخر کار خود ڈیزائن بنانا) خاص طور پر ماڈیولر / کارڈ پر مبنی ترتیب کے ساتھ اچھا کام کرتا ہے ، حالانکہ ’عام علاقے‘ جیسے ہیڈر ، فوٹر اور نیویگیشن بھی کسی جزو کے لئے بہترین امیدوار ہیں۔

جس طرح ہم نے اپنے ٹائپوگرافک اسٹائل ، رنگ اور بٹنوں کے ساتھ کام کیا ہے ، اسی طرح ہمیں اپنے اجزاء کو احتیاط سے ترتیب دینا بھی یاد رکھنا چاہئے۔

ہمارے اصولوں کا استعمال

اس سے قبل ہم نے برانڈ رنگ کے اوپری حصے میں برانڈڈ سی ٹی اے بٹنوں کو استعمال نہ کرنے کے بارے میں ایک تبصرہ کیا تھا ، چونکہ واضح طور پر برانڈڈ سی ٹی اے بٹنوں کو باقی سب چیزوں میں کھڑے ہونے کی ضرورت ہے۔ تو پھر بھی ہم ایک برانڈیڈ جزو بنانے کے بارے میں کیسے جانتے ہیں جب کہ ابھی بھی برانڈڈ سی ٹی اے بٹن استعمال کرنے کے قابل ہیں؟ بہر حال ، اگر ہم غیر جانبدار سیاہ بٹنوں کے لئے استعمال کر رہے ہیں تو ، چلیں ، نیویگیشنل بٹن یا محض کم اہم بٹنوں کا استعمال کریں ، تو یہ صرف ایک آپشن نہیں ہوگا ، ٹھیک ہے؟

ٹھیک ہے لہذا یہ ایک جز تیار کرنے کا ایک مثالی موقع ہوگا۔ خاص طور پر ، ایک عنوان + متن + بٹن مجموعہ۔ نوٹس کریں کہ میں نے برانڈڈ بٹن کے استعمال کو قابل بنانے کے لئے کس طرح غیر جانبدار لائٹ ’کارڈ‘ پس منظر بنایا ہے۔ اسی طرح ، غیر جانبدار لائٹ فارم فیلڈ (عام طور پر کاغذی شکلوں کے مترادف ہونے والے ذہنی ماڈل کی وجہ سے فارم فیلڈز عام طور پر سفید ہوتے ہیں) غیر جانبدار روشنی کے پس منظر پر حیرت انگیز نہیں لگتے ہیں لہذا وہ صرف غیر جانبدار سیاہ پس منظر پر ہی استعمال ہوسکتے ہیں۔ ایک غیر جانبدار تاریک جزو۔ اس طرح ہم اپنے اصولوں کو مانتے ہوئے اور مستقل مزاجی کو برقرار رکھتے ہوئے اپنے ڈیزائن کو لچکدار بناتے ہیں۔

تناؤ کی جانچ

مثالی طور پر ، ہمارے ڈیزائن میں مضبوطی کو یقینی بنانے کا تیز اور مؤثر طریقہ یہ ہے کہ اس کی جانچ پڑتال کی جا.۔ کسی امتحان کو ڈیزائن کرنے کا مطلب ظالمانہ ہونا ہے۔ ہم کہتے ہیں کہ ہمارے پاس ایکس نیوی آئٹمز کے ساتھ ایک نیویگیشن ہے کیونکہ یہی ضرورت تھی۔ لچک کو واقعتا ensure یقینی بنانے کے ل more ، مزید نو آئٹموں کو شامل کرکے ان تقاضوں کو تبدیل کرنے کی کوشش کریں یا ، واقعتا the کام میں ایک اسپانر پھینکنے کے ل try ، دوسروں کے مقابلے میں اعلی ویژوئل درجہ بندی کے ساتھ نیوی آئٹم کو بھی شامل کرنے کی کوشش کریں۔ کیا ہمارے سائز ، نوع ٹائپ اور رنگ کے اصول اس طرح کی اجازت دیتے ہیں؟ یا زیادہ سے زیادہ پریوست کی پیش کش کے ل we کیا ہمیں کسی اور اصول کی ضرورت ہے؟

یاد رکھیں کہ قواعد شامل کرنے اور قواعد کو موڑنے میں فرق ہے۔ زیادہ سے زیادہ معاملات کا مطلب کم مستقل مزاجی ہوتا ہے ، لہذا زیادہ تر وقت اس پر آسانی سے اس جز پر دوبارہ غور کرنا بہتر ہے۔

05. دستاویز اور تعاون

ہم اپنے ڈیزائن فائلوں کو اپنے اور کسی دوسرے ڈیزائنرز دونوں کے لئے استعمال کرنا آسان بناتے ہیں جو ہماری ڈیزائن فائل استعمال کرسکتے ہیں۔ ٹھیک ہے ، ان کو محفوظ طریقے سے قابل اعتماد ، مشترکہ کلاؤڈ اسٹوریج میں محفوظ رکھنا ضروری ہے ، جیسا کہ آپ کو پتہ چل جائے گا۔

رنگ

پہلا قدم یہ ہے کہ اگر ہم نے پہلے سے ایسا نہیں کیا ہے تو تمام رنگوں کو ’دستاویز رنگوں‘ کے سوچ میں محفوظ کرنا ہے - جب ہمیں انہیں اپنے ڈیزائن میں استعمال کرنے کی ضرورت ہوگی تو اس سے ان تک رسائی آسان ہوجائے گی۔ایسا کرنے کے لئے ، انسپکٹر سے رنگ چننے والا آپکے پاس وجٹس کھولیں ، ڈراپ ڈاؤن سے ’دستاویزی رنگ‘ منتخب کریں اور پھر رنگ میں شامل کرنے کے لئے + آئیکن پر کلک کریں۔ یہ زیادہ تر UI ٹولز میں اسی طرح کام کرتا ہے۔

مشترکہ لائبریریاں

اگلا ، ہمیں اپنے دستاویز کو - ٹائپوگرافک اسٹائل ، رنگ ، بٹن ، مشترکہ علاقوں اور بنیادی اجزاء کے ساتھ مکمل - مشترکہ لائبریری میں تبدیل کرنے کی ضرورت ہے۔

بنیادی طور پر اس کا مطلب یہ ہے کہ ہر عنصر کو ایک جزو بننے کی ضرورت ہے ، چاہے اس میں صرف ایک ہی پرت ہو۔ بائیں طرف کی لائبریریوں کے سائڈبار میں + + بٹن پر کلک کریں اور پھر اس دستاویز کو ایک نئی دستاویز میں درآمد کریں۔ یہ ٹھیک ہے: ہماری دستاویز اب لائبریری ہے اور گارنٹی مستقل مزاجی کے ساتھ UIs کے ڈیزائن کے لئے استعمال ہونے کے لئے تیار ہے۔

انویژن اسٹوڈیو کسی حد تک اس لحاظ سے محدود ہے کہ یہ ابھی تک انویژن کے آفیشل ڈیزائن سسٹم مینیجر ٹول کے ساتھ ہم آہنگ نہیں ہوا ہے لیکن دوسرے ڈیزائنرز کے ل the لائبریری ڈراپ باکس میں رکھنا اتنا آسان ہے کہ وقت کے ساتھ ساتھ استعمال اور اپ ڈیٹ ہوسکے۔ جب کوئی تبدیلی (مقامی طور پر یا دور سے) ہوجائے تو ، ہر اسٹوڈیو فائل جو لائبریری (پھر ، مقامی یا دور سے) استعمال کرتی ہے پوچھے گی کہ کیا آپ رنگ اور اجزاء کو اپ ڈیٹ کرنا چاہتے ہیں۔ اس طرح ٹیموں میں ڈیزائن لائبریریوں کو برقرار رکھا جاتا ہے۔

جب بات یوزر انٹرفیس کو ڈیزائن کرنے کی ہو جو ضعف مطابق ہیں تو ، ہر چیز کو دوبارہ استعمال کریں۔ بٹنوں کو ڈیزائن کریں ، پھر بٹن کے اجزاء بنانے کے ل butt بٹنوں کا استعمال کریں ، پھر استعمال کریں
دوسرے اجزاء جیسے انتباہات اور مکالمے تخلیق کرنے کیلئے بٹن کے اجزاء۔

بس ایسے اجزاء نہ بنائیں جن کی ضرورت نہیں ہے۔ یاد رکھیں ، لائبریری کی تعمیر ایک جاری ، باہمی تعاون کی کوشش ہے۔ اسے اکیلے ہی مکمل نہیں کرنا ہوتا ، اکیلے آپ کے ذریعہ مکمل کیا جاتا ہے یا کبھی بھی مکمل نہیں ہوتا ہے۔ اسے صرف ایک زبان پہنچانا ہے۔

پیمانے پر ڈیزائن

جیسے جیسے ایک ڈیزائن پھیلتا ہے ، اس کا انتظام مشکل تر ہوتا جاتا ہے۔ اس کو موثر اور برقرار رکھنے کیلئے ہم متعدد ایڈجسٹمنٹ کر سکتے ہیں ، خاص طور پر چونکہ انویژن کا ڈی ایس ایم اسٹوڈیو کے ساتھ ابھی تک کام نہیں کرتا ہے۔

مثال کے طور پر ، ہم مختلف عناصر کے استعمال کے معاملات کی وضاحت کرنے کے ذریعہ اپنی لائبریری کی تشریح کرنے کے لئے متنی پرتوں کا استعمال کرنا چاہتے ہیں۔ ٹائپوگرافک شیلیوں کے ل we ، ہم متن کو زیادہ وضاحتی (جیسے "h1> / 1.3 / 44px" بنانے کے ل edit بھی ترمیم کرسکتے ہیں۔ یہ کہتا ہے h1>s 44px ہونا چاہئے اور اس کی لمبائی 1.3 ہو۔

ڈیزائن ہینڈ آف

ڈیزائن ہینڈ آف ٹولز ڈیزائن میں ہر عنصر کے ذریعہ استعمال ہونے والے مختلف شیلیوں کو ظاہر کرتے ہیں تاکہ ڈویلپر ایپ یا ویب سائٹ کی تشکیل کرسکیں۔ ان ٹولز میں شیلیوں کا جائزہ اور ’دستاویزات کے رنگ‘ سویچ کی ایک کاپی بھی شامل ہے۔ ڈویلپرز ان شیلیوں کو کوڈ کے بطور کاپی بھی کرسکتے ہیں ، جو بہترین ہے اگر آپ نے کوئی تحریری ڈیزائن دستاویزات بنانے کا فیصلہ کیا ہے اور آپ کو اجزاء کی کوڈ کے ٹکڑوں کی نمائندگی شامل کرنا چاہیں گے۔

اگر آپ پریشانی کا ازالہ کرنے اور کسی ویب سائٹ کے انتظام کے بارے میں پریشان ہیں تو ، یہ یقینی بنانا کہ آپ کو صحیح ویب ہوسٹنگ سروس مل گئی ہے ، لیکن آپ کے ڈیزائن سسٹم کے لئے ، انویژن کا ڈیزائن ہینڈ آف ٹول ، انسپیکٹ ، استعمال کرنے والی چیز ہے۔ اس کے استعمال کے ل we ، ہم انویژن اسٹوڈیو میں ’انویژن پر شائع کریں‘ بٹن / آئیکن پر کلک کریں ، نتیجے میں یو آر ایل کھولیں اور پھر معائنہ موڈ پر سوئچ کرنے کیلئے تھپتھپائیں۔ یہ واقعی آسان ہے۔

یہ مواد اصل میں نیٹ میگزین میں شائع ہوا تھا۔