Google سے مواد ڈیزائن تفصیلات اصل میں Android پلیٹ فارم کا مقصد اس طرح کے طور پر پلیٹ فارم پر ڈیزائن کی استحکام کا مشورہ دینے کے طور پر تھا.
01 کے 06
ایڈوب تجربہ ڈیزائن سی سی میں ایک مواد ڈیزائن کارڈ بنانے کا طریقہ
ایک بار پھر ڈیزائنرز نے اس کے ذریعے پکا شروع کر دیا اور اس کے پیچھے سوچ کو سمجھنے کے بعد، ویب ڈیزائن اور موبائل ڈیزائن میں مواد ڈیزائن خاموشی سے سب سے زیادہ مؤثر بصری فلسفہ میں سے ایک بن گیا ہے. آپ کو جو کچھ ہم حاصل کر رہے ہیں اسے دیکھنے کے لئے ضرورت ہے، Pinterest پر ایک مواد ڈیزائن کی تلاش کرنا ہے اور آپ سینکڑوں مثالیں اور آلات، گولیاں، اور یہاں تک کہ ویب سائٹس پر تجربات دیکھیں گے.
مواد ڈیزائن کے دلچسپ پہلو یہ ہے کہ گوگل کے بارے میں سوچنے والے اطلاقات کس طرح ظاہر ہوتے ہیں اور موبائل آلات پر کام کرتے ہیں لیکن کسی بھی پلیٹ فارم پر کسی بھی سائز کے کسی بھی اسکرین پر تصورات کو لاگو کیا جارہا ہے. گوگل کے طور پر وضاحت کے افتتاحی پیراگراف میں، "ہم نے خود کو چیلنج کرنے کے لئے اپنے صارفین کے لئے ایک بصری زبان بنانا جو ٹیکنالوجی اور سائنس کے جدت اور امکان کے ساتھ اچھے ڈیزائن کے کلاسک اصولوں کو مرتب کرتا ہے. یہ مادی ڈیزائن ہے. یہ نمونہ ایک زندہ دستاویز ہے جسے ہم اپ ڈیٹ کیا جائے گا کیونکہ ہم مادی ڈیزائن کے اصولوں اور تفصیلات کو تیار کرنے کے لئے جاری رکھیں گے. "
مواد، بہت عام اصطلاحات کے بارے میں بات چیت، کاغذ ہے اور مواد ڈیزائن کا حدود کارڈ ہے. ایک انڈیکس کارڈ پر سطح پر سوچو اور آپ صحیح راستے پر ہیں. ایک کارڈ ایسی عنصر ہے جس میں تصاویر، ویڈیوز، ٹیکسٹ لنکس اور اس میں شامل ہوتا ہے، لیکن اس میں جہاں وہ زیادہ سے زیادہ انٹرایکٹو ڈیزائن سے مختلف ہوتے ہیں وہ ایک ہی مضمون پر توجہ مرکوز کرنے کا مطلب ہیں. کارڈ نے کونے کو گول کیا ہے، اس میں غیر جانبدار سائے شامل ہوتے ہیں جو اشارہ کرتے ہیں کہ وہ سطح سے اوپر ہیں اور اگر وہ ایک ہی جہاز میں ہیں تو انہیں "جمع" کہا جاتا ہے.
اس میں "کس طرح" ہم ایک مخصوص تصویر کی بنیاد پر تشکیل دے رہے ہیں. بجائے مختلف امیجنگ اور ڈرائنگ کے اوزار کے ساتھ کارڈ بنانے کے مقابلے میں، ہم اس کو مختلف سمت سے آنے جا رہے ہیں. ہم ایڈوب کے تجربے کے ڈیزائن میں آلات کو استعمال کرنے جا رہے ہیں جو فی الحال میکنٹوش صرف عوامی پیش نظارہ میں ہے اور مفت ہے. آپ اسے یہاں ڈاؤن لوڈ کرسکتے ہیں.
آو شروع کریں.
02 کے 06
ایڈوب تجربے ڈیزائن سی سی میں پروٹوٹائپ آرٹ بورڈ تشکیل دے رہا ہے
تجرباتی ڈیزائن سی سی (XD) میں شروع سکرین سے ایک Android اسکرین بنانے کا کوئی واضح طریقہ نہیں ہے. ہم XD کو کھولنے کے بعد کیا کرتے تھے، آئی فون 6 کے اختیارات کو منتخب کرنے کے لئے ہے، جب انٹرفیس کھولتا ہے تو، ہم ٹول بار کے نیچے آرٹ بورڈ کے آلے کو منتخب کریں اور حقائق پینل پر انتخاب کے پینل سے لوڈ، اتارنا Android موبائل کو منتخب کریں . پھر ہم انتخاب والے آلے کو تبدیل کرتے ہیں، فون آرٹ بورڈ کے نام پر ایک بار کلک کریں اور آرٹ بورڈ کو حذف کریں. بس.
ایکس ڈی کے موجودہ ورژن میں، آئی فون 6 کے سوا ایک چھوٹا سا تیر موجود ہے جسے، کلک کرنے پر، ڈراپ ڈاؤن مینو کھولتا ہے. وہاں سے آپ کو لوڈ، اتارنا Android موبائل ورژن منتخب کریں اور لوڈ، اتارنا Android موبائل آرٹ بورڈ کا انتخاب انٹرفیس میں کھولتا ہے.
اس بات کا یقین کرنے کے لئے کہ ہم کارڈ کے لئے مناسب اسکرین کی جگہ کھلے ہیں، ہم عام طور پر سکیٹ 3 پر سر کرتے ہیں اور آرٹ بورڈ میں مواد ڈیزائن سانچہ سے اسٹیٹس بار، نیوی بار، اور اے پی پی بار کاپی اور پیسٹ کرتے ہیں. اسکیچ 3.2 میں مواد ڈیزائن ٹیمپلیٹ ( فائل> سانچہ> مواد ڈیزائن سے نیا ) شامل ہے اور ایک اور بہت اچھا مفت مفت کیلی لیس بیٹرٹر سے ہے جس سے آپ یہاں حاصل کرسکتے ہیں. اگر آپ کے پاس Sketch نہیں ہے تو، آپ فائل> اوپن UI کٹ> Google مواد میں پایا XD اسٹیکرز سے ان کو کاپی اور پیسٹ کرسکتے ہیں. آپ فوٹوشاپ، Illustrator، اثرات اور خاکہ کے بعد ان کے استعمال کے لئے گوگل سے بھی ڈاؤن لوڈ کر سکتے ہیں.
03 کے 06
ایڈوب XD سی سی آرٹبورڈ کو مواد ڈیزائن کارڈ شامل کرنا
XD کی سب سے زیادہ مفید خصوصیات میں سے ایک ایپل آئی iOS، گوگل مواد، اور مائیکروسافٹ ونڈوز کے لئے یو آئی کٹ شامل ہے. بہت سے احترام میں، انہوں نے "ریپڈ پروٹوٹائپ" اصطلاح میں "ریپڈ" کا لفظ شامل کیا. اس کے ساتھ ساتھ وہ ڈیزائنر کے کام کو آسان بنا دیتا ہے کہ عام UI عناصر کو ڈیزائن ایپلی کیشن جیسے فوٹوشاپ، خاکہ.
ہمیں ضرورت تھی UI عناصر ایک کارڈ تھا. اس کے لۓ ہم نے فائل> اوپن UI کٹ> Google مواد اور کٹ کا ایک نیا دستاویز کھول دیا. ہمیں ضرورت عنصر کارڈ کی قسم میں پایا گیا تھا.
ہم ان کے بارے میں کیا پیار کرتے ہیں وہ مواد ڈیزائن تفصیلات پر عمل کرتے ہیں جیسے مواد بلاکس کے نمونوں کے ساتھ ساتھ ٹیکسٹ فارمیٹنگ اور نوع ٹائپ کی نمائش میں بیان کردہ اسکریننگ کی نمائش میں شامل ہیں.
ہم چاہتے ہیں کارڈ سٹائل نیچے بائیں میں ایک تھا. ہم صرف اس سے اپنے ماؤس کے ساتھ مارا اور کلپ بورڈ میں کاپی کرتے ہیں. بدقسمتی سے، XD کھلی دستاویزات کے لئے ٹیبڈ انٹرفیس پر مشتمل نہیں ہے. ہم جو کچھ کرتے ہیں وہ کھلی دستاویز ونڈو کو تھوڑا سا نیچے منتقل کرنے کے لۓ چل رہا ہے جس کو ہم کام کر رہے ہیں، اسے منتخب کریں اور پیسٹ کریں. کھلی XD دستاویزات کے درمیان تیزی سے سوئچنگ کا ایک اور طریقہ کمانڈر پریس کرنا ہے.
04 کے 06
ایڈوب تجربہ ڈیزائن سی سی میں مواد ڈیزائن عنصر کو کیسے ترمیم کریں
جب ایکس ڈی میں کارڈ کلپ بورڈ سے آتا ہے تو اس کے ساتھ کام کرنا شروع نہ ہو. آپ کو کرنے کی پہلی چیز یہ ہے کہ کارڈ کو متحرک کریں کیونکہ آپ کو تھوڑا سا تک رسائی حاصل ہو گی اور کارڈ کا پیچھا کرنا ہوگا. ایسا کرنے کے لئے، کارڈ کا انتخاب کریں اور آبجیکٹ> گروپ کو منتخب کریں یا Shift-Command-G پریس کریں.
آپ کا کارڈ اب تین ٹکڑے ٹکڑے ٹکڑے ٹکڑے سے بنا ہے:
- تصویر کے لئے روشنی بھوری رنگ کے باکس.
- متن کے لئے درمیانے سرمئی باکس
- پس منظر پس منظر کے طور پر استعمال کیا جاتا ہے.
پہلا قدم ہلکی بھوری رنگ کے باکس کو خارج کرنا ہے. اس کا واحد مقصد یہ ہے کہ اس تصویر کے لۓ جگہ دار کے طور پر کام کریں جو آپ کو منتخب کریں، اختیاری.
متن کے ساتھ باکس اصل میں ایک سیاہ بھوری رنگ ہے جہاں 50٪ طول و عرض ہے. یہ باکس ٹیکسٹ پس منظر کے طور پر استعمال کیا جا سکتا ہے اور آپ رنگ اور باکس کی استعداد تبدیل کرسکتے ہیں.
اگرچہ یہ فوری طور پر واضح نہیں ہے، روشنی بھوری رنگ کے باکس میں مواد ڈیزائن کی نمائش مندرجہ ذیل ہے کہ اس کے اوپر کونوں کو 2 پکسلز کی طرف سے گول کیا جاتا ہے. اگر آپ کسی تصویر کو شامل کر رہے ہیں تو ذہن میں رکھو. یہ گول کونے کی ضرورت ہوگی جس میں امیجنگ ایپلی کیشنز یا ایکس ڈی میں شامل کیا جاسکتا ہے.
یہ دیکھ رہا ہے کہ یہ کارڈ کی باقی حالت کس طرح کی ضرورت ہوتی ہے. یہ بیان یہ واضح کرتا ہے کہ 2 پکسلز کے کارڈ کی آرام دہ حرکت ہے. اس کو شامل کرنے کیلئے، سیاہ پس منظر کی شکل منتخب کریں اور خصوصیات اور پینل میں Y اور B (بلور) اقدار مقرر کریں.
05 سے 06
ایڈوب XD سی سی میں مواد ڈیزائن کارڈ میں تصویر کیسے شامل کریں
کارڈ جاننے 344 پکسلز وسیع ہے اور تصویر کا علاقہ 150 پکسلز زیادہ ہے ( ہلکی بھوری رنگ کے باکس کی اونچائی اونچائی ) ہم نے فوٹوشاپشاپ میں اس تصویر کو کھول دیا جس نے اسے سائز میں پھینک دیا اور اسے فوٹوشاپ کے ایکسچینج کے طور پر فوٹوشاپ کے برآمد میں استعمال کیا. ڈبہ. تصویر ایڈوب XD میں درآمد کیا گیا تھا.
پھر ہم نے ہلکی بھوری رنگ کے خانے کو پیسٹ بورڈ پر تصویر پر منتخب کیا اور منتخب کردہ آبجیکٹ> ماسک شکل کے ساتھ . نتیجے میں تصویر کی شکل کے گول کونوں کا نتیجہ تھا. ہم نے اس تصویر کو اپنی آخری پوزیشن میں منتقل کر دیا.
تصویر کے ساتھ، ہم نے پھر درمیانی گرے باکس کے پس منظر کے رنگ کو تبدیل کر دیا، متن کو متن اور متن کے متن میں تبدیل کر دیا.
06 کے 06
ایڈوب XD سی سی گرڈ نمایاں کریں کا استعمال کرتے ہوئے
کارڈ کے ساتھ اس کو مکمل طور پر مواد ڈیزائن کی نمائش کے مطابق مناسب طریقے سے رکھا جانا چاہئے. اس کا مطلب یہ ہے کہ کارڈ کے کسی بھی طرف 8 پکسلز ہیں اور ایپ کی بار سے نیچے 8 پکسلز کی ضرورت ہوتی ہے. ایسا کرنے کے لئے، آرٹ بورڈ کے نام پر ایک بار کلک کریں اور، پراپرٹیز پینل میں گرڈ منتخب کریں. گرڈ آرٹ بورڈ پر ظاہر ہوتا ہے.
پہلے سے طے شدہ گرڈ کا سائز 8 پکسلز ہے جس میں مواد ڈیزائن کے لئے ایک ہی گرڈ سائز ہوتا ہے. اگر آپ کو مختلف سائز کی ضرورت ہے، تو گرڈ علاقے میں قیمت کو تبدیل کریں. اگر آپ گرڈ کا رنگ تبدیل کرنا چاہتے ہیں تو، رنگ چپ پر کلک کریں اور رنگا رنگ رنگ چنندہ سے رنگ منتخب کریں.
گرڈ دکھائی کے ساتھ، کارڈ پر کلک کریں اور اسے اپنی آخری پوزیشن میں منتقل کریں.
ختم کرنے کے لئے، ہم نے کارڈ کا انتخاب کیا، دوبارہ گرڈ بٹن پر کلک کیا اور کارڈ کے درمیان 8 پکسلز کے درمیان وقفہ کاری کو تبدیل کر دیا.